standalone alignment

.gitignore

@@ -4,3 +4,4 @@
 /node_modules
 package-lock.json
 .angular
+node_modules

CHANGELOG.md

@@ -1,14 +1,13 @@
 # CHANGELOG: Freeboard
 
-### v2.9.0
+### v2.9.1
 
 - **Added**: Ability to filter vessels by `AIS Ship Type` (#163).
-- **Added**: Display `performance.beatAngle` vectors on the map.
+- **Added**: Display `performance.beatAngle` and `performance.gybeAngle` vectors on the map.
 - **Fixed**: Meteo properties `environment.water.waves` display formatting.
 - **Fixed**: Anchor watch not available when plugin is installed and enabled.
 - **Fixed**: Laylines not displayed if performance paths do not contain values.
 - **Updated**: Don't show internet map service dialog in kiosk mode. (#166)
-- **Updated**: Angular framework to v18
 
 ### v2.8.4
 

angular.json

@@ -15,16 +15,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": {
-              "base": "public",
-              "browser": ""
-            },
+            "outputPath": "public",
             "index": "src/index.html",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -37,16 +33,17 @@
               "src/styles.scss"
             ],
             "scripts": [],
+            "vendorChunk": true,
             "extractLicenses": false,
+            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true,
             "webWorkerTsConfig": "tsconfig.worker.json",
             "allowedCommonJsDependencies": [
               "geolib",
               "simplify-ts"
-          ],
-          "browser": "src/main.ts"
+           ]
           },
           "configurations": {
             "production": {
@@ -61,6 +58,8 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/freeboard-sk",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "Openlayers chart plotter implementation for Signal K",
   "keywords": [
     "signalk-webapp",
@@ -43,19 +43,19 @@
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.5",
-    "@angular/animations": "^18.0.4",
-    "@angular/cdk": "^18.0.4",
-    "@angular/cli": "^18.0.5",
-    "@angular/common": "^18.0.4",
-    "@angular/compiler": "^18.0.4",
-    "@angular/compiler-cli": "^18.0.4",
-    "@angular/core": "^18.0.4",
-    "@angular/forms": "^18.0.4",
-    "@angular/language-service": "^18.0.4",
-    "@angular/material": "^18.0.4",
-    "@angular/platform-browser": "^18.0.4",
-    "@angular/platform-browser-dynamic": "^18.0.4",
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@angular/animations": "^17.3.0",
+    "@angular/cdk": "^17.3.0",
+    "@angular/cli": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/language-service": "^17.3.0",
+    "@angular/material": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
     "@kolkov/angular-editor": "^2.1.0",
     "@types/arcgis-rest-api": "^10.4.5",
     "@types/express": "^4.17.17",
@@ -77,7 +77,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^17.3.0",
     "ngeohash": "^0.6.3",
     "ol": "^9.0.0",
     "ol-mapbox-style": "^12.2.1",
@@ -98,4 +98,4 @@
     "xml2js": "^0.6.2",
     "zone.js": "~0.14.4"
   }
-}
+}

src/app-theme.scss

@@ -4,45 +4,45 @@
 @include mat.core();
 
 // Define a theme.
-$my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500,700,200);
-$my-accent:  mat.m2-define-palette(mat.$m2-amber-palette, 500,700,200);
+$my-primary: mat.define-palette(mat.$indigo-palette, 500,700,200);
+$my-accent:  mat.define-palette(mat.$amber-palette, 500,700,200);
 // The "warn" palette is optional and defaults to red if not specified.
-$my-warn:    mat.m2-define-palette(mat.$m2-red-palette, 500,700,200);
+$my-warn:    mat.define-palette(mat.$red-palette, 500,700,200);
 
-$my-theme: mat.m2-define-light-theme((
+$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
- typography: mat.m2-define-typography-config(),
+ typography: mat.define-typography-config(),
  density: 0,
 ));
 
 // Define a dark theme.
-$my-dark-primary: mat.m2-define-palette(mat.$m2-light-blue-palette, 200,300,400);
-$my-dark-accent:  mat.m2-define-palette(mat.$m2-amber-palette, A400, A100, A700);
-$my-dark-warn:    mat.m2-define-palette(mat.$m2-deep-orange-palette, A400);
+$my-dark-primary: mat.define-palette(mat.$light-blue-palette, 200,300,400);
+$my-dark-accent:  mat.define-palette(mat.$amber-palette, A400, A100, A700);
+$my-dark-warn:    mat.define-palette(mat.$deep-orange-palette, A400);
 
