From fabb33aa9188f8fcf8abd38be50fffcc79e2c4b2 Mon Sep 17 00:00:00 2001
From: MishaZhem <mz-100@mail.ru>
Date: Mon, 15 Jul 2024 14:57:41 +0300
Subject: [PATCH] chore: Add Cleaning

---
 .../Cleaning/cleaning.component.html          | 71 +++++++++++++++++++
 .../Cleaning/cleaning.component.less          | 51 +++++++++++++
 .../components/Cleaning/cleaning.component.ts | 53 ++++++++++++++
 .../src/dashboards/iot/iot.component.html     |  1 +
 .../src/dashboards/iot/iot.component.ts       |  2 +
 5 files changed, 178 insertions(+)
 create mode 100644 apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.html
 create mode 100644 apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.less
 create mode 100644 apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.ts

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.html
new file mode 100644
index 000000000..442fa9e8d
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.html
@@ -0,0 +1,71 @@
+<div class="cleaning">
+    <h3 class="title">
+        Robot vacuum
+        <br />
+        cleaning schedule
+    </h3>
+    <div>
+        <div
+            class="wrapper Group tui-space_top-3"
+            [tuiDateFormat]="{mode: 'YMD'}"
+        >
+            <tui-input-date
+                [formControl]="control"
+                [tuiDateFormat]="{separator: '-'}"
+            >
+                New Cleaning
+                <input tuiTextfieldLegacy />
+            </tui-input-date>
+            <label
+                *ngIf="value$ | async as value"
+                tuiProgressLabel
+                class="Progress"
+            >
+                <span class="text">COMPLETED</span>
+                <span class="percent">{{ value }}%</span>
+
+                <tui-progress-circle
+                    size="l"
+                    [max]="max"
+                    [style.color]="color$ | async"
+                    [value]="value"
+                />
+            </label>
+        </div>
+        <div
+            class="wrapper Group tui-space_top-3"
+            [tuiDateFormat]="{mode: 'YMD'}"
+        >
+            <tui-input-date
+                [formControl]="control2"
+                [tuiDateFormat]="{separator: '-'}"
+            >
+                New Cleaning
+                <input tuiTextfieldLegacy />
+            </tui-input-date>
+            <label
+                *ngIf="value$ | async as value"
+                tuiProgressLabel
+                class="Progress hidden"
+            >
+                <span class="text">COMPLETED</span>
+                <span class="percent">{{ value }}%</span>
+
+                <tui-progress-circle
+                    size="l"
+                    [max]="max"
+                    [style.color]="color$ | async"
+                    [value]="value"
+                />
+            </label>
+        </div>
+    </div>
+
+    <button
+        appearance="primary"
+        tuiButton
+        class="Add"
+    >
+        Add
+    </button>
+</div>
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.less
new file mode 100644
index 000000000..8507def27
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.less
@@ -0,0 +1,51 @@
+.cleaning {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: max-content;
+    padding: 20px;
+    border: 1px var(--tui-border-normal) solid;
+}
+
+.title {
+    display: inline-block;
+    text-align: center;
+    margin: 0;
+}
+
+.Add {
+    padding-left: 30px;
+    padding-right: 30px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.text {
+    font: var(--tui-font-text-s);
+    font-size: 11px;
+    color: var(--tui-text-tertiary);
+}
+
+.percent {
+    font: var(--tui-font-heading-6);
+}
+
+tui-progress-circle {
+    transition: color 2s;
+}
+
+.Group {
+    display: flex;
+    margin-top: 0;
+    margin-bottom: -5px;
+    gap: 10px;
+    align-items: center;
+}
+
+.Progress {
+    transform: scale(0.8);
+}
+
+.hidden {
+    visibility: hidden;
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.ts
new file mode 100644
index 000000000..e7190fad3
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.ts
@@ -0,0 +1,53 @@
+import {AsyncPipe, CommonModule, isPlatformServer, NgIf} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject, PLATFORM_ID} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {TUI_IS_E2E} from '@taiga-ui/cdk';
+import {TuiButton, TuiDateFormat} from '@taiga-ui/core';
+import {TuiProgress} from '@taiga-ui/kit';
+import {TuiInputDateModule} from '@taiga-ui/legacy';
+import {map, of, startWith, takeWhile, timer} from 'rxjs';
+
+@Component({
+    standalone: true,
+    selector: 'app-cleaning',
+    imports: [
+        CommonModule,
+        TuiInputDateModule,
+        TuiDateFormat,
+        ReactiveFormsModule,
+        TuiButton,
+        TuiProgress,
+        NgIf,
+        AsyncPipe,
+    ],
+    templateUrl: './cleaning.component.html',
+    styleUrl: './cleaning.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CleaningCmponent {
+    protected readonly control = new FormControl('20-01-2024');
+    protected readonly control2 = new FormControl();
+    protected readonly max = 100;
+    protected readonly value$ =
+        inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID))
+            ? of(30)
+            : timer(300, 200).pipe(
+                  map((i) => i + 30),
+                  startWith(30),
+                  takeWhile((value) => value <= this.max),
+              );
+
+    protected readonly color$ = this.value$.pipe(
+        map((value) => {
+            if (value < 33) {
+                return 'red';
+            }
+
+            if (value < 66) {
+                return 'yellow';
+            }
+
+            return 'green';
+        }),
+    );
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html
index 373788d0a..9886ef5a6 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html
+++ b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html
@@ -8,4 +8,5 @@
     <app-safety />
     <app-climate-control />
     <app-lighting />
+    <app-cleaning />
 </tui-tiles>
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts
index b232926d2..7656cd1af 100644
--- a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts
+++ b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts
@@ -3,6 +3,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {TuiTiles} from '@taiga-ui/kit';
 
 import {BarChartCmponent} from './components/BarChart/bar-chart.component';
+import {CleaningCmponent} from './components/Cleaning/cleaning.component';
 import {LightingCmponent} from './components/Lighting/lighting.component';
 import {LineChartComponent} from './components/LineChart/line-chart.component';
 import {SafetyComponent} from './components/Safety/safety.component';
@@ -20,6 +21,7 @@ import {ClimateControlCmponent} from './components/СlimateСontrol/climate-cont
         SafetyComponent,
         ClimateControlCmponent,
         LightingCmponent,
+        CleaningCmponent,
         TuiTiles,
     ],
     templateUrl: './iot.component.html',