From 95ffc0cd73a42fc9b268c5b5435c97f616370c60 Mon Sep 17 00:00:00 2001
From: jdre <jdre@softwareag.com>
Date: Fri, 26 Apr 2024 11:51:28 +0200
Subject: [PATCH] feat(datapoints-graph): alarm selector component

Alarm selector component- selected alarms column

n/a
---
 .../alarm-selector.component.html             | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/datapoints-graph/alarm-selector/alarm-selector.component.html b/src/datapoints-graph/alarm-selector/alarm-selector.component.html
index e296c624..778d3028 100644
--- a/src/datapoints-graph/alarm-selector/alarm-selector.component.html
+++ b/src/datapoints-graph/alarm-selector/alarm-selector.component.html
@@ -152,4 +152,52 @@ <h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
   </div>
 
   <!-- last column  -->
+  <div class="inner-scroll bg-gray-white">
+    <p
+      class="text-medium m-b-4 p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate"
+      [title]="'Selected alarms' | translate"
+      translate
+    >
+      Selected alarms
+    </p>
+    <div class="d-flex flex-wrap gap-8 p-l-16 p-r-16 p-b-16">
+      <div
+        class="c8y-datapoint-pill"
+        *ngFor="let selectedAlarm of selectedAlarms"
+      >
+        <button
+          [title]="'Remove' | translate"
+          type="button"
+          class="c8y-datapoint-pill__btn"
+          (click)="alarmRemoved(selectedAlarm)"
+        >
+          <i c8yIcon="remove" class="icon-14"></i>
+        </button>
+        <div class="c8y-datapoint-pill__label" [title]="selectedAlarm.label">
+          <i
+            c8yIcon="circle"
+            class="m-r-4 icon-14"
+            [style.color]="selectedAlarm.color"
+          ></i>
+          <span class="text-truncate">
+            <span class="text-truncate">{{ selectedAlarm.label }}</span>
+            <small
+              class="text-muted text-10"
+              *ngIf="selectedAlarm?.__target?.name"
+            >
+              {{ selectedAlarm?.__target?.name }}
+            </small>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="p-16" *ngIf="!selectedAlarms || !selectedAlarms.length">
+      <div class="c8y-empty-state text-left">
+        <h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
+        <p>
+          <strong translate>No alarms selected.</strong>
+        </p>
+      </div>
+    </div>
+  </div>
 </div>