@mxtommy/kip 1.2.3 → 1.3.0

package/src/app/modal-path-selector/modal-path-selector.component.html

@@ -1,62 +1,62 @@
-<div [formGroup]="formGroup">
-  <div class="pathGroup" *ngIf="formGroup.value.isPathConfigurable">
-    <p>{{formGroup.value.description}}</p>
-    <div class="pathGroupFields">
-      <mat-form-field class="pathField" appearance="outline" floatLabel="always">
-        <mat-label>SignalK Path</mat-label>
-        <input type="text" matInput
-          placeholder="Select path (note dropdown limited to 50, type to use autocomplete)"
-          formControlName="path"
-          required
-          [matAutocomplete]="pathAutoComplete">
-        <button mat-button *ngIf="formGroup.value.path" matSuffix mat-icon-button aria-label="Clear" (click)="formGroup.controls['path'].patchValue('')">
-          <span class="fa fa-close"></span>
-        </button>
-        <mat-autocomplete #pathAutoComplete="matAutocomplete">
-          <mat-option *ngFor="let pathAndMeta of filteredPaths | async" [value]="pathAndMeta.path"  style="min-height: 48px; line-height: 1.15; height: auto; padding: 8px 16px; white-space: normal;">
-            <ng-container *ngIf="(pathAndMeta.meta != undefined)">
-              <span>{{pathAndMeta.path}}</span>
-              <br>
-              <small class="pathMetaDescription">{{pathAndMeta.meta.description}}</small>
-            </ng-container>
-            <ng-container *ngIf="(pathAndMeta.meta == undefined)">
-                {{pathAndMeta.path}}
-            </ng-container>
-          </mat-option>
-        </mat-autocomplete>
-        <mat-error *ngIf="formGroup.controls['path'].hasError('required')">
-          Path <strong>required</strong>
-        </mat-error>
-        <mat-error *ngIf="formGroup.controls['path'].hasError('requireMatch')">
-          Please select an existing path
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field class="sourceField" appearance="outline" floatLabel="always">
-        <mat-label>Data Source</mat-label>
-        <mat-select
-            placeholder="Select source"
-            formControlName="source"
-            Ripple
-            required>
-            <mat-option *ngFor="let source of availableSources" [value]="source">
-                {{source}}
-            </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field class="unitField" *ngIf="formGroup.value.pathType == 'number'" appearance="outline" floatLabel="always">
-        <mat-label>Display Format</mat-label>
-        <mat-select
-            placeholder="Select unit"
-            formControlName="convertUnitTo"
-            disableRipple
-            required>
-            <mat-optgroup *ngFor="let group of unitList.conversions" [label]="group.group">
-              <mat-option *ngFor="let unit of group.units" [value]="unit.measure">
-                {{unit.description}}
-              </mat-option>
-            </mat-optgroup>
-        </mat-select>
-      </mat-form-field>
-    </div>
-  </div>
-</div>
+<div [formGroup]="formGroup">
+  <div class="pathGroup" *ngIf="formGroup.value.isPathConfigurable">
+    <p>{{formGroup.value.description}}</p>
+    <div class="pathGroupFields">
+      <mat-form-field class="pathField" appearance="outline" floatLabel="always">
+        <mat-label>SignalK Path</mat-label>
+        <input type="text" matInput
+          placeholder="Select path (note dropdown limited to 50, type to use autocomplete)"
+          formControlName="path"
+          required
+          [matAutocomplete]="pathAutoComplete">
+        <button mat-button *ngIf="formGroup.value.path" matSuffix mat-icon-button aria-label="Clear" (click)="formGroup.controls['path'].patchValue('')">
+          <span class="fa-solid fa-close"></span>
+        </button>
+        <mat-autocomplete #pathAutoComplete="matAutocomplete">
+          <mat-option *ngFor="let pathAndMeta of filteredPaths | async" [value]="pathAndMeta.path"  style="min-height: 48px; line-height: 1.15; height: auto; padding: 8px 16px; white-space: normal;">
+            <ng-container *ngIf="(pathAndMeta.meta != undefined)">
+              <span>{{pathAndMeta.path}}</span>
+              <br>
+              <small class="pathMetaDescription">{{pathAndMeta.meta.description}}</small>
+            </ng-container>
+            <ng-container *ngIf="(pathAndMeta.meta == undefined)">
+                {{pathAndMeta.path}}
+            </ng-container>
+          </mat-option>
+        </mat-autocomplete>
+        <mat-error *ngIf="formGroup.controls['path'].hasError('required')">
+          Path <strong>required</strong>
+        </mat-error>
+        <mat-error *ngIf="formGroup.controls['path'].hasError('requireMatch')">
+          Please select an existing path
+        </mat-error>
+      </mat-form-field>
+      <mat-form-field class="sourceField" appearance="outline" floatLabel="always">
+        <mat-label>Data Source</mat-label>
+        <mat-select
+            placeholder="Select source"
+            formControlName="source"
+            Ripple
+            required>
+            <mat-option *ngFor="let source of availableSources" [value]="source">
+                {{source}}
+            </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field class="unitField" *ngIf="formGroup.value.pathType == 'number'" appearance="outline" floatLabel="always">
+        <mat-label>Display Format</mat-label>
+        <mat-select
+            placeholder="Select unit"
+            formControlName="convertUnitTo"
+            disableRipple
+            required>
+            <mat-optgroup *ngFor="let group of unitList.conversions" [label]="group.group">
+              <mat-option *ngFor="let unit of group.units" [value]="unit.measure">
+                {{unit.description}}
+              </mat-option>
+            </mat-optgroup>
+        </mat-select>
+      </mat-form-field>
+    </div>
+  </div>
+</div>

