chore: change Safety

taiga-family · Jul 18, 2024 · dc55bbc · dc55bbc
1 parent d3eba15
commit dc55bbc
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 52 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+}