@mxtommy/kip 1.3.0 → 2.0.1

package/src/app/widget-simple-linear/widget-simple-linear.component.html

@@ -1,28 +0,0 @@
-<div id="{{widgetUUID}}" #simpleLinear class="simpleLinearWidget" style="margin: 0px; padding: 0px; width: 100%; height: 100%;">
-
-<svg-simple-linear-gauge class="simpleLinearGauge"
-  [displayName]="config.displayName"
-  [unitLabel]="unitsLabel"
-  [dataValue]="dataValue"
-  [barColor]="barColor"
-  [barColorGradient]="barColorGradient"
-  [barColorBackground]="barColorBackground"
-  [gaugeValue]="gaugeValue"
-  [gaugeMaxValue]="config.maxValue"
-  [gaugeMinValue]="config.minValue"
-  ></svg-simple-linear-gauge>
-
-<div class="settingsButton" *ngIf="unlockStatus">
-  <button type="button"  color="accent" mat-mini-fab class="selector-fab" (click)="openWidgetSettings()">
-      <span class="fa-solid fa-cog"></span>
-  </button>
-</div>
-<div #primary class='primary' style="display: none;"></div>
-<div #accent class='accent' style="display: none;"></div>
-<div #warn class='warn' style="display: none;"></div>
-<div #primaryDark class='primaryDark' style="display: none;"></div>
-<div #accentDark class='accentDark' style="display: none;"></div>
-<div #warnDark class='warnDark' style="display: none;"></div>
-<div #background class='background' style="display: none;"></div>
-<div #text class='text' style="display: none;"></div>
-</div>

package/src/app/widget-simple-linear/widget-simple-linear.component.scss

@@ -1,64 +0,0 @@
-@use '~@angular/material' as mat;
-
-@mixin widget-simple-linear-theme($theme) {
-
-  $ngGauge: map-get($theme, ngGauge);
-  $themeForeground: map-get($theme, foreground);
-
-  app-widget-simple-linear {
-      .primary {
-        color: mat.get-color-from-palette($ngGauge, primary-gaugeFaceLight);
-      }
-      .accent {
-        color: mat.get-color-from-palette($ngGauge, accent-gaugeFaceLight);
-      }
-      .warn {
-        color: mat.get-color-from-palette($ngGauge, warn-gaugeFaceLight);
-      }
-      .primaryDark {
-        color: mat.get-color-from-palette($ngGauge, primary-gaugeFaceDark);
-      }
-      .accentDark {
-        color: mat.get-color-from-palette($ngGauge, accent-gaugeFaceDark);
-      }
-      .warnDark {
-        color: mat.get-color-from-palette($ngGauge, warn-gaugeFaceDark);
-      }
-      .background {
-        color: mat.get-color-from-palette($themeForeground, divider);
-      }
-      .text {
-        color: mat.get-color-from-palette($themeForeground, text);
-      }
-  }
-}
-
-.simpleLinearGauge {
-  display:block;
-  position: relative;
-  border:none;
-  margin: 0px;
-  padding:  5px 0px;
-  width: 100%;
-  height: 100%;
-}
-
-.settingsButton {
-  position: absolute;
-  bottom: 5%;
-  left: 50%;
-  transform: translate(-50%);
-}
-
-
-.tab-group {
-  border: 1px solid #e8e8e8;
-}
-
-.tab-content {
-  padding: 16px;
-}
-
-.full-width {
-  width: 100%;
-}

package/src/app/widget-simple-linear/widget-simple-linear.component.spec.ts

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

package/src/app/widget-simple-linear/widget-simple-linear.component.ts

