Merge pull request #196 from mxtommy:refactoring-signalk-service

Refactoring widget service and performance improvements
mxtommy · Nov 3, 2023 · f14d61c · f14d61c
2 parents 15ca402 + fdaf58f
commit f14d61c
Show file tree

Hide file tree

Showing 200 changed files with 5,105 additions and 2,663 deletions.
diff --git a/angular.json b/angular.json
@@ -29,10 +29,8 @@
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "compare-versions",
+              "canvas-gauges",
               "rx-dom-html",
-              "chart.js",
-              "css-element-queries",
               "howler"
             ]
           },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,9 +22,9 @@
   "author": "Thomas St.Pierre <[email protected]>",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --configuration=dev",
-    "build": "ng build --base-href=/@mxtommy/kip/",
-    "build-npm": "ng build --configuration=production --base-href=/@mxtommy/kip/",
+    "start": "ng serve --configuration=dev --serve-path=/",
+    "build-dev": "ng build --configuration=dev --base-href=/@mxtommy/kip/",
+    "build-prod": "ng build --configuration=production --base-href=/@mxtommy/kip/",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -51,6 +51,7 @@
     "@angular/platform-server": "14.3.0",
     "@angular/router": "14.3.0",
     "@types/canvas-gauges": "^2.1.2",
+    "@types/howler": "^2.2.10",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.9",
     "@types/js-quantities": "^1.6.4",
@@ -60,12 +61,12 @@
     "angular-split": "^14.1.0",
     "canvas-gauges": "^2.1.7",
     "chart.js": "^3.5.1",
-    "chartjs-adapter-moment": "^1.0.0",
+    "chartjs-adapter-moment": "^1.0.1",
     "codelyzer": "^6.0.0",
     "compare-versions": "^5.0.1",
     "core-js": "^3.13.1",
     "hammerjs": "^2.0.8",
-    "howler": "^2.2.1",
+    "howler": "^2.2.4",
     "jasmine-core": "~4.0.1",
     "jasmine-spec-reporter": "~5.0.0",
     "js-quantities": "^1.8.0",
@@ -75,12 +76,12 @@
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.6.0",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
     "protractor": "~7.0.0",
     "rx-dom-html": "^7.0.3",
     "rxjs": "^7.5.7",
     "sass": "^1.49.9",
-    "screenfull": "^5.1.0",
+    "screenfull": "^6.0.2",
     "ts-node": "^8.10.2",
     "tslib": "^2.2.0",
     "tslint": "^6.1.3",

diff --git a/src/app/app-interfaces.ts b/src/app/app-interfaces.ts
@@ -1,11 +1,8 @@
 /*********************************************************************************
- * This file contains App (Kip) internal data interfaces.
+ * This file contains the most, but not all, common KIP App internal data types and
+ * struture interfaces. They are used by various services, componenets and widgets.
  *
- * Those interfaces describe most (only is reuse is needed) shared app data types
- * and data structures used in the application. They are use by various services,
- * componenets and widgets.
- *
- * For Signal K data interfaces (external data), see signalk-interfaces file.
+ * For external data interfaces, such as Signal K, see signalk-interfaces file.
  *********************************************************************************/
 
 import { ISignalKMetadata, State, Method } from "./signalk-interfaces";

diff --git a/src/app/app-settings.interfaces.ts b/src/app/app-settings.interfaces.ts
@@ -1,6 +1,6 @@
 import { IDataSet } from './data-set.service';
 import { ISplitSet } from './layout-splits.service';
-import { IWidget } from './widget-manager.service';
+import { IWidget } from './widgets-interface';
 import { IUnitDefaults } from './units.service';
 
 export interface IConnectionConfig {

diff --git a/src/app/app-settings.service.ts b/src/app/app-settings.service.ts
@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 
 import { IDataSet } from './data-set.service';
 import { ISplitSet } from './layout-splits.service';
-import { IWidget } from './widget-manager.service';
+import { IWidget } from './widgets-interface';
 import { IUnitDefaults } from './units.service';
 
 import { IConfig, IAppConfig, IConnectionConfig, IThemeConfig, IWidgetConfig, ILayoutConfig, IZonesConfig, INotificationConfig, IZone, ISignalKUrl } from "./app-settings.interfaces";

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -20,7 +20,7 @@
     background-color: mat.get-color-from-palette($foreground, divider);
   }
 
