v1.8.0

SignalK · Dec 12, 2019 · 6cf6d40 · 6cf6d40
1 parent 3b893b5
commit 6cf6d40
Show file tree

Hide file tree

Showing 31 changed files with 512 additions and 400 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -360,7 +360,7 @@
                             </mat-icon>
                         </button>                            
                         <br>&nbsp;<br>
-                        <button *ngIf="app.data.grib.hasProvider"
+                        <button *ngIf="app.data.grib.hasProvider && app.config.experiments"
                             style="top:10px;right:90px;"
                             (click)="openBottomSheet()"
                             matTooltip="GRIB data"
@@ -562,7 +562,11 @@
                     </div>
                     <div>
                         <mat-divider></mat-divider>
-                        <grib-panel (change)="selectGRIB($event)"></grib-panel>    
+                        <grib-panel 
+                            [zoomLevel]="app.config.map.zoomLevel" 
+                            [minZoom]="4"
+                            (change)="selectGRIB($event)">
+                        </grib-panel>    
                     </div>        
                 </div>                
 

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -458,7 +458,12 @@ export class AppComponent {
 
     // ** open settings dialog **
     public openSettings(prefs: boolean= false) {  
-        this.dialog.open( SettingsDialog, { disableClose: true, data: {openPrefs: prefs } })
+        this.dialog.open( SettingsDialog, { 
+            disableClose: true, 
+            data: {openPrefs: prefs },
+            maxWidth: '90vw',
+            minWidth: '90vw'
+        })
         .afterClosed().subscribe( ()=>this.focusMap() );
     }      
 

diff --git a/src/app/app.info.ts b/src/app/app.info.ts
@@ -17,7 +17,7 @@ import { SKVessel } from './modules/skresources/resource-classes';
 export class AppInfo extends Info {
 
     private DEV_SERVER= {
-        host: '192.168.99.100',     // host name || ip address
+        host: null,     // host name || ip address
         port: 3000,     // port number
         ssl: false
     };
@@ -58,6 +58,7 @@ export class AppInfo extends Info {
         this.logo= "./assets/img/app_logo.png";       
 
         this.config= {      // ** base config
+            experiments: false,
             version: '',
             darkMode: { enabled: false,  source: 0 },  // source: 0= browser default, 1= Signal K mode)
             map: {          // ** map config
@@ -328,13 +329,14 @@ export class AppInfo extends Info {
             'whats-new': [
                 {
                     type: 'signalk-server-node',
-                    title: 'Plugins',
-                    message: `New <b>feeboard-sk-helper</b> plugin.<br>
-                        This new plugin replaces the course data provider previously
-                        contained in GPXLoad plugin.<br>&nbsp;<br>
-                        See this <a href="https://www.npmjs.com/package/gpxload" target="npm">LINK</a> 
+                    title: 'Plugin News',
+                    message: `<b>Action Required:</b><br>
+                        There have been changes to the <b>GPXLoad</b> plugin that will impact 
+                        Freeboard operations with resources (Routes, Waypoints, Notes, etc) and
+                        course information.
+                        <br>&nbsp;<br>
+                        Please <a href="https://www.npmjs.com/package/gpxload" target="npm">visit this link</a> 
                         for more details.`
-
                 }             
             ]            
         }

diff --git a/src/app/modules/skresources/grib/grib.ts → src/app/lib/grib.ts b/src/app/modules/skresources/grib/grib.ts → src/app/lib/grib.ts
@@ -1,14 +1,29 @@
-import { Convert } from 'src/app/lib/convert';
+import { Convert } from './convert';
 
 // ** GRIB reource processing class **
 
+export interface ColorGradient {
+    lo: number | null;     // ** range low value
+    hi: number | null;     // ** range hi value
+    color: Array<number> | string;  // ** color value
+}
+
 export const GRIB_PATH:string= 'resources/grib';
 
 export const GRIB_CATEGORIES= new Map([
     [0, {name: 'Temperature', params: [0]} ],
     [2, {name: 'Wind', params: [2,3] } ]
 ]);
 
+export const TEMPERATURE_GRADIENT: Array<ColorGradient>= [
+    {lo: null, hi: 0, color: 'blue' },
+    {lo: 0, hi: 10, color: 'lightgreen' },
+    {lo: 10, hi: 20, color: 'yellow' },
+    {lo: 20, hi: 30, color: 'orange' },
+    {lo: 30, hi: null, color: 'red' }
+];
+
+
 export class Grib {
 
     constructor() {}

diff --git a/src/app/modules/alarms/alarms.facade.ts b/src/app/modules/alarms/alarms.facade.ts
@@ -3,7 +3,7 @@
 import { Injectable } from '@angular/core';
 import { Subject, forkJoin, Observable } from 'rxjs';
 
-import { AppInfo } from '../../app.info';
+import { AppInfo } from 'src/app/app.info';
 import { SignalKClient } from 'signalk-client-angular';
 import { SKStreamProvider } from '../skstream/skstream.service';
 

diff --git a/src/app/modules/gpxload/gpxload.facade.ts b/src/app/modules/gpxload/gpxload.facade.ts
@@ -3,7 +3,7 @@
 import { Injectable } from '@angular/core';
 import { Subject, Observable } from 'rxjs';
 
-import { AppInfo } from '../../app.info';
+import { AppInfo } from 'src/app/app.info';
 import { SignalKClient } from 'signalk-client-angular';
 import { SKResources } from '../skresources/';
 import { GPX, GPXRoute, GPXWaypoint} from './gpx';

diff --git a/src/app/modules/gpxload/import-dialog.ts b/src/app/modules/gpxload/import-dialog.ts
@@ -1,8 +1,6 @@
 import {Component, OnInit, Inject} from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
-//import { GPX, GPXRoute, GPXWaypoint} from './gpx';
-//import { SKResources } from '../../lib/skresources/'
 import { GPXLoadFacade } from './gpxload.facade'
 
 //** HomePage **

diff --git a/src/app/modules/map/components/feature-ais.component.ts b/src/app/modules/map/components/feature-ais.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, OnChanges, Input, ChangeDetectionStrategy } from '@angular/core';
-import { GeoUtils } from '../../../lib/geoutils';
+import { GeoUtils } from 'src/app/lib/geoutils';
 
 import { Point, LineString } from 'ol/geom';
 import { transform } from 'ol/proj';

diff --git a/src/app/modules/map/components/layer-colormap.component.ts b/src/app/modules/map/components/layer-colormap.component.ts
@@ -8,19 +8,14 @@ import { Style, Fill, Stroke } from 'ol/style';
 import {asArray} from 'ol/color';
 
 import { MapComponent } from 'ngx-openlayers';
+import { ColorGradient } from 'src/app/lib/grib'
 
 
 export interface ColormapValue {
     coord: [number,number]; // ** [x,y]
     value: number;          // ** radians
 }
 
-export interface ColormapGradient {
-    lo: number | null;     // ** range low value
-    hi: number | null;     // ** range hi value
-    color: Array<number> | string;  // ** color value
-}
-
 @Component({
     selector: 'xol-layer-colormap',
     template: `<ng-content></ng-content>`
@@ -30,7 +25,7 @@ export class LayerColormapComponent implements OnInit, OnDestroy, OnChanges {
     @Input() map: MapComponent;
     @Input() zIndex: number;
     @Input() values: Array<ColormapValue>= [];
-    @Input() gradient: Array<ColormapGradient>= [
+    @Input() gradient: Array<ColorGradient>= [
         {lo: null, hi: 0, color: 'blue' },
         {lo: 0, hi: 10, color: 'cyan' },
         {lo: 10, hi: 20, color: 'yellow' },

diff --git a/src/app/modules/map/components/layer-windvector.component.ts b/src/app/modules/map/components/layer-windvector.component.ts
@@ -6,7 +6,7 @@ import { Point } from 'ol/geom';
 import { transform } from 'ol/proj';
 import { Style, Icon } from 'ol/style';
 import { MapComponent } from 'ngx-openlayers';
-import { Convert } from '../../../lib/convert';
+import { Convert } from 'src/app/lib/convert';
 
 export interface WindVector {
     coord: [number,number]; // ** [x,y]

diff --git a/src/app/modules/map/fb-map.component.html b/src/app/modules/map/fb-map.component.html
@@ -111,6 +111,7 @@
     <xol-layer-colormap *ngIf="display.layer.colormap"
         [zIndex]="48"
         [values]="dfeat.heatmap"
+        [gradient]="dfeat.colorGradient"
         [map]="aolMap">
     </xol-layer-colormap>
     <!-- *** /Colormap *** -->        

diff --git a/src/app/modules/map/fb-map.component.ts b/src/app/modules/map/fb-map.component.ts
@@ -7,10 +7,11 @@ import { transform, transformExtent } from 'ol/proj';
 import { Style, Stroke } from 'ol/style';
 import { Collection } from 'ol';
 
-import { Convert } from '../../lib/convert';
-import { GeoUtils } from '../../lib/geoutils';
+import { Convert } from 'src/app/lib/convert';
+import { GeoUtils } from 'src/app/lib/geoutils';
+import { TEMPERATURE_GRADIENT } from 'src/app/lib/grib';
 
-import { AppInfo } from '../../app.info'
+import { AppInfo } from 'src/app/app.info'
 import { SKResources } from '../skresources/resources.service';
 import { SKVessel } from '../skresources/resource-classes';
 import { SKStreamFacade } from '../skstream/skstream.facade';
@@ -141,6 +142,7 @@ export class FBMapComponent implements OnInit, OnDestroy {
         navData: {position: null},
         closest: {id: null, position: [0,0]},
         grib: { wind: [], temperature: [] },    // GRIB data
+        colorGradient: TEMPERATURE_GRADIENT,
         heatmap: []     // values to display on colormap / heatmap
     }
 

diff --git a/src/app/modules/map/map.module.ts b/src/app/modules/map/map.module.ts
@@ -52,4 +52,4 @@ export class FBMapModule {}
 
 export { WindVector } from './components/layer-windvector.component';
 export { HeatmapValue } from './components/layer-heatmap.component';
-export { ColormapValue, ColormapGradient } from './components/layer-colormap.component';
+export { ColormapValue } from './components/layer-colormap.component';
diff --git a/src/app/modules/map/popover.component.ts b/src/app/modules/map/popover.component.ts
@@ -4,7 +4,7 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
 import { SKVessel, SKAtoN } from '../skresources/resource-classes';
-import { Convert } from '../../lib/convert';
+import { Convert } from 'src/app/lib/convert';
 
 /*********** Popover ***************
 title: string -  title text,
@@ -62,7 +62,7 @@ features: Array<any> - list of features
             <mat-nav-list>
                 <mat-list-item *ngFor="let f of features">
                     <a matLine href="#" (click)="handleSelect(f)">
-                        <mat-icon [color]="(f.text.indexOf('self')!=-1) ? 'warn' : '' ">
+                        <mat-icon [color]="(f.text && f.text.indexOf('self')!=-1) ? 'warn' : '' ">
                             {{f.icon}}
                         </mat-icon>
                         {{f.text}}

diff --git a/src/app/modules/settings/components/signalk-preferredpaths.component.ts b/src/app/modules/settings/components/signalk-preferredpaths.component.ts
@@ -4,16 +4,17 @@ Signal K preferred paths component
 ***********************************/
 import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
-import { AppInfo } from '../../../app.info';
+import { AppInfo } from 'src/app/app.info';
 
 @Component({
     selector: 'signalk-preferred-paths',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	styleUrls: ['./signalk-preferredpaths.component.css'],
     template:  `
     <mat-card>
-        <mat-card-content>
-            <div style="max-height:300px;overflow-y:auto;">
+        <mat-card-content style="display:flex;">
+            <div style="flex: 1 1 auto;"></div>
+            <div>
                 <div class="sk-details" *ngFor="let item of pathChoices | keyvalue">
                     <div class="title">
                         <div>{{item.value.name}}</div>
@@ -32,7 +33,8 @@ import { AppInfo } from '../../../app.info';
                         </div>
                     </div>             						
                 </div>
-            </div> 
+            </div>
+            <div style="flex: 1 1 auto;"></div> 
         </mat-card-content>
         <mat-card-actions>
             <div style="text-align:center;">

diff --git a/src/app/modules/settings/settings-dialog.css b/src/app/modules/settings/settings-dialog.css
@@ -1,8 +1,5 @@
-.settings {
-    position: relative;
-    width: 100%;
-    min-height: 300px;
-    max-height: 400px;
+:host ::ng-deep .mat-dialog-content {
+    padding: 0 4px;
 }
 
 .settings .setting-group-title {
@@ -20,19 +17,34 @@
     flex: 1 1 auto;
 }
 
+.left-settings-menu {
+    display: block;
+    position: fixed;
+    min-width: 140px;
+}
+
+.right-settings-content {
+    margin-left: 140px;
+}
+
 /*ipads*/
 @media only screen
     and (min-device-width : 768px)
     and (max-device-width : 1024px),
 /*desktop / laptop */
 only screen	and (min-width : 800px) {
-
 }
 /*xs*/
 @media only screen and (max-width: 599px) {
 	.settings .setting-group {
 		padding: 5px 5% 5px 5%;
-	}	
+    }
+    .left-settings-menu {
+        display: none;
+    } 
+    .right-settings-content {
+        margin-left: initial;
+    }   	
 }
 /*sm*/
 @media only screen and (min-width: 600px) and (max-width: 959px),
@@ -43,6 +55,6 @@ screen and (min-width: 1280px) and (max-width: 1919px),
 /*xl*/
 screen and (min-width: 1920px) and (max-width: 5000px) {
     .settings .setting-group {
-        padding: 5px 15% 5px 15%;
-    }  
+        padding: 5px 5% 5px 5%;
+    } 
 }