WFNEWS-2419 route back to map page from full details (#2167)

* WFNEWS-2419 route back to map page from full details * Update comments * Fix typo * Update comments * Route back to previous zoom level for bans, evacs, area restrictions on desktop * Make backToMap logic more readable * Add same functionality for fire danger and handle navigation detection more gracefully * Update isCurrentlyNavigatedOn function to be more clear
bcgov · Dec 19, 2024 · e246888 · e246888
1 parent 56a0fd8
commit e246888
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 40 deletions.
diff --git a/.../src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts b/.../src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts
@@ -490,9 +490,11 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit {
           } else if ((params['areaRestriction'] && params['areaRestriction'] === 'true') || 
               (params['evacuationAlert'] && params['evacuationAlert'] === 'true') || 
               (params['activeWildfires'] && params['activeWildfires'] === 'true')){
-            this.panToLocation(long, lat, 12);
+            this.panToLocation(long, lat, params['zoom'] ? params['zoom'] : 12);
           } else if (params['bansProhibitions'] && params['bansProhibitions'] === 'true'){
-            this.panToLocation(long, lat, 6);
+            this.panToLocation(long, lat, params['zoom'] ? params['zoom'] : 6);
+          } else if (params['dangerRating'] && params['dangerRating'] === 'true'){
+            this.panToLocation(long, lat, params['zoom'] ? params['zoom'] : 5);
           } else if (params['savedLocation'] && params['savedLocation'] === 'true') {
             this.panToLocation(long, lat, 8);
           } else {

diff --git a/...news-war/src/main/angular/src/app/components/draggable-panel/draggable-panel.component.ts b/...news-war/src/main/angular/src/app/components/draggable-panel/draggable-panel.component.ts
@@ -74,7 +74,7 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy {
     'active-wildfires-under-control',
     'bcws-activefires-publicview-inactive',
     'fire-perimeters',
-    "active-wildfires-out"
+    'active-wildfires-out'
   ];
   convertToDateYear = convertToDateYear;
   convertToDateTime = convertToDateTime;
@@ -90,7 +90,7 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy {
   private previousZoom: number;
   private marker: any;
   private markerAnimation;
-  public snowPlowHelper = snowPlowHelper
+  public snowPlowHelper = snowPlowHelper;
   constructor(
     private publishedIncidentService: PublishedIncidentService,
     protected cdr: ChangeDetectorRef,
@@ -175,8 +175,8 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy {
     if (this.currentIncidentRefs.length === 1 && this.allowBackToIncidentsPanel) {
       // only show preview detial if it is through openPreviewPanel(). We will always the preview list page by clicking on map, even there is only single item.
       this.showPanel = true;
-      showPanel('identify-panel-wrapper')
-      hidePanel('desktop-preview')
+      showPanel('identify-panel-wrapper');
+      hidePanel('desktop-preview');
       const viewer = getActiveMap().$viewer;
       for (const polygon of this.highlightPolygons) {
         viewer.map.removeLayer(polygon);
@@ -187,8 +187,8 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy {
 
       // single feature within clicked area
       this.showPanel = true;
-      showPanel('identify-panel-wrapper')
-      hidePanel('desktop-preview')
+      showPanel('identify-panel-wrapper');
+      hidePanel('desktop-preview');
       this.identifyItem = this.currentIncidentRefs[0];
       let incidentNumber = null;
       let fireYear = null;
@@ -243,8 +243,8 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy {
       // multiple features within clicked area
       this.identifyItem = null;
       this.showPanel = true;
-      showPanel('identify-panel-wrapper')
-      hidePanel('desktop-preview')
+      showPanel('identify-panel-wrapper');
+      hidePanel('desktop-preview');
       this.filteredWildfires = this.currentIncidentRefs.filter((item) =>
         this.wildfireLayerIds.includes(item.layerId),
       );
@@ -294,8 +294,8 @@ export class DraggablePanelComponent implements OnInit, OnChanges, OnDestroy {
       );
       if (this.weatherStations) {
         this.showPanel = true;
-        showPanel('identify-panel-wrapper')
-        hidePanel('desktop-preview')
+        showPanel('identify-panel-wrapper');
+        hidePanel('desktop-preview');
       }
     }
   }
@@ -587,6 +587,9 @@ return 'Unknown';
         location.longitude = Number(this.identifyItem._identifyPoint.longitude);
       }
 
+      // detect current zoom level for routing back from full details page
+      const currentZoomLevel = getActiveMap().$viewer?.map?._zoom;
+
       switch (this.identifyItem.layerId) {
         case 'area-restrictions':
           if (item.properties.NAME) {
@@ -596,6 +599,9 @@ return 'Unknown';
                 id: item.properties.PROT_RA_SYSID,
                 name: item.properties.NAME,
                 source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
+                sourceLatitude: location.latitude,
+                sourceLongitude: location.longitude,
+                sourceZoom: currentZoomLevel
               },
             });
           }
@@ -607,6 +613,9 @@ return 'Unknown';
                 type: 'bans-prohibitions',
                 id: item.properties.PROT_BAP_SYSID,
                 source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
+                sourceLatitude: location.latitude,
+                sourceLongitude: location.longitude,
+                sourceZoom: currentZoomLevel
               },
             });
           }