- }
+}
 
 .fullheight {
   height: 100%;

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -96,10 +96,8 @@ export class AppComponent implements OnInit, OnDestroy {
         });
 
         if (!this.appSettingsService.getNotificationConfig().sound.disableSound && !appNotification.silent) {
-          let sound = new Howl({
+          const sound = new Howl({
             src: ['assets/notification.mp3'],
-            autoUnlock: true,
-            autoSuspend: false,
             autoplay: true,
             preload: true,
             loop: false,
@@ -118,6 +116,8 @@ export class AppComponent implements OnInit, OnDestroy {
             }
           });
           sound.play();
+          Howler.autoUnlock = true;
+          Howler.autoSuspend = false;
         }
       }
     );

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -59,51 +59,51 @@ import { AuthenticationInterceptor } from "./authentication-interceptor";
 //Components
 import { AppComponent } from './app.component';
 import { AppHelpComponent } from './app-help/app-help.component';
-import { WidgetBlankComponent } from './widget-blank/widget-blank.component';
-import { WidgetUnknownComponent } from './widget-unknown/widget-unknown.component';
-import { WidgetTextGenericComponent } from './widget-text-generic/widget-text-generic.component';
-import { WidgetDateGenericComponent } from './widget-date-generic/widget-date-generic.component';
+import { WidgetBlankComponent } from './widgets/widget-blank/widget-blank.component';
+import { WidgetUnknownComponent } from './widgets/widget-unknown/widget-unknown.component';
+import { WidgetTextGenericComponent } from './widgets/widget-text-generic/widget-text-generic.component';
+import { WidgetDateGenericComponent } from './widgets/widget-date-generic/widget-date-generic.component';
 import { DynamicWidgetContainerComponent, DynamicWidgetContainerModalComponent } from './dynamic-widget-container/dynamic-widget-container.component';
-import { SettingsComponent } from './settings/settings.component';
+import { SettingsTabsComponent } from './settings/tabs/tabs.component';
 import { RootDisplayComponent } from './root-display/root-display.component';
-import { WidgetNumericComponent } from './widget-numeric/widget-numeric.component';
-import { SettingsDatasetsComponent, SettingsDatasetsModalComponent } from './settings-datasets/settings-datasets.component';
-import { SettingsSignalkComponent } from './settings-signalk/settings-signalk.component';
-import { WidgetHistoricalComponent } from './widget-historical/widget-historical.component';
+import { WidgetNumericComponent } from './widgets/widget-numeric/widget-numeric.component';
+import { SettingsDatasetsComponent, SettingsDatasetsModalComponent } from './settings/datasets/datasets.component';
+import { SettingsSignalkComponent } from './settings/signalk/signalk.component';
+import { WidgetHistoricalComponent } from './widgets/widget-historical/widget-historical.component';
 import { LayoutSplitComponent } from './layout-split/layout-split.component';
-import { WidgetWindComponent, } from './widget-wind/widget-wind.component';
-import { SvgWindComponent } from './svg-wind/svg-wind.component';
-import { WidgetGaugeComponent } from './widget-gauge/widget-gauge.component';
-import { GaugeSteelComponent } from './gauge-steel/gauge-steel.component';
-import { WidgetTutorialComponent } from './widget-tutorial/widget-tutorial.component';
+import { WidgetWindComponent, } from './widgets/widget-wind/widget-wind.component';
+import { SvgWindComponent } from './widgets/svg-wind/svg-wind.component';
+import { WidgetGaugeComponent } from './widgets/widget-gauge/widget-gauge.component';
+import { GaugeSteelComponent } from './widgets/gauge-steel/gauge-steel.component';
+import { WidgetTutorialComponent } from './widgets/widget-tutorial/widget-tutorial.component';
 import { ResetConfigComponent } from './reset-config/reset-config.component';
-import { WidgetButtonComponent } from './widget-button/widget-button.component';
-import { ModalWidgetComponent } from './modal-widget/modal-widget.component';
-import { WidgetSwitchComponent } from './widget-switch/widget-switch.component'
+import { WidgetButtonComponent } from './widgets/widget-button/widget-button.component';
+import { ModalWidgetConfigComponent } from './modal-widget-config/modal-widget-config.component';
+import { WidgetSwitchComponent } from './widgets/widget-switch/widget-switch.component'
 import { ModalPathSelectorComponent } from './modal-path-selector/modal-path-selector.component';