package/src/app/modal-path-selector/modal-path-selector.component.scss

@@ -1,39 +1,39 @@
-@import '~@angular/material/theming';
-
-@mixin modal-path-selector-theme($theme) {
-
-  $themeForeground: map-get($theme, foreground);
-
-    .pathMetaDescription {
-      font: small-caption;
-      color: mat-color($themeForeground, disabled-text);
-  }
-
-}
-
-.pathGroup {
-  display: inline-block;
-  width: calc(100%);
-}
-
-.pathGroupFields {
-  display: inline-block;
-  padding-left: 15px;
-  width: calc(100% - 30px);
-}
-
-.pathField {
-  display: inline-block;
-  width: 100%;
-}
-
-.sourceField {
-  display: inline-block;
-  width: calc(50% - 15px);
-  padding-right: 30px;
-}
-
-.unitField {
-  display: inline-block;
-  width: calc(50% - 15px);
-}
+@use '~@angular/material' as mat;
+
+@mixin modal-path-selector-theme($theme) {
+
+  $themeForeground: map-get($theme, foreground);
+
+    .pathMetaDescription {
+      font: small-caption;
+      color: mat.get-color-from-palette($themeForeground, disabled-text);
+  }
+
+}
+
+.pathGroup {
+  display: inline-block;
+  width: calc(100%);
+}
+
+.pathGroupFields {
+  display: inline-block;
+  padding-left: 15px;
+  width: calc(100% - 30px);
+}
+
+.pathField {
+  display: inline-block;
+  width: 100%;
+}
+
+.sourceField {
+  display: inline-block;
+  width: calc(50% - 15px);
+  padding-right: 30px;
+}
+
+.unitField {
+  display: inline-block;
+  width: calc(50% - 15px);
+}

package/src/app/modal-path-selector/modal-path-selector.component.spec.ts

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

package/src/app/modal-path-selector/modal-path-selector.component.ts

