diff --git a/interfaces/IBF-dashboard/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.ts b/interfaces/IBF-dashboard/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.ts index b19ea2f5e..b809ef2d8 100644 --- a/interfaces/IBF-dashboard/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.ts +++ b/interfaces/IBF-dashboard/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.ts @@ -47,6 +47,10 @@ export class DynamicPointPopupComponent implements OnInit { public glofasFooterStyle: string; public eapAlertClass: EapAlertClass; + private defautEapAlertClass: EapAlertClass = { + label: 'No action', + color: 'ibf-no-alert-primary', + }; private allowedLayers = [ IbfLayerName.gauges, @@ -76,9 +80,10 @@ export class DynamicPointPopupComponent implements OnInit { this.layerName === IbfLayerName.glofasStations && this.glofasData.eapAlertClasses ) { - this.eapAlertClass = this.glofasData.eapAlertClasses[ - this.glofasData.station.dynamicData.eapAlertClass - ]; + this.eapAlertClass = + this.glofasData.eapAlertClasses[ + this.glofasData.station.dynamicData?.eapAlertClass + ] || this.defautEapAlertClass; } this.title = this.getTitle(); diff --git a/interfaces/IBF-dashboard/src/app/components/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.ts b/interfaces/IBF-dashboard/src/app/components/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.ts index 233386eea..e66624465 100644 --- a/interfaces/IBF-dashboard/src/app/components/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.ts +++ b/interfaces/IBF-dashboard/src/app/components/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.ts @@ -21,6 +21,10 @@ export class GlofasStationPopupContentComponent implements OnInit { public barBackgroundColor: string; public barTextColor: string; private eapAlertClass: EapAlertClass; + private defautEapAlertClass: EapAlertClass = { + label: 'No action', + color: 'ibf-no-alert-primary', + }; ngOnInit(): void { if (!this.data) { @@ -28,24 +32,25 @@ export class GlofasStationPopupContentComponent implements OnInit { } const difference = - Number(this.data.station.dynamicData.forecastLevel) - - Number(this.data.station.dynamicData.triggerLevel); + Number(this.data.station.dynamicData?.forecastLevel) - + Number(this.data.station.dynamicData?.triggerLevel); const closeMargin = 0.05; const tooClose = Math.abs(difference) / this.data.station.triggerLevel < closeMargin; this.barValue = difference === 0 || !tooClose - ? Number(this.data.station.dynamicData.forecastLevel) - : Number(this.data.station.dynamicData.triggerLevel) + + ? Number(this.data.station.dynamicData?.forecastLevel) + : Number(this.data.station.dynamicData?.triggerLevel) + Math.sign(difference) * - Number(this.data.station.dynamicData.triggerLevel) * + Number(this.data.station.dynamicData?.triggerLevel) * closeMargin; this.triggerWidth = Math.max( Math.min( Math.round( - (this.barValue / Number(this.data.station.dynamicData.triggerLevel)) * + (this.barValue / + Number(this.data.station.dynamicData?.triggerLevel)) * 100, ), 115, @@ -53,9 +58,9 @@ export class GlofasStationPopupContentComponent implements OnInit { 0, ); - this.eapAlertClass = this.data.eapAlertClasses[ - this.data.station.dynamicData.eapAlertClass - ]; + this.eapAlertClass = + this.data.eapAlertClasses[this.data.station.dynamicData?.eapAlertClass] || + this.defautEapAlertClass; this.barBackgroundColor = `var(--ion-color-${this.eapAlertClass.color})`; this.barTextColor = `var(--ion-color-${this.eapAlertClass.color}-contrast)`; diff --git a/interfaces/IBF-dashboard/src/app/services/point-marker.service.ts b/interfaces/IBF-dashboard/src/app/services/point-marker.service.ts index 5205d2ae7..7a452565a 100644 --- a/interfaces/IBF-dashboard/src/app/services/point-marker.service.ts +++ b/interfaces/IBF-dashboard/src/app/services/point-marker.service.ts @@ -125,10 +125,16 @@ export class PointMarkerService { const markerIcon: IconOptions = { ...LEAFLET_MARKER_ICON_OPTIONS_BASE, - iconUrl: `assets/markers/glofas-station-${markerProperties.dynamicData?.eapAlertClass}-trigger.svg`, - iconRetinaUrl: `assets/markers/glofas-station-${markerProperties.dynamicData?.eapAlertClass}-trigger.svg`, + iconUrl: `assets/markers/glofas-station-${ + markerProperties.dynamicData?.eapAlertClass || 'no' + }-trigger.svg`, + iconRetinaUrl: `assets/markers/glofas-station-${ + markerProperties.dynamicData?.eapAlertClass || 'no' + }-trigger.svg`, }; - const className = `trigger-popup-${markerProperties.dynamicData?.eapAlertClass}`; + const className = `trigger-popup-${ + markerProperties.dynamicData?.eapAlertClass || 'no' + }`; const markerInstance = marker(markerLatLng, { title: markerTitle,