feat: add basic IoT dashboard

apps/taiga-lumbermill-e2e/tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "extends": "../../tsconfig.base.json",
+    "extends": "../../tsconfig.json",
     "compilerOptions": {
         "allowJs": true,
         "outDir": "../../dist/out-tsc",

apps/taiga-lumbermill/src/components/app/app.routes.ts

@@ -1,8 +1,10 @@
 import type {Route} from '@angular/router';
 
-import {AppComponent} from './app.component';
-
 export const appRoutes: Route[] = [
-    {path: 'dashboards', component: AppComponent},
+    {
+        path: 'dashboards',
+        loadComponent: async () =>
+            import('../../dashboards/iot/iot.component').then((mod) => mod.IotComponent),
+    },
     {path: '**', redirectTo: 'dashboards'},
 ];

apps/taiga-lumbermill/src/components/navigation/navigation.component.html

@@ -34,27 +34,6 @@
         </ng-template>
     </button>
     <hr />
-    <button
-        appearance="secondary"
-        iconStart="@tui.plus"
-        tuiButton
-    >
-        Create
-    </button>
-    <button
-        iconStart="@tui.bell"
-        tuiIconButton
-    >
-        Notifications
-        <tui-badge-notification />
-    </button>
-    <button
-        iconStart="@tui.ellipsis"
-        tuiIconButton
-    >
-        More
-    </button>
-    <tui-avatar src="AI" />
 </header>
 <div [style.display]="'flex'">
     <aside
@@ -145,8 +124,7 @@
             </button>
         </footer>
     </aside>
-    <main
-        tuiNavigationMain
-        class="show"
-    ></main>
+    <main tuiNavigationMain>
+        <router-outlet />
+    </main>
 </div>

apps/taiga-lumbermill/src/components/navigation/navigation.component.ts

@@ -23,6 +23,8 @@ import {
 } from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
+import {IotComponent} from '../../dashboards/iot/iot.component';
+
 @Component({
     standalone: true,
     selector: 'app-navigation',
@@ -49,6 +51,7 @@ import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
         TuiHeader,
         TuiSurface,
         TuiTitle,
+        IotComponent,
     ],
     templateUrl: './navigation.component.html',
     styleUrl: './navigation.component.less',

apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.html

@@ -0,0 +1,52 @@
+<div
+    tuiAppearance="whiteblock"
+    tuiCardLarge="normal"
+    class="card"
+>
+    <header tuiHeader>
+        <h2
+            tuiTitle
+            [style.text-align]="'center'"
+        >
+            Cleaning schedule
+        </h2>
+    </header>
+    <div class="timetable">
+        <div class="list">
+            @for (i of forms['controls']; track $index) {
+                <tui-input-date
+                    class="input-date"
+                    [ariaValueMin]="now"
+                    [formControl]="i"
+                    [min]="now"
+                    [readOnly]="$index == 0 ? true : false"
+                >
+                    cleaning time
+                    <input tuiTextfieldLegacy />
+                </tui-input-date>
+            }
+        </div>
+        <label
+            *ngIf="cleaningService.progress$ | async as value"
+            tuiProgressLabel
+            [style.margin-bottom]="'auto'"
+        >
+            <span class="percent">{{ value }}%</span>
+
+            <tui-progress-circle
+                size="s"
+                [max]="100"
+                [style.color]="color$ | async"
+                [value]="value"
+            />
+        </label>
+    </div>
+    <button
+        appearance="primary"
+        tuiButton
+        class="add-button"
+        (click)="addNew()"
+    >
+        Add
+    </button>
+</div>

apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.less

@@ -0,0 +1,34 @@
+.card {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    height: 100%;
+    background-color: var(--tui-background-base);
+}
+
+.add-button {
+    max-width: 7rem;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+}
+
+.percent {
+    font: var(--tui-font-text-m);
+}
+
+tui-progress-circle {
+    transition: color 2s;
+}
+
+.input-date {
+    width: 10rem;
+}
+
+.timetable {
+    display: flex;
+    gap: 0.625rem;
+}

apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.ts

@@ -0,0 +1,69 @@
+import {AsyncPipe, CommonModule, NgIf} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {FormArray, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiDay} from '@taiga-ui/cdk';
+import {TuiAppearance, TuiButton, TuiDateFormat, TuiTitle} from '@taiga-ui/core';
+import {TuiHeader} from '@taiga-ui/experimental';
+import {TuiProgress} from '@taiga-ui/kit';
+import {TuiCardLarge} from '@taiga-ui/layout';
+import {TuiInputDateModule} from '@taiga-ui/legacy';
+import {map} from 'rxjs';
+
+import {CleaningService} from './cleaning.service';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-cleaning',
+    imports: [
+        CommonModule,
+        TuiInputDateModule,
+        TuiDateFormat,
+        ReactiveFormsModule,
+        TuiButton,
+        FormsModule,
+        TuiProgress,
+        NgIf,
+        AsyncPipe,
+        TuiAppearance,
+        TuiCardLarge,
+        TuiHeader,
+        TuiTitle,
+    ],
+    templateUrl: './cleaning.component.html',
+    styleUrl: './cleaning.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CleaningComponent {
+    protected cleaningService = inject(CleaningService);
+    protected readonly now = TuiDay.currentLocal();
+    protected forms = new FormArray(
+        this.cleaningService.schedule.map(
+            (item) =>
+                new FormControl(
+                    new TuiDay(
+                        TuiDay.parseRawDateString(item.date).year,
+                        TuiDay.parseRawDateString(item.date).month,
+                        TuiDay.parseRawDateString(item.date).day,
+                    ),
+                ),
+        ),
+    );
+
+    protected readonly color$ = this.cleaningService.progress$.pipe(
+        map((value) => {
+            if (value < 33) {
+                return 'var(--tui-status-negative)';
+            }
+
+            if (value < 66) {
+                return 'var(--tui-status-warning)';
+            }
+
+            return 'var(--tui-background-accent-1)';
+        }),
+    );
+
+    protected addNew(): void {
+        this.forms.push(new FormControl());
+    }
+}

apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.service.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+import {map, startWith, takeWhile, timer} from 'rxjs';
+
+interface CleaningSchedule {
+    readonly id: string;
+    readonly date: string;
+}
+
+export const INITIAL_DATA: CleaningSchedule[] = [{id: '1', date: '17.07.2024'}];
+
+@Injectable({
+    providedIn: 'root',
+})
+export class CleaningService {
+    public readonly progress$ = timer(300, 200).pipe(
+        map((i) => i + 30),
+        startWith(30),
+        takeWhile((value) => value <= 100),
+    );
+
+    public readonly schedule = INITIAL_DATA;
+}

apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.html

@@ -0,0 +1,37 @@
+<div
+    tuiAppearance="whiteblock"
+    tuiCardLarge="normal"
+    class="card"
+>
+    <div>
+        <header tuiHeader>
+            <h2
+                tuiTitle
+                [style.text-align]="'center'"
+            >
+                Utility costs
+            </h2>
+        </header>
+        <p class="legend">
+            <span class="item">
+                <small class="name">Electricity bills</small>
+            </span>
+            <span class="item">
+                <small class="name">Light bills</small>
+            </span>
+        </p>
+        <div class="flex">
+            <tui-axes
+                class="axes"
+                [axisXLabels]="costService.labelsX"
+                [axisYLabels]="costService.labelsY"
+            >
+                <tui-bar-chart
+                    [max]="10000"
+                    [tuiHintContent]="hint"
+                    [value]="costService.value"
+                />
+            </tui-axes>
+        </div>
+    </div>
+</div>

apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.less

@@ -0,0 +1,55 @@
+.color() {
+    color: var(--tui-background-accent-1);
+
+    &:last-child {
+        color: var(--tui-chart-categorical-12);
+    }
+}
+
+.axes {
+    min-height: 18.75rem;
+    width: 100%;
+
+    --tui-chart-categorical-00: var(--tui-background-accent-1);
+    --tui-chart-categorical-01: var(--tui-chart-categorical-12);
+}
+
+.flex {
+    display: flex;
+    width: 100%;
+}
+
+.select {
+    max-width: 20rem;
+}
+
+.card {
+    width: 100%;
+    height: 100%;
+    background-color: var(--tui-background-base);
+}
+
+.legend {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.item {
+    .color();
+
+    display: flex;
+    align-items: center;
+    margin: 0 0.75rem;
+
+    &:before {
+        content: '';
+        border-bottom: 0.125rem solid;
+        width: 1rem;
+        margin-right: 0.5rem;
+    }
+}
+
+.name {
+    color: var(--tui-text-primary);
+}

apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.ts

@@ -0,0 +1,38 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {TuiAxes, TuiBarChart} from '@taiga-ui/addon-charts';
+import type {TuiContext} from '@taiga-ui/cdk';
+import {TuiAppearance, tuiFormatNumber, TuiHint} from '@taiga-ui/core';
+import {TuiDataListWrapper} from '@taiga-ui/kit';
+import {TuiCardLarge} from '@taiga-ui/layout';
+import {TuiSelectModule} from '@taiga-ui/legacy';
+
+import {CostService} from './cost.service';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-cost',
+    imports: [
+        CommonModule,
+        TuiAxes,
+        TuiBarChart,
+        TuiSelectModule,
+        FormsModule,
+        TuiDataListWrapper,
+        TuiHint,
+        TuiAxes,
+        TuiCardLarge,
+        TuiAppearance,
+    ],
+    templateUrl: './cost.component.html',
+    styleUrl: './cost.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CostComponent {
+    protected costService = inject(CostService).costData;
+    protected hint = ({$implicit}: TuiContext<number>): string =>
+        this.costService.value
+            .reduce((result, set) => `${result}$${tuiFormatNumber(set[$implicit])}\n`, '')
+            .trim();
+}