@@ -1,132 +1,132 @@
-import { Component, Input, OnInit, OnChanges, SimpleChange  } from '@angular/core';
-import { SignalKService } from '../signalk.service';
-import { IPathAndMetaObjects } from "../signalk-interfaces";
-import { UnitsService, IUnitGroup } from '../units.service';
-import { FormGroup, FormControl,Validators } from '@angular/forms';
-import { map, startWith } from 'rxjs/operators';
-import { Observable } from 'rxjs'
-
-
-@Component({
-  selector: 'modal-path-selector',
-  templateUrl: './modal-path-selector.component.html',
-  styleUrls: ['./modal-path-selector.component.scss']
-})
-export class ModalPathSelectorComponent implements OnInit, OnChanges {
-  //path control
-  @Input() formGroup: FormGroup;
-  @Input() filterSelfPaths: boolean;
-  availablePaths: IPathAndMetaObjects[];
-  filteredPaths: Observable<IPathAndMetaObjects[]> = new Observable;
-
-  //source control
-  availableSources: Array<string>;
-
-  //unit control
-  unitList: {default?: string, conversions?: IUnitGroup[] };
-  default: string;
-
-  ////require-match validation for path
-  requirePathMatch = (allPathsAndMeta: IPathAndMetaObjects[]) => {
-    return (control: FormControl) => {
-      const selection: any = control.value;
-      if (allPathsAndMeta.some(pm => pm.path === selection)) {
-        return null;
-      }
-      return { requireMatch: true };
-    }
-  }
-
-  constructor(
-    private signalKService: SignalKService,
-    private unitsService: UnitsService
-    ) { }
-
-  ngOnInit() {
-    this.unitList = {};
-    //disable formControl if path is empty - a new, not configured widget...
-    if (this.formGroup.value.path == null) {
-      this.formGroup.controls['source'].disable();
-      if (this.formGroup.value.pathType == "number") {
-        this.formGroup.controls['convertUnitTo'].disable();
-      }
-    }
-    //populate available paths
-    this.getPaths(this.filterSelfPaths);
-
-    //populate sources and units for this path (or just the current or default setting if we know nothing about the path)
-    this.updateSourcesAndUnits();
-
-    // autocomplete filtering
-    this.filteredPaths = this.formGroup.controls['path'].valueChanges.pipe(startWith(''), map(value => this.filterPaths(value)))
-
-
-
-    //subscribe to path formControl changes
-    this.formGroup.controls['path'].valueChanges.subscribe(pathValue => {
-
-      this.updateSourcesAndUnits();
-      try {
-        if (this.formGroup.controls['path'].valid) {
-          this.formGroup.controls['source'].enable();
-          this.formGroup.controls['source'].patchValue('default');
-          this.formGroup.controls['convertUnitTo'].enable();
-          this.formGroup.controls['convertUnitTo'].patchValue(this.unitList.default);
-        } else {
-          this.formGroup.controls['source'].disable();
-          this.formGroup.controls['convertUnitTo'].disable();
-        }
-      } catch (error) {
-        console.debug(error);
-      }
-    });
-
-  }
-
-  ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
-    //subscribe to filterSelfPaths formControl changes
-    if (changes['filterSelfPaths'] && !changes['filterSelfPaths'].firstChange) {
-      this.getPaths(this.filterSelfPaths);
-      this.formGroup.controls['path'].patchValue("");
-    }
- }
-
-  getPaths(isOnlySef: boolean) {
-    this.availablePaths = this.signalKService.getPathsAndMetaByType(this.formGroup.value.pathType, isOnlySef).sort();
-    // path validator (must be path in available) Need to reset validators when paths change
-    this.formGroup.controls['path'].setValidators([Validators.required]); //, this.requirePathMatch(this.availablePaths)]); // allow non-existing paths, maybe new path?
-  }
-
-  filterPaths( value: string ): IPathAndMetaObjects[] {
-    const filterValue = value.toLowerCase();
-    return this.availablePaths.filter(pathAndMetaObj => pathAndMetaObj.path.toLowerCase().includes(filterValue)).slice(0,50);
-  }
-  
-
-
-  updateSourcesAndUnits() {
-    if (this.formGroup.controls['path'].value == undefined || this.formGroup.controls['path'].value == null || this.formGroup.controls['path'].value == "") {
-      if (this.formGroup.value.source == undefined || this.formGroup.value.source == null || this.formGroup.value.source == "") {
-        this.availableSources = ['default'];
-      } else {
-        this.availableSources = ['default'].concat([this.formGroup.value.source]);
-      }
-    } else {
-      let pathObject = this.signalKService.getPathObject(this.formGroup.controls['path'].value);
-      if (pathObject != null) {
-        this.availableSources = ['default'].concat(Object.keys(pathObject.sources));
-      } else {
-        // the path cannot be found. It's probably coming from default fixed Widget config, or user changed server URL or SignalK server config. We need to disable the fields.
-        try {
-          this.formGroup.controls['source'].disable();
-          this.formGroup.controls['convertUnitTo'].disable();
-        } catch (error) {
-          console.debug(error);
-        }
-
-      }
-    }
-    this.unitList = this.signalKService.getConversionsForPath(this.formGroup.controls['path'].value); // array of Group or Groups: "angle", "speed", etc...
-  }
-
-}
+import { Component, Input, OnInit, OnChanges, SimpleChange  } from '@angular/core';
+import { SignalKService } from '../signalk.service';
+import { IPathAndMetaObjects } from "../signalk-interfaces";
+import { UnitsService, IUnitGroup } from '../units.service';
+import { FormGroup, FormControl,Validators } from '@angular/forms';
+import { map, startWith } from 'rxjs/operators';
+import { Observable } from 'rxjs'
+
+
+@Component({
+  selector: 'modal-path-selector',
+  templateUrl: './modal-path-selector.component.html',
+  styleUrls: ['./modal-path-selector.component.scss']
+})
+export class ModalPathSelectorComponent implements OnInit, OnChanges {
+  //path control
+  @Input() formGroup: FormGroup;
+  @Input() filterSelfPaths: boolean;
+  availablePaths: IPathAndMetaObjects[];
+  filteredPaths: Observable<IPathAndMetaObjects[]> = new Observable;
+
+  //source control
+  availableSources: Array<string>;
+
+  //unit control
+  unitList: {default?: string, conversions?: IUnitGroup[] };
+  default: string;
+
+  ////require-match validation for path
+  requirePathMatch = (allPathsAndMeta: IPathAndMetaObjects[]) => {
+    return (control: FormControl) => {
+      const selection: any = control.value;
+      if (allPathsAndMeta.some(pm => pm.path === selection)) {
+        return null;
+      }
+      return { requireMatch: true };
+    }
+  }
+
+  constructor(
+    private signalKService: SignalKService,
+    private unitsService: UnitsService
+    ) { }
+
+  ngOnInit() {
+    this.unitList = {};
+    //disable formControl if path is empty - a new, not configured widget...
+    if (this.formGroup.value.path == null) {
+      this.formGroup.controls['source'].disable();
+      if (this.formGroup.value.pathType == "number") {
+        this.formGroup.controls['convertUnitTo'].disable();
+      }
+    }
+    //populate available paths
+    this.getPaths(this.filterSelfPaths);
+
+    //populate sources and units for this path (or just the current or default setting if we know nothing about the path)
+    this.updateSourcesAndUnits();
+
+    // autocomplete filtering
+    this.filteredPaths = this.formGroup.controls['path'].valueChanges.pipe(startWith(''), map(value => this.filterPaths(value)))
+
+
+
+    //subscribe to path formControl changes
+    this.formGroup.controls['path'].valueChanges.subscribe(pathValue => {
+
+      this.updateSourcesAndUnits();
+      try {
+        if (this.formGroup.controls['path'].valid) {
+          this.formGroup.controls['source'].enable();
+          this.formGroup.controls['source'].patchValue('default');
+          this.formGroup.controls['convertUnitTo'].enable();
+          this.formGroup.controls['convertUnitTo'].patchValue(this.unitList.default);
+        } else {
+          this.formGroup.controls['source'].disable();
+          this.formGroup.controls['convertUnitTo'].disable();
+        }
+      } catch (error) {
+        console.debug(error);
+      }
+    });
+
+  }
+
+  ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
+    //subscribe to filterSelfPaths formControl changes
+    if (changes['filterSelfPaths'] && !changes['filterSelfPaths'].firstChange) {
+      this.getPaths(this.filterSelfPaths);
+      this.formGroup.controls['path'].patchValue("");
+    }
+ }
+
+  getPaths(isOnlySef: boolean) {
+    this.availablePaths = this.signalKService.getPathsAndMetaByType(this.formGroup.value.pathType, isOnlySef).sort();
+    // path validator (must be path in available) Need to reset validators when paths change
+    this.formGroup.controls['path'].setValidators([Validators.required]); //, this.requirePathMatch(this.availablePaths)]); // allow non-existing paths, maybe new path?
+  }
+
+  filterPaths( value: string ): IPathAndMetaObjects[] {
+    const filterValue = value.toLowerCase();
+    return this.availablePaths.filter(pathAndMetaObj => pathAndMetaObj.path.toLowerCase().includes(filterValue)).slice(0,50);
+  }
+  
+
+
+  updateSourcesAndUnits() {
+    if (this.formGroup.controls['path'].value == undefined || this.formGroup.controls['path'].value == null || this.formGroup.controls['path'].value == "") {
+      if (this.formGroup.value.source == undefined || this.formGroup.value.source == null || this.formGroup.value.source == "") {
+        this.availableSources = ['default'];
+      } else {
+        this.availableSources = ['default'].concat([this.formGroup.value.source]);
+      }
+    } else {
+      let pathObject = this.signalKService.getPathObject(this.formGroup.controls['path'].value);
+      if (pathObject != null) {
+        this.availableSources = ['default'].concat(Object.keys(pathObject.sources));
+      } else {
+        // the path cannot be found. It's probably coming from default fixed Widget config, or user changed server URL or SignalK server config. We need to disable the fields.
+        try {
+          this.formGroup.controls['source'].disable();
+          this.formGroup.controls['convertUnitTo'].disable();
+        } catch (error) {
+          console.debug(error);
+        }
+
+      }
+    }
+    this.unitList = this.signalKService.getConversionsForPath(this.formGroup.controls['path'].value); // array of Group or Groups: "angle", "speed", etc...
+  }
+
+}

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

@@ -1,33 +1,33 @@
-.warning {
-  color: red;
-}
-
-.full-width {
-    width: 100%;
-}
-.half-width {
-    width: 49%;
-}
-.mat-radio-button ~ .mat-radio-button {
-  margin-left: 16px;
-}
-
-.minField {
-  display: inline-block;
-  width: calc(50% - 15px);
-  padding-right: 30px;
-}
-
-.maxField {
-  display: inline-block;
-  width: calc(50% - 15px);
-}
-
-.radio-group {
-  display: flex;
-  flex-direction: column;
-  margin: 15px 0;
-}
-.radio-button {
-  margin-left: 16px;
+.warning {
+  color: red;
+}
+
+.full-width {
+    width: 100%;
+}
+.half-width {
+    width: 49%;
+}
+.mat-radio-button ~ .mat-radio-button {
+  margin-left: 16px;
+}
+
+.minField {
+  display: inline-block;
+  width: calc(50% - 15px);
+  padding-right: 30px;
+}
+
+.maxField {
+  display: inline-block;
+  width: calc(50% - 15px);
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+}
+.radio-button {
+  margin-left: 16px;
 }