@@ -618,7 +627,10 @@ return 'Unknown';
               id: item.properties.DANGER_RATING_DESC,
               location: JSON.stringify(location),
               source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
-              sysid: item.properties.PROT_DR_SYSID
+              sysid: item.properties.PROT_DR_SYSID,
+              sourceLatitude: location.latitude,
+              sourceLongitude: location.longitude,
+              sourceZoom: currentZoomLevel
             },
           });
           break;
@@ -636,6 +648,9 @@ return 'Unknown';
               name: item.properties.EVENT_NAME,
               source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
               eventNumber: item.properties.EVENT_NUMBER,
+              sourceLatitude: location.latitude,
+              sourceLongitude: location.longitude,
+              sourceZoom: currentZoomLevel
             },
           });
           break;
@@ -651,8 +666,8 @@ return 'Unknown';
           if (fireYear && incidentNumber) {
             this.router.navigate([ResourcesRoutes.PUBLIC_INCIDENT], {
               queryParams: {
-                fireYear: fireYear,
-                incidentNumber: incidentNumber,
+                fireYear,
+                incidentNumber,
                 source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
               },
             });
@@ -684,6 +699,9 @@ return 'Unknown';
                   type: 'bans-prohibitions',
                   id: item.properties.PROT_BAP_SYSID,
                   source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
+                  sourceLatitude: location.latitude,
+                  sourceLongitude: location.longitude,
+                  sourceZoom: currentZoomLevel
                 },
               });
             }

diff --git a/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.ts b/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.ts
@@ -15,21 +15,21 @@ export class FullDetailsComponent implements OnInit, OnDestroy {
     private router: Router,
     private route: ActivatedRoute,
     private agolService: AGOLService,
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.route.queryParams.subscribe((params: ParamMap) => {
       this.params = params;
     });
     if (document.getElementById('mobile-navigation-bar')) {
-document.getElementById('mobile-navigation-bar').style.display = 'none';
-}
+      document.getElementById('mobile-navigation-bar').style.display = 'none';
+    }
   }
 
   ngOnDestroy(): void {
     if (document.getElementById('mobile-navigation-bar')) {
-document.getElementById('mobile-navigation-bar').style.display = 'block';
-}
+      document.getElementById('mobile-navigation-bar').style.display = 'block';
+    }
   }
 
   getTitle() {
@@ -48,8 +48,14 @@ document.getElementById('mobile-navigation-bar').style.display = 'block';
 
   back() {
     try {
-      if (this.params && this.params['source']) {
-        if (
+      if (this.params?.['source']) {
+        // If the user accessed the full details page from the map, and if the full details page contains one of area restrictions,
+        // fire bans, evac orders or evac alerts, use the backToMap function to route back to the map using the same layer and zoom level,
+        // along with the appropriate coordinates for that type.
+        if (this.navigatedfromMapPage()
+            && this.isCurrentlyNavigatedOn(['area-restriction', 'bans-prohibitions', 'evac-order', 'evac-alert', 'danger-rating'])) {
+          this.backToMap();
+        } else if (
           this.params['source'] === 'saved-location' &&
           this.params['sourceName'] &&
           this.params['sourceLongitude'] &&
@@ -75,18 +81,78 @@ document.getElementById('mobile-navigation-bar').style.display = 'block';
             },
           });
         } else {
-this.router.navigate(this.params['source']);
-}
+          this.router.navigate(this.params['source']);
+        }
       } else {
-throw new Error('No previous screen to route too');
-}
+        throw new Error('No previous screen to route to');
+      }
     } catch (err) {
       console.error(err);
       this.router.navigate([ResourcesRoutes.DASHBOARD]);
     }
   }
 
