@mxtommy/kip 1.2.3 → 1.3.0

package/src/app/alarm-menu/alarm-menu.component.html

@@ -1,55 +1,55 @@
-<button [matMenuTriggerFor]="alarmMenu" color="accent" mat-flat-button class="menuBarAlarmsButton"
-        [class.alarmCrit]="blinkCrit"
-        [class.alarmWarning]="blinkWarn"
-        [disabled]="alarmCount == 0 || notificationConfig.disableNotifications">
-  <span *ngIf="!notificationConfig.disableNotifications" [matBadgeHidden]="!unAckAlarms"
-        [matBadge]="unAckAlarms"
-        matBadgeSize="medium"
-        matBadgePosition="after"
-        matBadgeOverlap="false"
-        matBadgeColor="warn"
-        class="fa fa-envelope fa-2x matBadge">
-  </span>
-  <span *ngIf="notificationConfig.disableNotifications" class="fa-stack fa-lg">
-    <i class="fa fa-bell fa-1x" aria-hidden="true"></i>
-    <i class="fa fa-ban fa-stack-2x text-danger" aria-hidden="true"></i>
-  </span>
-</button>
-<mat-menu #alarmMenu="matMenu" focusFirstItem>
-  <div *ngFor="let alarm of alarms | keyvalue; index as i; trackBy:trackAlarmPath">
-    <button mat-menu-item [matMenuTriggerFor]="actions" [matTooltip]="alarm.value.notification.message">
-      <span *ngIf="alarm.value.isAck" class="fa fa-lg fa-check"></span>
-      <span *ngIf="!alarm.value.isAck" class="fa fa-lg fa-exclamation"></span>
-      {{ alarm.value.notification.message.replace("self.", "") }}
-    </button>
-    <mat-menu #actions="matMenu">
-      <button
-        mat-menu-item
-        (click)="ackAlarm(alarm.key)"
-
-        matTooltip="Silence Alarm (until state change)"
-        >
-        Acknowledge
-      </button>
-      <button
-        mat-menu-item
-        (click)="ackAlarm(alarm.key, 300000)"
-
-        matTooltip="Silence Alarm for 5 minutes(state change can re-trigger)"
-        >
-        Acknowledge (5 Min)
-      </button>
-    </mat-menu>
-  </div>
-  <mat-action-list>
-    <mat-divider></mat-divider>
-    <button mat-list-item class="muteSoundButton" matTooltip="Mute notification sounds" (click)="mutePlayer(isMuted ? false : true)">
-      <span *ngIf="!isMuted">
-        <i class="fa fa-bell" aria-hidden="true"></i> Mute Alarm Audio
-      </span>
-      <span *ngIf="isMuted">
-        <i class="fa fa-bell-slash" aria-hidden="true"></i> Unmute Alarm Audio
-      </span>
-    </button>
-  </mat-action-list>
-</mat-menu>
+<button [matMenuTriggerFor]="alarmMenu" color="accent" mat-flat-button class="menuBarAlarmsButton"
+        [class.alarmCrit]="blinkCrit"
+        [class.alarmWarning]="blinkWarn"
+        [disabled]="alarmCount == 0 || notificationConfig.disableNotifications">
+  <span *ngIf="!notificationConfig.disableNotifications" [matBadgeHidden]="!unAckAlarms"
+        [matBadge]="unAckAlarms"
+        matBadgeSize="medium"
+        matBadgePosition="after"
+        matBadgeOverlap="false"
+        matBadgeColor="warn"
+        class="fa-solid fa-envelope fa-2x matBadge">
+  </span>
+  <span *ngIf="notificationConfig.disableNotifications" class="fa-stack fa-lg">
+    <i class="fa-solid fa-bell fa-1x" aria-hidden="true"></i>
+    <i class="fa-solid fa-ban fa-stack-2x text-danger" aria-hidden="true"></i>
+  </span>
+</button>
+<mat-menu #alarmMenu="matMenu" focusFirstItem>
+  <div *ngFor="let alarm of alarms | keyvalue; index as i; trackBy:trackAlarmPath">
+    <button mat-menu-item [matMenuTriggerFor]="actions" [matTooltip]="alarm.value.notification.message">
+      <span *ngIf="alarm.value.isAck" class="fa-solid fa-lg fa-check"></span>
+      <span *ngIf="!alarm.value.isAck" class="fa-solid fa-lg fa-exclamation"></span>
+      {{ alarm.value.notification.message.replace("self.", "") }}
+    </button>
+    <mat-menu #actions="matMenu">
+      <button
+        mat-menu-item
+        (click)="ackAlarm(alarm.key)"
+
+        matTooltip="Silence Alarm (until state change)"
+        >
+        Acknowledge
+      </button>
+      <button
+        mat-menu-item
+        (click)="ackAlarm(alarm.key, 300000)"
+
+        matTooltip="Silence Alarm for 5 minutes(state change can re-trigger)"
+        >
+        Acknowledge (5 Min)
+      </button>
+    </mat-menu>
+  </div>
+  <mat-action-list>
+    <mat-divider></mat-divider>
+    <button mat-list-item class="muteSoundButton" matTooltip="Mute notification sounds" (click)="mutePlayer(isMuted ? false : true)">
+      <span *ngIf="!isMuted">
+        <i class="fa-solid fa-bell" aria-hidden="true"></i> Mute Alarm Audio
+      </span>
+      <span *ngIf="isMuted">
+        <i class="fa-solid fa-bell-slash" aria-hidden="true"></i> Unmute Alarm Audio
+      </span>
+    </button>
+  </mat-action-list>
+</mat-menu>

