Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Dec 19, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8d27497
WFNEWS-2419 route back to map page from full details
ssylver93 Dec 19, 2024
d286550
Update comments
ssylver93 Dec 19, 2024
b3bf266
Fix typo
ssylver93 Dec 19, 2024
123f36f
Update comments
ssylver93 Dec 19, 2024
0bdccd9
Route back to previous zoom level for bans, evacs, area restrictions …
ssylver93 Dec 19, 2024
8ff3d99
Make backToMap logic more readable
ssylver93 Dec 19, 2024
92f5ae9
Add same functionality for fire danger and handle navigation detectio…
ssylver93 Dec 19, 2024
d1a5323
Update isCurrentlyNavigatedOn function to be more clear
ssylver93 Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions .../src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
44 changes: 31 additions & 13 deletions ...news-war/src/main/angular/src/app/components/draggable-panel/draggable-panel.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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),
);
Expand Down Expand Up @@ -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');
}
}
}
Expand Down Expand Up @@ -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) {
Expand All @@ -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
},
});
}
Expand All @@ -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
},
});
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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],
},
});
Expand Down Expand Up @@ -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
},
});
}
Expand Down
92 changes: 79 additions & 13 deletions client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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'] &&
Expand All @@ -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');
}
}
}
5 changes: 3 additions & 2 deletions .../components/preview-panels/area-restriction-preview/area-restriction-preview.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}'`,
Expand Down
6 changes: 4 additions & 2 deletions ...rc/app/components/preview-panels/danger-rating-preview/danger-rating-preview.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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], {
Expand All @@ -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
},
}),
);
Expand Down
6 changes: 4 additions & 2 deletions ...ar/src/app/components/preview-panels/evacuations-preview/evacuations-preview.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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
},
}),
);
Expand Down
5 changes: 3 additions & 2 deletions .../angular/src/app/components/preview-panels/fire-ban-preview/fire-ban-preview.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading
Loading