Merge pull request #193 from mxtommy:Widget-Frame-Refactoring

Widget-Frame-Refactoring

CHANGELOG.md

@@ -131,7 +131,7 @@
 ### V0.1.9
 * Updated NPM dependencies
 * Show connection lost overlay on closed websocket connection
-* Only resize Steelseries Gauges max 1 a second (helps in resizing)
+* Only resize Steelseries Gauges once a second (helps in resizing)
 * Add Frequency Units
 * Put Support! On/Off and Momentary support on boolean state
 * Request R/W token from Signal K Server

package.json

@@ -53,8 +53,7 @@
     "@types/canvas-gauges": "^2.1.2",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.9",
-    "@types/node": "^14.17.1",
-    "js-quantities": "^1.8.0",
+    "@types/node": "^20.8.6",
     "angular-resize-event": "^3.2.0",
     "angular-split": "^14.1.0",
     "canvas-gauges": "^2.1.7",
@@ -67,6 +66,7 @@
     "howler": "^2.2.1",
     "jasmine-core": "~4.0.1",
     "jasmine-spec-reporter": "~5.0.0",
+    "js-quantities": "^1.8.0",
     "karma": "~6.3.17",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~2.0.0",

public/index.html

@@ -10,10 +10,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <style>@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:root{--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}</style><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css"></noscript>
-<style>html,body,app-root{height:100%}body{margin:0}</style><link rel="stylesheet" href="styles.b1519e243e48ac49.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.b1519e243e48ac49.css"></noscript><link rel="manifest" href="manifest.json" crossorigin="use-credentials"></head>
+<style>html,body,app-root{height:100%}body{margin:0}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript><link rel="manifest" href="manifest.json" crossorigin="use-credentials"></head>
 
 <body>
   <app-root></app-root>
-<script src="runtime.e75056c32c37f59d.js" type="module"></script><script src="polyfills.cac86c860f8fa03d.js" type="module"></script><script src="main.ed2af16da600e1ef.js" type="module"></script>
+<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script>
 
 </body></html>

src/app/app.module.ts

@@ -63,7 +63,7 @@ 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 { UnitWindowComponent, UnitWindowModalComponent } from './unit-window/unit-window.component';
+import { DynamicWidgetContainerComponent, DynamicWidgetContainerModalComponent } from './dynamic-widget-container/dynamic-widget-container.component';
 import { SettingsComponent } from './settings/settings.component';
 import { RootDisplayComponent } from './root-display/root-display.component';
 import { WidgetNumericComponent } from './widget-numeric/widget-numeric.component';
@@ -131,8 +131,8 @@ const appNetworkInitializerFn = (appNetInitSvc: AppNetworkInitService) => {
     AppComponent,
     AppHelpComponent,
     SettingsComponent,
-    UnitWindowComponent,
-    UnitWindowModalComponent,
+    DynamicWidgetContainerComponent,
+    DynamicWidgetContainerModalComponent,
     DialogUnitSelect,
     DynamicWidgetDirective,
     WidgetUnknownComponent,
@@ -214,7 +214,7 @@ const appNetworkInitializerFn = (appNetInitSvc: AppNetworkInitService) => {
     MatSortModule,
   ],
   providers: [
-    // Imports Interceptor to capture http requests and incert authorization
+    // Imports Interceptor that capture http requests and inserts authorization
     // Token automatically in every httpClient outbound calls.
     // NOTE: it does not work for WebSockets. Only http/REST calls
     {

src/app/unit-window/unit-window.component.css → src/app/dynamic-widget-container/dynamic-widget-container.component.css

@@ -1,16 +1,9 @@
-.unitContainer {
+.dynamicWidgetContainer {
     position: relative;
     width: 100%;
     height: 100%;
 }
 
-.unitWindow {
-    position: absolute;
-    /*padding: 20px;*/
-    width: 100%;
-    height: 100%;
-}
-
 .mat-card {
   display: block;
   position: absolute !important;
@@ -22,12 +15,19 @@
   transition-property: none;
 }
 
-.unitMenu {
+.selectWidgetMenu {
     position: absolute;
     right: 5%;
     bottom: 5%;
 }
 
+.settingsButton {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  transform: translate(-50%);
+}
+
 .mat-select-trigger {
     min-width: 30px !important;
 }

src/app/dynamic-widget-container/dynamic-widget-container.component.html

@@ -0,0 +1,13 @@
+<div class="dynamicWidgetContainer">
+    <mat-card>
+      <ng-template dynamic-widget></ng-template>
+    </mat-card>
+  <div class="selectWidgetMenu">
+    <button *ngIf="unlockStatus" color="accent" mat-mini-fab class="selector-fab" (click)="selectWidget()"><span class="fa-solid fa-list"></span></button>
+  </div>
+  <div class="settingsButton" *ngIf="unlockStatus">
+    <button  color="accent" mat-mini-fab class="selector-fab" (click)="openWidgetSettings()">
+      <span class="fa-solid fa-cog"></span>
+    </button>
+  </div>
+</div>

src/app/unit-window/unit-window.component.spec.ts → src/app/dynamic-widget-container/dynamic-widget-container.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { UnitWindowComponent } from './unit-window.component';
+import { DynamicWidgetContainerComponent } from './dynamic-widget-container.component';
 
 describe('UnitWindowComponent', () => {
-  let component: UnitWindowComponent;
-  let fixture: ComponentFixture<UnitWindowComponent>;
+  let component: DynamicWidgetContainerComponent;
+  let fixture: ComponentFixture<DynamicWidgetContainerComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ UnitWindowComponent ]
+      declarations: [ DynamicWidgetContainerComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(UnitWindowComponent);
+    fixture = TestBed.createComponent(DynamicWidgetContainerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });