UI: Add notification template

ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html

@@ -25,10 +25,11 @@
 </section>
 <mat-divider></mat-divider>
 <div *ngIf="(notifications$ | async).length; else emptyNotification">
-  <section style="min-height: 100px; overflow: auto">
+  <section style="min-height: 100px; overflow: auto; padding: 10px 0;">
    <div *ngFor="let notification of (notifications$ | async); let last = last">
      <tb-notification [notification]="notification"
                       [onClose]="onClose"
+                      [preview]="true"
                       (markAsRead)="markAsRead($event)">
      </tb-notification>
      <mat-divider *ngIf="!last" style="margin-bottom: 4px"></mat-divider>

ui-ngx/src/app/shared/components/notification/notification.component.html

@@ -15,10 +15,18 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" fxLayoutAlign="space-between start">
+<section fxLayout="row" fxLayoutAlign="space-between start" class="notification"
-  <mat-icon class="icon" *ngIf="showIcon" [ngStyle]="{color: notification.additionalConfig.icon.color}">
+         [ngStyle]="{borderColor: notificationColor()}">
-    {{ notification.additionalConfig.icon.icon }}
+  <div *ngIf="showIcon; else defaultIcon">
-  </mat-icon>
+    <mat-icon class="icon" [ngStyle]="{color: notification.additionalConfig.icon.color}">
+      {{ notification.additionalConfig.icon.icon }}
+    </mat-icon>
+  </div>
+  <ng-template #defaultIcon>
+    <mat-icon class="icon" [fxShow]="notificationTypeIcons.get(notification.type)" [ngStyle]="{color: notificationColor()}">
+      {{ notificationTypeIcons.get(notification.type) }}
+    </mat-icon>
+  </ng-template>
   <div class="content" fxFlex>
     <div class="title">{{ notification.subject }}</div>
     <div class="message">{{ notification.text }}</div>
@@ -33,5 +41,12 @@
       <mat-icon>check_circle_outline</mat-icon>
     </button>
     <span class="time" *ngIf="preview">{{ notification.createdTime | dateAgo }}</span>
+    <div class="alarm-severity-border" *ngIf="notification.type === notificationType.ALARM"
+         [ngStyle]="{backgroundColor: alarmColorSeverity(0.08)}">
+      <span class="alarm-severity-text"
+            [ngStyle]="{color: alarmColorSeverity(0.78)}">
+        {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
+      </span>
+    </div>
   </div>
 </section>

ui-ngx/src/app/shared/components/notification/notification.component.scss

@@ -14,8 +14,18 @@
  * limitations under the License.
  */
 :host {
-  padding: 10px;
+
-  display: block;
+  .notification {
+    padding: 10px;
+    display: block;
+    border: 1px solid;
+    border-radius: 8px;
+  }
+
+  .alarm-severity-border {
+    padding: 5px;
+    border-radius: 8px;
+  }
 
   .icon {
     margin-right: 14px;
@@ -52,7 +62,7 @@
     .time {
       font-size: 12px;
       letter-spacing: 0.25px;
-      margin-right: 2px;
+      margin: 2px 2px 5px;
     }
   }
 }

ui-ngx/src/app/shared/components/notification/notification.component.ts

@@ -15,10 +15,17 @@
 ///
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Notification } from '@shared/models/notification.models';
+import {
+  Notification,
+  NotificationType,
+  NotificationTypeColors,
+  NotificationTypeIcons
+} from '@shared/models/notification.models';
 import { UtilsService } from '@core/services/utils.service';
 import { Router } from '@angular/router';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { AlarmSeverity, alarmSeverityColors, alarmSeverityTranslations } from '@shared/models/alarm.models';
+import * as tinycolor_ from 'tinycolor2';
 
 @Component({
   selector: 'tb-notification',
@@ -49,6 +56,15 @@ export class NotificationComponent implements OnInit {
   showButton = false;
   buttonLabel = '';
 
+  tinycolor = tinycolor_;
+
+  notificationType = NotificationType;
+  notificationTypeColors = NotificationTypeColors;
+  notificationTypeIcons = NotificationTypeIcons;
+  alarmSeverity = AlarmSeverity;
+  alarmSeverityColors = alarmSeverityColors;
+  alarmSeverityTranslations = alarmSeverityTranslations;
+
   constructor(
     private utils: UtilsService,
     private router: Router
@@ -85,4 +101,16 @@ export class NotificationComponent implements OnInit {
       }
     }
   }
+
+  alarmColorSeverity(alpha: number) {
+    return this.tinycolor(this.alarmSeverityColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString();
+  }
+
+  notificationColor() {
+    if (this.notification.type === this.notificationType.ALARM) {
+      return this.alarmSeverityColors.get(this.notification.info.alarmSeverity);
+    } else {
+      return this.notificationTypeColors.get(this.notification.type);
+    }
+  }
 }

ui-ngx/src/app/shared/models/notification.models.ts

@@ -42,6 +42,9 @@ export interface Notification {
 export interface NotificationInfo {
   description: string;
   type: string;
+  alarmSeverity?: AlarmSeverity;
+  alarmStatus?: AlarmStatus;
+  alarmType?: string;
 }
 
 export interface NotificationRequest extends Omit<BaseData<NotificationRequestId>, 'label'> {
@@ -281,6 +284,21 @@ export enum NotificationType {
   ALARM_COMMENT = 'ALARM_COMMENT'
 }
 
+export const NotificationTypeColors = new Map<NotificationType, string>([
+  [NotificationType.GENERAL, 'transparent'],
+  [NotificationType.ALARM, '#D12730'],
+  [NotificationType.DEVICE_INACTIVITY, '#305680'],
+  [NotificationType.ENTITY_ACTION, '#305680'],
+  [NotificationType.ALARM_COMMENT, '#D12730']
+]);
+
+export const NotificationTypeIcons = new Map<NotificationType, string | null>([
+  [NotificationType.ALARM, 'warning'],
+  [NotificationType.DEVICE_INACTIVITY, 'phonelink_off'],
+  [NotificationType.ENTITY_ACTION, 'devices'],
+  [NotificationType.ALARM_COMMENT, 'warning']
+]);
+
 interface NotificationTemplateTypeTranslate {
   name: string;
   hint?: string;