-import { SettingsUnitsComponent } from './settings-units/settings-units.component';
-import { SettingsZonesComponent, DialogNewZone, DialogEditZone } from './settings-zones/settings-zones.component';
-import { WidgetIframeComponent } from './widget-iframe/widget-iframe.component';
-import { SettingsConfigComponent } from './settings-config/settings-config.component';
-import { WidgetGaugeNgLinearComponent } from './widget-gauge-ng-linear/widget-gauge-ng-linear.component';
-import { WidgetGaugeNgRadialComponent } from './widget-gauge-ng-radial/widget-gauge-ng-radial.component';
+import { SettingsUnitsComponent } from './settings/units/units.component';
+import { SettingsZonesComponent, DialogNewZone, DialogEditZone } from './settings/zones/zones.component';
+import { WidgetIframeComponent } from './widgets/widget-iframe/widget-iframe.component';
+import { SettingsConfigComponent } from './settings/config/config.component';
+import { WidgetGaugeNgLinearComponent } from './widgets/widget-gauge-ng-linear/widget-gauge-ng-linear.component';
+import { WidgetGaugeNgRadialComponent } from './widgets/widget-gauge-ng-radial/widget-gauge-ng-radial.component';
 import { AlarmMenuComponent } from './alarm-menu/alarm-menu.component';
-import { WidgetAutopilotComponent } from './widget-autopilot/widget-autopilot.component';
-import { SvgAutopilotComponent } from './svg-autopilot/svg-autopilot.component';
-import { SettingsNotificationsComponent } from './settings-notifications/settings-notifications.component';
-import { SvgSimpleLinearGaugeComponent } from './svg-simple-linear-gauge/svg-simple-linear-gauge.component';
-import { WidgetSimpleLinearComponent } from './widget-simple-linear/widget-simple-linear.component';
+import { WidgetAutopilotComponent } from './widgets/widget-autopilot/widget-autopilot.component';
+import { SvgAutopilotComponent } from './widgets/svg-autopilot/svg-autopilot.component';
+import { SettingsNotificationsComponent } from './settings/notifications/notifications.component';
+import { SvgSimpleLinearGaugeComponent } from './widgets/svg-simple-linear-gauge/svg-simple-linear-gauge.component';
+import { WidgetSimpleLinearComponent } from './widgets/widget-simple-linear/widget-simple-linear.component';
 import { DataBrowserComponent } from './data-browser/data-browser.component';
 import { DataBrowserRowComponent, DialogUnitSelect } from './data-browser-row/data-browser-row.component';
 import { ModalUserCredentialComponent } from './modal-user-credential/modal-user-credential.component';
-import { WidgetRaceTimerComponent } from './widget-race-timer/widget-race-timer.component';
-import { WidgetLoginComponent } from './widget-login/widget-login.component';
+import { WidgetRaceTimerComponent } from './widgets/widget-race-timer/widget-race-timer.component';
+import { WidgetLoginComponent } from './widgets/widget-login/widget-login.component';
 
 
 const appRoutes: Routes = [
   { path: '', redirectTo: '/page/0', pathMatch: 'full' },
   { path: 'page/:id', component: RootDisplayComponent },
-  { path: 'settings', component: SettingsComponent },
+  { path: 'settings', component: SettingsTabsComponent },
   { path: 'help', component: AppHelpComponent },
   { path: 'data',  component: DataBrowserComponent },
   { path: 'reset', component: ResetConfigComponent },
@@ -130,7 +130,7 @@ const appNetworkInitializerFn = (appNetInitSvc: AppNetworkInitService) => {
     RootDisplayComponent,
     AppComponent,
     AppHelpComponent,
-    SettingsComponent,
+    SettingsTabsComponent,
     DynamicWidgetContainerComponent,
     DynamicWidgetContainerModalComponent,
     DialogUnitSelect,
@@ -171,13 +171,13 @@ const appNetworkInitializerFn = (appNetInitSvc: AppNetworkInitService) => {
     DialogEditZone,
     LayoutSplitComponent,
     ResetConfigComponent,
-    ModalWidgetComponent,
+    ModalWidgetConfigComponent,
     ModalPathSelectorComponent,
     ModalUserCredentialComponent,
     AlarmMenuComponent,
     SettingsNotificationsComponent,
     DataBrowserComponent,
-    DataBrowserRowComponent,
+    DataBrowserRowComponent
   ],
   imports: [
     BrowserModule,
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,7 @@ @@
         background-color: mat.get-color-from-palette($foreground, divider);
       }
-     }
+    }
     .fullheight {
       height: 100%;
@@ Expand Down @@