@mxtommy/kip 1.2.3 → 1.3.0

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

@@ -1,98 +1,98 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-import { SignalKService } from '../signalk.service';
-import { IPathObject } from "../signalk-interfaces";
-import { DataSetService, IDataSet } from '../data-set.service';
-
-interface settingsForm {
-  selectedPath: string;
-  selectedSource: string;
-  interval: number;
-  dataPoints: number;
-};
-
-@Component({
-  selector: 'app-settings-datasets',
-  templateUrl: './settings-datasets.component.html',
-  styleUrls: ['./settings-datasets.component.scss']
-})
-export class SettingsDatasetsComponent implements OnInit {
-
-  selectedDataSet: string;
-  dataSets: IDataSet[];
-
-  constructor(
-    public dialog: MatDialog,
-    private SignalKService: SignalKService,
-    private DataSetService: DataSetService
-    ) { }
-
-  ngOnInit() {
-    this.loadDataSets();
-  }
-
-  loadDataSets() {
-    this.dataSets = this.DataSetService.getDataSets();
-  }
-
-  openNewDataSetModal() {
-    let dialogRef = this.dialog.open(SettingsDatasetsModalComponent, {
-      width: '600px'
-    });
-    dialogRef.afterClosed().subscribe(result => { this.loadDataSets() });
-  }
-
-
-  deleteDataSet(uuid:string) {
-    this.DataSetService.deleteDataSet(uuid); //TODO, bit bruteforce, can cause errors cause dataset deleted before subscrioptions canceled
-    this.loadDataSets();
-  }
-
-}
-
-@Component({
-  selector: 'app-settings-datasets-modal',
-  templateUrl: './settings-datasets.modal.html',
-  styleUrls: ['./settings-datasets.component.scss']
-})
-export class SettingsDatasetsModalComponent implements OnInit {
-
-  settingsForm: settingsForm = {
-    selectedPath: null,
-    selectedSource: null,
-    interval: 1,
-    dataPoints: 30
-  };
-
-  availablePaths: string[] = [];
-  availableSources: string[] = [];
-  filterSelfPaths:boolean = true;
-
-  constructor(
-    private SignalKService: SignalKService,
-    private DataSetService: DataSetService,
-    public dialogRef:MatDialogRef<SettingsDatasetsModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-    ) { }
-
-  ngOnInit() {
-    this.availablePaths = this.SignalKService.getPathsByType('number').sort();
-  }
-
-  settingsFormUpdatePath() { // called when we choose a new path. resets the rest with default info of this path
-    let pathObject = this.SignalKService.getPathObject(this.settingsForm.selectedPath);
-    if (pathObject === null) { return; }
-    this.availableSources = ['default'].concat(Object.keys(pathObject.sources));
-    this.settingsForm.selectedSource = 'default';
-  }
-
-  addNewDataSet() {
-    this.DataSetService.addDataSet(
-      this.settingsForm.selectedPath,
-      this.settingsForm.selectedSource,
-      this.settingsForm.interval,
-      this.settingsForm.dataPoints);
-    this.dialogRef.close();
-  }
-}
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+import { SignalKService } from '../signalk.service';
+import { IPathObject } from "../signalk-interfaces";
+import { DataSetService, IDataSet } from '../data-set.service';
+
+interface settingsForm {
+  selectedPath: string;
+  selectedSource: string;
+  interval: number;
+  dataPoints: number;
+};
+
+@Component({
+  selector: 'app-settings-datasets',
+  templateUrl: './settings-datasets.component.html',
+  styleUrls: ['./settings-datasets.component.scss']
+})
+export class SettingsDatasetsComponent implements OnInit {
+
+  selectedDataSet: string;
+  dataSets: IDataSet[];
+
+  constructor(
+    public dialog: MatDialog,
+    private SignalKService: SignalKService,
+    private DataSetService: DataSetService
+    ) { }
+
+  ngOnInit() {
+    this.loadDataSets();
+  }
+
+  loadDataSets() {
+    this.dataSets = this.DataSetService.getDataSets();
+  }
+
+  openNewDataSetModal() {
+    let dialogRef = this.dialog.open(SettingsDatasetsModalComponent, {
+      width: '600px'
+    });
+    dialogRef.afterClosed().subscribe(result => { this.loadDataSets() });
+  }
+
+
+  deleteDataSet(uuid:string) {
+    this.DataSetService.deleteDataSet(uuid); //TODO, bit bruteforce, can cause errors cause dataset deleted before subscrioptions canceled
+    this.loadDataSets();
+  }
+
+}
+
+@Component({
+  selector: 'app-settings-datasets-modal',
+  templateUrl: './settings-datasets.modal.html',
+  styleUrls: ['./settings-datasets.component.scss']
+})
+export class SettingsDatasetsModalComponent implements OnInit {
+
+  settingsForm: settingsForm = {
+    selectedPath: null,
+    selectedSource: null,
+    interval: 1,
+    dataPoints: 30
+  };
+
+  availablePaths: string[] = [];
+  availableSources: string[] = [];
+  filterSelfPaths:boolean = true;
+
+  constructor(
+    private SignalKService: SignalKService,
+    private DataSetService: DataSetService,
+    public dialogRef:MatDialogRef<SettingsDatasetsModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+    ) { }
+
+  ngOnInit() {
+    this.availablePaths = this.SignalKService.getPathsByType('number').sort();
+  }
+
+  settingsFormUpdatePath() { // called when we choose a new path. resets the rest with default info of this path
+    let pathObject = this.SignalKService.getPathObject(this.settingsForm.selectedPath);
+    if (pathObject === null) { return; }
+    this.availableSources = ['default'].concat(Object.keys(pathObject.sources));
+    this.settingsForm.selectedSource = 'default';
+  }
+
+  addNewDataSet() {
+    this.DataSetService.addDataSet(
+      this.settingsForm.selectedPath,
+      this.settingsForm.selectedSource,
+      this.settingsForm.interval,
+      this.settingsForm.dataPoints);
+    this.dialogRef.close();
+  }
+}