-$my-dark-theme: mat.m2-define-dark-theme((
+$my-dark-theme: mat.define-dark-theme((
  color: (
    primary: $my-dark-primary,
    accent: $my-dark-accent,
    warn: $my-dark-warn,
  ),
- typography: mat.m2-define-typography-config(),
+ typography: mat.define-typography-config(),
  density: 0,
 ));
 
 .dark-theme {
     @include mat.all-component-colors($my-dark-theme);
 
     .about-row .item a {
-        color: mat.m2-get-color-from-palette($my-dark-accent);
+        color: mat.get-color-from-palette($my-dark-accent);
     }
 
     .welcome a {
-        color: mat.m2-get-color-from-palette($my-dark-accent);
+        color: mat.get-color-from-palette($my-dark-accent);
     }  
 
     .popover > .arrow:after {
@@ -55,12 +55,12 @@ $my-dark-theme: mat.m2-define-dark-theme((
         border-top-color: mat.get-theme-color($my-dark-theme, background, background);
     }
 
-
+    /* Track */
     ::-webkit-scrollbar-track {
         background: rgba(0,0,0,.5);
     }
 
-
+    /* Handle on hover */
     ::-webkit-scrollbar-thumb:hover {
         background: #999;
     }
@@ -82,26 +82,26 @@ $my-dark-theme: mat.m2-define-dark-theme((
 
 // std elements
 .about-row .item a  {
-    color: mat.m2-get-color-from-palette($my-primary);
+    color: mat.get-color-from-palette($my-primary);
 }
 
-
+/* width */
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }
 
-
+/* Track */
 ::-webkit-scrollbar-track {
     background: #f1f1f1;
 }
 
-
+/* Handle */
 ::-webkit-scrollbar-thumb {
     background: #888;
 }
 
-
+/* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
@@ -110,3 +110,4 @@ $my-dark-theme: mat.m2-define-dark-theme((
 // Include all theme styles for the components.
 @include mat.all-component-themes($my-theme);
 
+

src/app/app.info.ts

@@ -276,7 +276,7 @@ export class AppInfo extends Info {
     this.name = 'Freeboard-SK';
     this.shortName = 'Freeboard';
     this.description = `Signal K Chart Plotter.`;
-    this.version = '2.9.0';
+    this.version = '2.9.1';
     this.url = 'https://github.com/signalk/freeboard-sk';
     this.logo = './assets/img/app_logo.png';
 
@@ -930,15 +930,16 @@ export class AppInfo extends Info {
                     for more details.`
       },
       'whats-new': [
-        {
+        /*{
           type: 'signalk-server-node',
-          title: 'AIS Vessels',
+          title: 'OpenWeather 3.0 Support',
           message: `
-            Freeboard-SK now supports filtering the disply of vessels by AIS ship type.
+            OpenWeather is deprecating support for v2.5 of their API in April 2024!
             <br>&nbsp;<br>
-            Select  <b>Vessels</b> from the menu and turn on <b>View by Vessel type</b>.
+            Freeboard-SK now supports the v3.0 API which will require you to supply
+            a new API Key in the configuration.
           `
-        }
+        }*/
       ]
     };
 

src/app/app.module.ts

@@ -1,9 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import {
-  provideHttpClient,
-  withInterceptorsFromDi
-} from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MatBadgeModule } from '@angular/material/badge';
@@ -14,8 +11,8 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
+// ***
 import { AppComponent } from './app.component';
-
 import {
   FBMapComponent,
   ExperimentsComponent,
@@ -42,9 +39,8 @@ import {
 
 @NgModule({
   declarations: [AppComponent],
-  exports: [],
-  bootstrap: [AppComponent],
   imports: [
+    HttpClientModule,
     MatMenuModule,
     MatSidenavModule,
     MatBadgeModule,
@@ -74,6 +70,8 @@ import {
     AlarmsDialog,
     RouteNextPointComponent
   ],
-  providers: [provideHttpClient(withInterceptorsFromDi())]
+  exports: [],
+  providers: [],
+  bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/lib/components/dialogs/common/dialogs.component.ts

@@ -275,9 +275,7 @@ export class ConfirmDialog implements OnInit {
         @if(data.url) {
         <div class="about-row">
           <div class="item stretch">
-            <a mat-button [href]="data.url" target="_web" rel="noopener"
-              >Visit Website</a
-            >
+            <a [href]="data.url" target="_web" rel="noopener">Visit Website</a>
           </div>
         </div>
         }

src/app/lib/components/index.ts

@@ -1,7 +1,6 @@
 export * from './dial-text';
 export * from './file-input.component';
 export * from './pip.component';
-export * from '../../modules/skresources/components/signalk-details.component';
 export * from './wakelock.component';
 export * from './measurements.component';
 export * from './dialogs';

src/app/lib/components/wakelock.component.ts

@@ -27,7 +27,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
       <button
         mat-mini-fab
         [color]="state ? 'primary' : 'accent'"
-        [ngClass]="{ 'icon-warn': setOn }"
         [matTooltip]="tipText"
         matTooltipPosition="left"
         (click)="toggle()"

src/app/modules/map/fb-map.component.html

@@ -245,9 +245,9 @@
       [vectorMinZoom]="app.config.selections.aisWindMinZoom"
       [vectorApparent]="app.config.selections.aisWindApparent"
       [focusId]="app.data.vessels.activeId"
+      [filterIds]="app.config.selections.aisTargets"
       [filterByShipType]="app.config.selections.aisFilterByShipType"
       [filterShipTypes]="app.config.selections.aisTargetTypes"
-      [filterIds]="app.config.selections.aisTargets"
       [updateIds]="aisMgr.updateList"
       [staleIds]="aisMgr.staleList"
       [removeIds]="aisMgr.removeList"
@@ -570,7 +570,7 @@
       (click)="onContextMenuAction('add_wpt', item)"
       (contextmenu)="$event.preventDefault()"
     >
-      <mat-icon class="icon-waypoint">add_location</mat-icon>
+      <mat-icon color="primary">add_location</mat-icon>
       Add Waypoint here
     </button>
 
@@ -580,7 +580,7 @@
       (click)="onContextMenuAction('add_note', item)"
       (contextmenu)="$event.preventDefault()"
     >
-      <mat-icon class="icon-note">local_offer</mat-icon>
+      <mat-icon style="color: orange">local_offer</mat-icon>
       Add Note here
     </button>
     }