New dashboard look & feel

Dashboard is a fork of ngx-admin release v2.0.1 (sha be7649a9a2da835)

Signed-off-by: Sebastien Douheret <sebastien.douheret@iot.bzh>

2 files changed, 93 insertions, 0 deletions

diff --git a/webapp/src/app/pages/notifications/notifications.component.scss b/webapp/src/app/pages/notifications/notifications.component.scss
new file mode 100644
index 0000000..ce85e8e
--- /dev/null
+++ b/webapp/src/app/pages/notifications/notifications.component.scss
@@ -0,0 +1,28 @@
+@import '../../@theme/styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+
+@include nb-install-component() {
+
+  nb-card-footer {
+    padding-bottom: 0.25rem;
+
+    button {
+      margin: 0 1rem 1rem 0;
+    }
+  }
+
+  /* stylelint-disable */
+  toaster-container /deep/ {
+     #toast-container .toast-close-button {
+      right: 0;
+    }
+  }
+  /* stylelint-enable */
+
+  @include media-breakpoint-down(xs) {
+    .dropdown-toggle {
+      font-size: 0.75rem;
+    }
+  }
+}
diff --git a/webapp/src/app/pages/notifications/notifications.component.ts b/webapp/src/app/pages/notifications/notifications.component.ts
new file mode 100644
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();
+  }
+}