WFNEWS-1303 : Fixes and tweaks

client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.html

@@ -163,6 +163,8 @@ <h2 class="wildfire-count">
       <mobile-sliding-drawer [(isVisible)]="isAllLayersOpen" [title]="'Map Settings'">
         <map-type-picker></map-type-picker>
         <hr class="drawer-section-divider">
-        <map-layers-section [mapInitialized]="isMapLoaded"></map-layers-section>
+
+        <map-layers-section [mapInitialized]="isMapLoaded" [(triggerRefresh)]="refreshAllLayers" (layersChangedEvent)="handleLayerChange()"></map-layers-section>
+
       </mobile-sliding-drawer>
 </div>

client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.scss

@@ -370,7 +370,7 @@ mat-panel-title {
   }
 
   .container {
-    height: calc(100vh) !important;
+    height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top)) !important;
     overflow: hidden;
   }
 
@@ -475,7 +475,7 @@ mat-panel-title {
     }
 
     .map {
-      height: calc(100% - 10vh - env(safe-area-inset-bottom) - env(safe-area-inset-top)) !important;
+      height: calc(100% - 10vh) !important;
 
       .identify-panel {
         height: 100% !important;

client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts

@@ -89,6 +89,8 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit {
   isLocationEnabled: boolean;
   isMapLoaded = false;
   isAllLayersOpen = false;
+  refreshAllLayers = false;
+
 
   showPanel: boolean;
 
@@ -416,6 +418,14 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit {
       /* 19 */ { itemId: 'bans-and-prohibitions-cat1', visible: false },
       /* 20 */ { itemId: 'bans-and-prohibitions-cat2', visible: false },
       /* 21 */ { itemId: 'bans-and-prohibitions-cat3', visible: false },
+
+      // Not in a feature but need to be cleared
+      { itemId: 'bc-fsr', visible: false },
+      { itemId: 'current-conditions--default', visible: false },
+      { itemId: 'precipitation', visible: false },
+      { itemId: 'protected-lands-access-restrictions', visible: false },
+      { itemId: 'radar-1km-rrai--radarurpprecipr14-linear', visible: false },
+      { itemId: 'weather-stations', visible: false },
     ];
 
     switch (this.selectedLayer) {
@@ -471,7 +481,8 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit {
       this.initMap(event)
     } 
 
-    return this.smkApi.setDisplayContextItemsVisible(...layers);
+    this.smkApi.setDisplayContextItemsVisible(...layers);
+    this.refreshAllLayers = true;
   }
 
   async useMyCurrentLocation() {
@@ -619,4 +630,9 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit {
   openAllLayers() {
     this.isAllLayersOpen = true;
   }
+
+  handleLayerChange() {
+    this.selectedLayer = 'all-layers';
+    this.selectedPanel = 'all-layers';
+  }
 }

client/wfnews-war/src/main/angular/src/app/components/map-layers-drawer-section/map-layers-drawer-section.component.html

@@ -1,6 +1,6 @@
 <div class="header">
   <div class="heading">Map Layers</div>
-  <div class="clear-all" (click)="clearAll()">Clear All</div>
+  <div class="clear-all" (click)="clearAll(true)">Clear All</div>
 </div>
 <div class="sections">
   <div class="section">

client/wfnews-war/src/main/angular/src/app/components/map-layers-drawer-section/map-layers-drawer-section.component.scss

@@ -32,6 +32,7 @@
   align-items: flex-start;
   gap: 32px;
   align-self: stretch;
+  margin-bottom: calc(24px + env(safe-area-inset-bottom));
 }
 
 .section {

client/wfnews-war/src/main/angular/src/app/components/map-layers-drawer-section/map-layers-drawer-section.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { SmkApi } from '@app/utils/smk';
 
 @Component({
@@ -8,6 +8,9 @@ import { SmkApi } from '@app/utils/smk';
 })
 export class MapLayersDrawerSectionComponent implements OnChanges {
   @Input() mapInitialized: boolean;
+  @Input() triggerRefresh: boolean;
+  @Output() triggerRefreshChange = new EventEmitter<boolean>();
+  @Output() layersChangedEvent = new EventEmitter<boolean>();
 
   activeWeatherStations = false;
   airQuality = false; // TODO: add air quality layer
@@ -34,14 +37,18 @@ export class MapLayersDrawerSectionComponent implements OnChanges {
   underControlWildfire = false;
   wildfireOfNote = false;
 
+  constructor(private cdr: ChangeDetectorRef) {}
+
   ngOnChanges(changes: SimpleChanges) {
     console.log('onChanges', changes);
-    if (this.mapInitialized) {
+    if (this.mapInitialized || (this.mapInitialized && this.triggerRefresh)) {
+      this.clearAll(false);
       this.loadLayers();
     }
   } 
 
-  clearAll() {
+
+  clearAll(updateLayers: boolean) {
     this.activeWeatherStations = false;
     this.airQuality = false; // TODO: add air quality layer
     this.areaRestrictions = false;
@@ -67,7 +74,9 @@ export class MapLayersDrawerSectionComponent implements OnChanges {
     this.underControlWildfire = false;
     this.wildfireOfNote = false;
 
-    this.updateLayers();
+    if (updateLayers) {
+      this.updateLayers();
+    }
   }
 
   loadLayers() {
@@ -157,6 +166,9 @@ export class MapLayersDrawerSectionComponent implements OnChanges {
           break;
       }
     });
+
+    this.triggerRefreshChange.emit(false);
+    this.cdr.detectChanges();
   }
 
   updateLayers() {
@@ -194,6 +206,7 @@ export class MapLayersDrawerSectionComponent implements OnChanges {
       { itemId: 'weather-stations', visible: this.activeWeatherStations },
     ];
 
-    return smkApi.setDisplayContextItemsVisible(...layers);
+    smkApi.setDisplayContextItemsVisible(...layers);
+    this.layersChangedEvent.emit(true);
   }
 }

client/wfnews-war/src/main/angular/src/app/components/report-of-fire/dialog-location/dialog-location.component.html

@@ -3,7 +3,7 @@
     <div class="icon"><mat-icon svgIcon="location-off"></mat-icon></div>
     <p>To access this feature, please turn on location services in your device settings.</p>
     <div class="button-group">
-        <button class="btn-block primary" (click)="goToSetting()"> Go to settings </button>
+        <button class="btn-block primary" *ngIf="showSettingsButton" (click)="goToSetting()"> Go to settings </button>
         <button class="btn-block secondary" (click)="closeDialog()"> Cancel </button>
     </div>
 </div>

client/wfnews-war/src/main/angular/src/app/components/report-of-fire/dialog-location/dialog-location.component.ts

@@ -1,34 +1,49 @@
-import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
-import { CapacitorService } from '@app/services/capacitor-service';
-import { NativeSettings, AndroidSettings, IOSSettings } from 'capacitor-native-settings';
-
+import { Component } from "@angular/core";
+import { MatDialogRef } from "@angular/material/dialog";
+import { CapacitorService } from "@app/services/capacitor-service";
+import {
+  AndroidSettings,
+  IOSSettings,
+  NativeSettings,
+} from "capacitor-native-settings";
 
 @Component({
-  selector: 'wfnews-dialog-location',
-  templateUrl: './dialog-location.component.html',
-  styleUrls: ['./dialog-location.component.scss']
+  selector: "wfnews-dialog-location",
+  templateUrl: "./dialog-location.component.html",
+  styleUrls: ["./dialog-location.component.scss"],
 })
 export class DialogLocationComponent {
-  constructor(private dialogRef: MatDialogRef<DialogLocationComponent>, private capacitorService: CapacitorService) { }
+  showSettingsButton = false;
+
+  constructor(
+    private dialogRef: MatDialogRef<DialogLocationComponent>,
+    private capacitorService: CapacitorService
+  ) {
+    this.checkOperatingSystem();
+  }
 
   closeDialog() {
     this.dialogRef.close();
   }
-
+
+  async checkOperatingSystem() {
+    const device = await this.capacitorService.checkDeviceSystem();
+    this.showSettingsButton =
+      (device.operatingSystem === "ios" || device.operatingSystem === "android") &&
+      device.platform !== "web";
+  }
+
   async goToSetting() {
-    let device = (await this.capacitorService.checkDeviceSystem())
-    if (device.operatingSystem === 'ios') {
+    const device = await this.capacitorService.checkDeviceSystem();
+    if (device.operatingSystem === "ios") {
       NativeSettings.openIOS({
         option: IOSSettings.App,
       });
-
-    }
-    else if (device.operatingSystem === 'android') {
+    } else if (device.operatingSystem === "android") {
       NativeSettings.openAndroid({
         option: AndroidSettings.ApplicationDetails,
       });
     }
-    this.dialogRef.close()
+    this.dialogRef.close();
   }
 }