Formatting and options

Display formatting #212 #213 #214 #217 #218 #223 AIS COG line length options #209 map:zoom token fo resource fetech requests #222
SignalK · Dec 21, 2024 · caedb20 · caedb20
1 parent d0d4d3a
commit caedb20
Show file tree

Hide file tree

Showing 15 changed files with 105 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,16 +1,16 @@
 # CHANGELOG: Freeboard
 
 ### v2.13.0
-- **New**: Use of maritime icons from [OpenBridge](https://www.figma.com/community/file/1445713209741917748)
 - **New**: Support for Signal K [Autopilot API](https://demo.signalk.org/documentation/develop/rest-api/open_api.html).
-- **New**: Display different Note icons when "skIcon" property is an Active Captain POI type.
+- **New**: Use of maritime icons from [OpenBridge](https://www.figma.com/community/file/1445713209741917748)
+- **New**: Display specific Note icons when "skIcon" property matches a POI type.
+- **Fixed**: Notes popover and dialog formatting. (#214, #223)
 - **Fixed**: Navigation data panel alignment on smaller screens. (#212)
-- **Fixed**: Notes popover disables move & delete buttons when readOnly property is set. (#214)
 - **Updated**: Resource Set feature popover formatting. (#213)
-- **Updated**: Show more / less ui icons. (#217)
+- **Updated**: Show more / less ui icons in AIS properties. (#217)
 - **Updated**: Relocated close button on resource lists. (#218)
 - **Updated**: Additional aisCogLine length options. (#209)
-- **Added**: Configuration to retrieve only the Resource Set features that fall within a specified radius of the map center. (#207)
+- **Added**: %map:zoom% token for use in Notes fetch filter (#222)
 
 
 ### v2.12.2

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -60,7 +60,7 @@ import {
 } from './types';
 import { Feature } from 'ol';
 import { SignalKIcons } from './modules/map/signalk-icons';
-import { OpenBridgeIcons } from './app.icons';
+import { OpenBridgeIcons, PoiIcons } from './app.icons';
 
 interface DrawEndEvent {
   coordinates: LineString | Position | Polygon;
@@ -157,6 +157,12 @@ export class AppComponent {
         this.dom.bypassSecurityTrustResourceUrl(`${OpenBridgeIcons.path}/${s}`)
       );
     });
+    PoiIcons.ids.forEach((s: string) => {
+      this.iconReg.addSvgIcon(
+        `sk-${s.slice(0, s.indexOf('.'))}`,
+        this.dom.bypassSecurityTrustResourceUrl(`${PoiIcons.path}/${s}`)
+      );
+    });
   }
 
   // ********* LIFECYCLE ****************

diff --git a/src/app/app.icons.ts b/src/app/app.icons.ts
@@ -16,3 +16,19 @@ export const OpenBridgeIcons = {
     'whale.svg'
   ]
 };
+
+export const PoiIcons = {
+  path: '../assets/img/poi',
+  ids: [
+    'anchorage.svg',
+    'boatramp.svg',
+    'bridge.svg',
+    'business.svg',
+    'dam.svg',
+    'ferry.svg',
+    'hazard.svg',
+    'inlet.svg',
+    'lock.svg',
+    'marina.svg'
+  ]
+};
diff --git a/src/app/app.settings.ts b/src/app/app.settings.ts
@@ -539,6 +539,8 @@ export const processUrlTokens = (s: string, config: IAppConfig): string => {
         return config.map.center[1];
       } else if (i === 'map:longitude') {
         return config.map.center[0];
+      } else if (i === 'map:zoom') {
+        return Math.floor(config.map.zoomLevel);
       } else if (i === 'note:radius') {
         const dist =
           config.units.distance === 'm'

diff --git a/src/app/modules/autopilot/autopilot.component.ts b/src/app/modules/autopilot/autopilot.component.ts
@@ -62,7 +62,10 @@ import { SKStreamFacade } from 'src/app/modules';
         </div>
         <mat-card-content>
           <div class="content">
-            <div style="height: 45px;color:whitesmoke;">Autopilot</div>
+            <div style="height: 45px;color:whitesmoke;">
+              Autopilot<br />
+              {{ app.data.vessels.self.autopilot.default ?? '' }}
+            </div>
             <div class="lcd">
               <div style="padding: 5px 0;display: flex;">
                 <div class="dial-text-title">Target</div>

diff --git a/src/app/modules/map/fb-map.component.ts b/src/app/modules/map/fb-map.component.ts
@@ -810,7 +810,7 @@ export class FBMapComponent implements OnInit, OnDestroy {
               text = 'Destination';
               break;
             case 'note':
-              icon = 'local_offer';
+              icon = feature.get('icon');
               addToFeatureList = true;
               text = this.app.data.notes.filter((i) => {
                 return i[0] === t[1] ? i[1].name : null;

diff --git a/src/app/modules/map/ol/lib/resources/layer-notes.component.ts b/src/app/modules/map/ol/lib/resources/layer-notes.component.ts
@@ -116,6 +116,7 @@ export class NoteLayerComponent extends NotesBaseComponent {
         name: notes[n].name
       });
       f.setId('note.' + n);
+      f.set('icon', notes[n].properties?.skIcon ?? 'local_offer');
       f.setStyle(this.buildStyle(n, notes[n]).clone());
       fa.push(f);
     }
@@ -161,6 +162,12 @@ export class FreeboardNoteLayerComponent extends NotesBaseComponent {
         name: n[1].name
       });
       f.setId('note.' + n[0]);
+      f.set(
+        'icon',
+        n[1].properties?.skIcon
+          ? `sk-${n[1].properties?.skIcon}`
+          : 'local_offer'
+      );
       f.setStyle(this.buildStyle(n[0], n[1]).clone());
       fa.push(f);
     }

diff --git a/src/app/modules/map/popovers/alarm-popover.component.ts b/src/app/modules/map/popovers/alarm-popover.component.ts
@@ -53,7 +53,7 @@ import { SKNotification } from 'src/app/types';
           style="flex: 1 1 auto;text-align:right;"
           [innerText]="
             alarm.data.position.longitude
-              | coords : app.config.selections.positionFormat : true
+              | coords : app.config.selections.positionFormat : false
           "
         ></div>
       </div>

diff --git a/src/app/modules/map/popovers/featurelist-popover.component.ts b/src/app/modules/map/popovers/featurelist-popover.component.ts
@@ -37,6 +37,8 @@ import { PopoverComponent } from './popover.component';
         <mat-list-item (click)="handleSelect(f)">
           @if(f.icon === 'route') {
           <mat-icon class="ob" [svgIcon]="f.icon"></mat-icon>
+          } @else if(f.icon.indexOf('sk-') === 0) {
+          <mat-icon [svgIcon]="f.icon"></mat-icon>
           } @else {
           <mat-icon
             [ngClass]="{ 'icon-warn': f.text && f.text.indexOf('self') !== -1 }"
@@ -59,7 +61,7 @@ export class FeatureListPopoverComponent {
   @Output() closed: EventEmitter<void> = new EventEmitter();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   @Output() selected: EventEmitter<any> = new EventEmitter();
-  //constructor() {}
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   handleSelect(item: any) {
     this.selected.emit(item);

diff --git a/src/app/modules/settings/components/settings-dialog.html b/src/app/modules/settings/components/settings-dialog.html
@@ -1044,7 +1044,7 @@
           <div class="setting-group-title">RESOURCES: LAYERS</div>
           <mat-card class="setting-card">
             <mat-card-content>
-              <div class="setting-card-row">
+              <!--<div class="setting-card-row">
                 <div class="setting-card-row-item">
                   <mat-form-field style="width: 100%">
                     <mat-label
@@ -1068,7 +1068,7 @@
                   </mat-form-field>
                 </div>
               </div>
-              <!--<div class="setting-card-row">
+              <div class="setting-card-row">
                 <div class="setting-card-row-item">
                   <mat-form-field style="width: 100%" floatLabel="always">
                     <mat-label>Fetch filter:</mat-label>

diff --git a/src/app/modules/skresources/components/notes/note-dialog.html b/src/app/modules/skresources/components/notes/note-dialog.html
@@ -14,8 +14,7 @@
   :host ::ng-deep .ck.ck-editor__main > .ck-editor__editable {
     color: black;
   }
-  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px),
-    only screen and (min-width: 800px) {
+  @media only screen and (min-width: 600px) {
     .ap-confirm-icon {
       min-width: 25%;
       max-width: 25%;
@@ -24,15 +23,26 @@
     .nosmall {
       display: flex;
     }
+    .nosmall.block {
+      display: block;
+    }
+
+    .note-details {
+      min-width: 400px;
+    }
   }
 </style>
 
 @if(!data.editable) {
-<div style="min-width: 400px">
+<div class="note-details">
   <mat-toolbar style="background-color: transparent">
-    <span class="dialog-icon"
-      ><mat-icon class="icon-note">local_offer</mat-icon></span
-    >
+    <span class="dialog-icon">
+      @if(data.note?.properties?.skIcon) {
+      <mat-icon [svgIcon]="'sk-' + data.note?.properties?.skIcon"></mat-icon>
+      } @else {
+      <mat-icon class="icon-note">local_offer</mat-icon>
+      }
+    </span>
     <span style="flex: 1 1 auto; text-align: center">Note Details</span>
     <span style="text-align: right">
       <button mat-icon-button (click)="dialogRef.close({result:false})">
@@ -51,6 +61,7 @@
             <div style="font-weight: bold; vertical-align: top">Name:</div>
             <div style="padding-left: 10px">{{data.note?.name}}</div>
           </div>
+          @if(data.note.group) {
           <div style="padding-bottom: 5px; display: flex">
             <div style="font-weight: bold; vertical-align: top">Group:</div>
             <div style="padding-left: 10px; flex: 1 1 auto">
@@ -68,6 +79,7 @@
             </div>
             }
           </div>
+          }
           <div style="flex: 1 1 auto; padding: 5px 0 5px 0">
             <div style="font-weight: bold; vertical-align: top">
               Description:
@@ -78,15 +90,8 @@
               [innerHTML]="data.note.description | addTarget: '_notes'"
             ></div>
           </div>
-          @if(data.note.position) {
-          <div class="nosmall" style="font-size: 10pt; padding: 5px 0 5px 0">
-            <div style="width: 45px; font-weight: bold">Lat:</div>
-            <div>{{data.note?.position?.latitude}}</div>
-            &nbsp;
-            <div style="width: 45px; font-weight: bold">Lon:</div>
-            <div>{{data.note?.position?.longitude}}</div>
-          </div>
-          }
+
+          <!--
           <div class="nosmall" style="font-size: 10pt; padding: 5px 0 5px 0">
             @if(data.note.authors && data.note.authors.length !== 0) {
             <div>
@@ -96,25 +101,22 @@
             }
             <div><i>{{data.note?.timestamp?.slice(0,10)}}</i></div>
           </div>
+          -->
         </div>
       </mat-card-content>
+      @if(data.note.url || !data.note.properties.readOnly){
       <mat-card-actions>
-        <div style="display: flex">
-          <div style="flex: 1 1 auto">
+        <div style="display: flex; width: 100%">
+          <div>
             @if(data.note.url) {
-            <div>
-              <button
-                mat-icon-button
-                (click)="openNoteUrl()"
-                matTooltip="Open Note link in browser window"
-              >
-                <mat-icon>open_in_new</mat-icon>
-              </button>
-            </div>
-            }
-          </div>
-          @if(!data.note.properties.readOnly) {
-          <div style="text-align: right">
+            <button
+              mat-icon-button
+              (click)="openNoteUrl()"
+              matTooltip="Open Note link in browser window"
+            >
+              <mat-icon>open_in_new</mat-icon>
+            </button>
+            &nbsp; } @if(!data.note.properties.readOnly) {
             <button
               mat-icon-button
               (click)="dialogRef.close({result:true, data: 'edit'})"
@@ -130,10 +132,28 @@
             >
               <mat-icon>delete</mat-icon>
             </button>
+            }
+          </div>
+          @if(data.note.position) {
+          <div
+            class="nosmall block"
+            style="flex: 1; font-size: 10pt; padding: 0 0 0 10px"
+          >
+            <span style="font-weight: bold">Lat:</span>&nbsp;
+            {{data.note?.position?.latitude | coords :
+            app.config.selections.positionFormat : true}}
+
+            <br />
+            <span>
+              <span style="font-weight: bold">Lon:</span>&nbsp;
+              {{data.note?.position?.longitude | coords :
+              app.config.selections.positionFormat : false}}
+            </span>
           </div>
           }
         </div>
       </mat-card-actions>
+      }
     </mat-card>
   </mat-dialog-content>
 </div>
@@ -146,7 +166,7 @@
     >
   </mat-toolbar>
   <mat-dialog-content>
-    <div style="display: flex">
+    <div class="note-details" style="display: flex">
       <div style="flex: 1 1 auto">
         <div>
           <mat-form-field floatLabel="always" style="width: 100%">
@@ -180,6 +200,7 @@
         <div class="note-editor">
           @defer{
           <angular-editor
+            height
             [config]="editorConfig"
             [placeholder]="'Add note text here.'"
             [(ngModel)]="data.note.description"

diff --git a/src/app/modules/skresources/components/notes/note-dialog.ts b/src/app/modules/skresources/components/notes/note-dialog.ts
@@ -3,6 +3,7 @@
 
 import { Component, OnInit, Inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { PipesModule } from 'src/app/lib/pipes';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import {
@@ -45,6 +46,7 @@ import { AppInfo } from 'src/app/app.info';
     MatInputModule,
     MatToolbarModule,
     AngularEditorModule,
+    PipesModule,
     AddTargetPipe
   ],
   templateUrl: `note-dialog.html`,
@@ -91,7 +93,7 @@ export class NoteDialog implements OnInit {
     editable: true,
     spellcheck: false,
     height: 'auto',
-    minHeight: '0',
+    minHeight: '150',
     maxHeight: 'auto',
     width: 'auto',
     minWidth: '0',

diff --git a/src/app/modules/skstream/skstream.worker.ts b/src/app/modules/skstream/skstream.worker.ts
@@ -893,6 +893,7 @@ function processVessel(d: SKVessel, v, isSelf = false) {
   ) {
     d.autopilot.enabled = v.value;
   } else if (v.path === 'steering.autopilot.defaultPilot') {
+    d.autopilot.default = v.value;
     apDeviceId = v.value;
   }
 

diff --git a/src/assets/help/img/settings_resources_layers.png b/src/assets/help/img/settings_resources_layers.png
diff --git a/src/assets/help/index.html b/src/assets/help/index.html
@@ -2183,6 +2183,7 @@ <h4><i class="material-icons">settings</i> Settings</h4>
           <ul>
             <li><b>map:latitude</b>: Latitude at centre of Map</li>
             <li><b>map:longitude</b>: Longitude at centre of Map</li>
+            <li><b>map:zoom</b>: Map zoom level</li>
             <li>
               <b>note:radius</b>: The value set in the
               <i>Fetch Notes within</i> field