package/src/app/alarm-menu/alarm-menu.component.scss

@@ -1,53 +1,52 @@
-@import '~@angular/material/theming';
-
-
-@mixin alarm-menu-theme($theme) {
-
-  $primary: map-get($theme, primary);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  .matBadge {
-    z-index: 1000;
-  }
-
-  // Alarm button when warning
-  .alarmWarning {
-    animation:blinkingAlarmWarning 1.5s infinite;
-    background-color: #FFA500 !important
-  }
-  @keyframes blinkingAlarmWarning{
-    0%{		color: rgb(179, 0, 0);	}
-    50%{	color: transparent;	}
-    100%{	color: rgb(179, 0, 0);	}
-  }
-  // Alarm button when crit
-  .alarmCrit {
-    animation:blinkingAlarmCrit 0.25s infinite;
-
-  }
-  @keyframes blinkingAlarmCrit{
-    0%{
-      color: rgb(255, 232, 232);
-      background-color: rgb(179, 0, 0);
-    }
-    50%{
-
-      color: rgb(179, 0, 0);
-      background-color: rgb(255, 232, 232);
-    }
-    100%{
-      color: rgb(255, 232, 232);
-      background-color: rgb(179, 0, 0);
-    }
-  }
-  .muteSoundButton:hover {
-    background: rgba(255, 255, 255, 0.04); // mat-list hover bug fixed in recent versions.
-  }
-
-}
-
-::ng-deep.mat-menu-panel {
-  max-width:fit-content !important;
-}
+@use '~@angular/material' as mat;
+
+@mixin alarm-menu-theme($theme) {
+
+  $primary: map-get($theme, primary);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .matBadge {
+    z-index: 1000;
+  }
+
+  // Alarm button when warning
+  .alarmWarning {
+    animation:blinkingAlarmWarning 1.5s infinite;
+    background-color: #FFA500 !important
+  }
+  @keyframes blinkingAlarmWarning{
+    0%{		color: rgb(179, 0, 0);	}
+    50%{	color: transparent;	}
+    100%{	color: rgb(179, 0, 0);	}
+  }
+  // Alarm button when crit
+  .alarmCrit {
+    animation:blinkingAlarmCrit 0.25s infinite;
+
+  }
+  @keyframes blinkingAlarmCrit{
+    0%{
+      color: rgb(255, 232, 232);
+      background-color: rgb(179, 0, 0);
+    }
+    50%{
+
+      color: rgb(179, 0, 0);
+      background-color: rgb(255, 232, 232);
+    }
+    100%{
+      color: rgb(255, 232, 232);
+      background-color: rgb(179, 0, 0);
+    }
+  }
+  .muteSoundButton:hover {
+    background: rgba(255, 255, 255, 0.04); // mat-list hover bug fixed in recent versions.
+  }
+
+}
+
+::ng-deep.mat-menu-panel {
+  max-width:fit-content !important;
+}

