@mxtommy/kip 1.3.0 → 2.0.0

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

@@ -1,55 +0,0 @@
-<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,52 +0,0 @@
-@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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-.tabGroup {
-  display: block;
-  padding: 3px;
-}

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

@@ -1,135 +0,0 @@
-<mat-tab-group class="tabGroup">
-  <mat-tab label="Editing Layout">
-
-    <div *ngIf="!unlockStatus">
-      <h2>Unlocking</h2>
-      <p>
-        The layout is "Locked" by default. This is to prevent accidental interaction from touch screens from changing anything.
-        You can unlock KIP using the hamburger icon in the lower right corner and selecting "Configuration -> Edit Layout". Go Ahead try it now!
-      </p>
-    </div>
-    <div *ngIf="unlockStatus">
-      <h2>Configuring Layout</h2>
-      <p>
-        Now that KIP is unlocked, you can do a few actions.
-      </p>
-      <ul>
-        <li>The icon in the lower right can be used to select the Widget you would like to display</li>
-        <li>The icon in the lower left can be used to "split" the existing area. You can use this to display multiple items on one page</li>
-        <li>The "X" in the upper right can be used to delete an area (basically undoing a split)</li>
-        <li>Once a widget is selected, there will be a gear in the lower middle. Clicking it will allow you to setup the widget parameters</li>
-        <li>You can drag the bars between widgits to resize them</li>
-      </ul>
-    
-    </div>
-
-  </mat-tab>
-  <mat-tab label="Video Tutorials">
-    <ng-template matTabContent>
-      <mat-tab-group class="tabGroup">
-
-        <mat-tab label="KIP">
-          <mat-accordion>
-            <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  5 Minutes with Kip (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Introduction to using KIP
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/v6o4uK-Iq8s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-      
-            <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  Graphana embeded in KIP (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Pretty graphs
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/S8FbtwBwW3w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-
-            <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  Setting up zones in KIP (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Warnings/Alarms
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/BJFjLzjlpuY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-            
-          </mat-accordion>
-
-        </mat-tab>
-
-        <mat-tab label="Graphana">
-          <mat-accordion>
-            <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  5 Minutes with Graphana (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Introduction to using Graphana
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/b3lHwLnYgx0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-      
-            <mat-expansion-panel [expanded]="step === 3" (opened)="setStep(3)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  SignalK to InfluxDB (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Database to store historical data
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/ULnN-cByQXE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-          </mat-accordion>
-        </mat-tab>
-
-        <mat-tab label="OpenPlotter">
-          <mat-accordion>
-            <mat-expansion-panel [expanded]="step === 4" (opened)="setStep(4)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  OpenPlotter (by Boating with the Baileys)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Installing OpenPlotter
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/Q0sEpgzhHTE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-      
-            <mat-expansion-panel [expanded]="step === 5" (opened)="setStep(5)">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  OpenPlotter instruction video (by Smart Sailing Boat)
-                </mat-panel-title>
-                <mat-panel-description>
-                  Installing OpenPlotter
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/r8CGixMl18k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-            </mat-expansion-panel>
-          </mat-accordion>
-        </mat-tab>
-              
-      </mat-tab-group>
-    </ng-template>
- 
-  </mat-tab>
-</mat-tab-group>
-  
-

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

@@ -1,45 +0,0 @@
-import { Component, Input, OnInit, ViewEncapsulation, Inject } from '@angular/core';
-import { Subscription } from 'rxjs';
-
-import { AppSettingsService } from '../app-settings.service';
-
-
-
-@Component({
-  selector: 'app-help',
-  templateUrl: './app-help.component.html',
-  styleUrls: ['./app-help.component.css'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class AppHelpComponent implements OnInit {
-
-  unlockStatusSub: Subscription;
-  unlockStatus: boolean;
-
-  step = -1;
-
-
-  constructor(  private AppSettingsService: AppSettingsService,) {
-
-  }
-
-  ngOnInit() {
-    // get Unlock Status
-    this.unlockStatusSub = this.AppSettingsService.getUnlockStatusAsO().subscribe(
-      unlockStatus => {
-        this.unlockStatus = unlockStatus;
-      }
-    );
-  }
-
-  ngOnDestroy() {
-    this.unlockStatusSub.unsubscribe();
-  }
-
-  setStep(index: number) {
-    this.step = index;
-  }
-
-
-}
-

package/src/app/app-settings.service.spec.ts

@@ -1,15 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-
-import { AppSettingsService } from './app-settings.service';
-
-describe('AppSettingsService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [AppSettingsService]
-    });
-  });
-
-  it('should be created', inject([AppSettingsService], (service: AppSettingsService) => {
-    expect(service).toBeTruthy();
-  }));
-});