-  async exit() {
-    this.router.navigate([ResourcesRoutes.DASHBOARD]);
+  exit() {
+    // If the user accessed the full details page from the map, and if the full details page contains one of area restrictions,
+    // fire bans, evac orders or evac alerts, use the backToMap function to route back to the map using the same layer and zoom level,
+    // along with the appropriate coordinates for that type
+    if (this.navigatedfromMapPage()
+      && this.isCurrentlyNavigatedOn(['area-restriction', 'bans-prohibitions', 'evac-order', 'evac-alert', 'danger-rating'])) {
+      this.backToMap();
+    } else {
+      this.router.navigate([ResourcesRoutes.DASHBOARD]);
+    }
+  }
+
+  navigatedfromMapPage() {
+    if (this.params?.['source'] === 'map' || this.params?.['source']?.[0] === 'map') {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  isCurrentlyNavigatedOn(pageList) {
+    if (pageList.includes(this.params?.['type'])) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  // use query params to determine the layer, coordinates and zoom level for routing back to the map
+  backToMap() {
+    const navigateToMap = (longitude: number, latitude: number, zoom: string, queryParamKey: string) => {
+      setTimeout(() => {
+        this.router.navigate([ResourcesRoutes.ACTIVEWILDFIREMAP], {
+          queryParams: {
+            longitude,
+            latitude,
+            zoom,
+            [queryParamKey]: true
+          },
+        });
+      }, 100);
+    };
+
+    if (this.params['type'] && this.params['sourceLongitude'] && this.params['sourceLatitude'] && this.params['sourceZoom']) {
+      switch (this.params['type']) {
+        case 'area-restriction':
+          navigateToMap(this.params['sourceLongitude'], this.params['sourceLatitude'], this.params['sourceZoom'], 'areaRestriction');
+          break;
+        case 'bans-prohibitions':
+          navigateToMap(this.params['sourceLongitude'], this.params['sourceLatitude'], this.params['sourceZoom'], 'bansProhibitions');
+          break;
+        case 'danger-rating':
+          navigateToMap(this.params['sourceLongitude'], this.params['sourceLatitude'], this.params['sourceZoom'], 'dangerRating');
+          break;
+        case 'evac-alert':
+        case 'evac-order':
+          navigateToMap(this.params['sourceLongitude'], this.params['sourceLatitude'], this.params['sourceZoom'], 'evacuationAlert');
+          break;
+      }
+    } else {
+      throw new Error('Error occurred while routing back to map');
+    }
   }
 }
diff --git a/.../components/preview-panels/area-restriction-preview/area-restriction-preview.component.ts b/.../components/preview-panels/area-restriction-preview/area-restriction-preview.component.ts
@@ -38,21 +38,22 @@ export class AreaRestrictionPreviewComponent {
 
 
   enterFullDetail() {
+    const currentZoomLevel = getActiveMap().$viewer?.map?._zoom;
     const url = this.router.serializeUrl(
       this.router.createUrlTree([ResourcesRoutes.PUBLIC_EVENT], {
         queryParams: {
           eventType: 'area-restriction',
           eventNumber: this.data.PROT_RA_SYSID,
           eventName: this.data.NAME,
-          source: [ResourcesRoutes.ACTIVEWILDFIREMAP]
+          source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
+          zoom: currentZoomLevel
         },
       }),
     );
     this.capacitorService.redirect(url, true);
   }
 
   zoomIn(level?: number, polygon?: boolean) {
-    const viewer = getActiveMap().$viewer;
     this.agolService
       .getAreaRestrictions(
         `NAME='${this.data.NAME}'`,

diff --git a/...rc/app/components/preview-panels/danger-rating-preview/danger-rating-preview.component.ts b/...rc/app/components/preview-panels/danger-rating-preview/danger-rating-preview.component.ts
@@ -5,7 +5,7 @@ import { LocationData } from '@app/components/wildfires-list-header/filter-by-lo
 import { AGOLService } from '@app/services/AGOL-service';
 import { CapacitorService } from '@app/services/capacitor-service';
 import { CommonUtilityService } from '@app/services/common-utility.service';
-import { ResourcesRoutes, formatDate, hidePanel, showPanel, displayDangerRatingDescription } from '@app/utils';
+import { ResourcesRoutes, formatDate, hidePanel, showPanel, displayDangerRatingDescription, getActiveMap } from '@app/utils';
 
 @Component({
   selector: 'wfnews-danger-rating-preview',
@@ -40,6 +40,7 @@ export class DangerRatingPreviewComponent {
   }
 
   enterFullDetail() {
+    const currentZoomLevel = getActiveMap().$viewer?.map?._zoom;
     const location = new LocationData();
     const url = this.router.serializeUrl(
       this.router.createUrlTree([ResourcesRoutes.PUBLIC_EVENT], {
@@ -48,7 +49,8 @@ export class DangerRatingPreviewComponent {
           eventNumber: this.data.PROT_DR_SYSID,
           eventName: this.data.DANGER_RATING_DESC,
           location: JSON.stringify(location),
-          source: [ResourcesRoutes.ACTIVEWILDFIREMAP]
+          source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
+          zoom: currentZoomLevel
         },
       }),
     );

diff --git a/...ar/src/app/components/preview-panels/evacuations-preview/evacuations-preview.component.ts b/...ar/src/app/components/preview-panels/evacuations-preview/evacuations-preview.component.ts
@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
 import { AGOLService } from '@app/services/AGOL-service';
 import { CapacitorService } from '@app/services/capacitor-service';
 import { CommonUtilityService } from '@app/services/common-utility.service';
-import { ResourcesRoutes, convertToDateYear, hidePanel, showPanel } from '@app/utils';
+import { ResourcesRoutes, convertToDateYear, hidePanel, showPanel, getActiveMap } from '@app/utils';
 import { MapUtilityService } from '../map-share-service';
 
 @Component({
@@ -49,14 +49,16 @@ export class EvacuationsPreviewComponent {
   }
 
   enterFullDetail() {
+    const currentZoomLevel = getActiveMap().$viewer?.map?._zoom;
     if (this.data) {
       const url = this.router.serializeUrl(
         this.router.createUrlTree([ResourcesRoutes.PUBLIC_EVENT], {
           queryParams: {
             eventType: this.data.ORDER_ALERT_STATUS,
             id: this.data.EMRG_OAA_SYSID,
             eventNumber: this.data.EVENT_NUMBER,
-            source: [ResourcesRoutes.ACTIVEWILDFIREMAP]
+            source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
+            zoom: currentZoomLevel
           },
         }),
       );

diff --git a/.../angular/src/app/components/preview-panels/fire-ban-preview/fire-ban-preview.component.ts b/.../angular/src/app/components/preview-panels/fire-ban-preview/fire-ban-preview.component.ts
@@ -38,21 +38,22 @@ export class FireBanPreviewComponent {
   }
 
   enterFullDetail() {
+    const currentZoomLevel = getActiveMap().$viewer?.map?._zoom;
     const url = this.router.serializeUrl(
       this.router.createUrlTree([ResourcesRoutes.PUBLIC_EVENT], {
         queryParams: {
           eventType: 'ban',
           eventNumber: this.data.PROT_BAP_SYSID,
           eventName: this.data.ACCESS_PROHIBITION_DESCRIPTION,
-          source: [ResourcesRoutes.ACTIVEWILDFIREMAP]
+          source: [ResourcesRoutes.ACTIVEWILDFIREMAP],
+          zoom: currentZoomLevel
         },
       }),
     );
     this.capacitorService.redirect(url, true);
   }
 
   zoomIn(level?: number, polygon?: boolean) {
-    const viewer = getActiveMap().$viewer;
     this.agolService
       .getBansAndProhibitionsById(
         this.data.PROT_BAP_SYSID,