From 07efbf1d303d21a1d62d2f736cb28ddaa81f47bc Mon Sep 17 00:00:00 2001 From: jh245g Date: Wed, 3 Jul 2019 15:48:56 -0400 Subject: [PATCH] Revise the notification service Use ngx-toastr (drop matSnackBar) to gain support for displaying multiple notifications at once. Change-Id: I57fe084a6d0380eebd14a30d58404afb45e168f4 Signed-off-by: Jun (Nicolas) Hu Signed-off-by: Lott, Christopher (cl778h) --- docs/release-notes.rst | 1 + webapp-frontend/angular.json | 19 +++++++------ webapp-frontend/package-lock.json | 20 +++++++++---- webapp-frontend/package.json | 3 +- webapp-frontend/src/app/rd.module.ts | 2 ++ .../src/app/services/ui/notification.service.ts | 33 ++++++++++------------ webapp-frontend/src/styles.scss | 22 +-------------- 7 files changed, 45 insertions(+), 55 deletions(-) diff --git a/docs/release-notes.rst b/docs/release-notes.rst index 691098a6..0e613233 100644 --- a/docs/release-notes.rst +++ b/docs/release-notes.rst @@ -28,6 +28,7 @@ Version 1.0.5, 2 July 2019 * Update E2 manager client to spec version 20190630 * Add configuration-driven mock of E2 getNodebIdList * Revise front-end components to use prefix 'rd' +* Revise the notification service to display multiple notifications Version 1.0.4, 27 June 2019 --------------------------- diff --git a/webapp-frontend/angular.json b/webapp-frontend/angular.json index 772f7506..77bd4a82 100644 --- a/webapp-frontend/angular.json +++ b/webapp-frontend/angular.json @@ -10,7 +10,7 @@ "prefix": "rd", "schematics": { "@schematics/angular:component": { - "styleext": "scss" + "styleext": "scss" } }, "architect": { @@ -27,14 +27,15 @@ "src/assets" ], "styles": [ - "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", - "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", - "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", - "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", - "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss", - "node_modules/angular-bootstrap-md/scss/mdb-free.scss", - "node_modules/material-design-icons/iconfont/material-icons.css", - "src/styles.scss" + "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", + "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", + "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", + "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", + "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss", + "node_modules/angular-bootstrap-md/scss/mdb-free.scss", + "node_modules/material-design-icons/iconfont/material-icons.css", + "src/styles.scss", + "node_modules/ngx-toastr/toastr.css" ], "scripts": [ "node_modules/chart.js/dist/Chart.js", diff --git a/webapp-frontend/package-lock.json b/webapp-frontend/package-lock.json index 41a73c8f..6165c8ce 100644 --- a/webapp-frontend/package-lock.json +++ b/webapp-frontend/package-lock.json @@ -228,9 +228,9 @@ } }, "@angular/animations": { - "version": "8.0.3", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.0.3.tgz", - "integrity": "sha512-9zciJ4YRR0bodFSYgsgXdYMz8wKKyVjch7XZADGkWubXT8mGuwlpdPMlQ6n9Cwj8Ebu0u52WxMeQsX76K9RlYA==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.1.0.tgz", + "integrity": "sha512-v1paXrWQGsD+E4QBpwNUZ8dPj8hEn0b2kDVzYX6l/e9flUX6W2BWYx+BRuC4QBnNtTV9jiGsHT8FmQq/WztgWw==", "requires": { "tslib": "^1.9.0" } @@ -6346,9 +6346,9 @@ "dev": true }, "js-yaml": { - "version": "3.12.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.1.tgz", - "integrity": "sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==", + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", + "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", "dev": true, "requires": { "argparse": "^1.0.7", @@ -7371,6 +7371,14 @@ "resolved": "https://registry.npmjs.org/ng2-completer/-/ng2-completer-2.0.8.tgz", "integrity": "sha512-WzxJ4u3vAHsfBUaFCloEBoirPZrnDabtWEKyDok7dtjhS1ZvcbwQ4asdXuDO0hZ0T1QC66U/PwLhKfkG501hVg==" }, + "ngx-toastr": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-10.0.4.tgz", + "integrity": "sha512-iN+zr2Msae5wV334c1dytRhSYNdUz467jwv1NE91lMmllsMkpUzZlu8VdFCeTFt+/R4TWzz19xBRqhpp+OAuVA==", + "requires": { + "tslib": "^1.9.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/webapp-frontend/package.json b/webapp-frontend/package.json index f961df2b..ede4c64f 100644 --- a/webapp-frontend/package.json +++ b/webapp-frontend/package.json @@ -11,7 +11,7 @@ }, "private": true, "dependencies": { - "@angular/animations": "^8.0.3", + "@angular/animations": "^8.1.0", "@angular/cdk": "^7.3.7", "@angular/common": "^8.0.3", "@angular/compiler": "^8.0.3", @@ -32,6 +32,7 @@ "material-design-icons": "^3.0.1", "ng2-charts": "^1.6.0", "ng2-completer": "^2.0.8", + "ngx-toastr": "^10.0.4", "rxjs": "6.5.2", "rxjs-compat": "6.3.3", "tslib": "^1.10.0", diff --git a/webapp-frontend/src/app/rd.module.ts b/webapp-frontend/src/app/rd.module.ts index f45072c5..0e4595c5 100644 --- a/webapp-frontend/src/app/rd.module.ts +++ b/webapp-frontend/src/app/rd.module.ts @@ -63,6 +63,7 @@ import { StatCardComponent } from './ui/stat-card/stat-card.component'; import { StatsComponent } from './stats/stats.component'; import { UiService } from './services/ui/ui.service'; import { UserComponent } from './admin/user.component'; +import { ToastrModule } from 'ngx-toastr'; @NgModule({ declarations: [ @@ -122,6 +123,7 @@ import { UserComponent } from './admin/user.component'; MDBBootstrapModule.forRoot(), RdRoutingModule, ReactiveFormsModule, + ToastrModule.forRoot() ], exports: [ FormsModule, diff --git a/webapp-frontend/src/app/services/ui/notification.service.ts b/webapp-frontend/src/app/services/ui/notification.service.ts index 64771254..df4f03ef 100644 --- a/webapp-frontend/src/app/services/ui/notification.service.ts +++ b/webapp-frontend/src/app/services/ui/notification.service.ts @@ -19,43 +19,40 @@ */ import { Injectable } from '@angular/core'; -import { MatSnackBar, MatSnackBarConfig } from '@angular/material'; +import { ToastrService } from 'ngx-toastr'; @Injectable({ providedIn: 'root' }) export class NotificationService { - constructor(public snackBar: MatSnackBar) { } + constructor(public toastr: ToastrService) { } - successConfig: MatSnackBarConfig = { - duration: 10000, - horizontalPosition: 'right', - verticalPosition: 'top' + successConfig = { + timeOut: 10000, + closeButton: true }; - warningConfig: MatSnackBarConfig = { - horizontalPosition: 'right', - verticalPosition: 'top' + warningConfig = { + disableTimeOut: true, + closeButton: true }; - errorConfig: MatSnackBarConfig = { - horizontalPosition: 'right', - verticalPosition: 'top' + errorConfig = { + disableTimeOut: true, + closeButton: true }; success(msg: string) { - this.successConfig['panelClass'] = ['notification', 'success', 'default']; - this.snackBar.open(msg, '', this.successConfig); + this.toastr.success(msg, '', this.successConfig); } warn(msg: string) { - this.warningConfig['panelClass'] = ['notification', 'warn', 'default']; - this.snackBar.open(msg, 'Dismiss', this.warningConfig); + this.toastr.warning(msg, '', this.warningConfig); } error(msg: string) { - this.errorConfig['panelClass'] = ['notification', 'error', 'default']; - this.snackBar.open(msg, 'Dismiss', this.errorConfig); + this.toastr.error(msg, '', this.errorConfig); } + } diff --git a/webapp-frontend/src/styles.scss b/webapp-frontend/src/styles.scss index aceca45e..7f1a0b8e 100644 --- a/webapp-frontend/src/styles.scss +++ b/webapp-frontend/src/styles.scss @@ -2,6 +2,7 @@ @import '~bootstrap/dist/css/bootstrap.min.css'; @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; + /* for sidenav to take a whole page */ html, body { margin: 0; @@ -15,24 +16,3 @@ html, body { text-align: center; font-size: 20px; } - -snack-bar-container.success.default { - background-color: #5cb85c; - color: #fff; -} - -snack-bar-container.warn.default { - background-color: #f99157; - color: #fff; -} - -snack-bar-container.error.default { - background-color: #fc7169; - color: #fff; -} - - -snack-bar-container.notification simple-snack-bar { - font-size: 18px !important; - font-weight: bold; -} \ No newline at end of file -- 2.16.6