diff --git a/client/wfnews-war/src/main/angular/src/app/app.module.ts b/client/wfnews-war/src/main/angular/src/app/app.module.ts index a93360f148..6b128017e1 100644 --- a/client/wfnews-war/src/main/angular/src/app/app.module.ts +++ b/client/wfnews-war/src/main/angular/src/app/app.module.ts @@ -184,7 +184,6 @@ import { EvacOrderFullDetailsComponent } from './components/full-details/evac-or import { EvacOtherInfoComponent } from './components/full-details/evac-other-info/evac-other-info.component'; import { FullDetailsComponent } from './components/full-details/full-details.component'; import { IdentifyPanel } from './components/identify-panel/identify-panel.component'; -import { IncidentIdentifyPanelComponent } from './components/incident-identify-panel/incident-identify-panel.component'; import { AreaRestrictionLegendComponent } from './components/legend-panels/area-restriction-layers/area-restriction-legend.component'; import { BansLegendComponent } from './components/legend-panels/bans-layers/bans-legend.component'; import { BaseLegendComponent } from './components/legend-panels/base-legend.component'; @@ -370,7 +369,6 @@ export const DATE_FORMATS = { ErrorPageComponent, WildFiresListComponentDesktop, WildfiresListContainerDesktop, - IncidentIdentifyPanelComponent, PanelWildfireStageOfControlContainerDesktop, PublicIncidentPage, IncidentGalleryPanel, diff --git a/client/wfnews-war/src/main/angular/src/app/components/incident-identify-panel/incident-identify-panel.component.html b/client/wfnews-war/src/main/angular/src/app/components/incident-identify-panel/incident-identify-panel.component.html deleted file mode 100644 index 582145ef17..0000000000 --- a/client/wfnews-war/src/main/angular/src/app/components/incident-identify-panel/incident-identify-panel.component.html +++ /dev/null @@ -1,84 +0,0 @@ - -
-
-
close
-
- -
-
-
-
close
- -
navigate_next
- {{identifiedFeatures.length}} of {{index}} -
navigate_before
-
-
-
{{incident.incidentName}} local_fire_department {{onWatchlist() ? 'bookmark' : 'bookmark_border'}}
-
{{convertToFireCentreDescription(incident.fireCentreName || incident.fireCentre || incident.fireCentreCode)}}
-
-
- -
-
-
Fire Number: {{convertFireNumber(incident)}}
-
Last Updated: {{incident.lastUpdatedTimestamp}}
-
Discovered On: {{incident.discoveryDate}}
-
Declared Out: {{incident.declaredOutDate}}
-
-
-
-
Size: {{incident.incidentSizeEstimatedHa ? incident.incidentSizeEstimatedHa.toLocaleString() : 0}} Hectares
-
{{incident.incidentSizeDetail || 'Fire size is estimated and based on the most current information available.'}}
-
-
Location
-
{{incident.incidentLocation}}
-
-
-
Traditional Territory
-
{{incident.traditionalTerritoryDetail}}
-
-
- -
-
-

Active Evacuation Orders and Alerts

-
- {{ evac.orderAlertStatus === 'Alert' ? 'error' : 'warning' }} - {{ evac.orderAlertStatus }}: {{evac.eventName}} -
{{ evac.orderAlertStatus }}: {{evac.eventName}}
-
(Issued By: {{evac.issuingAgency}})
-
-
-
- -
-

Current Resources on Response

