@mxtommy/kip 1.2.3 → 1.3.0

package/src/app/widget-manager.service.ts

@@ -1,141 +1,141 @@
-import { Injectable } from '@angular/core';
-import { AppSettingsService } from './app-settings.service';
-import { Format, Policy } from "./signalk-interfaces";
-
-export interface IWidget {
-  uuid: string;
-  type: string;
-  config: IWidgetConfig;
-}
-
-export interface IWidgetConfig {
-  displayName?: string;
-  filterSelfPaths?: boolean; //widget filter self paths only?
-  paths?: {
-    [key: string]: IWidgetPaths;
-  },
-  convertUnitTo?: string;
-  usage?: {
-    [key: string]: string[]; // Autopilot: key should match key in paths, specifies autopilot widget possible paths for AP mode
-  },
-  typeVal?: {
-    [key: string]: string; // Autopilot: key should match key in paths, specifies autopilot widget paths value type for AP mode
-  },
-
-  //numeric data
-  numDecimal?: number; // number of decimal places if a number
-  numInt?: number;
-  showMin?: boolean;
-  showMax?: boolean;
-
-  //Wind Gauge data
-  windSectorEnable?: boolean;
-  windSectorWindowSeconds?: number;
-  laylineEnable?: boolean;
-  laylineAngle?: number;
-
-  //gauge Data
-  gaugeType?: string;
-  gaugeUnitLabelFormat?: string;
-  gaugeTicks?: boolean;
-  barGraph?: boolean;
-  backgroundColor?: string;
-  frameColor?: string;
-  barColor?: string;
-  radialSize?: string;
-  minValue?: number;
-  maxValue?: number;
-  rotateFace?: boolean;
-  autoStart?: boolean;
-  compassUseNumbers?: boolean;
-
-  //Historical
-  dataSetUUID?: string;
-  invertData?: boolean;
-  displayMinMax?: boolean;
-  animateGraph?: boolean;
-  includeZero?: boolean;
-  verticalGraph?: boolean;
-
-  //Puts
-  putEnable?: boolean;
-  putMomentary?: boolean;
-  putMomentaryValue?: boolean;
-
-  //iFrame
-  widgetUrl?: string;
-}
-
-interface IWidgetPaths {
-  description: string;
-  path: string | null;       //can be null or set
-  source: string | null;     //can be null or set
-  pathType: string  | null;
-  pathFilter?: string,     //Future - use to filter path list ie. self.navigation.* or *.navigation.*.blabla.*
-  convertUnitTo?: string;    // Convert SignalK value to specific format for display. Also used as a source to identify conversion group
-  isPathConfigurable: boolean; // should we show this path in Widget Path config or is it static and hidden
-  period?: number;    // SignalK - period=[millisecs] becomes the transmission rate, e.g. every period/1000 seconds. Default: 1000
-  format?: Format;     // SignalK - format=[delta|full] specifies delta or full format. Default: delta
-  policy?: Policy;     // SignalK - policy=[instant|ideal|fixed]. Default: ideal
-  minPeriod?: number;  // SignalK - minPeriod=[millisecs] becomes the fastest message transmission rate allowed, e.g. every minPeriod/1000 seconds. This is only relevant for policy='instant' to avoid swamping the client or network.
-}
-
-
-
-@Injectable()
-export class WidgetManagerService {
-
-  widgets: Array<IWidget>;
-
-  constructor(
-    private AppSettingsService: AppSettingsService
-  ) {
-    this.widgets = this.AppSettingsService.getWidgets();
-  }
-
-
-
-  private newUuid() {
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-            return v.toString(16);
-        });
-  }
-
-  getWidget(uuid: string) {
-      return this.widgets.find(w => w.uuid == uuid);
-  }
-
-  newWidget() {
-    let uuid = this.newUuid();
-    this.widgets.push({ uuid: uuid, type: "WidgetBlank", config: null });
-    this.saveWidgets();
-    return uuid;
-  }
-
-  deleteWidget(uuid) {
-    let wIndex = this.widgets.findIndex(w => w.uuid == uuid)
-    if (wIndex < 0) { return; } // not found
-    this.widgets.splice(wIndex, 1);
-  }
-
-  updateWidgetType(uuid: string, newNodeType: string) {
-    let wIndex = this.widgets.findIndex(w => w.uuid == uuid)
-    if (wIndex < 0) { return; } // not found
-    this.widgets[wIndex].config = null;
-    this.widgets[wIndex].type = newNodeType;
-    this.saveWidgets();
-  }
-
-  updateWidgetConfig(uuid: string, newConfig) {
-    let wIndex = this.widgets.findIndex(w => w.uuid == uuid)
-    if (wIndex < 0) { return; } // not found
-    this.widgets[wIndex].config = newConfig;
-    this.saveWidgets();
-  }
-
-  saveWidgets() {
-    this.AppSettingsService.saveWidgets(this.widgets);
-  }
-
-}
+import { Injectable } from '@angular/core';
+import { AppSettingsService } from './app-settings.service';
+import { Format, Policy } from "./signalk-interfaces";
+
+export interface IWidget {
+  uuid: string;
+  type: string;
+  config: IWidgetConfig;
+}
+
+export interface IWidgetConfig {
+  displayName?: string;
+  filterSelfPaths?: boolean; //widget filter self paths only?
+  paths?: {
+    [key: string]: IWidgetPaths;
+  },
+  convertUnitTo?: string;
+  usage?: {
+    [key: string]: string[]; // Autopilot: key should match key in paths, specifies autopilot widget possible paths for AP mode
+  },
+  typeVal?: {
+    [key: string]: string; // Autopilot: key should match key in paths, specifies autopilot widget paths value type for AP mode
+  },
+
+  //numeric data
+  numDecimal?: number; // number of decimal places if a number
+  numInt?: number;
+  showMin?: boolean;
+  showMax?: boolean;
+
+  //Wind Gauge data
+  windSectorEnable?: boolean;
+  windSectorWindowSeconds?: number;
+  laylineEnable?: boolean;
+  laylineAngle?: number;
+
+  //gauge Data
+  gaugeType?: string;
+  gaugeUnitLabelFormat?: string;
+  gaugeTicks?: boolean;
+  barGraph?: boolean;
+  backgroundColor?: string;
+  frameColor?: string;
+  barColor?: string;
+  radialSize?: string;
+  minValue?: number;
+  maxValue?: number;
+  rotateFace?: boolean;
+  autoStart?: boolean;
+  compassUseNumbers?: boolean;
+
+  //Historical
+  dataSetUUID?: string;
+  invertData?: boolean;
+  displayMinMax?: boolean;
+  animateGraph?: boolean;
+  includeZero?: boolean;
+  verticalGraph?: boolean;
+
+  //Puts
+  putEnable?: boolean;
+  putMomentary?: boolean;
+  putMomentaryValue?: boolean;
+
+  //iFrame
+  widgetUrl?: string;
+}
+
+interface IWidgetPaths {
+  description: string;
+  path: string | null;       //can be null or set
+  source: string | null;     //can be null or set
+  pathType: string  | null;
+  pathFilter?: string,     //Future - use to filter path list ie. self.navigation.* or *.navigation.*.blabla.*
+  convertUnitTo?: string;    // Convert SignalK value to specific format for display. Also used as a source to identify conversion group
+  isPathConfigurable: boolean; // should we show this path in Widget Path config or is it static and hidden
+  period?: number;    // SignalK - period=[millisecs] becomes the transmission rate, e.g. every period/1000 seconds. Default: 1000
+  format?: Format;     // SignalK - format=[delta|full] specifies delta or full format. Default: delta
+  policy?: Policy;     // SignalK - policy=[instant|ideal|fixed]. Default: ideal
+  minPeriod?: number;  // SignalK - minPeriod=[millisecs] becomes the fastest message transmission rate allowed, e.g. every minPeriod/1000 seconds. This is only relevant for policy='instant' to avoid swamping the client or network.
+}
+
+
+
+@Injectable()
+export class WidgetManagerService {
+
+  widgets: Array<IWidget>;
+
+  constructor(
+    private AppSettingsService: AppSettingsService
+  ) {
+    this.widgets = this.AppSettingsService.getWidgets();
+  }
+
+
+
+  private newUuid() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+            return v.toString(16);
+        });
+  }
+
+  getWidget(uuid: string) {
+      return this.widgets.find(w => w.uuid == uuid);
+  }
+
+  newWidget() {
+    let uuid = this.newUuid();
+    this.widgets.push({ uuid: uuid, type: "WidgetBlank", config: null });
+    this.saveWidgets();
+    return uuid;
+  }
+
+  deleteWidget(uuid) {
+    let wIndex = this.widgets.findIndex(w => w.uuid == uuid)
+    if (wIndex < 0) { return; } // not found
+    this.widgets.splice(wIndex, 1);
+  }
+
+  updateWidgetType(uuid: string, newNodeType: string) {
+    let wIndex = this.widgets.findIndex(w => w.uuid == uuid)
+    if (wIndex < 0) { return; } // not found
+    this.widgets[wIndex].config = null;
+    this.widgets[wIndex].type = newNodeType;
+    this.saveWidgets();
+  }
+
+  updateWidgetConfig(uuid: string, newConfig) {
+    let wIndex = this.widgets.findIndex(w => w.uuid == uuid)
+    if (wIndex < 0) { return; } // not found
+    this.widgets[wIndex].config = newConfig;
+    this.saveWidgets();
+  }
+
+  saveWidgets() {
+    this.AppSettingsService.saveWidgets(this.widgets);
+  }
+
+}

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

