diff --git a/client/wfnews-war/src/main/angular/src/app/app.component.ts b/client/wfnews-war/src/main/angular/src/app/app.component.ts index ea28e53970..413beb727a 100644 --- a/client/wfnews-war/src/main/angular/src/app/app.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/app.component.ts @@ -49,6 +49,21 @@ export const ICON = { MORE: 'more', REPORT: 'report', SAVED: 'saved', + ARROW: 'arrow', + CANCEL: 'cancel', + AREA_RESTRICTION: 'area-restriction', + BAN: 'ban', + FIRE_DANGER_VERY_LOW: 'fire-danger-very-low', + FIRE_DANGER_LOW: 'fire-danger-low', + FIRE_DANGER_MODERATE: 'fire-danger-moderate', + FIRE_DANGER_HIGH: 'fire-danger-high', + FIRE_DANGER_EXTREME: 'fire-danger-extreme', + ROAD_EVENT: 'road-event', + CLOSED_RECREATION_SITE: 'closed-recreation-site', + REGIONAL_DISTRICTS: 'regional-districts', + BROWN_SQUARE: 'brown-square', + INDIAN_RESERVE: 'indian-reserve', + }; @Component({ @@ -455,6 +470,62 @@ export class AppComponent implements OnDestroy, OnInit, AfterViewInit { ICON.SAVED, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/svg-icons/saved.svg') ); + this.matIconRegistry.addSvgIcon( + ICON.ARROW, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/arrow.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.CANCEL, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/cancel.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.AREA_RESTRICTION, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/area-restriction.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.BAN, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/ban.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.FIRE_DANGER_VERY_LOW, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/fire-danger-very-low.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.FIRE_DANGER_LOW, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/fire-danger-low.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.FIRE_DANGER_MODERATE, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/fire-danger-moderate.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.FIRE_DANGER_HIGH, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/fire-danger-high.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.FIRE_DANGER_EXTREME, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/fire-danger-extreme.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.ROAD_EVENT, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/road-event.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.CLOSED_RECREATION_SITE, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/closed-recreation-site.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.REGIONAL_DISTRICTS, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/regional-districts.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.BROWN_SQUARE, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/brown-square.svg") + ); + this.matIconRegistry.addSvgIcon( + ICON.INDIAN_RESERVE, + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/svg-icons/indian-reserve.svg") + ); } isAdminPage() { diff --git a/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.html b/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.html index b88c09d1f2..3f9279854b 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.html +++ b/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.html @@ -132,29 +132,241 @@

local_fire_department{{ activeFireCount | async }} Active Wildfires
- + -
-
-
-
{{selectedPanel === 'wildfire-stage-of-control' ? 'Wildfires' : - selectedPanel === 'evacuation-orders-and-alerts' ? 'Evacuation Orders' : - selectedPanel === 'area-restrictions' ? 'Area Restrictions' : - selectedPanel === 'bans-and-prohibitions' ? 'Bans & Prohibitions' : - selectedPanel === 'smoke-forecast' ? 'smoke-forecast' : - selectedPanel === 'fire-danger' ? 'Fire Danger' : - selectedPanel === 'routes-impacted' ? 'Drive BC' : - selectedPanel === 'local-authorities' ? 'Local Authorities' : ''}}
-
-
- - - - - - - - +
+ +
+
+ {{incidentRefs.length}} Results +
+
+
Wildfires
+
+
+
+ local_fire_department + + {{wildfire.properties.incident_name ? wildfire.properties.incident_name : wildfire.properties.incident_number_label + ' Wildfire'}} +
+
+ +
+
+
+
+ +
+
Fire Perimeters
+
+
+
+ {{firePerimeter.title}} +
+
+ +
+
+
+
+ +
+
Evacuations
+
+
+
+ Order + Order + + Evacuation {{evac.properties.ORDER_ALERT_STATUS}} for {{evac.properties.ORDER_ALERT_NAME}} +
+
+ +
+
+
+
+ +
+
Area Restrictions
+
+
+
+ + {{areaRestriction.properties.NAME}} +
+
+ +
+
+
+
+ +
+
Fire Bans and Prohibitions
+
+
+
+ + Fire Ban on {{ban.title}} +
+
+ +
+
+
+
+ +
+
Fire Danger Rating
+
+
+
+
+ + {{danger.properties.DANGER_RATING_DESC}} Fire Danger +
+
+ + {{danger.properties.DANGER_RATING_DESC}} Fire Danger +
+
+ + {{danger.properties.DANGER_RATING_DESC}} Fire Danger +
+
+ + {{danger.properties.DANGER_RATING_DESC}} Fire Danger +
+
+ + {{danger.properties.DANGER_RATING_DESC}} Fire Danger +
+
+
+ +
+
+
+
+ +
+
Road Events
+
+
+
+ + {{event.title}} +
+
+ +
+
+
+
+ +
+
Closed Recreation Sites
+
+
+
+ + {{closedRecreationSite.title}} +
+
+ +
+
+
+
+ +
+
Forest Service Roads
+
+
+
+ {{forestServiceRoad.title}} +
+
+ +
+
+
+
+ +
+
Protected Lands Access Restrictions
+
+
+
+ {{protectedLandsAccessRestriction.title}} +
+
+ +
+
+
+
+ +
+
Regional Districts
+
+
+
+ + {{regionalDistrict.title}} +
+
+ +
+
+
+
+ +
+
Municipalities
+
+
+
+ + {{municipality.title}} +
+
+ +
+
+
+
+ +
+
First Nations Treaty Land
+
+
+
+ + {{firstNationsTreatyLand.title}} +
+
+ +
+
+
+
+ +
+
Indian Reserve
+
+
+
+ + {{indianReserve.title}} +
+
+ +
+
+
+
diff --git a/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.scss b/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.scss index 2c74e2d5e3..bee2fb613a 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.scss +++ b/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.scss @@ -491,10 +491,85 @@ mat-panel-title { } .panel-container { + font-weight: 600; padding: 10px; overflow: auto; height: 90%; border-radius: 20px; + + .draggable-panel-title{ + font-size: 18px; + color: #242424; + padding: 20px 10px; + border-bottom: 1px solid #DEDEDE; + display: flex; + justify-content: space-between; + align-items: center; + } + + .criteria-title{ + font-size: 18px; + color: #242424; + padding: 20px 10px; + } + + .widget-card{ + padding: 8px; + } + + .widget-row{ + display: flex; + padding: 12px; + align-items: center; + border-radius: 8px; + background: #F2F2F6; + display: flex; + justify-content: space-between; + } + + .left-content { + display: flex; + align-items: center; + } + + .incident-icon{ + margin-right: 12px; + } + + .circle-icon{ + &.active-wildfires-holding{ + background-color: #ffff00; + border: 1px solid black; + border-radius: 50%; + width: 18px; + height: 18px; + margin-right: 12px; + } + &.active-wildfires-out-of-control{ + background-color: #FF0000; + border: 1px solid black; + border-radius: 50%; + width: 18px; + height: 18px; + margin-right: 12px; + } + &.active-wildfires-under-control{ + background-color: #98E600; + border: 1px solid black; + border-radius: 50%; + width: 18px; + height: 18px; + margin-right: 12px; + } + &.bcws-activefires-publicview-inactive{ + background-color: #5C6671; + border: 1px solid black; + border-radius: 50%; + width: 18px; + height: 18px; + margin-right: 12px; + } + } } } diff --git a/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts b/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts index af98654896..c65e5d551a 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/active-wildfire-map/active-wildfire-map.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ElementRef, Input, NgZone, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core'; import { UntypedFormControl } from '@angular/forms'; import { MatExpansionPanel } from '@angular/material/expansion'; import { AppConfigService } from '@wf1/core-ui'; @@ -30,6 +30,7 @@ declare const window: any; selector: 'active-wildfire-map', templateUrl: './active-wildfire-map.component.html', styleUrls: ['./active-wildfire-map.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class ActiveWildfireMapComponent implements OnInit, AfterViewInit { @Input() incidents: any; @@ -64,7 +65,31 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit { markers: any[]; url; sortedAddressList: string[]; - + incidentRefs: any[]; + filteredWildfires: any[]; + filteredFirePerimeters: any[]; + filteredEvacs: any[]; + filteredAreaRestrictions: any[]; + filteredBansAndProhibitions: any[]; + filteredDangerRatings: any[]; + filteredRoadEvents: any[]; + filteredClosedRecreationSites: any[]; + filteredForestServiceRoads: any[]; + filteredProtectedLandsAccessRestrictions: any[]; + filteredRegionalDistricts: any[]; + filteredMunicipalities: any[]; + filteredFirstNationsTreatyLand: any[]; + filteredIndianReserve: any[]; + + showPanel: boolean; + + wildfireLayerIds: string[] = [ + 'active-wildfires-fire-of-note', + 'active-wildfires-out-of-control', + 'active-wildfires-holding', + 'active-wildfires-under-control', + 'bcws-activefires-publicview-inactive', + ]; public isMobileView = mobileView public snowPlowHelper = snowPlowHelper @@ -77,6 +102,7 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit { private publishedIncidentService: PublishedIncidentService, private commonUtilityService: CommonUtilityService, protected dialog: MatDialog, + protected cdr: ChangeDetectorRef ) { this.incidentsServiceUrl = this.appConfig.getConfig().rest['newsLocal']; this.placeData = new PlaceData(); @@ -316,6 +342,27 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit { onToggleAccordion() { this.showAccordion = !this.showAccordion; } + + onSelectIncidents(incidentRefs){ + this.showPanel = true; + this.incidentRefs = Object.keys(incidentRefs).map(key => incidentRefs[key]); + if (this.incidentRefs.length >= 1) { + // multiple features within clicked area + this.filteredWildfires = this.incidentRefs.filter(item => this.wildfireLayerIds.includes(item.layerId)); + this.filteredFirePerimeters = this.incidentRefs.filter(item => item.layerId === 'fire-perimeters'); + this.filteredEvacs = this.incidentRefs.filter(item => item.layerId === 'evacuation-orders-and-alerts-wms'); + this.filteredBansAndProhibitions = this.incidentRefs.filter(item => item.layerId === 'bans-and-prohibitions-cat1' || item.layerId === 'bans-and-prohibitions-cat2' || item.layerId === 'bans-and-prohibitions-cat3'); + this.filteredDangerRatings = this.incidentRefs.filter(item => item.layerId === 'danger-rating'); + this.filteredRoadEvents = this.incidentRefs.filter(item => item.layerId === 'drive-bc-active-events'); + this.filteredClosedRecreationSites = this.incidentRefs.filter(item => item.layerId === 'closed-recreation-sites'); + this.filteredForestServiceRoads = this.incidentRefs.filter(item => item.layerId === 'bc-fsr'); + this.filteredProtectedLandsAccessRestrictions = this.incidentRefs.filter(item => item.layerId === 'protected-lands-access-restrictions'); + this.filteredRegionalDistricts = this.incidentRefs.filter(item => item.layerId === 'abms-regional-districts'); + this.filteredMunicipalities = this.incidentRefs.filter(item => item.layerId === 'abms-municipalities'); + this.filteredFirstNationsTreatyLand = this.incidentRefs.filter(item => item.layerId === 'fnt-treaty-land'); + this.filteredIndianReserve = this.incidentRefs.filter(item => item.layerId === 'clab-indian-reserves'); + } + } onSelectLayer(selectedLayer: SelectedLayer) { this.selectedLayer = selectedLayer; @@ -503,4 +550,8 @@ export class ActiveWildfireMapComponent implements OnInit, AfterViewInit { return 'Disclaimer and Legal Links'; } } + + closePanel() { + this.showPanel = false; + } } diff --git a/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.scss b/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.scss index e82daa0238..fb0ad78658 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.scss +++ b/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.scss @@ -191,4 +191,4 @@ } } } -} +} \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.ts b/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.ts index 29fea6f95a..28d3cfd7e5 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/wf-map-container/wf-map-container.component.ts @@ -3,6 +3,7 @@ import { PointIdService } from '../../services/point-id.service'; import { WFMapService } from '../../services/wf-map.service'; import { IncidentIdentifyPanelComponent } from '../incident-identify-panel/incident-identify-panel.component'; import { WeatherPanelComponent } from '../weather-panel/weather-panel.component'; +import { ActiveWildfireMapComponent } from '@app/components/active-wildfire-map/active-wildfire-map.component'; let mapIndexAuto = 0; let initPromise = Promise.resolve(); @@ -20,6 +21,7 @@ export class WFMapContainerComponent implements OnDestroy, OnChanges { @Output() mapInitialized = new EventEmitter(); @Output() toggleAccordion = new EventEmitter(); @Output() fullScreen = new EventEmitter(); + @Output() selectIncidents = new EventEmitter(); @ViewChild('mapContainer') mapContainer; @@ -113,6 +115,9 @@ export class WFMapContainerComponent implements OnDestroy, OnChanges { addSelectedIncidentPanels (smk) { const self = this; const identified = smk.$viewer.identified; + // let mobileCompRef = self.makeComponent(ActiveWildfireMapComponent); + this.selectIncidents.emit(identified.featureSet) + for (const fid in identified.featureSet) { if (Object.prototype.hasOwnProperty.call(identified.featureSet, fid)) { const feature = identified.featureSet[fid]; diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/area-restriction.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/area-restriction.svg new file mode 100644 index 0000000000..2d44898b33 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/area-restriction.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/arrow.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/arrow.svg new file mode 100644 index 0000000000..2f775e5094 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/arrow.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/ban.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/ban.svg new file mode 100644 index 0000000000..6f456b74c1 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/ban.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/brown-square.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/brown-square.svg new file mode 100644 index 0000000000..88a6017c3b --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/brown-square.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/cancel.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/cancel.svg new file mode 100644 index 0000000000..e932dd2a95 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/cancel.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/closed-recreation-site.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/closed-recreation-site.svg new file mode 100644 index 0000000000..b1b2f1790f --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/closed-recreation-site.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-extreme.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-extreme.svg new file mode 100644 index 0000000000..44b377ce40 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-extreme.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-high.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-high.svg new file mode 100644 index 0000000000..20c1926b97 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-high.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-low.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-low.svg new file mode 100644 index 0000000000..7e7fd6968b --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-low.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-moderate.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-moderate.svg new file mode 100644 index 0000000000..3bfa0c45bb --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-moderate.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-very-low.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-very-low.svg new file mode 100644 index 0000000000..1ca54c7427 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/fire-danger-very-low.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/indian-reserve.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/indian-reserve.svg new file mode 100644 index 0000000000..864ca71e55 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/indian-reserve.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/regional-districts.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/regional-districts.svg new file mode 100644 index 0000000000..ca2f2dc3de --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/regional-districts.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/road-event.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/road-event.svg new file mode 100644 index 0000000000..477bb18069 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/road-event.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file