Merge pull request #1479 from rodekruis/feat.uga-eap-classes

feat: show more EAP alert classes in UGA floods AB#24677

interfaces/IBF-dashboard/src/app/components/chat/chat.component.html

@@ -160,7 +160,7 @@
         {{
           'chat-component.common.reactivate-trigger-popup.' +
             hasEap() +
-            '.header' | translate
+            '.header' | translate: { alertLabel: area.alertLabel }
         }}
       </app-ibf-button>
     </app-dialogue-turn>
@@ -327,6 +327,7 @@
               backgroundColor="ibf-primary"
               type="submit"
               style="width: 100%"
+              strong="true"
             >
               {{
                 'chat-component.common.save-actions.submit-button-label'
@@ -343,10 +344,13 @@
         "
         (click)="openToggleTriggerPopup(area, true)"
         [disabled]="!area.activeTrigger"
-        backgroundColor="ibf-primary"
+        backgroundColor="ibf-white"
+        textColor="ibf-no-alert-primary"
+        borderColor="ibf-no-alert-secondary"
+        strong="true"
         >{{
           'chat-component.common.stop-trigger-popup.' + hasEap() + '.header'
-            | translate
+            | translate: { alertLabel: area.alertLabel }
         }}</app-ibf-button
       >
     </ng-container>

interfaces/IBF-dashboard/src/app/components/chat/chat.component.ts

@@ -390,7 +390,7 @@ export class ChatComponent implements OnInit, OnDestroy {
   }
 
   public async openToggleTriggerPopup(
-    triggeredArea,
+    triggeredArea: TriggeredArea,
     stop: boolean,
   ): Promise<void> {
     const stopNode = stop ? 'stop-trigger-popup' : 'reactivate-trigger-popup';
@@ -404,7 +404,7 @@ export class ChatComponent implements OnInit, OnDestroy {
       translucent: true,
       showBackdrop: true,
       componentProps: {
-        placeCodeName: triggeredArea.name,
+        area: triggeredArea,
         eapNode,
         stopNode,
         disasterType: this.disasterType.disasterType,

interfaces/IBF-dashboard/src/app/components/event-speech-bubble/event-speech-bubble.component.html

@@ -88,7 +88,8 @@
             | translate
               : {
                   firstLeadTimeDate: event.firstLeadTimeDate,
-                  eventName: event.eventName?.split('_')[0]
+                  eventName: event.eventName?.split('_')[0],
+                  disasterTypeLabel: disasterTypeLabel
                 }
         "
       ></p>
@@ -157,24 +158,29 @@
               }
       "
     ></p>
-    <ul>
-      <li
-        *ngFor="let area of areas"
-        class="clickable-area"
-        (click)="selectArea(area)"
-      >
-        <p>
-          {{ area.name }}
-          <span *ngIf="area.nameParent">({{ area.nameParent }})</span> -
-          <span *ngIf="actionIndicatorNumberFormat === 'decimal0'">{{
-            area.actionsValue | number: '.0-0'
-          }}</span
-          ><span *ngIf="actionIndicatorNumberFormat === 'perc'">{{
-            area.actionsValue | percent: '.0-0'
-          }}</span>
-        </p>
-      </li>
-    </ul>
+    <div *ngFor="let class of alertClasses">
+      <p class="ion-padding-top" *ngIf="class.alertClass !== 'undefined'">
+        <strong>{{ class.alertClass }}</strong>
+      </p>
+      <ul>
+        <li
+          *ngFor="let area of class.areas"
+          class="clickable-area"
+          (click)="selectArea(area)"
+        >
+          <p>
+            {{ area.name }}
+            <span *ngIf="area.nameParent">({{ area.nameParent }})</span> -
+            <span *ngIf="actionIndicatorNumberFormat === 'decimal0'">{{
+              area.actionsValue | number: '.0-0'
+            }}</span
+            ><span *ngIf="actionIndicatorNumberFormat === 'perc'">{{
+              area.actionsValue | percent: '.0-0'
+            }}</span>
+          </p>
+        </li>
+      </ul>
+    </div>
     <p
       *ngIf="event.thresholdReached"
       [translate]="
@@ -208,24 +214,29 @@
               }
       "
     ></p>
-    <ul>
-      <li
-        *ngFor="let area of areas"
-        class="clickable-area"
-        (click)="selectArea(area)"
-      >
-        <p>
-          {{ area.name }}
-          <span *ngIf="area.nameParent">({{ area.nameParent }})</span> -
-          <span *ngIf="actionIndicatorNumberFormat === 'decimal0'">{{
-            area.actionsValue | number: '.0-0'
-          }}</span
-          ><span *ngIf="actionIndicatorNumberFormat === 'perc'">{{
-            area.actionsValue | percent: '.0-0'
-          }}</span>
-        </p>
-      </li>
-    </ul>
+    <div *ngFor="let class of alertClasses">
+      <p class="ion-padding-top" *ngIf="class.alertClass !== 'undefined'">
+        <strong>{{ class.alertClass }}</strong>
+      </p>
+      <ul>
+        <li
+          *ngFor="let area of areas"
+          class="clickable-area"
+          (click)="selectArea(area)"
+        >
+          <p>
+            {{ area.name }}
+            <span *ngIf="area.nameParent">({{ area.nameParent }})</span> -
+            <span *ngIf="actionIndicatorNumberFormat === 'decimal0'">{{
+              area.actionsValue | number: '.0-0'
+            }}</span
+            ><span *ngIf="actionIndicatorNumberFormat === 'perc'">{{
+              area.actionsValue | percent: '.0-0'
+            }}</span>
+          </p>
+        </li>
+      </ul>
+    </div>
     <p
       [translate]="
         'chat-component.' + disasterTypeName + '.stopped-event.instruction'

interfaces/IBF-dashboard/src/app/components/event-speech-bubble/event-speech-bubble.component.ts

@@ -1,9 +1,9 @@
 import {
+  AfterViewChecked,
   ChangeDetectorRef,
   Component,
   Input,
   OnDestroy,
-  OnInit,
 } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
@@ -22,7 +22,7 @@ import { TriggeredArea } from '../../types/triggered-area';
   templateUrl: './event-speech-bubble.component.html',
   styleUrls: ['./event-speech-bubble.component.scss'],
 })
-export class EventSpeechBubbleComponent implements OnInit, OnDestroy {
+export class EventSpeechBubbleComponent implements AfterViewChecked, OnDestroy {
   @Input()
   public type: string;
   @Input()
@@ -53,6 +53,7 @@ export class EventSpeechBubbleComponent implements OnInit, OnDestroy {
   public isStopped: boolean;
   private placeCodeHoverSubscription: Subscription;
   public placeCodeHover: PlaceCode;
+  public alertClasses: { alertClass: string; areas: TriggeredArea[] }[];
 
   constructor(
     private authService: AuthService,
@@ -64,11 +65,13 @@ export class EventSpeechBubbleComponent implements OnInit, OnDestroy {
     private translateService: TranslateService,
   ) {}
 
-  ngOnInit() {
+  ngAfterViewChecked() {
     if (this.authService.displayName) {
       this.displayName = this.authService.displayName;
     }
 
+    this.alertClasses = this.splitAreasByAlertClass(this.areas);
+
     this.placeCodeHoverSubscription = this.placeCodeService
       .getPlaceCodeHoverSubscription()
       .subscribe(this.onPlaceCodeHoverChange);
@@ -80,6 +83,24 @@ export class EventSpeechBubbleComponent implements OnInit, OnDestroy {
     this.placeCodeHoverSubscription.unsubscribe();
   }
 
+  public splitAreasByAlertClass(
+    areas: TriggeredArea[] = [],
+  ): { alertClass: string; areas: TriggeredArea[] }[] {
+    const areasByAlertClass = {};
+
+    for (const area of areas) {
+      if (!areasByAlertClass[area.alertClass]) {
+        areasByAlertClass[area.alertClass] = [];
+      }
+      areasByAlertClass[area.alertClass].push(area);
+    }
+
+    return Object.keys(areasByAlertClass).map((alertClass) => ({
+      alertClass: alertClass,
+      areas: areasByAlertClass[alertClass],
+    }));
+  }
+
   public selectArea(area) {
     this.adminLevelService.zoomInAdminLevel();
     this.placeCodeService.setPlaceCode({

interfaces/IBF-dashboard/src/app/components/leaflet-popup/dynamic-point-popup/dynamic-point-popup.component.ts

@@ -50,6 +50,7 @@ export class DynamicPointPopupComponent implements OnInit {
   private defautEapAlertClass: EapAlertClass = {
     label: 'No action',
     color: 'ibf-no-alert-primary',
+    value: 0,
   };
 
   private allowedLayers = [

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

@@ -24,6 +24,7 @@ export class GlofasStationPopupContentComponent implements OnInit {
   private defautEapAlertClass: EapAlertClass = {
     label: 'No action',
     color: 'ibf-no-alert-primary',
+    value: 0,
   };
 
   ngOnInit(): void {

interfaces/IBF-dashboard/src/app/components/login-form/login-form.component.html

@@ -7,14 +7,13 @@
 
   <ion-item>
     <ion-label position="stacked">E-mail</ion-label>
-    <!-- Email pattern retrieved from: https://emailregex.com/ -->
     <ion-input
       [(ngModel)]="model.email"
       name="email"
       type="email"
       required
       inputmode="email"
-      pattern="(?:[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*|&quot;(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*&quot;)@(?:(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[A-Za-z0-9-]*[A-Za-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])"
+      pattern=".+@.+\.[a-z]+"
       autocomplete="email username"
       clearInput="true"
       data-test="input-user"

interfaces/IBF-dashboard/src/app/components/map/map.component.ts

@@ -347,7 +347,8 @@ export class MapComponent implements AfterViewInit, OnDestroy {
             for (const glofasState of this.getGlofasStationStates()) {
               const element = this.mapLegendService.getGlofasPointLegendString(
                 layer,
-                `-${glofasState}-trigger`,
+                `-${glofasState.key}-trigger`,
+                glofasState.label,
               );
               elements.push(element);
             }
@@ -389,7 +390,16 @@ export class MapComponent implements AfterViewInit, OnDestroy {
   }
 
   private getGlofasStationStates() {
-    return Object.keys(this.countryDisasterSettings?.eapAlertClasses);
+    const classes = [];
+    for (const [key, value] of Object.entries(
+      this.countryDisasterSettings?.eapAlertClasses,
+    )) {
+      classes.push({ key, label: value.label, value: value.value });
+    }
+    classes.sort((e1, e2) => {
+      return e2.value - e1.value;
+    });
+    return classes;
   }
 
   onMapReady(map: Map) {

interfaces/IBF-dashboard/src/app/components/toggle-trigger-popover/toggle-trigger-popover.component.html

@@ -8,7 +8,7 @@
     ></ion-icon>
     <ion-card-title>{{
       'chat-component.common.' + stopNode + '.' + eapNode + '.header'
-        | translate
+        | translate: { alertLabel: area?.alertLabel }
     }}</ion-card-title>
   </ion-card-header>
   <ion-card-content class="ion-padding-top ion-text-center">
@@ -18,7 +18,8 @@
           'chat-component.common.' + stopNode + '.' + eapNode + '.message'
             | translate
               : {
-                  placeCodeName: placeCodeName,
+                  placeCodeName: area?.name,
+                  alertLabel: area?.alertLabel,
                   disasterSpecificText: getDisasterSpecificText()
                 }
         "
@@ -33,7 +34,7 @@
           (click)="confirm()"
           >{{
             'chat-component.common.' + stopNode + '.' + eapNode + '.confirm'
-              | translate
+              | translate: { alertLabel: area?.alertLabel }
           }}</ion-button
         >
         <ion-button
@@ -43,7 +44,7 @@
         >
           {{
             'chat-component.common.' + stopNode + '.' + eapNode + '.cancel'
-              | translate
+              | translate: { alertLabel: area?.alertLabel }
           }}
         </ion-button>
       </div>

interfaces/IBF-dashboard/src/app/components/toggle-trigger-popover/toggle-trigger-popover.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { PopoverController } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
 import { DisasterTypeKey } from '../../types/disaster-type-key';
+import { TriggeredArea } from '../../types/triggered-area';
 
 @Component({
   selector: 'app-toggle-trigger-popover',
@@ -10,7 +11,7 @@ import { DisasterTypeKey } from '../../types/disaster-type-key';
 })
 export class ToggleTriggerPopoverComponent {
   @Input()
-  public placeCodeName: string;
+  public area: TriggeredArea;
 
   @Input()
   public eapNode: string;

interfaces/IBF-dashboard/src/app/models/country.model.ts

@@ -54,6 +54,7 @@ export class EapAlertClasses {
 export class EapAlertClass {
   label: string;
   color: string;
+  value: number;
 }
 
 export class AdminRegionLabels {

interfaces/IBF-dashboard/src/app/services/disaster-type.service.ts

@@ -32,6 +32,7 @@ export class DisasterTypeService {
     this.disasterTypeSubject.next(this.disasterType);
   }
 
+  // TODO move to back-end
   public hasEap(disasterType: DisasterTypeKey): string {
     const eapDisasterTypes = [
       DisasterTypeKey.floods,