From 5369d9168449ad4458437d69d2fb679d0c13540c Mon Sep 17 00:00:00 2001
From: MishaZhem <mz-100@mail.ru>
Date: Thu, 18 Jul 2024 18:40:33 +0300
Subject: [PATCH] chore: change Control Panel

---
 .../control-panel.component.html              | 13 ++--
 .../control-panel.component.less              | 61 ++++++-------------
 .../control-panel/control-panel.component.ts  |  4 +-
 .../control-panel/control-panel.service.ts    | 21 +++++++
 .../data/services/control-panel.service.ts    | 14 -----
 5 files changed, 50 insertions(+), 63 deletions(-)
 create mode 100644 apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.service.ts
 delete mode 100644 apps/taiga-lumbermill/src/dashboards/iot/data/services/control-panel.service.ts

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.html
index 2a230c901..4c5e3be39 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.html
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.html
@@ -1,13 +1,16 @@
 <div
-    *ngFor="let i of data.data; let ind = index"
-    class="grow2"
-    [ngClass]="{Last: ind == data.data.length - 1 && data.data.length % 2 == 1}"
+    *ngFor="let i of controlPanelService.controlPanelData; let ind = index"
+    [ngClass]="{
+        LastCard:
+            ind == controlPanelService.controlPanelData.length - 1 &&
+            controlPanelService.controlPanelData.length % 2 == 1,
+    }"
 >
     <button
         tuiCardLarge
         tuiHeader
         tuiSurface="elevated"
-        class="button"
+        class="buttonCard"
     >
         <aside tuiAccessories>
             <tui-avatar
@@ -19,7 +22,7 @@
 
         <h3
             tuiTitle
-            class="big-text"
+            class="text"
         >
             {{ i.name }}
         </h3>
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.less
index cb9e69bac..449df4caa 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.less
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.less
@@ -1,64 +1,41 @@
-.actions {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.25rem;
+:host {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: 0.625rem;
+    align-items: center;
+    justify-content: space-around;
+
+    @media (max-width: 50rem) and (min-width: 31.35rem) {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
 }
 
-.big-text {
+.text {
     font: var(--tui-font-heading-6);
     margin-top: auto;
     margin-bottom: auto;
 }
 
-.button {
+.buttonCard {
     max-width: max-content;
     padding-right: 1.75rem;
     gap: 1rem;
-}
 
-@media (max-width: 50rem) {
-    .button {
+    @media (max-width: 50rem) {
         width: 100%;
         max-width: 100%;
     }
-}
 
-@media (max-width: 31.25rem) {
-    .button {
-        width: calc(100vw - 3rem - 2.5rem);
-        max-width: calc(100vw - 3rem - 2.5rem);
+    @media (max-width: 31.25rem) {
+        width: calc(100vw - 5.5rem);
+        max-width: calc(100vw - 5.5rem);
         flex-shrink: 0;
     }
 }
 
-:host {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-    gap: 0.625rem;
-    align-items: center;
-    justify-content: space-around;
-}
-
-.Last {
+.LastCard {
     grid-column-end: 3;
     grid-column-start: 1;
 }
-
-@media (max-width: 50rem) {
-    :host {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-@media (max-width: 31.25rem) {
-    :host {
-        display: flex;
-    }
-
-    .grow2 {
-        width: 100%;
-        height: 100%;
-    }
-}
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.ts
index 641c9fe00..0b50b53c9 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.ts
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.ts
@@ -5,7 +5,7 @@ import {TuiHeader} from '@taiga-ui/experimental';
 import {TuiAvatar} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';
 
-import {ControlPanelService} from '../../data/services/control-panel.service';
+import {ControlPanelService} from './control-panel.service';
 
 @Component({
     standalone: true,
@@ -26,5 +26,5 @@ import {ControlPanelService} from '../../data/services/control-panel.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ControlPanelComponent {
-    protected data = inject(ControlPanelService);
+    protected controlPanelService = inject(ControlPanelService);
 }
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.service.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.service.ts
new file mode 100644
index 000000000..d64b38710
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.service.ts
@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+
+interface ControlPanelData {
+    readonly name: string;
+    readonly img: string;
+}
+
+export const INITIAL_DATA: ControlPanelData[] = [
+    {name: 'Open the door', img: '@tui.door-open'},
+    {name: 'Play music', img: '@tui.speaker'},
+    {name: 'Call security', img: '@tui.shield-alert'},
+    {name: 'Turn up the heat', img: '@tui.heater'},
+    {name: 'Turn on the kettle', img: '@tui.coffee'},
+];
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ControlPanelService {
+    public readonly controlPanelData = INITIAL_DATA;
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/data/services/control-panel.service.ts b/apps/taiga-lumbermill/src/dashboards/iot/data/services/control-panel.service.ts
deleted file mode 100644
index 23fde6087..000000000
--- a/apps/taiga-lumbermill/src/dashboards/iot/data/services/control-panel.service.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {Injectable} from '@angular/core';
-
-@Injectable({
-    providedIn: 'root',
-})
-export class ControlPanelService {
-    public data = [
-        {name: 'Open the door', img: '@tui.door-open'},
-        {name: 'Play music', img: '@tui.speaker'},
-        {name: 'Call security', img: '@tui.shield-alert'},
-        {name: 'Turn up the heat', img: '@tui.heater'},
-        {name: 'Turn on the kettle', img: '@tui.coffee'},
-    ];
-}