webapp/src/app/pages/notifications/notifications.component.ts

   1 /**
   2 * @license
   3 * Copyright (C) 2017-2018 "IoT.bzh"
   4 * Author Sebastien Douheret <sebastien@iot.bzh>
   5 *
   6 * Licensed under the Apache License, Version 2.0 (the "License");
   7 * you may not use this file except in compliance with the License.
   8 * You may obtain a copy of the License at
   9 *
  10 *   http://www.apache.org/licenses/LICENSE-2.0
  11 *
  12 * Unless required by applicable law or agreed to in writing, software
  13 * distributed under the License is distributed on an "AS IS" BASIS,
  14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15 * See the License for the specific language governing permissions and
  16 * limitations under the License.
  17 */
  18
  19 import { Component } from '@angular/core';
  20 import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';
  21 import { Observable } from 'rxjs/Observable';
  22 import { AlertService, IAlert } from '../../@core-xds/services/alert.service';
  23
  24 import 'style-loader!angular2-toaster/toaster.css';
  25
  26 @Component({
  27   selector: 'ngx-notifications',
  28   styleUrls: ['./notifications.component.scss'],
  29   template: '<toaster-container [toasterconfig]="config"></toaster-container>',
  30 })
  31 export class NotificationsComponent {
  32
  33   config: ToasterConfig;
  34
  35   private position = 'toast-top-full-width';
  36   private animationType = 'slideDown';
  37   private toastsLimit = 10;
  38   private toasterService: ToasterService;
  39   private alerts$: Observable<IAlert[]>;
  40
  41   constructor(
  42     toasterService: ToasterService,
  43     private alertSvr: AlertService,
  44   ) {
  45     this.toasterService = toasterService;
  46
  47     this.alertSvr.alerts.subscribe(alerts => {
  48       if (alerts.length === 0) {
  49         this.clearToasts();
  50       } else {
  51         alerts.forEach(al => {
  52           const title = al.type.toUpperCase();
  53           this.showToast(al.type, title, al.msg, al.dismissTimeout);
  54         });
  55       }
  56     });
  57   }
  58
  59   private showToast(type: string, title: string, body: string, tmo: number) {
  60     this.config = new ToasterConfig({
  61       positionClass: this.position,
  62       timeout: tmo,
  63       newestOnTop: true,
  64       tapToDismiss: true, // is Hide OnClick
  65       preventDuplicates: false,
  66       animation: this.animationType,
  67       limit: this.toastsLimit,
  68     });
  69     const toast: Toast = {
  70       type: type,
  71       title: title,
  72       body: body,
  73       timeout: tmo,
  74       showCloseButton: true,
  75       bodyOutputType: BodyOutputType.TrustedHtml,
  76     };
  77     this.toasterService.popAsync(toast);
  78   }
  79
  80   clearToasts() {
  81     this.toasterService.clear();
  82   }
  83 }