@@ -1,199 +0,0 @@
-import { ViewChild, Input, ElementRef, Component, OnInit, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { MatDialog } from '@angular/material/dialog';
-
-import { SignalKService } from '../signalk.service';
-import { ModalWidgetComponent } from '../modal-widget/modal-widget.component';
-import { WidgetManagerService, IWidget, IWidgetConfig } from '../widget-manager.service';
-import { UnitsService } from '../units.service';
-import { AppSettingsService } from '../app-settings.service';
-
-const defaultConfig: IWidgetConfig = {
-  displayName: "Display Name",
-  filterSelfPaths: true,
-  paths: {
-    "gaugePath": {
-      description: "Numeric Data",
-      path: null,
-      source: null,
-      pathType: "number",
-      isPathConfigurable: true,
-      convertUnitTo: "v"
-    }
-  },
-  minValue: 0,
-  maxValue: 14.4,
-  numInt: 1,
-  numDecimal: 2,
-  gaugeType: "simpleLinear", // Applied to Units label. abr = first letter only. full = full string
-  gaugeUnitLabelFormat: "full", // Applied to Units label. abr = first letter only. full = full string
-  barColor: 'accent',
-};
-
-@Component({
-  selector: 'app-widget-simple-linear',
-  templateUrl: './widget-simple-linear.component.html',
-  styleUrls: ['./widget-simple-linear.component.scss']
-})
-export class WidgetSimpleLinearComponent implements OnInit, OnDestroy {
-  @Input('widgetUUID') widgetUUID: string;
-  @Input('unlockStatus') unlockStatus: boolean;
-
-  @ViewChild('primary', {static: true, read: ElementRef}) private primaryElement: ElementRef;
-  @ViewChild('accent', {static: true, read: ElementRef}) private accentElement: ElementRef;
-  @ViewChild('warn', {static: true, read: ElementRef}) private warnElement: ElementRef;
-  @ViewChild('primaryDark', {static: true, read: ElementRef}) private primaryDarkElement: ElementRef;
-  @ViewChild('accentDark', {static: true, read: ElementRef}) private accentDarkElement: ElementRef;
-  @ViewChild('warnDark', {static: true, read: ElementRef}) private warnDarkElement: ElementRef;
-  @ViewChild('background', {static: true, read: ElementRef}) private backgroundElement: ElementRef;
-
-  activeWidget: IWidget;
-  config: IWidgetConfig;
-
-  public unitsLabel:string = "";
-  public dataValue: string = "0";
-  public gaugeValue: Number = 0;
-  public barColor: string = "";
-  public barColorGradient: string = "";
-  public barColorBackground: string = "";
-
-  valueSub: Subscription = null;
-
-  // dynamics theme support
-  themeNameSub: Subscription = null;
-
-  constructor(
-    public dialog:MatDialog,
-    private signalKService: SignalKService,
-    private widgetManagerService: WidgetManagerService,
-    private unitsService: UnitsService,
-    private appSettingsService: AppSettingsService, // need for theme change subscription
-  ) { }
-
-  ngOnInit(): void {
-    this.activeWidget = this.widgetManagerService.getWidget(this.widgetUUID);
-    if (this.activeWidget.config === null) {
-        // no data, let's set some!
-      this.widgetManagerService.updateWidgetConfig(this.widgetUUID, defaultConfig);
-      this.config = defaultConfig; // load default config.
-    } else {
-      this.config = this.activeWidget.config;
-    }
-    this.updateGaugeSettings();
-    this.subscribePath();
-    this.subscribeTheme();
-  }
-
-  updateGaugeSettings() {
-    this.barColorBackground = window.getComputedStyle(this.backgroundElement.nativeElement).color;
-
-    switch (this.config.barColor) {
-      case "primary":
-        this.barColor = getComputedStyle(this.primaryElement.nativeElement).color;
-        this.barColorGradient = getComputedStyle(this.primaryDarkElement.nativeElement).color;
-        break;
-
-      case "accent":
-        this.barColor = getComputedStyle(this.accentElement.nativeElement).color;
-        this.barColorGradient = getComputedStyle(this.accentDarkElement.nativeElement).color;
-        break;
-
-      case "warn":
-        this.barColor = getComputedStyle(this.warnElement.nativeElement).color;
-        this.barColorGradient = getComputedStyle(this.warnDarkElement.nativeElement).color;
-        break;
-    }
-  }
-
-  subscribePath() {
-    this.unsubscribePath();
-
-    // set Units label sting based on gauge config
-    if (this.config.gaugeUnitLabelFormat == "abr") {
-      this.unitsLabel = this.config.paths['gaugePath'].convertUnitTo.substr(0,1);
-    } else {
-      this.unitsLabel = this.config.paths['gaugePath'].convertUnitTo;
-    }
-
-    if (typeof(this.config.paths['gaugePath'].path) != 'string') { return } // nothing to sub to...
-
-    this.valueSub = this.signalKService.subscribePath(this.widgetUUID, this.config.paths['gaugePath'].path, this.config.paths['gaugePath'].source).subscribe(
-      newValue => {
-        if (newValue.value == null) {return}
-
-        // convert to unit and format value using widget settings
-        let value  = this.unitsService.convertUnit(this.config.paths['gaugePath'].convertUnitTo, newValue.value).toFixed(this.config.numDecimal);
-
-        // Format display value using widget settings
-        let displayValue = value;
-        if (this.config.numDecimal != 0){
-          this.dataValue = displayValue.padStart((this.config.numInt + this.config.numDecimal + 1), "0");
-        } else {
-          this.dataValue = displayValue.padStart(this.config.numInt, "0");
-        }
-
-        // Format value for gauge bar
-        let gaugeValue = Number(value);
-
-        // Limit gauge bar animation overflow to gauge settings
-        if (gaugeValue >= this.config.maxValue) {
-          this.gaugeValue = this.config.maxValue;
-        } else if (gaugeValue <= this.config.minValue) {
-          this.gaugeValue = this.config.minValue;
-        } else {
-          this.gaugeValue = gaugeValue;
-        }
-      }
-    );
-  }
-
-  unsubscribePath() {
-    if (this.valueSub !== null) {
-      this.valueSub.unsubscribe();
-      this.valueSub = null;
-      this.signalKService.unsubscribePath(this.widgetUUID, this.config.paths['gaugePath'].path)
-    }
-  }
-
-  // Subscribe to theme event
-  subscribeTheme() {
-  this.themeNameSub = this.appSettingsService.getThemeNameAsO().subscribe(
-    themeChange => {
-      setTimeout(() => {   // delay so browser getComputedStyles has time to complete theme style change.
-        this.updateGaugeSettings();
-      }, 50);
-    })
-  }
-
-  unsubscribeTheme(){
-    if (this.themeNameSub !== null) {
-      this.themeNameSub.unsubscribe();
-      this.themeNameSub = null;
-    }
-  }
-
-    openWidgetSettings() {
-      let dialogRef = this.dialog.open(ModalWidgetComponent, {
-        width: '80%',
-        data: this.config
-      });
-
-      dialogRef.afterClosed().subscribe(result => {
-        // save new settings
-        if (result) {
-          console.log(result);
-          this.unsubscribePath();  //unsub now as we will change variables so wont know what was subbed before...
-          this.config = result;
-          this.updateGaugeSettings();
-          this.widgetManagerService.updateWidgetConfig(this.widgetUUID, this.config);
-          this.subscribePath();
-        }
-      });
-    }
-
-  ngOnDestroy() {
-    this.unsubscribePath();
-    this.unsubscribeTheme();
-  }
-
-}

package/src/app/widget-state/widget-state.component.html

@@ -1,27 +0,0 @@
-<div class="wrapper">
-  <!--
-  <div class="indicatorBorder">
-    aaa
-  </div> -->
-
-  <div class="indicatorBorder stateOn"  *ngIf="state" (mousedown)="handleClickDown();" (mouseup)="handleClickUp();" (mouseout)="handleClickUp();">
-        <div class="textValue "  >
-            {{ config.displayName }}
-        </div>
-
-  </div>
-
-<div class="indicatorBorder stateOff" *ngIf="!state" (mousedown)="handleClickDown()" (mouseup)="handleClickUp();" (mouseout)="handleClickUp();">
-  <div class="textValue " >
-      {{ config.displayName }}
-  </div>
-</div>
-
-
-
-  <div class="settingsButton" *ngIf="unlockStatus">
-    <button  color="accent" mat-mini-fab class="selector-fab" (click)="openWidgetSettings()">
-        <span class="fa-solid fa-cog"></span>
-    </button>
-  </div>
-</div>

package/src/app/widget-state/widget-state.component.scss

@@ -1,68 +0,0 @@
-@use '~@angular/material' as mat;
-
-
-@mixin widget-state-theme($theme) {
-
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-
-  .stateOn {
-    background-color: mat.get-color-from-palette($accent, 'A700');
-    color: mat.get-color-from-palette($accent, 'A700-contrast');
-  }
-  .stateOff {
-    background-color: mat.get-color-from-palette($accent, 100);
-    color: mat.get-color-from-palette($accent, '100-contrast');
-  }
-
-}
-
-.wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-
-.textGenericLabel {
-  position: absolute;
-  top: 5%;
-  left: 5%;
-
-}
-
-
-.textValue {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: "Arial", Times, serif;
-  font-weight: bold;
-  box-sizing: border-box;
-}
-
-.indicatorBorder {
-margin-left: 5%;
-margin-right: 5%;
-top: 5%;
-position: relative;
-width: 90%;
-height: 90%;
-box-sizing: border-box;
-border: solid 0.3em;
-border-radius: 2em / 2em;
-}
-
-.settingsButton {
-  position: absolute;
-  bottom: 5%;
-  left: 50%;
-  transform: translate(-50%);
-}

package/src/app/widget-state/widget-state.component.spec.ts

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

package/src/app/widget-state/widget-state.component.ts

@@ -1,178 +0,0 @@
-import { Component, Input, OnInit, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { MatDialog } from '@angular/material/dialog';
-
-import { ModalWidgetComponent } from '../modal-widget/modal-widget.component';
-import { SignalKService } from '../signalk.service';
-import { SignalkRequestsService, skRequest } from '../signalk-requests.service';
-import { WidgetManagerService, IWidget, IWidgetConfig } from '../widget-manager.service';
-
-
-const defaultConfig: IWidgetConfig = {
-  displayName: null,
-  filterSelfPaths: true,
-  paths: {
-    "boolPath": {
-      description: "Boolean Data",
-      path: null,
-      source: null,
-      pathType: "boolean",
-      isPathConfigurable: true,
-      convertUnitTo: "unitless"
-    }
-  },
-  putEnable: false,
-  putMomentary: false,
-  putMomentaryValue: true
-};
-
-
-@Component({
-  selector: 'app-widget-state',
-  templateUrl: './widget-state.component.html',
-  styleUrls: ['./widget-state.component.scss']
-})
-export class WidgetStateComponent implements OnInit, OnDestroy {
-
-  @Input('widgetUUID') widgetUUID: string;
-  @Input('unlockStatus') unlockStatus: boolean;
-
-  valueSub: Subscription = null;
-  activeWidget: IWidget;
-  config: IWidgetConfig;
-
-  state: boolean = null;
-  pressed = false;
-  timeoutHandler;
-
-  skRequestSub = new Subscription; // Request result observer
-
-  constructor(
-    public dialog:MatDialog,
-    private SignalKService: SignalKService,
-    private SignalkRequestsService: SignalkRequestsService,
-    private WidgetManagerService: WidgetManagerService) {
-  }
-
-  ngOnInit() {
-    this.activeWidget = this.WidgetManagerService.getWidget(this.widgetUUID);
-    if (this.activeWidget.config === null) {
-        // no data, let's set some!
-      this.WidgetManagerService.updateWidgetConfig(this.widgetUUID, defaultConfig);
-      this.config = defaultConfig; // load default config.
-    } else {
-      this.config = this.activeWidget.config;
-    }
-
-    this.subscribePath();
-    this.subscribeSKRequest();
-  }
-
-  ngOnDestroy() {
-    this.unsubscribePath();
-    this.subscribeSKRequest();
-  }
-
-  subscribePath() {
-    this.unsubscribePath();
-    if (typeof(this.config.paths['boolPath'].path) != 'string') { return } // nothing to sub to...
-
-    this.valueSub = this.SignalKService.subscribePath(this.widgetUUID, this.config.paths['boolPath'].path, this.config.paths['boolPath'].source).subscribe(
-      newValue => {
-        this.state = newValue.value;
-      }
-    );
-  }
-
-  unsubscribePath() {
-    if (this.valueSub !== null) {
-      this.valueSub.unsubscribe();
-      this.valueSub = null;
-      this.SignalKService.unsubscribePath(this.widgetUUID, this.config.paths['boolPath'].path)
-    }
-  }
-
-  subscribeSKRequest() {
-    this.skRequestSub = this.SignalkRequestsService.subscribeRequest().subscribe(requestResult => {
-      if (requestResult.widgetUUID == this.widgetUUID) {
-        if (requestResult.statusCode != 200){
-          let errMsg = requestResult.statusCode + " - " +requestResult.statusCodeDescription;
-          if (requestResult.message){
-            errMsg = errMsg + " Server Message: " + requestResult.message;
-          }
-          alert('[Widget Name: ' + errMsg);
-        } else {
-          console.log("AP Received: \n" + JSON.stringify(requestResult));
-        }
-      }
-    });
-  }
-
-  unsubscribeSKRequest() {
-    this.skRequestSub.unsubscribe();
-  }
-
-  openWidgetSettings() {
-    let dialogRef = this.dialog.open(ModalWidgetComponent, {
-      width: '80%',
-      data: this.config
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      // save new settings
-      if (result) {
-        console.log(result);
-        this.unsubscribePath();//unsub now as we will change variables so wont know what was subbed before...
-        this.config = result;
-        this.WidgetManagerService.updateWidgetConfig(this.widgetUUID, this.config);
-        this.subscribePath();
-      }
-    });
-  }
-
-  handleClickDown() {
-    if (!this.config.putEnable) { return; }
-
-    if (!this.config.putMomentary) {
-      //on/off mode. Send whatever we're not :)
-      this.SignalkRequestsService.putRequest(
-        this.config.paths['boolPath'].path,
-        this.config.paths['boolPath'].source,
-        this.widgetUUID
-      );
-
-      if (!this.state) {
-        return;
-      }
-    } else {
-      // momentary mode
-      this.pressed = true;
-
-      // send it once to start
-      this.SignalkRequestsService.putRequest(this.config.paths['boolPath'].path, this.config.paths['boolPath'].source, this.widgetUUID);
-
-      //send it again every 20ms
-      this.timeoutHandler = setInterval(() => {
-        this.SignalkRequestsService.putRequest(this.config.paths['boolPath'].path, this.config.paths['boolPath'].source, this.widgetUUID);
-        this.config.putMomentaryValue;
-      }, 100);
-
-      return;
-    }
-  }
-
-  handleClickUp() {
-    if (!this.config.putEnable || !this.pressed) { return; }
-
-    if (this.config.putMomentary) {
-      this.pressed = false;
-      clearInterval(this.timeoutHandler);
-      // momentary mode
-      this.SignalkRequestsService.putRequest(this.config.paths['boolPath'].path, this.config.paths['boolPath'].source, this.widgetUUID);
-      if (!this.config.putMomentaryValue) {
-        return;
-      }
-    }
-  }
-
-}

package/src/app/widget-switch/widget-switch.component.css

@@ -1,70 +0,0 @@
-.mainWrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.settingsButton {
-    position: absolute;
-    bottom: 5%;
-    left: 50%;
-    transform: translate(-50%);
-}
-
-.switchContainer {
-    position: relative;
-    margin: auto;
-    height: 100%;
-    width: 100%;
-}
-
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-  }
-
-/* Hide default HTML checkbox */
-.switch input {display:none;}
-
-
-/* The slider */
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-  
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 80%;
-    width: 45%;
-    left: 5%;
-    bottom: 10%;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-  
-  input:checked + .slider {
-    background-color: #2196F3;
-  }
-  
-  input:focus + .slider {
-    box-shadow: 0 0 1px #2196F3;
-  }
-  
-  input:checked + .slider:before {
-    -webkit-transform: translateX(95%);
-    -ms-transform: translateX(95%);
-    transform: translateX(95%);
-  }
-