feat: split eventswitcher AB#14542

rodekruis · Jul 26, 2022 · 6000cef · 6000cef
1 parent 9193b1c
commit 6000cef
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 35 deletions.
diff --git a/interfaces/IBF-dashboard/src/app/components/chat/chat.component.html b/interfaces/IBF-dashboard/src/app/components/chat/chat.component.html
@@ -41,11 +41,12 @@
     ></p>
   </app-dialogue-turn>
   <!-- Active event -->
-  <app-dialogue-turn
-    *ngIf="eventState?.activeEvent && eventState?.activeTrigger"
-    isConnected="true"
-  >
-    <ng-container *ngFor="let event of eventState?.events">
+  <ng-container *ngIf="eventState?.activeEvent && eventState?.activeTrigger">
+    <app-dialogue-turn
+      *ngFor="let event of eventState?.events"
+      [isTriggered]="event.thresholdReached"
+      isConnected="true"
+    >
       <p *ngIf="event.activeTrigger && event.thresholdReached">
         <span
           [innerHTML]="
@@ -94,8 +95,7 @@
                 }
         "
       ></p>
-    </ng-container>
-    <ng-container *ngFor="let event of eventState?.events">
+
       <p
         *ngIf="event.activeTrigger && !event.thresholdReached"
         [innerHTML]="
@@ -110,20 +110,20 @@
                 }
         "
       ></p>
-    </ng-container>
 
-    <app-event-switcher></app-event-switcher>
+      <app-event-switcher [event]="event"></app-event-switcher>
 
-    <p *ngIf="forecastInfo && country?.countryCodeISO3 === 'ZWE'">
-      {{ forecastInfo }}
-    </p>
+      <p *ngIf="forecastInfo && country?.countryCodeISO3 === 'ZWE'">
+        {{ forecastInfo }}
+      </p>
 
-    <p
-      class="clear-out-message"
-      *ngIf="!!clearOutMessage"
-      [innerHTML]="clearOutMessage"
-    ></p>
-  </app-dialogue-turn>
+      <p
+        class="clear-out-message"
+        *ngIf="!!clearOutMessage"
+        [innerHTML]="clearOutMessage"
+      ></p>
+    </app-dialogue-turn>
+  </ng-container>
   <!-- Old event -->
   <app-dialogue-turn *ngIf="eventService.isOldEvent()" isConnected="true">
     <p

diff --git a/interfaces/IBF-dashboard/src/app/components/event-switcher/event-switcher.component.html b/interfaces/IBF-dashboard/src/app/components/event-switcher/event-switcher.component.html
@@ -1,18 +1,16 @@
 <div *ngIf="multipleActiveEvents()" class="containerDiv">
-  <div *ngFor="let event of eventState?.events">
-    <div>
-      <ion-button
-        class="ibf event-switch-button"
-        [class.triggered]="event.thresholdReached"
-        [class.selected]="event.eventName === selectedEventName"
-        shape="block"
-        slot="start"
-        [color]="getColor(event)"
-        size="small"
-        (click)="switchEvent(event)"
-      >
-        {{ event.eventName }}
-      </ion-button>
-    </div>
+  <div>
+    <ion-button
+      class="ibf event-switch-button"
+      [class.triggered]="event.thresholdReached"
+      [class.selected]="event.eventName === selectedEventName"
+      shape="block"
+      slot="start"
+      [color]="getColor(event)"
+      size="small"
+      (click)="switchEvent(event)"
+    >
+      {{ event.eventName }}
+    </ion-button>
   </div>
 </div>
diff --git a/interfaces/IBF-dashboard/src/app/components/event-switcher/event-switcher.component.ts b/interfaces/IBF-dashboard/src/app/components/event-switcher/event-switcher.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { EventService, EventSummary } from 'src/app/services/event.service';
 import { EventState } from 'src/app/types/event-state';
@@ -13,7 +13,6 @@ import { TimelineService } from '../../services/timeline.service';
   styleUrls: ['./event-switcher.component.scss'],
 })
 export class EventSwitcherComponent implements OnInit, OnDestroy {
-  public events: EventSummary[] = [];
   public selectedEventName: string;
   public eventState: EventState;
   public timelineState: TimelineState;
@@ -24,6 +23,9 @@ export class EventSwitcherComponent implements OnInit, OnDestroy {
   private manualEventStateSubscription: Subscription;
   private timelineStateSubscription: Subscription;
 
+  @Input()
+  public event: EventSummary;
+
   constructor(
     private disasterTypeService: DisasterTypeService,
     public eventService: EventService,