fix: catch missing glofas dynamic data better AB#25411

rodekruis · Dec 15, 2023 · d79ab9b · d79ab9b
1 parent caae3ac
commit d79ab9b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 15 deletions.
diff --git a/...ard/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.ts b/...ard/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/...ents/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.ts b/...ents/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.ts
@@ -21,41 +21,46 @@ 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) {
       return;
     }
 
     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,
       ),
       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
@@ -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,