Merge pull request #1482 from rodekruis/fix.glofas-popup-update

fix: update glofas popup AB#26287

interfaces/IBF-dashboard/src/app/components/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.html

@@ -1,31 +1,37 @@
 <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
+    <strong
+      >{{
+        'map-popups.glofas-station.river-discharge'
+          | translate: { leadTime: getLeadTimeString() }
+      }}
+      <span
+        [title]="
+          'map-popups.glofas-station.river-discharge-explanation' | translate
+        "
+        style="cursor: default"
+        ><ion-icon name="information-circle-outline"></ion-icon></span
+    ></strong>
     <ng-container *ngIf="data?.station?.dynamicData?.forecastReturnPeriod">
       <br />
-      (Corresponding to a return period of
-      <strong>{{ data?.station?.dynamicData?.forecastReturnPeriod }}</strong>
-      years)
+      {{
+        'map-popups.glofas-station.forecast-return'
+          | translate
+            : { returnPeriod: data?.station?.dynamicData?.forecastReturnPeriod }
+      }}
     </ng-container>
   </div>
   <app-threshold-bar
     [backgroundColor]="barBackgroundColor"
     [textColor]="barTextColor"
     [barWidth]="triggerWidth"
     [barValue]="addComma(barValue)"
-    thresholdDescription="Trigger activation threshold"
+    [thresholdDescription]="
+      'map-popups.glofas-station.threshold-description' | translate
+    "
     [thresholdValue]="data?.station?.dynamicData?.triggerLevel"
     [thresholdPosition]="80"
+    unit="m3/s"
   ></app-threshold-bar>
 </ng-container>
 <ng-container *ngIf="!data?.station?.dynamicData">

interfaces/IBF-dashboard/src/app/components/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { EapAlertClass, EapAlertClasses } from '../../../models/country.model';
 import { Station } from '../../../models/poi.model';
 import { LeadTime } from '../../../types/lead-time';
@@ -27,6 +28,8 @@ export class GlofasStationPopupContentComponent implements OnInit {
     value: 0,
   };
 
+  constructor(private translate: TranslateService) {}
+
   ngOnInit(): void {
     if (!this.data) {
       return;
@@ -69,4 +72,14 @@ export class GlofasStationPopupContentComponent implements OnInit {
   }
 
   public addComma = (n) => Math.round(n).toLocaleString('en-US');
+
+  public getLeadTimeString(): string {
+    if (!this.data || !this.data?.leadTime) {
+      return '';
+    }
+
+    const [value, unit] = this.data.leadTime.split('-');
+
+    return `${value} ${unit}${Number(value) > 1 ? 's' : ''}`;
+  }
 }

interfaces/IBF-dashboard/src/app/components/leaflet-popup/threshold-bar/threshold-bar.component.html

@@ -2,12 +2,14 @@
   <div [style]="barBackgroundStyle">
     <div [style]="barThresholdStyle">
       <div [style]="barLevelStyle">
-        {{ barValue }}
+        {{ barValue }}<sup *ngIf="unit">{{ unit }}</sup>
       </div>
     </div>
   </div>
 </div>
 <div [style]="descriptionStyle">{{ thresholdDescription }}:</div>
 <div [style]="valueStyle">
-  <strong>{{ thresholdValue }}</strong>
+  <strong
+    >{{ thresholdValue }}<sup *ngIf="unit">{{ unit }}</sup></strong
+  >
 </div>

interfaces/IBF-dashboard/src/app/components/leaflet-popup/threshold-bar/threshold-bar.component.ts

@@ -12,6 +12,7 @@ export class ThresholdBarComponent implements OnInit {
   @Input() public barValue: string;
   @Input() public thresholdDescription: string;
   @Input() public thresholdValue: number;
+  @Input() public unit?: string;
   @Input() public thresholdPosition: number; // width percentage to position threshold on bar
 
   public barBackgroundStyle: string;

interfaces/IBF-dashboard/src/assets/i18n/en.json

@@ -396,7 +396,11 @@
       "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"
+      "no-data": "No water discharge data available",
+      "river-discharge": "Forecasted river discharge in {{ leadTime }}",
+      "river-discharge-explanation": "The amount of water moving down a river at a given time and place",
+      "forecast-return": "(Corresponding to a return period of {{returnPeriod}} years)",
+      "threshold-description": "Trigger activation threshold"
     }
   },
   "breadcrumbs": {

services/API-service/src/api/admin-area-dynamic-data/dto/example/UGA/floods/upload-population_affected-2.json

@@ -177,7 +177,7 @@
   },
   {
     "placeCode": "21UGA006001",
-    "amount": 1000
+    "amount": 2145
   },
   {
     "placeCode": "21UGA006002",
@@ -197,15 +197,15 @@
   },
   {
     "placeCode": "21UGA006006",
-    "amount": 1000
+    "amount": 2201
   },
   {
     "placeCode": "21UGA006007",
     "amount": 8123
   },
   {
     "placeCode": "21UGA006008",
-    "amount": 1000
+    "amount": 3380
   },
   {
     "placeCode": "21UGA006009",

services/API-service/src/api/admin-area-dynamic-data/dto/example/UGA/floods/upload-population_affected-3.json

@@ -201,7 +201,7 @@
   },
   {
     "placeCode": "UG202901",
-    "amount": 100
+    "amount": 2145
   },
   {
     "placeCode": "UG203001",
@@ -333,7 +333,7 @@
   },
   {
     "placeCode": "UG205201",
-    "amount": 100
+    "amount": 2201
   },
   {
     "placeCode": "UG205301",
@@ -353,7 +353,7 @@
   },
   {
     "placeCode": "UG205601",
-    "amount": 100
+    "amount": 3380
   },
   {
     "placeCode": "UG205701",