chore: change Control Panel

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>

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%;
-    }
-}

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);
 }

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;
+}