From 692780b710b96cefe77ae8e2c36916ae0cceb034 Mon Sep 17 00:00:00 2001
From: Amandee Ellawala <amamandee.manushika.e@gmail.com>
Date: Thu, 14 Nov 2024 02:39:25 +0000
Subject: [PATCH] Implement range slider in rule settings dialog

---
 .../rule-settings-dialog.html                 | 174 +++++++++++-------
 1 file changed, 112 insertions(+), 62 deletions(-)

diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
index 8806dae6a..3c353146e 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
@@ -1,76 +1,126 @@
 <div mat-dialog-title>{{ data.rule.name }}</div>
 
 <div class="py-3" mat-dialog-content>
-  <div
-    class="w-100"
-    [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
-  >
-    <h6 class="mb-0">
-      <ng-container i18n>Threshold Min</ng-container>:
+  @if (
+    data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
+  ) {
+    <div
+      class="w-100"
+      [ngClass]="{
+        'd-none':
+          !data.rule.configuration.thresholdMin ||
+          !data.rule.configuration.thresholdMax
+      }"
+    >
+      <h6 class="mb-0">
+        <ng-container i18n>Threshold</ng-container>:
+        @if (data.rule.configuration.threshold.unit === '%') {
+          {{ data.settings.thresholdMin | percent: '1.2-2' }}
+        } @else {
+          {{ data.settings.thresholdMin }}
+        }
+        -
+        @if (data.rule.configuration.threshold.unit === '%') {
+          {{ data.settings.thresholdMax | percent: '1.2-2' }}
+        } @else {
+          {{ data.settings.thresholdMax }}
+        }
+      </h6>
+      @if (data.rule.configuration.threshold.unit === '%') {
+        <label>{{
+          data.rule.configuration.threshold.min | percent: '1.2-2'
+        }}</label>
+      } @else {
+        <label>{{ data.rule.configuration.threshold.min }}</label>
+      }
+      <mat-slider
+        [max]="data.rule.configuration.threshold.max"
+        [min]="data.rule.configuration.threshold.min"
+        [step]="data.rule.configuration.threshold.step"
+      >
+        <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
+        <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
+      </mat-slider>
       @if (data.rule.configuration.threshold.unit === '%') {
-        {{ data.settings.thresholdMin | percent: '1.2-2' }}
+        <label>{{
+          data.rule.configuration.threshold.max | percent: '1.2-2'
+        }}</label>
       } @else {
-        {{ data.settings.thresholdMin }}
+        <label>{{ data.rule.configuration.threshold.max }}</label>
       }
-    </h6>
-    @if (data.rule.configuration.threshold.unit === '%') {
-      <label>{{
-        data.rule.configuration.threshold.min | percent: '1.2-2'
-      }}</label>
-    } @else {
-      <label>{{ data.rule.configuration.threshold.min }}</label>
-    }
-    <mat-slider
-      name="thresholdMin"
-      [max]="data.rule.configuration.threshold.max"
-      [min]="data.rule.configuration.threshold.min"
-      [step]="data.rule.configuration.threshold.step"
+    </div>
+  } @else {
+    <div
+      class="w-100"
+      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
     >
-      <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
-    </mat-slider>
-    @if (data.rule.configuration.threshold.unit === '%') {
-      <label>{{
-        data.rule.configuration.threshold.max | percent: '1.2-2'
-      }}</label>
-    } @else {
-      <label>{{ data.rule.configuration.threshold.max }}</label>
-    }
-  </div>
-  <div
-    class="w-100"
-    [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
-  >
-    <h6 class="mb-0">
-      <ng-container i18n>Threshold Max</ng-container>:
+      <h6 class="mb-0">
+        <ng-container i18n>Threshold Min</ng-container>:
+        @if (data.rule.configuration.threshold.unit === '%') {
+          {{ data.settings.thresholdMin | percent: '1.2-2' }}
+        } @else {
+          {{ data.settings.thresholdMin }}
+        }
+      </h6>
       @if (data.rule.configuration.threshold.unit === '%') {
-        {{ data.settings.thresholdMax | percent: '1.2-2' }}
+        <label>{{
+          data.rule.configuration.threshold.min | percent: '1.2-2'
+        }}</label>
       } @else {
-        {{ data.settings.thresholdMax }}
+        <label>{{ data.rule.configuration.threshold.min }}</label>
       }
-    </h6>
-    @if (data.rule.configuration.threshold.unit === '%') {
-      <label>{{
-        data.rule.configuration.threshold.min | percent: '1.2-2'
-      }}</label>
-    } @else {
-      <label>{{ data.rule.configuration.threshold.min }}</label>
-    }
-    <mat-slider
-      name="thresholdMax"
-      [max]="data.rule.configuration.threshold.max"
-      [min]="data.rule.configuration.threshold.min"
-      [step]="data.rule.configuration.threshold.step"
+      <mat-slider
+        name="thresholdMin"
+        [max]="data.rule.configuration.threshold.max"
+        [min]="data.rule.configuration.threshold.min"
+        [step]="data.rule.configuration.threshold.step"
+      >
+        <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
+      </mat-slider>
+      @if (data.rule.configuration.threshold.unit === '%') {
+        <label>{{
+          data.rule.configuration.threshold.max | percent: '1.2-2'
+        }}</label>
+      } @else {
+        <label>{{ data.rule.configuration.threshold.max }}</label>
+      }
+    </div>
+    <div
+      class="w-100"
+      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
     >
-      <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
-    </mat-slider>
-    @if (data.rule.configuration.threshold.unit === '%') {
-      <label>{{
-        data.rule.configuration.threshold.max | percent: '1.2-2'
-      }}</label>
-    } @else {
-      <label>{{ data.rule.configuration.threshold.max }}</label>
-    }
-  </div>
+      <h6 class="mb-0">
+        <ng-container i18n>Threshold Max</ng-container>:
+        @if (data.rule.configuration.threshold.unit === '%') {
+          {{ data.settings.thresholdMax | percent: '1.2-2' }}
+        } @else {
+          {{ data.settings.thresholdMax }}
+        }
+      </h6>
+      @if (data.rule.configuration.threshold.unit === '%') {
+        <label>{{
+          data.rule.configuration.threshold.min | percent: '1.2-2'
+        }}</label>
+      } @else {
+        <label>{{ data.rule.configuration.threshold.min }}</label>
+      }
+      <mat-slider
+        name="thresholdMax"
+        [max]="data.rule.configuration.threshold.max"
+        [min]="data.rule.configuration.threshold.min"
+        [step]="data.rule.configuration.threshold.step"
+      >
+        <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
+      </mat-slider>
+      @if (data.rule.configuration.threshold.unit === '%') {
+        <label>{{
+          data.rule.configuration.threshold.max | percent: '1.2-2'
+        }}</label>
+      } @else {
+        <label>{{ data.rule.configuration.threshold.max }}</label>
+      }
+    </div>
+  }
 </div>
 
 <div align="end" mat-dialog-actions>