feat: new freeboard-sk widget (#343)

Author: godind

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mxtommy/kip",
-  "version": "2.8.3",
+  "version": "2.8.4-beta.1",
   "description": "An advanced and versatile marine instrumentation package to display Signal K data.",
   "license": "MIT",
   "author": {

src/app/core/services/widget-list.service.ts

@@ -17,6 +17,7 @@ import { WidgetAutopilotComponent } from "../../widgets/widget-autopilot/widget-
 import { WidgetSimpleLinearComponent } from "../../widgets/widget-simple-linear/widget-simple-linear.component";
 import { WidgetRaceTimerComponent } from '../../widgets/widget-race-timer/widget-race-timer.component';
 import { WidgetDataChartComponent } from '../../widgets/widget-data-chart/widget-data-chart.component';
+import { WidgetFreeboardskComponent } from '../../widgets/widget-freeboardsk/widget-freeboardsk.component';
 
 class widgetInfo {
   name: string;
@@ -37,11 +38,6 @@ export class WidgetListService {
 
   widgetList: widgetList = {
     'Basic': [
-      {
-        name: 'WidgetBlank',
-        componentName: WidgetBlankComponent,
-        description: 'Blank',
-      },
       {
         name: 'WidgetNumeric',
         componentName: WidgetNumericComponent,
@@ -62,10 +58,15 @@ export class WidgetListService {
         componentName: WidgetBooleanSwitchComponent,
         description: 'Boolean Control Panel',
       },
+      {
+        name: 'WidgetBlank',
+        componentName: WidgetBlankComponent,
+        description: 'Blank',
+      },
       {
         name: 'WidgetStateComponent',
         componentName: WidgetButtonComponent,
-        description: 'Boolean Button/Switch',
+        description: '(Deprecated) Boolean Button/Switch',
       }
     ],
     'Gauge': [
@@ -88,7 +89,7 @@ export class WidgetListService {
         name: 'WidgetGaugeComponent',
         componentName: WidgetGaugeComponent,
         description: "Linear & Radial Steel Style"
-      },
+      }
     ],
     'Component': [
       {
@@ -97,15 +98,20 @@ export class WidgetListService {
         description: 'Wind Steering Display',
       },
       {
-        name: 'WidgetDataChart',
-        componentName: WidgetDataChartComponent,
-        description: 'Data Chart',
+        name: 'WidgetFreeboardskComponent',
+        componentName: WidgetFreeboardskComponent,
+        description: 'Freeboard-SK Chart Plotter',
       },
       {
         name: 'WidgetAutopilotComponent',
         componentName: WidgetAutopilotComponent,
         description: 'Autopilot Head',
       },
+      {
+        name: 'WidgetDataChart',
+        componentName: WidgetDataChartComponent,
+        description: 'Data Chart',
+      },
       {
           name: 'WidgetRaceTimerComponent',
           componentName: WidgetRaceTimerComponent,
@@ -115,11 +121,6 @@ export class WidgetListService {
         name: 'WidgetIframeComponent',
         componentName: WidgetIframeComponent,
         description: 'Embed Webpage',
-      },
-      {
-        name: 'WidgetTutorial',
-        componentName: WidgetTutorialComponent,
-        description: 'Tutorial'
       }
     ]
   };

src/app/widgets/widget-freeboardsk/widget-freeboardsk.component.html

@@ -0,0 +1,5 @@
+<div class="iFrameWrapper">
+    <iframe name="freeboard-sk" width="100%" height="100%" frameborder="0"
+    [src]="widgetUrl | safe"
+    sandbox="allow-same-origin allow-scripts allow-forms"></iframe>
+</div>

src/app/widgets/widget-freeboardsk/widget-freeboardsk.component.scss

@@ -0,0 +1,5 @@
+.iFrameWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

src/app/widgets/widget-freeboardsk/widget-freeboardsk.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WidgetFreeboardskComponent } from './widget-freeboardsk.component';
+
+describe('WidgetFreeboardskComponent', () => {
+  let component: WidgetFreeboardskComponent;
+  let fixture: ComponentFixture<WidgetFreeboardskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [WidgetFreeboardskComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(WidgetFreeboardskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/widgets/widget-freeboardsk/widget-freeboardsk.component.ts

@@ -0,0 +1,35 @@
+import { AuthenticationService } from './../../core/services/authentication.service';
+import { AppSettingsService } from './../../core/services/app-settings.service';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { BaseWidgetComponent } from '../../base-widget/base-widget.component';
+import { SafePipe } from "../../core/pipes/safe.pipe";
+import { Subscription } from 'rxjs';
+
+@Component({
+    selector: 'app-widget-freeboardsk',
+    standalone: true,
+    templateUrl: './widget-freeboardsk.component.html',
+    styleUrl: './widget-freeboardsk.component.scss',
+    imports: [SafePipe]
+})
+export class WidgetFreeboardskComponent extends BaseWidgetComponent implements OnInit, OnDestroy {
+  public widgetUrl: string = null;
+  private authTokenSubscription: Subscription = null;
+
+  constructor(private appSettings: AppSettingsService, private auth: AuthenticationService) {
+    super();
+  }
+
+  ngOnInit(): void {
+    let loginToken: string = null;
+    this.authTokenSubscription = this.auth.authToken$.subscribe(AuthServiceToken => {
+        loginToken = AuthServiceToken.token;
+      });
+
+    this.widgetUrl = `${this.appSettings.signalkUrl.url}/@signalk/freeboard-sk/?token=${loginToken}`;
+  }
+
+  ngOnDestroy(): void {
+    this.authTokenSubscription?.unsubscribe();
+  }
+}