package/src/app/settings-datasets/settings-datasets.modal.html

@@ -1,54 +1,54 @@
-<h2 mat-dialog-title>New Dataset:</h2>
-<mat-dialog-content>
-    <form name="newDataSetForm" (ngSubmit)="addNewDataSet()" #newDataSetForm="ngForm">
-        <mat-horizontal-stepper>
-            <mat-step label="Source">
-                <div class="tab-content">
-                    <mat-form-field class="full-width">
-                        <mat-select
-                            placeholder="SignalK Path"
-                            [(ngModel)]="settingsForm.selectedPath"
-                            name="selectedPath"
-                            (ngModelChange)="settingsFormUpdatePath()"
-                            required>
-                            <mat-option *ngFor="let path of (availablePaths | filterSelf: filterSelfPaths)" [value]="path">
-                                {{path}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                   <mat-checkbox
-                        [(ngModel)]="filterSelfPaths"
-                        name="filterSelfPaths"
-                        >
-                        Restric to own vessel
-                    </mat-checkbox>
-                    <mat-form-field  class="full-width">
-                        <mat-select
-                            placeholder="Source"
-                            [(ngModel)]="settingsForm.selectedSource"
-                            name="selectedSource">
-                            <mat-option *ngFor="let source of availableSources" [value]="source">
-                                {{source}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-
-                </div>
-                <button type="button" mat-raised-button color="accent" matStepperNext [disabled]="!settingsForm.selectedPath">Next</button>
-            </mat-step>
-            <mat-step label="Data Set">
-                <div class="tab-content">
-                    <mat-form-field class="full-width">
-                        <input matInput placeholder="Interval(seconds)" type=number name="interval" [(ngModel)]="settingsForm.interval">
-                    </mat-form-field>
-                    <mat-form-field class="full-width">
-                        <input matInput placeholder="Data Points" type="number" name="decimals" [(ngModel)]="settingsForm.dataPoints">
-                    </mat-form-field>
-                    <br>
-                    <button type="button" mat-raised-button matStepperPrevious>Back</button>
-                    <button mat-raised-button color="accent" type="submit">Save</button>
-                </div>
-            </mat-step>
-        </mat-horizontal-stepper>
-    </form>
-</mat-dialog-content>
+<h2 mat-dialog-title>New Dataset:</h2>
+<mat-dialog-content>
+    <form name="newDataSetForm" (ngSubmit)="addNewDataSet()" #newDataSetForm="ngForm">
+        <mat-horizontal-stepper>
+            <mat-step label="Source">
+                <div class="tab-content">
+                    <mat-form-field class="full-width">
+                        <mat-select
+                            placeholder="SignalK Path"
+                            [(ngModel)]="settingsForm.selectedPath"
+                            name="selectedPath"
+                            (ngModelChange)="settingsFormUpdatePath()"
+                            required>
+                            <mat-option *ngFor="let path of (availablePaths | filterSelf: filterSelfPaths)" [value]="path">
+                                {{path}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                   <mat-checkbox
+                        [(ngModel)]="filterSelfPaths"
+                        name="filterSelfPaths"
+                        >
+                        Restric to own vessel
+                    </mat-checkbox>
+                    <mat-form-field  class="full-width">
+                        <mat-select
+                            placeholder="Source"
+                            [(ngModel)]="settingsForm.selectedSource"
+                            name="selectedSource">
+                            <mat-option *ngFor="let source of availableSources" [value]="source">
+                                {{source}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+
+                </div>
+                <button type="button" mat-raised-button color="accent" matStepperNext [disabled]="!settingsForm.selectedPath">Next</button>
+            </mat-step>
+            <mat-step label="Data Set">
+                <div class="tab-content">
+                    <mat-form-field class="full-width">
+                        <input matInput placeholder="Interval(seconds)" type=number name="interval" [(ngModel)]="settingsForm.interval">
+                    </mat-form-field>
+                    <mat-form-field class="full-width">
+                        <input matInput placeholder="Data Points" type="number" name="decimals" [(ngModel)]="settingsForm.dataPoints">
+                    </mat-form-field>
+                    <br>
+                    <button type="button" mat-raised-button matStepperPrevious>Back</button>
+                    <button mat-raised-button color="accent" type="submit">Save</button>
+                </div>
+            </mat-step>
+        </mat-horizontal-stepper>
+    </form>
+</mat-dialog-content>

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

@@ -1,65 +1,65 @@
-<form name="notificationSetting">
-  <mat-card>
-    <mat-card-header>
-      <mat-card-title>Server Notifications</mat-card-title>
-      <mat-card-subtitle>Notifications are a special type of data sent from SignalK and displayed in the notification menu. They are meant to alert or inform operators. Set server notification preferences such as types of messages to display and audio prompts.</mat-card-subtitle>
-    </mat-card-header>
-    <mat-slide-toggle name="disableNotifications" [(ngModel)]="notificationConfig.disableNotifications" [ngModelOptions]="{standalone: true}">Disable All Notifications</mat-slide-toggle>
-    <mat-accordion>
-      <mat-expansion-panel expanded="true">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            Messages
-          </mat-panel-title>
-          <mat-panel-description>
-            Control what messages the server will send
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <!-- <h4>Security</h4>
-        <mat-checkbox [(ngModel)]="notificationConfig.security.disableSecurity" [ngModelOptions]="{standalone: true}">Disable all Security notifications</mat-checkbox> -->
-        <!-- <h4>Devices</h4> -->
-        <!-- <mat-checkbox [(ngModel)]="notificationConfig.devices.disableDevices" [ngModelOptions]="{standalone: true}">Disable all Devices notifications</mat-checkbox>
-        <br/> -->
-        <mat-checkbox [(ngModel)]="notificationConfig.devices.showNormalState" [ngModelOptions]="{standalone: true}">Show Devices Informational notifications</mat-checkbox>
-      </mat-expansion-panel>
-
-      <!-- <mat-expansion-panel expanded="false">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            Menu
-          </mat-panel-title>
-          <mat-panel-description>
-            Configure notification menu display options
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <h3>Display</h3>
-        <mat-checkbox [(ngModel)]="notificationConfig.menuGrouping" [ngModelOptions]="{standalone: true}">Groupe notifications by source types</mat-checkbox>
-      </mat-expansion-panel> -->
-
-      <mat-expansion-panel expanded="false">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            Audio
-          </mat-panel-title>
-          <mat-panel-description>
-            Configure sound options
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.disableSound" [ngModelOptions]="{standalone: true}">Disable All Audio notification</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteNormal" [ngModelOptions]="{standalone: true}">Disable <b>Information</b> notifications audio</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteAlert" [ngModelOptions]="{standalone: true}">Disable <b>Alert Severity</b> notifications audio</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteWarning" [ngModelOptions]="{standalone: true}">Disable <b>Warning</b> notifications audio</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteAlarm" [ngModelOptions]="{standalone: true}">Disable <b>Alarm Severity</b> notifications audio</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteEmergency" [ngModelOptions]="{standalone: true}">Disable <b>Emergency Severity</b> notifications audio</mat-checkbox>
-      </mat-expansion-panel>
-    </mat-accordion>
-    <mat-card-actions align="end">
-      <button mat-raised-button color="accent" (click)='saveNotificationsSettings()'>Save</button>
-    </mat-card-actions>
-  </mat-card>
-</form>
+<form name="notificationSetting">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Server Notifications</mat-card-title>
+      <mat-card-subtitle>Notifications are a special type of data sent from SignalK and displayed in the notification menu. They are meant to alert or inform operators. Set server notification preferences such as types of messages to display and audio prompts.</mat-card-subtitle>
+    </mat-card-header>
+    <mat-slide-toggle name="disableNotifications" [(ngModel)]="notificationConfig.disableNotifications" [ngModelOptions]="{standalone: true}">Disable All Notifications</mat-slide-toggle>
+    <mat-accordion>
+      <mat-expansion-panel expanded="true">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            Messages
+          </mat-panel-title>
+          <mat-panel-description>
+            Control what messages the server will send
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <!-- <h4>Security</h4>
+        <mat-checkbox [(ngModel)]="notificationConfig.security.disableSecurity" [ngModelOptions]="{standalone: true}">Disable all Security notifications</mat-checkbox> -->
+        <!-- <h4>Devices</h4> -->
+        <!-- <mat-checkbox [(ngModel)]="notificationConfig.devices.disableDevices" [ngModelOptions]="{standalone: true}">Disable all Devices notifications</mat-checkbox>
+        <br/> -->
+        <mat-checkbox [(ngModel)]="notificationConfig.devices.showNormalState" [ngModelOptions]="{standalone: true}">Show Devices Informational notifications</mat-checkbox>
+      </mat-expansion-panel>
+
+      <!-- <mat-expansion-panel expanded="false">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            Menu
+          </mat-panel-title>
+          <mat-panel-description>
+            Configure notification menu display options
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <h3>Display</h3>
+        <mat-checkbox [(ngModel)]="notificationConfig.menuGrouping" [ngModelOptions]="{standalone: true}">Groupe notifications by source types</mat-checkbox>
+      </mat-expansion-panel> -->
+
+      <mat-expansion-panel expanded="false">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            Audio
+          </mat-panel-title>
+          <mat-panel-description>
+            Configure sound options
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <mat-checkbox [(ngModel)]="notificationConfig.sound.disableSound" [ngModelOptions]="{standalone: true}">Disable All Audio notification</mat-checkbox>
+        <br/>
+        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteNormal" [ngModelOptions]="{standalone: true}">Disable <b>Information</b> notifications audio</mat-checkbox>
+        <br/>
+        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteAlert" [ngModelOptions]="{standalone: true}">Disable <b>Alert Severity</b> notifications audio</mat-checkbox>
+        <br/>
+        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteWarning" [ngModelOptions]="{standalone: true}">Disable <b>Warning</b> notifications audio</mat-checkbox>
+        <br/>
+        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteAlarm" [ngModelOptions]="{standalone: true}">Disable <b>Alarm Severity</b> notifications audio</mat-checkbox>
+        <br/>
+        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteEmergency" [ngModelOptions]="{standalone: true}">Disable <b>Emergency Severity</b> notifications audio</mat-checkbox>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <mat-card-actions align="end">
+      <button mat-raised-button color="accent" (click)='saveNotificationsSettings()'>Save</button>
+    </mat-card-actions>
+  </mat-card>
+</form>

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

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

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

@@ -1,29 +1,29 @@
-import { Component, OnInit } from '@angular/core';
-import { AppSettingsService, INotificationConfig } from '../app-settings.service';
-import { NotificationsService } from '../notifications.service';
-
-
-@Component({
-  selector: 'settings-notifications',
-  templateUrl: './settings-notifications.component.html',
-  styleUrls: ['./settings-notifications.component.css']
-})
-export class SettingsNotificationsComponent implements OnInit {
-
-  notificationConfig: INotificationConfig;
-
-  constructor(
-    private notificationsService: NotificationsService,
-    private appSettingsService: AppSettingsService,
-  ) { }
-
-  ngOnInit() {
-    this.notificationConfig = this.appSettingsService.getNotificationConfig();
-  }
-
-  saveNotificationsSettings() {
-    this.appSettingsService.setNotificationConfig(this.notificationConfig);
-    this.notificationsService.sendSnackbarNotification("Notification configuration saved", 5000);
-  }
-
-}
+import { Component, OnInit } from '@angular/core';
+import { AppSettingsService, INotificationConfig } from '../app-settings.service';
+import { NotificationsService } from '../notifications.service';
+
+
+@Component({
+  selector: 'settings-notifications',
+  templateUrl: './settings-notifications.component.html',
+  styleUrls: ['./settings-notifications.component.css']
+})
+export class SettingsNotificationsComponent implements OnInit {
+
+  notificationConfig: INotificationConfig;
+
+  constructor(
+    private notificationsService: NotificationsService,
+    private appSettingsService: AppSettingsService,
+  ) { }
+
+  ngOnInit() {
+    this.notificationConfig = this.appSettingsService.getNotificationConfig();
+  }
+
+  saveNotificationsSettings() {
+    this.appSettingsService.setNotificationConfig(this.notificationConfig);
+    this.notificationsService.sendSnackbarNotification("Notification configuration saved", 5000);
+  }
+
+}

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

@@ -29,8 +29,8 @@
           Status:
         </td>
         <td>
-          <i class="fa fa-check" style="color:green;" aria-hidden="true" *ngIf="signalKConnectionsStatus.endpoint.status"></i>
-          <i class="fa fa-times-circle" style="color:red;" aria-hidden="true" *ngIf="!signalKConnectionsStatus.endpoint.status"></i>
+          <i class="fa-solid fa-check" style="color:green;" aria-hidden="true" *ngIf="signalKConnectionsStatus.endpoint.status"></i>
+          <i class="fa-solid fa-times-circle" style="color:red;" aria-hidden="true" *ngIf="!signalKConnectionsStatus.endpoint.status"></i>
           {{ signalKConnectionsStatus.endpoint.message }}
         </td>
       </tr>
@@ -39,8 +39,8 @@
           Websocket:
         </td>
         <td>
-          <i class="fa fa-check" style="color:green;" aria-hidden="true" *ngIf="signalKConnectionsStatus.websocket.status"></i>
-          <i class="fa fa-times-circle" style="color:red;" aria-hidden="true" *ngIf="!signalKConnectionsStatus.websocket.status"></i>
+          <i class="fa-solid fa-check" style="color:green;" aria-hidden="true" *ngIf="signalKConnectionsStatus.websocket.status"></i>
+          <i class="fa-solid fa-times-circle" style="color:red;" aria-hidden="true" *ngIf="!signalKConnectionsStatus.websocket.status"></i>
           {{ signalKConnectionsStatus.websocket.message }}
         </td>
       </tr>
@@ -49,8 +49,8 @@
           REST:
         </td>
         <td>
-          <i class="fa fa-check" style="color:green;" aria-hidden="true" *ngIf="signalKConnectionsStatus.rest.status"></i>
-          <i class="fa fa-times-circle" style="color:red;" aria-hidden="true" *ngIf="!signalKConnectionsStatus.rest.status"></i>
+          <i class="fa-solid fa-check" style="color:green;" aria-hidden="true" *ngIf="signalKConnectionsStatus.rest.status"></i>
+          <i class="fa-solid fa-times-circle" style="color:red;" aria-hidden="true" *ngIf="!signalKConnectionsStatus.rest.status"></i>
           {{ signalKConnectionsStatus.rest.message }}
         </td>
       </tr>
@@ -60,11 +60,11 @@
         </td>
         <td>
           <div *ngIf="formAuthToken">
-            <i class="fa fa-check" style="color:green;" aria-hidden="true" ></i>
+            <i class="fa-solid fa-check" style="color:green;" aria-hidden="true" ></i>
             {{ formAuthToken | slice : 0 : 20}}...
           </div>
           <div *ngIf="!formAuthToken">
-            <i class="fa fa-times" style="color:rgb(145, 145, 64);" aria-hidden="true" ></i>
+            <i class="fa-solid fa-times" style="color:rgb(145, 145, 64);" aria-hidden="true" ></i>
           </div>
         </td>
       </tr>

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

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