Fix - widget numerical event style change support

src/app/modal-widget/modal-widget.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit,  Inject } from '@angular/core';
-import { FormGroup, FormControl }    from '@angular/forms';
+import { FormGroup, FormControl, Validators }    from '@angular/forms';
 import { MatDialogRef,MAT_DIALOG_DATA } from '@angular/material';
 
 import { DataSetService, IDataSet } from '../data-set.service';
@@ -16,14 +16,11 @@ export class ModalWidgetComponent implements OnInit {
   formMaster: FormGroup;
   availableDataSets: IDataSet[];
 
-
-
   constructor(
     public dialogRef:MatDialogRef<ModalWidgetComponent>,
     private DataSetService: DataSetService,
-    @Inject(MAT_DIALOG_DATA) public widgetConfig: IWidgetConfig) { }
-
-
+    @Inject(MAT_DIALOG_DATA) public widgetConfig: IWidgetConfig
+  ) { }
 
   ngOnInit() {
     //load datasets
@@ -33,25 +30,30 @@ export class ModalWidgetComponent implements OnInit {
     this.formMaster.updateValueAndValidity();
   }
 
-
   generateFormGroups(formData: Object): FormGroup {
     let groups = new FormGroup({});
     Object.keys(formData).forEach (key => {
       if ( (typeof(formData[key]) == 'object') && (formData[key] !== null) ) {
         groups.addControl(key, this.generateFormGroups(formData[key]));
       } else {
-        groups.addControl(key, new FormControl(formData[key]));
+        // Use switch in case we need more then Required form validator at some point.
+        switch (key) {
+          case "path": groups.addControl(key, new FormControl(formData[key], Validators.required));
+            break;
+
+          case "dataSetUUID": groups.addControl(key, new FormControl(formData[key], Validators.required));
+          break;
+
+          default: groups.addControl(key, new FormControl(formData[key]));
+            break;
+        }
       }
 
     });
     return groups;
   }
 
-
   submitConfig() {
     this.dialogRef.close(this.formMaster.value);
   }
-
-
-
 }

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

@@ -1,13 +1,14 @@
-import { Component, Input, OnInit, OnDestroy, Inject, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { MatDialog,MatDialogRef,MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialog } from '@angular/material';
 
 import { ModalWidgetComponent } from '../modal-widget/modal-widget.component';
-import { SignalKService, pathObject } from '../signalk.service';
+import { SignalKService } from '../signalk.service';
 import { WidgetManagerService, IWidget, IWidgetConfig } from '../widget-manager.service';
 import { UnitsService } from '../units.service';
+import { AppSettingsService } from '../app-settings.service';
 import { isNumeric } from 'rxjs/util/isNumeric';
-import { isNull } from '@angular/compiler/src/output/output_ast';
+
 
 const defaultConfig: IWidgetConfig = {
   widgetLabel: null,
@@ -54,18 +55,22 @@ export class WidgetNumericComponent implements OnInit, OnDestroy, AfterViewCheck
   valueFontSize: number = 1;
   minMaxFontSize: number = 1;
 
-
   //subs
   valueSub: Subscription = null;
 
+  // dynamics theme support
+  themeNameSub: Subscription = null;
+
   canvasCtx;
   canvasBGCtx;
 
   constructor(
     public dialog:MatDialog,
     private SignalKService: SignalKService,
     private WidgetManagerService: WidgetManagerService,
-    private UnitsService: UnitsService) {
+    private UnitsService: UnitsService,
+    private AppSettingsService: AppSettingsService, // need for theme change subscription
+    ) {
   }
 
   ngOnInit() {
@@ -78,6 +83,7 @@ export class WidgetNumericComponent implements OnInit, OnDestroy, AfterViewCheck
       this.config = this.activeWidget.config;
     }
     this.subscribePath();
+    this.subscribeTheme();
 
     this.canvasCtx = this.canvasEl.nativeElement.getContext('2d');
     this.canvasBGCtx = this.canvasBG.nativeElement.getContext('2d');
@@ -86,6 +92,7 @@ export class WidgetNumericComponent implements OnInit, OnDestroy, AfterViewCheck
 
   ngOnDestroy() {
     this.unsubscribePath();
+    this.unsubscribeTheme();
   }
 
   ngAfterViewChecked() {
@@ -136,6 +143,24 @@ export class WidgetNumericComponent implements OnInit, OnDestroy, AfterViewCheck
     }
   }
 
+// 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.drawTitle();
+      this.drawUnit();
+     }, 100);
+  })
+}
+
+unsubscribeTheme(){
+  if (this.themeNameSub !== null) {
+    this.themeNameSub.unsubscribe();
+    this.themeNameSub = null;
+  }
+}
+
   openWidgetSettings() {
 
     let dialogRef = this.dialog.open(ModalWidgetComponent, {
@@ -153,13 +178,8 @@ export class WidgetNumericComponent implements OnInit, OnDestroy, AfterViewCheck
         this.subscribePath();
         this.updateCanvas();
         this.updateCanvasBG();
-
       }
-
     });
-
-
-
   }
 
 /* ******************************************************************************************* */
@@ -353,8 +373,4 @@ export class WidgetNumericComponent implements OnInit, OnDestroy, AfterViewCheck
     return strVal;
   }
 
-
-
-
-
 }