diff --git a/interfaces/IBF-dashboard/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.scss b/interfaces/IBF-dashboard/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.scss index 19a29afcf..48cdf6b6a 100644 --- a/interfaces/IBF-dashboard/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.scss +++ b/interfaces/IBF-dashboard/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/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.html b/interfaces/IBF-dashboard/src/app/components/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.html index a1f7ca9d9..78f1c8325 100644 --- a/interfaces/IBF-dashboard/src/app/components/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.html +++ b/interfaces/IBF-dashboard/src/app/components/leaflet-popup/glofas-station-popup-content/glofas-station-popup-content.component.html @@ -1,27 +1,41 @@ -
- {{ data?.leadTime }} forecast of - river discharge +
+ {{ data?.leadTime }} forecast of + river discharge + in m3/s + +
+ (Corresponding to a return period of + {{ data?.station?.dynamicData?.forecastReturnPeriod }} + years) +
+
+ + + +
- in m3/s - -
- (Corresponding to a return period of - {{ data?.station?.forecastReturnPeriod }} years) -
-
- +
+ + {{ 'map-popups.glofas-station.no-data' | translate }} + +
+
+ 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..c9b2c3892 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,26 @@ 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; + 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, @@ -53,9 +59,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/components/leaflet-popup/river-gauge-popup-content/river-gauge-popup-content.component.html b/interfaces/IBF-dashboard/src/app/components/leaflet-popup/river-gauge-popup-content/river-gauge-popup-content.component.html index 1f0f400e6..e1cf7b47d 100644 --- a/interfaces/IBF-dashboard/src/app/components/leaflet-popup/river-gauge-popup-content/river-gauge-popup-content.component.html +++ b/interfaces/IBF-dashboard/src/app/components/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" >
- - {{ currentString }} + + {{ currentString }} {{ 'map-popups.river-gauge.unit' | translate }} {{ 'map-popups.river-gauge.sea-level' | translate }} @@ -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" > diff --git a/interfaces/IBF-dashboard/src/app/models/poi.model.ts b/interfaces/IBF-dashboard/src/app/models/poi.model.ts index 1e7086b50..f72e0387c 100644 --- 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 index 5205d2ae7..e589ec76c 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, @@ -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 index 8ea3ffa79..221f8e058 100644 --- 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": {