@@ -7,7 +7,7 @@
 
   <div class="settingsButton" *ngIf="unlockStatus">
     <button  color="accent" mat-mini-fab class="selector-fab" (click)="openWidgetSettings()">
-        <span class="fa fa-cog"></span>
+        <span class="fa-solid fa-cog"></span>
     </button>
   </div>
 </div>

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

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin widget-numeric-theme($theme) {
   $primary: map-get($theme, primary);
@@ -8,11 +8,11 @@
   $wind: map-get($theme, wind);
 
   .warn {
-    color: mat-color($warn, 500);
+    color: mat.get-color-from-palette($warn, 500);
   }
 
   .warn-contrast {
-    color: mat-contrast($warn, 500);
+    color: mat.get-contrast-color-from-palette($warn, 500);
   }
 
 }

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

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

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

@@ -1,28 +1,28 @@
-<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 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>
+<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 +1,64 @@
-@import '~@angular/material/theming';
-
-@mixin widget-simple-linear-theme($theme) {
-
-  $ngGauge: map-get($theme, ngGauge);
-  $themeForeground: map-get($theme, foreground);
-
-  app-widget-simple-linear {
-      .primary {
-        color: mat-color($ngGauge, primary-gaugeFaceLight);
-      }
-      .accent {
-        color: mat-color($ngGauge, accent-gaugeFaceLight);
-      }
-      .warn {
-        color: mat-color($ngGauge, warn-gaugeFaceLight);
-      }
-      .primaryDark {
-        color: mat-color($ngGauge, primary-gaugeFaceDark);
-      }
-      .accentDark {
-        color: mat-color($ngGauge, accent-gaugeFaceDark);
-      }
-      .warnDark {
-        color: mat-color($ngGauge, warn-gaugeFaceDark);
-      }
-      .background {
-        color: mat-color($themeForeground, divider);
-      }
-      .text {
-        color: mat-color($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%;
-}
+@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 +1,25 @@
-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();
-  });
-});
+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();
+  });
+});