Fix label styles

Region management.
SignalK · May 27, 2024 · 4ea3a7e · 4ea3a7e
1 parent ebdd3d5
commit 4ea3a7e
Show file tree

Hide file tree

Showing 21 changed files with 660 additions and 1,014 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,9 @@
 
 - **Added**: Option to display laylines when destination is active. (#149)
 - **Added**: Support for Signal K server "Features" API.
-- **Updated**: Measure function to display both segment and total distance. (#153)
-- **Updated**: Clearing an alarm no longer sets the value to `null`, sets alarm state to normal instead.
-
+- **Updated**: Measure function displays both segment details and total distance. (#153)
+- **Updated**: Clearing an alarm sets alarm state to normal rather than `null`.
+- **Fixed**: Inverted label color not correctly applied after feature update.
 
 ### v2.7.1
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -152,13 +152,16 @@
         <span>Drop Waypoint</span>
       </a>
       <mat-divider></mat-divider>
+      @if(this.app.config.map.zoomLevel >=
+      this.app.config.selections.notesMinZoom) {
       <a mat-menu-item (click)="drawStart('note')">
         <mat-icon color="">local_offer</mat-icon>
         <span>Add Note</span>
       </a>
+      }
       <a mat-menu-item (click)="drawStart('region')">
         <mat-icon color="">tab_unselected</mat-icon>
-        <span>Draw Region + Note</span>
+        <span>Draw Region</span>
       </a>
     </mat-menu>
     <!--/toolbar button menus-->
@@ -741,9 +744,9 @@
               [northUp]="app.config.map.northUp"
               [movingMap]="app.config.map.moveMap"
               [vesselTrail]="app.data.trail"
-              [measureMode]="measure.enabled"
               [activeRoute]="app.data.activeRoute"
               [dblClickZoom]="app.config.mapDoubleClick"
+              [measureMode]="measure.enabled"
               (measureStart)="measureStart()"
               (measureEnd)="measureEnd()"
               [drawMode]="draw.mode"

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -965,7 +965,7 @@ export class AppComponent {
         } // cancelled
         try {
           const d = JSON.parse(res.data);
-          this.skres.createResource(res.path, d);
+          this.skres.postResource(res.path, d);
         } catch (err) {
           this.app.showAlert(
             'Load Resource',
@@ -1516,16 +1516,19 @@ export class AppComponent {
       case 'route':
         this.skres.showRouteNew({ coordinates: e.coordinates as LineString });
         break;
-      case 'region': // region + Note
+      case 'region':
         region = new SKRegion();
         uuid = this.signalk.uuid;
         region.feature.geometry.coordinates = [
           GeoUtils.normaliseCoords(e.coordinates as Polygon)
         ];
+        this.skres.showRegionInfo({ id: uuid, region: region });
+        /* //region + note
         this.skres.showNoteEditor({
           type: 'region',
           href: { id: uuid, data: region }
         });
+        */
         break;
     }
     // clean up
@@ -1614,6 +1617,7 @@ export class AppComponent {
     this.skres.getRoutes();
     this.skres.getWaypoints();
     this.skres.getCharts();
+    this.skres.getRegions();
     this.skres.getNotes();
     if (allTypes) {
       this.fetchOtherResources(true);

diff --git a/src/app/app.info.ts b/src/app/app.info.ts
@@ -97,6 +97,7 @@ const FreeboardConfig: FBAppConfig = {
     aisProfile: 0, // ais display profile
     aisState: [], // list of ais state values used to filter targets
     notesMinZoom: 10,
+    labelsMinZoom: 8,
     pluginFavourites: [],
     trailFromServer: false,
     trailDuration: 24, // number of hours of trail to fetch from server
@@ -681,6 +682,11 @@ export class AppInfo extends Info {
     if (typeof settings.selections.aisShowTrack === 'undefined') {
       settings.selections.aisShowTrack = false;
     }
+
+    if (typeof settings.selections.labelsMinZoom === 'undefined') {
+      settings.selections.labelsMinZoom = 8;
+    }
+
     // changeover 2.7 - for removal
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     if (typeof (settings as any).aisShowTrack !== 'undefined') {

diff --git a/src/app/lib/components/measurements.component.ts b/src/app/lib/components/measurements.component.ts
@@ -10,11 +10,11 @@ import { CommonModule } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatCardModule } from '@angular/material/card';
 import { AppInfo } from 'src/app/app.info';
 import { Position } from 'src/app/types';
 import { getGreatCircleBearing } from 'geolib';
 import { GeoUtils } from '../geoutils';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 // ********* Measurements Component ********
 
@@ -24,85 +24,66 @@ import { GeoUtils } from '../geoutils';
   selector: 'fb-measurements',
   imports: [
     CommonModule,
-    MatCardModule,
     MatIconModule,
     MatButtonModule,
-    MatTooltip
+    MatTooltip,
+    MatToolbarModule
   ],
   template: `
     <div class="_ap_measurements">
-      <div style="flex: 2;">&nbsp;</div>
-      <div>
-        <mat-card>
-          <mat-card-content>
-            <div class="_ap_row">
-              <div class="icon-label"><mat-icon>straighten</mat-icon></div>
-              <div class="row-label">Total</div>
-              <div class="value-label">Distance:</div>
-              <div class="value">{{ totalDistance }}</div>
+      <mat-toolbar style="background-color: #00796b; color: white; padding: 0 5px;">
+        <div class="_ap_row">
+          <div class="_ap_row">
+            <div class="icon-label">
+              <mat-icon>straighten</mat-icon>
+            </div>
+            <div class="value">
+              {{ totalDistance }}<br>
             </div>
+          </div>
+          <div class="_ap_row">
             <div class="_ap_row">
-              <div class="icon-label"><mat-icon>square_foot</mat-icon></div>
-              <div class="row-label">
+              <div style="font-size: 12pt;">
+                <mat-icon>square_foot</mat-icon><br>
                 {{
-                  this.coords.length === 0
-                    ? 0
+                  this.coords.length < 2
+                    ? '-'
                     : this.index === -1
                     ? this.coords.length - 1
                     : this.index + 1
                 }}
-                of {{ this.coords.length === 0 ? 0 : this.coords.length - 1 }}
               </div>
-              <div class="value-label">Dist:</div>
-              <div class="value">{{ legDistance }}</div>
-              <div class="value-label">Bearing:</div>
-              <div class="value">{{ legBearing }}</div>
+              <div class="value">
+                {{ legDistance }}<br>
+                {{ legBearing }}
+              </div>
             </div>
-          </mat-card-content>
-          <mat-card-actions align="start">
-            <button
-              matTooltip="Previous leg"
-              matTooltipPosition="above"
-              mat-icon-button
-              [disabled]="this.btnDisable.prev"
-              (click)="select(true)"
-            >
-              <mat-icon>arrow_back</mat-icon>
-            </button>
-            <button
-              matTooltip="Next leg"
-              matTooltipPosition="above"
-              mat-icon-button
-              [disabled]="this.btnDisable.next"
-              (click)="select()"
-            >
-              <mat-icon>arrow_forward</mat-icon>
-            </button>
+          </div>
+          <div>
             <button
               matTooltip="Cancel"
-              matTooltipPosition="above"
+              matTooltipPosition="below"
               mat-icon-button
               (click)="close()"
             >
-              <mat-icon color="warn">close</mat-icon>
+              <mat-icon>close</mat-icon>
             </button>
-          </mat-card-actions>
-        </mat-card>
-      </div>
-      <div style="flex: 2;">&nbsp;</div>
-    </div>
+          </div>
+        </div>
+      </mat-toolbar>
   `,
   styles: [
     `
       ._ap_measurements {
         position: fixed;
         top: 0;
-        display: flex;
-        width: 100%;
+        width: 500px;
       }
 
       ._ap_row {
         display: flex;
+        flex-wrap: no-wrap;
+        flex: 2;
       }
       ._ap_row .icon-label {
         width: 30px;
@@ -111,13 +92,16 @@ import { GeoUtils } from '../geoutils';
         font-weight: 500;
         min-width: 60px;
       }
-      ._ap_row .value-label {
-        font-weight: 500;
-        padding-right: 5px;
-      }
       ._ap_measurements .value {
         padding-right: 10px;
       }
+
+      @media only screen and (max-width: 500px) {  
+        ._ap_measurements {
+          left: 0;
+          width: 100%;
+        }       
+      }
     `
   ]
 })

diff --git a/src/app/modules/map/components/popover/popover.component.scss b/src/app/modules/map/components/popover/popover.component.scss
@@ -84,7 +84,7 @@
 
 .popover.measure {
     min-width: 100px;
-    background-color: rgba(87, 15, 134, 0.726);
+    background-color: #3399CC;
 }
 
 .popover.measure > .popover-content {
@@ -112,7 +112,7 @@
     margin-left: -10px;
     content: " ";
     border-bottom-width: 0;
-    border-top-color: rgba(87, 15, 134, 1);
+    border-top-color: #3399CC;
 }
 
 .popover-action-button {

diff --git a/src/app/modules/map/fb-map.component.html b/src/app/modules/map/fb-map.component.html
@@ -31,6 +31,7 @@
   <ol-draw
     [type]="draw.type"
     [stopClick]="draw.mode === 'route' ? false : true"
+    [style]="draw.style"
     (drawEnd)="onDrawEnd($event)"
   >
   </ol-draw>
@@ -139,7 +140,7 @@
       [darkMode]="app.config.map.invertColor"
       [resourceSets]="resSet.value"
       [selected]="app.config.selections.resourceSets[resSet.key]"
-      [labelMinZoom]="10"
+      [labelMinZoom]="this.app.config.selections.labelsMinZoom"
       [mapZoom]="fbMap.zoomLevel"
       [zIndex]="52 + idx"
     >
@@ -153,7 +154,7 @@
     [routeStyles]="featureStyles.route"
     [activeRoute]="activeRoute"
     [darkMode]="app.config.map.invertColor"
-    [labelMinZoom]="10"
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
     [mapZoom]="fbMap.zoomLevel"
     [zIndex]="80"
   >
@@ -176,7 +177,7 @@
     [waypoints]="dfeat.waypoints"
     [waypointStyles]="featureStyles.waypoint"
     [activeWaypoint]="app.data.activeWaypoint"
-    [labelMinZoom]="10"
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
     [mapZoom]="fbMap.zoomLevel"
     [zIndex]="90"
   >
@@ -191,7 +192,7 @@
     targetType="aton"
     [updateIds]="aisMgr.updateList"
     [removeIds]="aisMgr.removeList"
-    [labelMinZoom]="10"
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
     [mapZoom]="fbMap.zoomLevel"
     [zIndex]="45"
   >
@@ -205,7 +206,7 @@
     targetType="shore.basestations"
     [updateIds]="aisMgr.updateList"
     [removeIds]="aisMgr.removeList"
-    [labelMinZoom]="10"
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
     [mapZoom]="fbMap.zoomLevel"
     [zIndex]="45"
   >
@@ -218,7 +219,7 @@
     [targets]="dfeat.meteo"
     [targetStyles]="featureStyles.meteo"
     targetType="meteo"
-    [labelMinZoom]="10"
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
     [mapZoom]="fbMap.zoomLevel"
     [updateIds]="aisMgr.updateList"
     [staleIds]="aisMgr.staleList"
@@ -238,7 +239,7 @@
       [targets]="dfeat.ais"
       [targetStyles]="featureStyles.aisVessel"
       [mapZoom]="fbMap.zoomLevel"
-      [labelMinZoom]="10"
+      [labelMinZoom]="this.app.config.selections.labelsMinZoom"
       [showVector]="true"
       [vectorMinZoom]="app.config.selections.aisWindMinZoom"
       [vectorApparent]="app.config.selections.aisWindApparent"
@@ -262,7 +263,7 @@
     [targets]="dfeat.aircraft"
     [targetStyles]="featureStyles.aircraft"
     targetType="aircraft"
-    [labelMinZoom]="10"
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
     [mapZoom]="fbMap.zoomLevel"
     [updateIds]="aisMgr.updateList"
     [staleIds]="aisMgr.staleList"
@@ -280,7 +281,7 @@
     [targets]="dfeat.sar"
     [targetStyles]="featureStyles.sar"
     targetType="sar"
-    [labelMinZoom]="10"
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
     [mapZoom]="fbMap.zoomLevel"
     [updateIds]="aisMgr.updateList"
     [staleIds]="aisMgr.staleList"
@@ -290,14 +291,18 @@
   >
   </sk-targets>
   }
-
-  <!-- Signal K targets -->
+  <!-- /Signal K targets -->
 
   <!-- Regions -->
-  @if(display.layer.notes) {
-  <fb-regions [regions]="dfeat.regions" [regionStyles]="" [zIndex]="120">
+  <fb-regions
+    [darkMode]="app.config.map.invertColor"
+    [regions]="dfeat.regions"
+    [regionStyles]=""
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
+    [mapZoom]="fbMap.zoomLevel"
+    [zIndex]="120"
+  >
   </fb-regions>
-  }
 
   <!-- Notes -->
   @if(display.layer.notes) {
@@ -473,7 +478,7 @@
     [showMarker]="!app.data.activeWaypoint"
     [markerName]="app.data.navData.destPointName"
     [bearingStyles]="featureStyles.destination"
-    [labelMinZoom]="10"
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
     [mapZoom]="fbMap.zoomLevel"
     [zIndex]="212"
   >