From dc55bbc3221fbe6dabf0394cd13548d6c7963df5 Mon Sep 17 00:00:00 2001
From: MishaZhem <mz-100@mail.ru>
Date: Thu, 18 Jul 2024 18:28:23 +0300
Subject: [PATCH] chore: change Safety

---
 .../Lighting/lighting.component.html          |  2 +-
 .../components/Lighting/lighting.component.ts |  2 +-
 .../components/Safety/safety.component.html   | 41 ++-----------------
 .../components/Safety/safety.component.less   |  5 ---
 .../iot/components/Safety/safety.component.ts | 16 ++++----
 .../iot/components/Safety/safety.service.ts   | 20 +++++++++
 6 files changed, 34 insertions(+), 52 deletions(-)
 create mode 100644 apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.service.ts

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.html
index 868c7ea7c..b155b56e0 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.html
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.html
@@ -17,7 +17,7 @@
         [collapsed]="true"
     >
         <label
-            *ngFor="let control of safetyForm['controls']; let ind = index"
+            *ngFor="let control of lightingForm['controls']; let ind = index"
             tuiBlock
             [ngClass]="{checked: control!.value}"
         >
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.ts
index a651fde48..2caadc067 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.ts
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.ts
@@ -30,7 +30,7 @@ import {LightingService} from './lighting.service';
 })
 export class LightingComponent {
     protected lightingService = inject(LightingService);
-    protected safetyForm = new FormArray(
+    protected lightingForm = new FormArray(
         this.lightingService.lightingData.map((item) => new FormControl(item.state)),
     );
 }
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.html
index a7fca0852..c515e0887 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.html
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.html
@@ -15,50 +15,17 @@
         orientation="vertical"
         tuiGroup
         [collapsed]="true"
-        [formGroup]="safetyForm"
     >
         <label
+            *ngFor="let control of safetyForm['controls']; let ind = index"
             tuiBlock
-            class="block-label"
         >
-            Alarm system
+            {{ safetyService.safetyData[ind].name }}
             <input
-                formControlName="safetyValue1"
-                tuiCheckbox
-                type="checkbox"
-            />
-        </label>
-        <label
-            tuiBlock
-            class="block-label"
-        >
-            Close the curtains
-            <input
-                formControlName="safetyValue2"
-                tuiCheckbox
-                type="checkbox"
-            />
-        </label>
-        <label
-            tuiBlock
-            class="block-label"
-        >
-            Video monitoring
-            <input
-                formControlName="safetyValue3"
-                tuiCheckbox
-                type="checkbox"
-            />
-        </label>
-        <label
-            tuiBlock
-            class="block-label"
-        >
-            Enable gas sensor notification
-            <input
-                formControlName="safetyValue4"
                 tuiCheckbox
                 type="checkbox"
+                [formControl]="control"
+                [style.margin-left]="'auto'"
             />
         </label>
     </form>
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.less
index 3b960762d..5d3b5a7c5 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.less
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.less
@@ -9,8 +9,3 @@
 .card[tuiCardLarge] form:last-child {
     margin-top: 0;
 }
-
-.block-label {
-    display: flex;
-    justify-content: space-between;
-}
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.ts
index 3546eb3fe..00c08e880 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.ts
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.ts
@@ -1,10 +1,12 @@
 import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {FormArray, FormControl, ReactiveFormsModule} from '@angular/forms';
 import {TuiAppearance, TuiGroup} from '@taiga-ui/core';
 import {TuiBlock, TuiCheckbox, TuiFade, TuiRadio} from '@taiga-ui/kit';
 import {TuiCardLarge} from '@taiga-ui/layout';
 
+import {SafetyService} from './safety.service';
+
 @Component({
     standalone: true,
     selector: 'lmb-safety',
@@ -24,10 +26,8 @@ import {TuiCardLarge} from '@taiga-ui/layout';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SafetyComponent {
-    protected readonly safetyForm = new FormGroup({
-        safetyValue1: new FormControl(true),
-        safetyValue2: new FormControl(false),
-        safetyValue3: new FormControl(true),
-        safetyValue4: new FormControl(false),
-    });
+    protected safetyService = inject(SafetyService);
+    protected safetyForm = new FormArray(
+        this.safetyService.safetyData.map((item) => new FormControl(item.state)),
+    );
 }
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.service.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.service.ts
new file mode 100644
index 000000000..88de3ebad
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.service.ts
@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+
+interface SafetyData {
+    readonly name: string;
+    readonly state: boolean;
+}
+
+export const INITIAL_DATA: SafetyData[] = [
+    {name: 'Alarm system', state: true},
+    {name: 'Close the curtains', state: false},
+    {name: 'Video monitoring', state: true},
+    {name: 'Enable gas sensor notification', state: false},
+];
+
+@Injectable({
+    providedIn: 'root',
+})
+export class SafetyService {
+    public readonly safetyData = INITIAL_DATA;
+}