-
-
- Wildfire Crews -
Wildfire Crews
-
-
- Aviation -
Aviation
-
-
- Incident Management Team -
Incident Management Team
-
-
- Heavy Equipment -
Heavy Equipment
-
-
- Structure Protection -
Structure Protection
-
-
-
-
diff --git a/client/wfnews-war/src/main/angular/src/app/components/incident-identify-panel/incident-identify-panel.component.scss b/client/wfnews-war/src/main/angular/src/app/components/incident-identify-panel/incident-identify-panel.component.scss deleted file mode 100644 index 9fdef2eb64..0000000000 --- a/client/wfnews-war/src/main/angular/src/app/components/incident-identify-panel/incident-identify-panel.component.scss +++ /dev/null @@ -1,119 +0,0 @@ -.incident-details { - font-family: "BCSans", "Open Sans", Verdana, Arial, sans-serif; - padding: 24px; - background-color: white; - height: 100%; - .header { - text-align: right; - display: flex; - flex-flow: row-reverse; - .button { - cursor: pointer; - } - .zoom-to-button { - cursor: pointer; - background-color: white; - border-radius: 4px; - border: 2px solid #dddddd; - margin-right: 5px; - } - } - .title-bar { - .title { - font-size: 1.6rem; - color: #003366; - display: flex; - flex-direction: row; - .fire-icon-container { - width: 24px; - height: 24px; - border-radius: 50%; - margin-right: 8px; - margin-left: 8px; - .fire-icon { - width: 14.4px; - height: 18px; - color: #ffffff; - } - } - } - .subtitle { - text-decoration: underline; - color: #1a5a96; - font-size: 1rem; - } - } - .nav-button { - padding-top: 7px; - } - .info-panel { - padding-top: 7px; - font-size: 1rem; - .label { - color: #036; - } - .paragraph-format { - font-size: 15px; - } - } - .divider { - border-bottom: 1px lightgray solid; - padding-top: 7px; - padding-bottom: 7px; - } - .gutter { - padding-top: 7px; - } - .icon-bar { - display: flex; - flex-direction: row; - - .resource-icon { - color: #003366; - font-size: 1rem; - padding-left: 7px; - padding-right: 7px; - text-align: center; - .image-size { - width: 50px; - height: 50px; - } - .image-label { - max-width: 100px; - } - } - } - .evac-list { - display: flex; - flex-direction: row; - color: black; - padding-top: 7px; - .label { - text-decoration: underline; - } - .issued-by { - padding: 4px; - font-size: 12px; - font-style: italic; - color: gray; - text-decoration: none; - } - } - .alert { - color: #dfa512 !important; - } - .order { - color: #b42e45 !important; - } - h4 { - color: #003366; - } -} - -.loading-spinner { - justify-content: center; - width: 100%; - height: 100%; - display: flex; - margin-top: calc(100dvh / 4); -} diff --git a/client/wfnews-war/src/main/angular/src/app/components/incident-identify-panel/incident-identify-panel.component.ts b/client/wfnews-war/src/main/angular/src/app/components/incident-identify-panel/incident-identify-panel.component.ts deleted file mode 100644 index 0c1952c210..0000000000 --- a/client/wfnews-war/src/main/angular/src/app/components/incident-identify-panel/incident-identify-panel.component.ts +++ /dev/null @@ -1,283 +0,0 @@ -import { ChangeDetectorRef, Component } from '@angular/core'; -import { Router } from '@angular/router'; -import { EvacOrderOption } from '../../conversion/models'; -import { AGOLService } from '../../services/AGOL-service'; -import { MapConfigService } from '../../services/map-config.service'; -import { PublishedIncidentService } from '../../services/published-incident-service'; -import { WatchlistService } from '../../services/watchlist-service'; -import { - ResourcesRoutes, - convertFireNumber, - convertToFireCentreDescription, - getActiveMap, -} from '../../utils'; -import { CapacitorService } from '@app/services/capacitor-service'; - -@Component({ - selector: 'incident-identify-panel', - templateUrl: './incident-identify-panel.component.html', - styleUrls: ['./incident-identify-panel.component.scss'], -}) -export class IncidentIdentifyPanelComponent { - public incident: any; - public evacOrders: EvacOrderOption[] = []; - public loaded = false; - public failedToLoad = false; - - public featureSet; - public identifiedFeatures = []; - public index = 0; - convertToFireCentreDescription = convertToFireCentreDescription; - convertFireNumber = convertFireNumber; - - constructor( - protected cdr: ChangeDetectorRef, - private agolService: AGOLService, - private publishedIncidentService: PublishedIncidentService, - private router: Router, - private watchlistService: WatchlistService, - private mapConfigService: MapConfigService, - private capacitorService: CapacitorService, - ) {} - - // if we want the "next" functionality, pass in the identify set - async setIncident(incidentRef, identifyList, setIndex = true) { - this.loaded = false; - this.featureSet = identifyList; - // clear the feature list - this.identifiedFeatures = []; - let count = 1; // index counter for the next/previous buttons - for (const fid in identifyList) { - if (Object.hasOwn(identifyList, fid)) { - const feature = identifyList[fid]; - if ( - [ - 'active-wildfires-fire-of-note', - 'active-wildfires-out-of-control', - 'active-wildfires-holding', - 'active-wildfires-under-control', - 'active-wildfires-out', - ].includes(feature.layerId) - ) { - this.identifiedFeatures.push(feature); - // if we want to reset the index, we need to compare the input feature ID to the identified feature ID - if (setIndex) { - const sourceId = feature.properties.FIRE_NUMBER - ? feature.properties.FIRE_NUMBER - : feature.properties.incident_number_label; - const compareId = incidentRef.FIRE_NUMBER - ? incidentRef.FIRE_NUMBER - : incidentRef.incident_number_label; - if (sourceId && compareId && sourceId === compareId) { - this.index = count; - } - count++; - } - } - } - } - - // get the fire number, either from a perimeter or active fire feature - const id = incidentRef.FIRE_NUMBER - ? incidentRef.FIRE_NUMBER - : incidentRef.incident_number_label; - const year = incidentRef.fire_year ? incidentRef.fire_year : incidentRef.FIRE_YEAR; - // activeFire uses fire_year and fire perimeter uses FIRE_YEAR - this.publishedIncidentService - .fetchPublishedIncident(id, year) - .toPromise() - .then(async (result) => { - this.incident = result; - - this.incident.geometry = { - x: result.longitude, - y: result.latitude, - }; - - // date formatting - const options: Intl.DateTimeFormatOptions = { - weekday: 'long', - year: 'numeric', - month: 'long', - day: 'numeric', - }; - this.incident.discoveryDate = this.incident.discoveryDate - ? new Date(this.incident.discoveryDate).toLocaleTimeString( - 'en-US', - options, - ) - : 'Pending'; - this.incident.declaredOutDate = this.incident.declaredOutDate - ? new Date(this.incident.declaredOutDate).toLocaleTimeString( - 'en-US', - options, - ) - : 'Pending'; - this.incident.lastUpdatedTimestamp = this.incident.lastUpdatedTimestamp - ? new Date(this.incident.lastUpdatedTimestamp).toLocaleTimeString( - 'en-US', - options, - ) - : 'Pending'; - - // load evac orders nearby - await this.getEvacOrders().catch((e) => console.error(e)); - await this.getExternalUriEvacOrders().catch((e) => console.error(e)); - // then, set loaded to true and refresh the page - this.loaded = true; - - this.cdr.detectChanges(); - }) - .catch((err) => { - console.error('Failed to load Fire Info', err); - this.loaded = true; - this.failedToLoad = true; - }); - } - - close() { - // ( - // document.getElementsByClassName('incident-details').item(0) as HTMLElement - // ).remove(); - ( - document.getElementsByClassName('identify-panel').item(0) as HTMLElement - ).style.display = 'none'; - } - - async goToIncidentDetail() { - // this.router.navigate([ResourcesRoutes.PUBLIC_INCIDENT], { queryParams: { incidentNumber: this.incident.incidentNumberLabel } }) - const device = await this.capacitorService.checkDeviceSystem(); - // IOS standalone app can not open url in blank page. - if (device.operatingSystem === 'ios') { - this.router.navigate([ResourcesRoutes.PUBLIC_INCIDENT], { - queryParams: { - fireYear: this.incident.fireYear, - incidentNumber: this.incident.incidentNumberLabel, - }, - }); - } else { - const url = this.router.serializeUrl( - this.router.createUrlTree([ResourcesRoutes.PUBLIC_INCIDENT], { - queryParams: { - fireYear: this.incident.fireYear, - incidentNumber: this.incident.incidentNumberLabel, - source: [ResourcesRoutes.ACTIVEWILDFIREMAP], - }, - }), - ); - window.open(url, '_blank'); - } - } - - next() { - this.index = this.index + 1; - if (this.index > this.identifiedFeatures.length) { - this.index = 1; - } - - this.setIncident( - this.identifiedFeatures[this.index - 1].properties, - this.featureSet, - false, - ).catch((e) => console.error(e)); - } - - previous() { - this.index = this.index - 1; - if (this.index <= 0) { - this.index = this.identifiedFeatures.length; - } - - this.setIncident( - this.identifiedFeatures[this.index - 1].properties, - this.featureSet, - false, - ).catch((e) => console.error(e)); - } - - onWatchlist(): boolean { - return this.watchlistService - .getWatchlist() - .includes( - this.incident.fireYear + ':' + this.incident.incidentNumberLabel, - ); - } - - addToWatchlist() { - this.watchlistService.saveToWatchlist( - this.incident.fireYear, - this.incident.incidentNumberLabel, - ); - } - - removeFromWatchlist() { - this.watchlistService.removeFromWatchlist( - this.incident.fireYear, - this.incident.incidentNumberLabel, - ); - } - - getEvacOrders() { - return this.agolService - .getEvacOrdersByEventNumber(this.incident.incidentNumberLabel, { - returnCentroid: true, - returnGeometry: false, - }) - .toPromise() - .then((response) => { - if (response.features) { - for (const element of response.features) { - this.evacOrders.push({ - eventName: element.attributes.EVENT_NAME, - eventType: element.attributes.EVENT_TYPE, - orderAlertStatus: element.attributes.ORDER_ALERT_STATUS, - issuingAgency: element.attributes.ISSUING_AGENCY, - preOcCode: element.attributes.PREOC_CODE, - emrgOAAsysID: element.attributes.EMRG_OAA_SYSID, - centroid: element.centroid, - }); - } - } - }); - } - - async getExternalUriEvacOrders() { - return this.publishedIncidentService - .fetchExternalUri(this.incident.incidentNumberLabel) - .toPromise() - .then((results) => { - if (results?.collection?.length > 0) { - for (const uri of results.collection) { - if (uri.externalUriCategoryTag.includes('EVAC-ORDER')) { - this.evacOrders.push({ - eventName: uri.externalUriDisplayLabel, - eventType: uri.externalUriCategoryTag.split(':')[1], - orderAlertStatus: uri.externalUriCategoryTag.split(':')[1], - issuingAgency: 'Pending', - preOcCode: 'NA', - emrgOAAsysID: 0, - uri: uri.externalUri, - centroid: [0, 0], - externalUri: true - }); - } - } - } - }) - .catch((err) => { - console.error(err); - }); - } - - ZoomIn() { - const long = Number(this.incident.longitude); - const lat = Number(this.incident.latitude); - - this.mapConfigService.getMapConfig().then(() => { - getActiveMap().$viewer.panToFeature( - window['turf'].point([long, lat]), - 15, - ); - }); - } -} diff --git a/client/wfnews-war/src/main/angular/src/app/components/panel-wildfire-stage-of-control/panel-wildfire-stage-of-control.component.html b/client/wfnews-war/src/main/angular/src/app/components/panel-wildfire-stage-of-control/panel-wildfire-stage-of-control.component.html index 60ac068aee..bba430785e 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/panel-wildfire-stage-of-control/panel-wildfire-stage-of-control.component.html +++ b/client/wfnews-war/src/main/angular/src/app/components/panel-wildfire-stage-of-control/panel-wildfire-stage-of-control.component.html @@ -154,3 +154,4 @@

Area Restrictions

+ diff --git a/client/wfnews-war/src/main/angular/src/app/components/panel-wildfire-stage-of-control/panel-wildfire-stage-of-control.component.ts b/client/wfnews-war/src/main/angular/src/app/components/panel-wildfire-stage-of-control/panel-wildfire-stage-of-control.component.ts index b5b64af42e..da62a92285 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/panel-wildfire-stage-of-control/panel-wildfire-stage-of-control.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/panel-wildfire-stage-of-control/panel-wildfire-stage-of-control.component.ts @@ -47,11 +47,11 @@ import { snowPlowHelper, } from '../../utils'; import { CollectionComponent } from '../common/base-collection/collection.component'; -import { IncidentIdentifyPanelComponent } from '../incident-identify-panel/incident-identify-panel.component'; import { PanelWildfireStageOfControlComponentModel } from './panel-wildfire-stage-of-control.component.model'; import { AGOLService } from '@app/services/AGOL-service'; import { MapConfigService } from '@app/services/map-config.service'; import moment from 'moment'; +import { WildfirePreviewComponent } from '@app/components/preview-panels/wildfire-preview/wildfire-preview.component'; const delay = (t) => new Promise((resolve) => setTimeout(resolve, t)); @Directive() @@ -151,6 +151,8 @@ export class PanelWildfireStageOfControlComponent this.zone = this.injector.get(NgZone); } + @ViewChild('wildfirePanelContainer', { read: ViewContainerRef }) wildfirePanelContainer: ViewContainerRef; + ngOnDestroy(): void { const panel = document.getElementsByClassName('incident-details'); if (panel && panel.length !== 0) { @@ -466,6 +468,7 @@ message = err.message; ); this.marker.on('add', function() { const icon: any = document.querySelector('.animated-icon'); + if (incident.fireOfNoteInd) { icon.style.backgroundColor = '#aa0d0d'; @@ -550,29 +553,15 @@ message = err.message; text: incident.incidentName, id: incident.incidentNumberLabel, }); - - incident.incident_number_label = incident.incidentNumberLabel; - const self = this; - this.zone.run(function() { - const compRef = self.makeComponent(IncidentIdentifyPanelComponent); - (compRef.instance as any).setIncident(incident, {}); - const panel = document - .getElementsByClassName('identify-panel') - .item(0) as HTMLElement; - panel.appendChild(compRef.location.nativeElement); - self.cdr.detectChanges(); - ( - document.getElementsByClassName('identify-panel').item(0) as HTMLElement - ).style.display = 'block'; - setTimeout(() => { - const identifyPanel = document - .getElementsByClassName('smk-panel') - .item(0) as HTMLElement; - if (identifyPanel) { - identifyPanel.remove(); - } - }, 200); - }); + this.wildfirePanelContainer.clear(); + const componentFactory = this.componentFactoryResolver.resolveComponentFactory(WildfirePreviewComponent); + const componentRef = this.wildfirePanelContainer.createComponent(componentFactory); + componentRef.instance.setContent(incident); + + const panel = document.getElementsByClassName('desktop-preview').item(0) as HTMLElement; + panel.innerHTML = ''; + panel.appendChild(componentRef.location.nativeElement); + panel.style.display = 'block'; } makeComponent(component: Type): ComponentRef { diff --git a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/wildfire-preview/wildfire-preview.component.ts b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/wildfire-preview/wildfire-preview.component.ts index 5fd502871d..94395d1f7d 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/preview-panels/wildfire-preview/wildfire-preview.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/preview-panels/wildfire-preview/wildfire-preview.component.ts @@ -53,15 +53,17 @@ export class WildfirePreviewComponent implements OnDestroy{ async setContent(data) { this.data = data; - if (data.properties?.incident_number_label && data.properties?.fire_year) { + const incidentNumberLabel = data.properties?.incident_number_label || data.incidentNumberLabel; + const fireYear = data.properties?.fire_year || data.fireYear; + + if (incidentNumberLabel && fireYear) { // identify an incident try { const result = await this.publishedIncidentService - .fetchPublishedIncident(data.properties.incident_number_label, data.properties.fire_year) + .fetchPublishedIncident(incidentNumberLabel, fireYear) .toPromise(); this.incident = result; - console.log(result) this.zoomIn(); this.addMarker(this.incident); @@ -69,7 +71,6 @@ export class WildfirePreviewComponent implements OnDestroy{ } catch (error) { console.error('Unable to identify', error); - } } } diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfire-resources/wf-resources.component.html b/client/wfnews-war/src/main/angular/src/app/components/wildfire-resources/wf-resources.component.html index 4f914b4419..9f901baaf8 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/wildfire-resources/wf-resources.component.html +++ b/client/wfnews-war/src/main/angular/src/app/components/wildfire-resources/wf-resources.component.html @@ -5,7 +5,10 @@

Wildfire Resources

BC Wildfire Service
-
@BCGovFireInfo
+
+ + @BCGovFireInfo +
diff --git a/client/wfnews-war/src/main/angular/src/app/utils/index.ts b/client/wfnews-war/src/main/angular/src/app/utils/index.ts index 360a96f14f..10d0e1f117 100644 --- a/client/wfnews-war/src/main/angular/src/app/utils/index.ts +++ b/client/wfnews-war/src/main/angular/src/app/utils/index.ts @@ -809,15 +809,20 @@ export function showPanel(panelClass: string) { export const isAndroidViaNavigator = () => navigator.platform.includes('Linux') || navigator.platform.includes('Android'); export function displayItemTitle(identifyItem) { - switch (identifyItem.layerId) { - case 'active-wildfires-fire-of-note': - return 'Wildfire of Note'; - case 'active-wildfires-out-of-control': - case 'active-wildfires-under-control': - case 'bcws-activefires-publicview-inactive': - case 'active-wildfires-holding': - case 'active-wildfires-out': - return 'Wildfire'; + if (identifyItem.layerId){ + switch (identifyItem.layerId) { + case 'active-wildfires-fire-of-note': + return 'Wildfire of Note'; + case 'active-wildfires-out-of-control': + case 'active-wildfires-under-control': + case 'bcws-activefires-publicview-inactive': + case 'active-wildfires-holding': + case 'active-wildfires-out': + return 'Wildfire'; + } + } + else if (identifyItem.fireOfNoteInd !== undefined) { + return identifyItem.fireOfNoteInd ? 'Wildfire of Note' : 'Wildfire'; } }