New dashboard look & feel

[src/xds/xds-agent.git] / webapp / src / app / pages / notifications / notifications.component.ts

diff --git a/webapp/src/app/pages/notifications/notifications.component.ts b/webapp/src/app/pages/notifications/notifications.component.ts
new file mode 100644 (file)
index 0000000..accd150
--- /dev/null
+++ b/webapp/src/app/pages/notifications/notifications.component.ts
@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';
+import { Observable } from 'rxjs/Observable';
+import { AlertService, IAlert } from '../../@core-xds/services/alert.service';
+
+import 'style-loader!angular2-toaster/toaster.css';
+
+@Component({
+  selector: 'ngx-notifications',
+  styleUrls: ['./notifications.component.scss'],
+  template: '<toaster-container [toasterconfig]="config"></toaster-container>',
+})
+export class NotificationsComponent {
+
+  config: ToasterConfig;
+
+  private position = 'toast-top-full-width';
+  private animationType = 'slideDown';
+  private toastsLimit = 10;
+  private toasterService: ToasterService;
+  private alerts$: Observable<IAlert[]>;
+
+  constructor(
+    toasterService: ToasterService,
+    private alertSvr: AlertService,
+  ) {
+    this.toasterService = toasterService;
+
+    this.alertSvr.alerts.subscribe(alerts => {
+      if (alerts.length === 0) {
+        this.clearToasts();
+      } else {
+        alerts.forEach(al => {
+          const title = al.type.toUpperCase();
+          this.showToast(al.type, title, al.msg, al.dismissTimeout);
+        });
+      }
+    });
+  }
+
+  private showToast(type: string, title: string, body: string, tmo: number) {
+    this.config = new ToasterConfig({
+      positionClass: this.position,
+      timeout: tmo,
+      newestOnTop: true,
+      tapToDismiss: true, // is Hide OnClick
+      preventDuplicates: false,
+      animation: this.animationType,
+      limit: this.toastsLimit,
+    });
+    const toast: Toast = {
+      type: type,
+      title: title,
+      body: body,
+      timeout: tmo,
+      showCloseButton: true,
+      bodyOutputType: BodyOutputType.TrustedHtml,
+    };
+    this.toasterService.popAsync(toast);
+  }
+
+  clearToasts() {
+    this.toasterService.clear();
+  }
+}