@mxtommy/kip 1.2.3 → 1.3.0

package/src/app/settings-signalk/settings-signalk.component.ts

@@ -1,174 +1,174 @@
-import { ViewChild, ElementRef, Component, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
-import Chart from 'chart.js/auto';
-
-import { AppSettingsService, SignalKToken, SignalKUrl } from '../app-settings.service';
-import { SignalKConnectionService, SignalKStatus } from '../signalk-connection.service';
-import { SignalkRequestsService } from '../signalk-requests.service';
-import { SignalKService } from '../signalk.service';
-
-
-
-@Component({
-  selector: 'app-settings-signalk',
-  templateUrl: './settings-signalk.component.html',
-  styleUrls: ['./settings-signalk.component.css']
-})
-export class SettingsSignalkComponent implements OnInit {
-
-  @ViewChild('lineGraph', {static: true, read: ElementRef}) lineGraph: ElementRef;
-
-  formSignalKURL: string;
-  formAuthToken: string;
-
-  signalKConnectionsStatus: SignalKStatus;
-  signalKConnectionsStatusSub: Subscription;
-
-  authTokenSub: Subscription;
-
-  updatesSecondSub: Subscription;
-  // updatesMinutesSub: Subscription;
-
-  lastSecondsUpdate: number; //number of updates from server in last second
-  updatesSeconds: number[]  = [];
-  // updatesMinutes: number[]  = [];
-
-  chartCtx;
-  chart = null;
-  textColor; // store the color of text for the graph...
-
-  // dynamics theme support
-  themeNameSub: Subscription = null;
-
-  constructor(
-    private AppSettingsService: AppSettingsService,
-    private SignalKService: SignalKService,
-    private SignalKConnectionService: SignalKConnectionService,
-    private SignalkRequestsService: SignalkRequestsService) { }
-
-  ngOnInit() {
-    // get SignalKurl
-    this.formSignalKURL = this.AppSettingsService.getSignalKURL().url;
-
-    // sub for R/W Token
-    this.authTokenSub = this.AppSettingsService.getSignalKTokenAsO().subscribe(token => {
-      this.formAuthToken = token.token;
-    });
-
-    // sub for signalk connection status
-    this.signalKConnectionsStatusSub = this.SignalKConnectionService.getSignalKConnectionsStatus().subscribe(status => {
-      this.signalKConnectionsStatus = status;
-    });
-
-    //get update performances
-    this.updatesSecondSub = this.SignalKService.getupdateStatsSecond().subscribe(newSecondsData => {
-      this.lastSecondsUpdate = newSecondsData[newSecondsData.length-1];
-      this.updatesSeconds = newSecondsData;
-      if (this.chart !== null) {
-        this.chart.config.data.datasets[0].data = newSecondsData;
-        this.chart.update('none');
-      }
-    });
-    /* this.updatesMinutesSub = this.SignalKService.getupdateStatMinute().subscribe(newMinutesData => {
-      this.updatesMinutes = newMinutesData;
-      if (this.chart !== null) {
-        this.chart.config.data.datasets[1].data = newMinutesData;
-        this.chart.update('none');
-      }
-    }); */
-
-    this.textColor = window.getComputedStyle(this.lineGraph.nativeElement).color;
-    this.chartCtx = this.lineGraph.nativeElement.getContext('2d');
-    this.startChart();
-    this.subscribeTheme();
-
-
-  }
-
-
-  ngOnDestroy() {
-    this.signalKConnectionsStatusSub.unsubscribe();
-    this.authTokenSub.unsubscribe();
-    // this.updatesMinutesSub.unsubscribe();
-    this.updatesSecondSub.unsubscribe();
-  }
-
-  updateSignalKURL() {
-    this.AppSettingsService.setSignalKURL({url: this.formSignalKURL, new: true});
-  }
-
-  requestAuth() {
-    this.SignalkRequestsService.requestAuth();
-  }
-
-  clearAuth() {
-    this.AppSettingsService.setSignalKToken({token: null, new: true});
-  }
-
-  
-  startChart() {
-    if (this.chart !== null) {
-        this.chart.destroy();
-    }
-  
-    this.chart = new Chart(this.chartCtx,{
-      type: 'line',
-      data: {
-          labels: Array.from(Array(60).keys()).reverse(),
-          datasets: [
-            {
-              label: "Updates Per Second",
-              data: this.updatesSeconds,
-              //fill: 'false',
-              borderColor: this.textColor
-            },
-            // {
-            //   label: "Per Minute",
-            //   data: this.updatesMinutes,
-            //   fill: 'false',
-            //   borderColor: this.textColor
-            // }            
-          ]
-      },
-      options: {
-       
-        scales: {
-          y: 
-            {
-              type: 'linear',
-              position: 'left',
-              beginAtZero: true,
-            },
-            // {
-            //   type: 'linear',
-            //   position: 'right',
-            //     //beginAtZero: true,
-            // }
-        }
-      }
-    });
-  }
-  
-  
-  
-  
-  // Subscribe to theme event
-  subscribeTheme() {
-    this.themeNameSub = this.AppSettingsService.getThemeNameAsO().subscribe(
-      themeChange => {
-      setTimeout(() => {   // need a delay so browser getComputedStyles has time to complete theme application.
-        this.textColor = window.getComputedStyle(this.lineGraph.nativeElement).color;
-        this.startChart()
-      }, 100);
-    })
-  }
-
-  unsubscribeTheme(){
-    if (this.themeNameSub !== null) {
-      this.themeNameSub.unsubscribe();
-      this.themeNameSub = null;
-    }
-  }
-
-
-}
+import { ViewChild, ElementRef, Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import Chart from 'chart.js/auto';
+
+import { AppSettingsService, SignalKToken, SignalKUrl } from '../app-settings.service';
+import { SignalKConnectionService, SignalKStatus } from '../signalk-connection.service';
+import { SignalkRequestsService } from '../signalk-requests.service';
+import { SignalKService } from '../signalk.service';
+
+
+
+@Component({
+  selector: 'app-settings-signalk',
+  templateUrl: './settings-signalk.component.html',
+  styleUrls: ['./settings-signalk.component.css']
+})
+export class SettingsSignalkComponent implements OnInit {
+
+  @ViewChild('lineGraph', {static: true, read: ElementRef}) lineGraph: ElementRef;
+
+  formSignalKURL: string;
+  formAuthToken: string;
+
+  signalKConnectionsStatus: SignalKStatus;
+  signalKConnectionsStatusSub: Subscription;
+
+  authTokenSub: Subscription;
+
+  updatesSecondSub: Subscription;
+  // updatesMinutesSub: Subscription;
+
+  lastSecondsUpdate: number; //number of updates from server in last second
+  updatesSeconds: number[]  = [];
+  // updatesMinutes: number[]  = [];
+
+  chartCtx;
+  chart = null;
+  textColor; // store the color of text for the graph...
+
+  // dynamics theme support
+  themeNameSub: Subscription = null;
+
+  constructor(
+    private AppSettingsService: AppSettingsService,
+    private SignalKService: SignalKService,
+    private SignalKConnectionService: SignalKConnectionService,
+    private SignalkRequestsService: SignalkRequestsService) { }
+
+  ngOnInit() {
+    // get SignalKurl
+    this.formSignalKURL = this.AppSettingsService.getSignalKURL().url;
+
+    // sub for R/W Token
+    this.authTokenSub = this.AppSettingsService.getSignalKTokenAsO().subscribe(token => {
+      this.formAuthToken = token.token;
+    });
+
+    // sub for signalk connection status
+    this.signalKConnectionsStatusSub = this.SignalKConnectionService.getSignalKConnectionsStatus().subscribe(status => {
+      this.signalKConnectionsStatus = status;
+    });
+
+    //get update performances
+    this.updatesSecondSub = this.SignalKService.getupdateStatsSecond().subscribe(newSecondsData => {
+      this.lastSecondsUpdate = newSecondsData[newSecondsData.length-1];
+      this.updatesSeconds = newSecondsData;
+      if (this.chart !== null) {
+        this.chart.config.data.datasets[0].data = newSecondsData;
+        this.chart.update('none');
+      }
+    });
+    /* this.updatesMinutesSub = this.SignalKService.getupdateStatMinute().subscribe(newMinutesData => {
+      this.updatesMinutes = newMinutesData;
+      if (this.chart !== null) {
+        this.chart.config.data.datasets[1].data = newMinutesData;
+        this.chart.update('none');
+      }
+    }); */
+
+    this.textColor = window.getComputedStyle(this.lineGraph.nativeElement).color;
+    this.chartCtx = this.lineGraph.nativeElement.getContext('2d');
+    this.startChart();
+    this.subscribeTheme();
+
+
+  }
+
+
+  ngOnDestroy() {
+    this.signalKConnectionsStatusSub.unsubscribe();
+    this.authTokenSub.unsubscribe();
+    // this.updatesMinutesSub.unsubscribe();
+    this.updatesSecondSub.unsubscribe();
+  }
+
+  updateSignalKURL() {
+    this.AppSettingsService.setSignalKURL({url: this.formSignalKURL, new: true});
+  }
+
+  requestAuth() {
+    this.SignalkRequestsService.requestAuth();
+  }
+
+  clearAuth() {
+    this.AppSettingsService.setSignalKToken({token: null, new: true});
+  }
+
+  
+  startChart() {
+    if (this.chart !== null) {
+        this.chart.destroy();
+    }
+  
+    this.chart = new Chart(this.chartCtx,{
+      type: 'line',
+      data: {
+          labels: Array.from(Array(60).keys()).reverse(),
+          datasets: [
+            {
+              label: "Updates Per Second",
+              data: this.updatesSeconds,
+              //fill: 'false',
+              borderColor: this.textColor
+            },
+            // {
+            //   label: "Per Minute",
+            //   data: this.updatesMinutes,
+            //   fill: 'false',
+            //   borderColor: this.textColor
+            // }            
+          ]
+      },
+      options: {
+       
+        scales: {
+          y: 
+            {
+              type: 'linear',
+              position: 'left',
+              beginAtZero: true,
+            },
+            // {
+            //   type: 'linear',
+            //   position: 'right',
+            //     //beginAtZero: true,
+            // }
+        }
+      }
+    });
+  }
+  
+  
+  
+  
+  // Subscribe to theme event
+  subscribeTheme() {
+    this.themeNameSub = this.AppSettingsService.getThemeNameAsO().subscribe(
+      themeChange => {
+      setTimeout(() => {   // need a delay so browser getComputedStyles has time to complete theme application.
+        this.textColor = window.getComputedStyle(this.lineGraph.nativeElement).color;
+        this.startChart()
+      }, 100);
+    })
+  }
+
+  unsubscribeTheme(){
+    if (this.themeNameSub !== null) {
+      this.themeNameSub.unsubscribe();
+      this.themeNameSub = null;
+    }
+  }
+
+
+}

package/src/app/settings-units/settings-units.component.css

@@ -1,4 +1,4 @@
-.UnitSettings {
-  /* width: 100%; */
-  padding-right: 30px;
-}
+.UnitSettings {
+  /* width: 100%; */
+  padding-right: 30px;
+}

package/src/app/settings-units/settings-units.component.html

@@ -1,19 +1,19 @@
-<form (ngSubmit)="submitConfig()" [formGroup]="formUnitMaster">
-  <mat-card>
-    <mat-card-header>
-      <mat-card-title>Application Default Units</mat-card-title>
-      <mat-card-subtitle>Set the default units preferences per types of unit groups. The values will be automatically converted for display.</mat-card-subtitle>
-    </mat-card-header>
-    <mat-form-field class="UnitSettings" *ngFor="let unitType of defaultUnits | keyvalue">
-      <mat-select
-        [placeholder] = "unitType.key"
-        [formControlName] = "unitType.key"
-        >
-        <mat-option *ngFor="let unit of groupUnits[unitType.key]" [value]="unit.measure" >{{ unit.description }}</mat-option>
-      </mat-select>
-    </mat-form-field>
-    <mat-card-actions align="end">
-      <button mat-raised-button color="accent" type="submit" [disabled]="!formUnitMaster.valid">Save</button>
-    </mat-card-actions>
-  </mat-card>
-</form>
+<form (ngSubmit)="submitConfig()" [formGroup]="formUnitMaster">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Application Default Units</mat-card-title>
+      <mat-card-subtitle>Set the default units preferences per types of unit groups. The values will be automatically converted for display.</mat-card-subtitle>
+    </mat-card-header>
+    <mat-form-field class="UnitSettings" *ngFor="let unitType of defaultUnits | keyvalue">
+      <mat-select
+        [placeholder] = "unitType.key"
+        [formControlName] = "unitType.key"
+        >
+        <mat-option *ngFor="let unit of groupUnits[unitType.key]" [value]="unit.measure" >{{ unit.description }}</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-card-actions align="end">
+      <button mat-raised-button color="accent" type="submit" [disabled]="!formUnitMaster.valid">Save</button>
+    </mat-card-actions>
+  </mat-card>
+</form>

package/src/app/settings-units/settings-units.component.spec.ts

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

package/src/app/settings-units/settings-units.component.ts

@@ -1,62 +1,62 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl }    from '@angular/forms';
-import { AppSettingsService } from '../app-settings.service';
-import { NotificationsService } from '../notifications.service';
-
-import { IUnitDefaults, UnitsService, IUnit } from '../units.service';
-
-@Component({
-  selector: 'app-settings-units',
-  templateUrl: './settings-units.component.html',
-  styleUrls: ['./settings-units.component.css']
-})
-export class SettingsUnitsComponent implements OnInit {
-
-  formUnitMaster: FormGroup;
-
-  groupUnits: {[key: string]: IUnit}[] = [];
-  defaultUnits: IUnitDefaults;
-
-
-
-  constructor(
-    private UnitsService: UnitsService,
-    private appSettingsService: AppSettingsService,
-    private notificationsService: NotificationsService,
-    ) { }
-
-  ngOnInit() {
-
-    this.defaultUnits = this.appSettingsService.getDefaultUnits();
-
-    //format unit group data a bit better for consumption in template
-    let unitGroupsRaw = this.UnitsService.getConversions();
-
-    for (let gindex = 0; gindex < unitGroupsRaw.length; gindex++) {
-      const unitGroup = unitGroupsRaw[gindex];
-      let units = [];
-
-      for (let index = 0; index < unitGroup.units.length; index++) {
-        const unit = unitGroup.units[index];
-        units.push(unit);
-      }
-      this.groupUnits[unitGroup.group] = units;
-    }
-
-    //generate formGroup
-    let groups = new FormGroup({});
-    Object.keys(this.defaultUnits).forEach(key => {
-      groups.addControl(key, new FormControl(this.defaultUnits[key]));
-    });
-
-    this.formUnitMaster = groups;
-    this.formUnitMaster.updateValueAndValidity();
-    //console.log(this.formUnitMaster);
-  }
-
-  submitConfig() {
-    this.appSettingsService.setDefaultUnits(this.formUnitMaster.value);
-    this.notificationsService.sendSnackbarNotification("Default units configuration saved", 5000);
-  }
-
-}
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl }    from '@angular/forms';
+import { AppSettingsService } from '../app-settings.service';
+import { NotificationsService } from '../notifications.service';
+
+import { IUnitDefaults, UnitsService, IUnit } from '../units.service';
+
+@Component({
+  selector: 'app-settings-units',
+  templateUrl: './settings-units.component.html',
+  styleUrls: ['./settings-units.component.css']
+})
+export class SettingsUnitsComponent implements OnInit {
+
+  formUnitMaster: FormGroup;
+
+  groupUnits: {[key: string]: IUnit}[] = [];
+  defaultUnits: IUnitDefaults;
+
+
+
+  constructor(
+    private UnitsService: UnitsService,
+    private appSettingsService: AppSettingsService,
+    private notificationsService: NotificationsService,
+    ) { }
+
+  ngOnInit() {
+
+    this.defaultUnits = this.appSettingsService.getDefaultUnits();
+
+    //format unit group data a bit better for consumption in template
+    let unitGroupsRaw = this.UnitsService.getConversions();
+
+    for (let gindex = 0; gindex < unitGroupsRaw.length; gindex++) {
+      const unitGroup = unitGroupsRaw[gindex];
+      let units = [];
+
+      for (let index = 0; index < unitGroup.units.length; index++) {
+        const unit = unitGroup.units[index];
+        units.push(unit);
+      }
+      this.groupUnits[unitGroup.group] = units;
+    }
+
+    //generate formGroup
+    let groups = new FormGroup({});
+    Object.keys(this.defaultUnits).forEach(key => {
+      groups.addControl(key, new FormControl(this.defaultUnits[key]));
+    });
+
+    this.formUnitMaster = groups;
+    this.formUnitMaster.updateValueAndValidity();
+    //console.log(this.formUnitMaster);
+  }
+
+  submitConfig() {
+    this.appSettingsService.setDefaultUnits(this.formUnitMaster.value);
+    this.notificationsService.sendSnackbarNotification("Default units configuration saved", 5000);
+  }
+
+}

package/src/app/settings-zones/settings-zones.component.css

@@ -1,22 +1,22 @@
-.full-display {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  z-index: 500;
-}
-
-.full-width {
-  width: 100%;
-}
-
-
-.small-button {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  min-height: 20px;
-  vertical-align: top;
-  font-size: 14px;
-  padding: 0 0;
-  margin: 0;
+.full-display {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 500;
+}
+
+.full-width {
+  width: 100%;
+}
+
+
+.small-button {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  min-height: 20px;
+  vertical-align: top;
+  font-size: 14px;
+  padding: 0 0;
+  margin: 0;
 }