From cc832762bbe596ba7f790fc2ce0ebc84498ff393 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 6 Feb 2023 13:31:00 +0200 Subject: [PATCH] UI: Add notification template --- .../show-notification-popover.component.html | 3 +- .../notification/notification.component.html | 23 +++++++++++--- .../notification/notification.component.scss | 16 ++++++++-- .../notification/notification.component.ts | 30 ++++++++++++++++++- .../app/shared/models/notification.models.ts | 18 +++++++++++ 5 files changed, 81 insertions(+), 9 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html index 80a51bc9b7..a82c425f6a 100644 --- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html +++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html @@ -25,10 +25,11 @@
-
+
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.html b/ui-ngx/src/app/shared/components/notification/notification.component.html index a3274ce597..67f153ff05 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.html +++ b/ui-ngx/src/app/shared/components/notification/notification.component.html @@ -15,10 +15,18 @@ limitations under the License. --> -
- - {{ notification.additionalConfig.icon.icon }} - +
+
+ + {{ notification.additionalConfig.icon.icon }} + +
+ + + {{ notificationTypeIcons.get(notification.type) }} + +
{{ notification.subject }}
{{ notification.text }}
@@ -33,5 +41,12 @@ check_circle_outline {{ notification.createdTime | dateAgo }} +
+ + {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}} + +
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.scss b/ui-ngx/src/app/shared/components/notification/notification.component.scss index 4ce043d6c7..367a768eb9 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.scss +++ b/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; } } } diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.ts b/ui-ngx/src/app/shared/components/notification/notification.component.ts index 442524755c..ab2f03edc1 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.ts +++ b/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); + } + } } diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts index 17e99b863a..86d1115584 100644 --- a/ui-ngx/src/app/shared/models/notification.models.ts +++ b/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, 'label'> { @@ -281,6 +284,21 @@ export enum NotificationType { ALARM_COMMENT = 'ALARM_COMMENT' } +export const NotificationTypeColors = new Map([ + [NotificationType.GENERAL, 'transparent'], + [NotificationType.ALARM, '#D12730'], + [NotificationType.DEVICE_INACTIVITY, '#305680'], + [NotificationType.ENTITY_ACTION, '#305680'], + [NotificationType.ALARM_COMMENT, '#D12730'] +]); + +export const NotificationTypeIcons = new Map([ + [NotificationType.ALARM, 'warning'], + [NotificationType.DEVICE_INACTIVITY, 'phonelink_off'], + [NotificationType.ENTITY_ACTION, 'devices'], + [NotificationType.ALARM_COMMENT, 'warning'] +]); + interface NotificationTemplateTypeTranslate { name: string; hint?: string;