Merge pull request #1476 from rodekruis/fix.popup-style

fix: adjust popup style AB#25371
rodekruis · Dec 19, 2023 · 6787d5f · 6787d5f
2 parents caae3ac + 8a951c2
commit 6787d5f
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 55 deletions.
diff --git a/...d/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.scss b/...d/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.scss
@@ -1,3 +1,7 @@
+* {
+  font-family: var(--ion-font-family);
+}
+
 .leaflet--dynamic-point-popup--header {
   &.gauges {
     background: var(--ion-color-ibf-no-alert-primary);

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/...ts/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.html b/...ts/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.html
@@ -1,27 +1,41 @@
-<div style="margin-bottom: 4px">
-  {{ data?.leadTime }} forecast of
-  <span
-    title="The amount of water moving down a river at a given time and place"
-    style="
-      text-decoration: underline;
-      text-decoration-style: dotted;
-      cursor: default;
-    "
-    >river discharge</span
+<ng-container *ngIf="data?.station?.dynamicData">
+  <div style="margin-bottom: 4px">
+    {{ data?.leadTime }} forecast of
+    <span
+      title="The amount of water moving down a river at a given time and place"
+      style="
+        text-decoration: underline;
+        text-decoration-style: dotted;
+        cursor: default;
+      "
+      >river discharge</span
+    >
+    in m<sup>3</sup>/s
+    <ng-container *ngIf="data?.station?.dynamicData?.forecastReturnPeriod">
+      <br />
+      (Corresponding to a return period of
+      <strong>{{ data?.station?.dynamicData?.forecastReturnPeriod }}</strong>
+      years)
+    </ng-container>
+  </div>
+  <app-threshold-bar
+    [backgroundColor]="barBackgroundColor"
+    [textColor]="barTextColor"
+    [barWidth]="triggerWidth"
+    [barValue]="addComma(barValue)"
+    thresholdDescription="Trigger activation threshold"
+    [thresholdValue]="data?.station?.dynamicData?.triggerLevel"
+    [thresholdPosition]="80"
+  ></app-threshold-bar>
+</ng-container>
+<ng-container *ngIf="!data?.station?.dynamicData">
+  <div
+    style="margin-bottom: 4px; display: flex; justify-content: space-between"
   >
-  in m<sup>3</sup>/s
-  <ng-container *ngIf="data?.station?.forecastReturnPeriod">
-    <br />
-    (Corresponding to a return period of
-    <strong>{{ data?.station?.forecastReturnPeriod }}</strong> years)
-  </ng-container>
-</div>
-<app-threshold-bar
-  [backgroundColor]="barBackgroundColor"
-  [textColor]="barTextColor"
-  [barWidth]="triggerWidth"
-  [barValue]="addComma(barValue)"
-  thresholdDescription="Trigger activation threshold"
-  [thresholdValue]="data?.station?.dynamicData?.triggerLevel"
-  [thresholdPosition]="80"
-></app-threshold-bar>
+    <div>
+      <ion-label style="font-size: 18px; padding-right: 8px">
+        {{ 'map-popups.glofas-station.no-data' | translate }}
+      </ion-label>
+    </div>
+  </div>
+</ng-container>
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,47 @@ 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;
+      Math.abs(difference) / this.data.station.dynamicData?.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/...mponents/leaflet-popup/river-gauge-popup-content/river-gauge-popup-content.component.html b/...mponents/leaflet-popup/river-gauge-popup-content/river-gauge-popup-content.component.html
@@ -3,8 +3,10 @@
     style="margin-bottom: 4px; display: flex; justify-content: space-between"
   >
     <div>
-      <ion-label style="font-size: 18px; padding-right: 8px">
-        <strong>{{ currentString }}</strong>
+      <ion-label style="padding-right: 8px">
+        <span style="font-size: 18px"
+          ><strong>{{ currentString }}</strong></span
+        >
         {{ 'map-popups.river-gauge.unit' | translate }}
         {{ 'map-popups.river-gauge.sea-level' | translate }}
       </ion-label>
@@ -38,7 +40,7 @@
     [barValue]="current + ('map-popups.river-gauge.unit' | translate)"
     [thresholdDescription]="'map-popups.river-gauge.normal' | translate"
     [thresholdValue]="reference + ('map-popups.river-gauge.unit' | translate)"
-    [thresholdPosition]="45"
+    [thresholdPosition]="80"
   ></app-threshold-bar>
 </ng-container>
 <ng-container *ngIf="!current">

diff --git a/interfaces/IBF-dashboard/src/app/models/poi.model.ts b/interfaces/IBF-dashboard/src/app/models/poi.model.ts
@@ -2,12 +2,7 @@
 export class Station {
   stationName: string;
   stationCode: string;
-  typhoonTrackName: string;
-  typhoonTrackCode: string;
-  triggerLevel: number;
-  forecastLevel: number;
-  eapAlertClass: string;
-  forecastReturnPeriod: number;
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
   dynamicData?: any;
 }
 
@@ -89,6 +84,5 @@ export class RiverGauge {
     'water-level-previous': string;
     'water-level-reference': string;
   };
-  exposed: boolean;
   pointDataId: string;
 }
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,
@@ -142,7 +148,7 @@ export class PointMarkerService {
         activeLeadTime,
       ),
       {
-        minWidth: 300,
+        minWidth: 350,
         className,
       },
     );
@@ -213,7 +219,7 @@ export class PointMarkerService {
         markerDateTime <= modelDateTime,
       ),
       {
-        minWidth: 300,
+        minWidth: 350,
         className: 'typhoon-track-popup',
       },
     );
@@ -391,7 +397,7 @@ export class PointMarkerService {
     markerInstance.bindPopup(
       this.createMarkerRiverGaugePopup(markerProperties),
       {
-        minWidth: 300,
+        minWidth: 350,
         className: 'river-gauge-popup',
       },
     );

diff --git a/interfaces/IBF-dashboard/src/assets/i18n/en.json b/interfaces/IBF-dashboard/src/assets/i18n/en.json
@@ -391,6 +391,9 @@
       "above": "Above reference level",
       "no-data": "No water level data available",
       "tooltip": "Current water level in meters above sea level (mMSL) is measured by a gauge during the latest model run. The difference compared to 24 hours ago is shown in green for decrease or red for increase. The reference water level is the typical level for this station during this season."
+    },
+    "glofas-station": {
+      "no-data": "No water discharge data available"
     }
   },
   "breadcrumbs": {