package/src/app/alarm-menu/alarm-menu.component.spec.ts

@@ -1,25 +1,25 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { AlarmMenuComponent } from './alarm-menu.component';
-
-describe('AlarmMenuComponent', () => {
-  let component: AlarmMenuComponent;
-  let fixture: ComponentFixture<AlarmMenuComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AlarmMenuComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AlarmMenuComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AlarmMenuComponent } from './alarm-menu.component';
+
+describe('AlarmMenuComponent', () => {
+  let component: AlarmMenuComponent;
+  let fixture: ComponentFixture<AlarmMenuComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlarmMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlarmMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/alarm-menu/alarm-menu.component.ts

@@ -1,186 +1,186 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { NotificationsService, Alarm, IAlarmInfo } from '../notifications.service';
-import { AppSettingsService, INotificationConfig } from '../app-settings.service';
-import { Subscription } from 'rxjs';
-
-
-
-interface IMenuNode {
-  [key: string]: any;
-  label: string;
-  childNode?: [IMenuItem | IMenuNode];
-}
-interface IMenuItem {
-  [key: string]: any;
-  label: string;
-  Alarm?: Alarm;
-}
-
-
-@Component({
-  selector: 'app-alarm-menu',
-  templateUrl: './alarm-menu.component.html',
-  styleUrls: ['./alarm-menu.component.scss']
-})
-export class AlarmMenuComponent implements OnInit, OnDestroy {
-
-  private alarmSub: Subscription;
-  private notificationServiceSettings: Subscription;
-
-  alarms: { [path: string]: Alarm };
-  notificationAlarms: { [path: string]: Alarm };
-  alarmMenu: { [key: string]: string | IMenuItem | IMenuItem } = {}; // local menu array with string key
-
-  // Menu properties
-  alarmCount: number = 0;
-  unAckAlarms: number = 0;
-  blinkWarn: boolean = false;
-  blinkCrit: boolean = false;
-
-  isMuted: boolean = false;
-
-  notificationConfig: INotificationConfig;
-
-  constructor(
-    private notificationsService: NotificationsService,
-    private appSettingsService: AppSettingsService,
-  ) {
-    this.notificationServiceSettings = appSettingsService.getNotificationConfigService().subscribe(config => {
-      this.notificationConfig = config;
-    });
-  }
-
-  ngOnInit() {
-    // init Alarm stream
-    this.alarmSub = this.notificationsService.getAlarms().subscribe(
-      message => {
-        this.notificationAlarms = message;
-        // Disabling notifications is done at the service level. No need to handle it here
-        this.buildAlarmMenu();
-      }
-    );
-
-    // init alarm info
-    this.notificationsService.getAlarmInfoAsO().subscribe(info => {
-      this.unAckAlarms = info.unackCount;
-      this.isMuted = info.isMuted;
-      this.alarmCount = info.alarmCount;
-      switch(info.visualSev) {
-        case 0:
-          this.blinkWarn = false;
-          this.blinkCrit = false;
-          break;
-        case 1:
-          this.blinkWarn = true;
-          this.blinkCrit = false;
-          break;
-        case 2:
-          this.blinkCrit = true;
-          this.blinkWarn = false;
-      }
-    });
-  }
-
-  mutePlayer(state) {
-    this.notificationsService.mutePlayer(state);
-  }
-
-  // we use this as a staging area to limit menu update events we build the menu from Alarms record
-  buildAlarmMenu() {
-    // clean notificationAlarms based on App Notification settings
-    if (!this.notificationConfig.devices.showNormalState) {
-      for (const [path, thealarm] of Object.entries(this.notificationAlarms)) {
-        let alarm = this.notificationAlarms[path];
-
-        if (alarm.notification['state'] == 'normal' && alarm['type'] == 'device') {
-          delete this.notificationAlarms[path];
-          break;
-        }
-      }
-    }
-    this.alarms = this.notificationAlarms;
-  }
-
-  createMenuRootItem(itemLabel: string): IMenuNode | null {
-    let item: IMenuNode = {
-      label: itemLabel
-    }
-
-    if(Object.entries(this.alarmMenu).length) {
-      let i = Object.keys(this.alarmMenu).indexOf(itemLabel);
-      if(i == -1) {
-        console.log("Root: " + itemLabel + " not found. Search index: " + i);
-        return item;
-      } else {
-        console.log("Root: " + itemLabel + " found. Search index: " + i);
-        console.log(JSON.stringify(Object.values(this.alarmMenu)));
-        return null;
-      }
-    }
-    console.log(JSON.stringify(Object.values(this.alarmMenu)));
-    return item;
-  }
-
-  createMenuChildItem(itemLabel: string, pathPositionIndex: number, pathArray: string[], alarm: Alarm): IMenuItem | IMenuNode {
-    let item;
-
-    const lastPosition = pathArray.length - 1;
-    let parentLabel = pathArray[pathPositionIndex - 1];
-    let indexParentNode = Object.keys(this.alarmMenu).indexOf(pathArray[parentLabel]);
-
-    if (pathPositionIndex != lastPosition) {
-      item = {
-        label: pathArray[pathPositionIndex],
-      }
-    } else {
-      item = {
-        label: pathArray[pathPositionIndex],
-        Alarm: alarm,
-      }
-    }
-
-    for (const [label, menuNode] of Object.entries(this.alarmMenu)) {
-        if (label == parentLabel) {
-          console.log(JSON.stringify(menuNode));
-          menuNode['childNode'] = item;
-
-          if (pathPositionIndex != lastPosition) {
-            pathPositionIndex++;
-            if (pathPositionIndex != (lastPosition)) {
-              item = {
-                label: pathArray[pathPositionIndex]
-              }
-            } else {
-              item = {
-                label: pathArray[pathPositionIndex],
-                Alarm: alarm,
-              }
-            }
-            menuNode['childNode'][0].childNode = item;
-          }
-        }
-      }
-
-    return null;
-  }
-
-
-  ackAlarm(path: string, timeout: number = 0) {
-    this.notificationsService.acknowledgeAlarm(path, timeout);
-  }
-
-
-  /**
-   * Used by ngFor to tracks alarm items by key for menu optimization
-   * @param alarm object in question
-   */
-  trackAlarmPath(index, alarm) {
-    return alarm ? alarm.value.path : undefined;
-  }
-
-  ngOnDestroy() {
-    this.notificationServiceSettings.unsubscribe();
-    this.alarmSub.unsubscribe();
-  }
-
-}
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { NotificationsService, Alarm, IAlarmInfo } from '../notifications.service';
+import { AppSettingsService, INotificationConfig } from '../app-settings.service';
+import { Subscription } from 'rxjs';
+
+
+
+interface IMenuNode {
+  [key: string]: any;
+  label: string;
+  childNode?: [IMenuItem | IMenuNode];
+}
+interface IMenuItem {
+  [key: string]: any;
+  label: string;
+  Alarm?: Alarm;
+}
+
+
+@Component({
+  selector: 'app-alarm-menu',
+  templateUrl: './alarm-menu.component.html',
+  styleUrls: ['./alarm-menu.component.scss']
+})
+export class AlarmMenuComponent implements OnInit, OnDestroy {
+
+  private alarmSub: Subscription;
+  private notificationServiceSettings: Subscription;
+
+  alarms: { [path: string]: Alarm };
+  notificationAlarms: { [path: string]: Alarm };
+  alarmMenu: { [key: string]: string | IMenuItem | IMenuItem } = {}; // local menu array with string key
+
+  // Menu properties
+  alarmCount: number = 0;
+  unAckAlarms: number = 0;
+  blinkWarn: boolean = false;
+  blinkCrit: boolean = false;
+
+  isMuted: boolean = false;
+
+  notificationConfig: INotificationConfig;
+
+  constructor(
+    private notificationsService: NotificationsService,
+    private appSettingsService: AppSettingsService,
+  ) {
+    this.notificationServiceSettings = appSettingsService.getNotificationConfigService().subscribe(config => {
+      this.notificationConfig = config;
+    });
+  }
+
+  ngOnInit() {
+    // init Alarm stream
+    this.alarmSub = this.notificationsService.getAlarms().subscribe(
+      message => {
+        this.notificationAlarms = message;
+        // Disabling notifications is done at the service level. No need to handle it here
+        this.buildAlarmMenu();
+      }
+    );
+
+    // init alarm info
+    this.notificationsService.getAlarmInfoAsO().subscribe(info => {
+      this.unAckAlarms = info.unackCount;
+      this.isMuted = info.isMuted;
+      this.alarmCount = info.alarmCount;
+      switch(info.visualSev) {
+        case 0:
+          this.blinkWarn = false;
+          this.blinkCrit = false;
+          break;
+        case 1:
+          this.blinkWarn = true;
+          this.blinkCrit = false;
+          break;
+        case 2:
+          this.blinkCrit = true;
+          this.blinkWarn = false;
+      }
+    });
+  }
+
+  mutePlayer(state) {
+    this.notificationsService.mutePlayer(state);
+  }
+
+  // we use this as a staging area to limit menu update events we build the menu from Alarms record
+  buildAlarmMenu() {
+    // clean notificationAlarms based on App Notification settings
+    if (!this.notificationConfig.devices.showNormalState) {
+      for (const [path, thealarm] of Object.entries(this.notificationAlarms)) {
+        let alarm = this.notificationAlarms[path];
+
+        if (alarm.notification['state'] == 'normal' && alarm['type'] == 'device') {
+          delete this.notificationAlarms[path];
+          break;
+        }
+      }
+    }
+    this.alarms = this.notificationAlarms;
+  }
+
+  createMenuRootItem(itemLabel: string): IMenuNode | null {
+    let item: IMenuNode = {
+      label: itemLabel
+    }
+
+    if(Object.entries(this.alarmMenu).length) {
+      let i = Object.keys(this.alarmMenu).indexOf(itemLabel);
+      if(i == -1) {
+        console.log("Root: " + itemLabel + " not found. Search index: " + i);
+        return item;
+      } else {
+        console.log("Root: " + itemLabel + " found. Search index: " + i);
+        console.log(JSON.stringify(Object.values(this.alarmMenu)));
+        return null;
+      }
+    }
+    console.log(JSON.stringify(Object.values(this.alarmMenu)));
+    return item;
+  }
+
+  createMenuChildItem(itemLabel: string, pathPositionIndex: number, pathArray: string[], alarm: Alarm): IMenuItem | IMenuNode {
+    let item;
+
+    const lastPosition = pathArray.length - 1;
+    let parentLabel = pathArray[pathPositionIndex - 1];
+    let indexParentNode = Object.keys(this.alarmMenu).indexOf(pathArray[parentLabel]);
+
+    if (pathPositionIndex != lastPosition) {
+      item = {
+        label: pathArray[pathPositionIndex],
+      }
+    } else {
+      item = {
+        label: pathArray[pathPositionIndex],
+        Alarm: alarm,
+      }
+    }
+
+    for (const [label, menuNode] of Object.entries(this.alarmMenu)) {
+        if (label == parentLabel) {
+          console.log(JSON.stringify(menuNode));
+          menuNode['childNode'] = item;
+
+          if (pathPositionIndex != lastPosition) {
+            pathPositionIndex++;
+            if (pathPositionIndex != (lastPosition)) {
+              item = {
+                label: pathArray[pathPositionIndex]
+              }
+            } else {
+              item = {
+                label: pathArray[pathPositionIndex],
+                Alarm: alarm,
+              }
+            }
+            menuNode['childNode'][0].childNode = item;
+          }
+        }
+      }
+
+    return null;
+  }
+
+
+  ackAlarm(path: string, timeout: number = 0) {
+    this.notificationsService.acknowledgeAlarm(path, timeout);
+  }
+
+
+  /**
+   * Used by ngFor to tracks alarm items by key for menu optimization
+   * @param alarm object in question
+   */
+  trackAlarmPath(index, alarm) {
+    return alarm ? alarm.value.path : undefined;
+  }
+
+  ngOnDestroy() {
+    this.notificationServiceSettings.unsubscribe();
+    this.alarmSub.unsubscribe();
+  }
+
+}

package/src/app/app-help/app-help.component.css

@@ -1,4 +1,4 @@
-.tabGroup {
-  display: block;
-  padding: 3px;
-}
+.tabGroup {
+  display: block;
+  padding: 3px;
+}