From ad130fc35ebcb049eb707cd9a9667456e94af443 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Thu, 28 Nov 2024 11:06:12 +0100
Subject: [PATCH] extracted list-item-components out of: DeviceList,
 ShutterList, TunableList, KnxGroupList

---
 .../angular/src/app/api/common/validators.ts  |  8 +++
 .../device-list/device-list.component.html    | 23 +------
 .../device-list/device-list.component.less    | 40 ------------
 .../device-list/device-list.component.ts      | 21 +------
 .../device-tile/device-tile.component.html    | 20 ++++++
 .../device-tile/device-tile.component.less    | 37 +++++++++++
 .../device-tile/device-tile.component.ts      | 38 ++++++++++++
 .../knx-group-list.component.html             | 34 +---------
 .../knx-group-list.component.less             | 12 ----
 .../knx-group-list.component.ts               | 14 +----
 .../knx-group-tile.component.html             | 31 ++++++++++
 .../knx-group-tile.component.less             |  9 +++
 .../knx-group-tile.component.ts               | 33 ++++++++++
 .../shutter-icon/shutter-icon.component.html  |  5 --
 .../shutter-list/shutter-list.component.html  | 40 +-----------
 .../shutter-list/shutter-list.component.less  | 37 -----------
 .../shutter-list/shutter-list.component.ts    | 13 +---
 .../shutter-icon/shutter-icon.component.html  |  4 ++
 .../shutter-icon/shutter-icon.component.less  | 12 ++++
 .../shutter-icon/shutter-icon.component.ts    | 11 +++-
 .../shutter-tile/shutter-tile.component.html  | 37 +++++++++++
 .../shutter-tile/shutter-tile.component.less  | 36 +++++++++++
 .../shutter-tile/shutter-tile.component.ts    | 34 ++++++++++
 .../tunable-list/tunable-list.component.html  | 32 +---------
 .../tunable-list/tunable-list.component.less  | 62 -------------------
 .../tunable-list/tunable-list.component.ts    | 22 +------
 .../tunable-tile/tunable-tile.component.html  | 29 +++++++++
 .../tunable-tile/tunable-tile.component.less  | 59 ++++++++++++++++++
 .../tunable-tile/tunable-tile.component.ts    | 44 +++++++++++++
 src/main/angular/src/config.less              |  1 +
 30 files changed, 461 insertions(+), 337 deletions(-)
 create mode 100644 src/main/angular/src/app/shared/device-tile/device-tile.component.html
 create mode 100644 src/main/angular/src/app/shared/device-tile/device-tile.component.less
 create mode 100644 src/main/angular/src/app/shared/device-tile/device-tile.component.ts
 create mode 100644 src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.html
 create mode 100644 src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.less
 create mode 100644 src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.ts
 delete mode 100644 src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.html
 create mode 100644 src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.html
 rename src/main/angular/src/app/shared/{shutter-list => shutter-tile}/shutter-icon/shutter-icon.component.less (55%)
 rename src/main/angular/src/app/shared/{shutter-list => shutter-tile}/shutter-icon/shutter-icon.component.ts (64%)
 create mode 100644 src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.html
 create mode 100644 src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.less
 create mode 100644 src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.ts
 create mode 100644 src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.html
 create mode 100644 src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.less
 create mode 100644 src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.ts

diff --git a/src/main/angular/src/app/api/common/validators.ts b/src/main/angular/src/app/api/common/validators.ts
index 25e011c..602182a 100644
--- a/src/main/angular/src/app/api/common/validators.ts
+++ b/src/main/angular/src/app/api/common/validators.ts
@@ -78,3 +78,11 @@ export function orNull<T, R>(item: T | null | undefined, map: (t: T) => R): R |
   }
   return map(item);
 }
+
+export function isSet(value: any) {
+  return value !== null && value !== undefined;
+}
+
+export function isUnset(value: any) {
+  return value === null || value === undefined;
+}
diff --git a/src/main/angular/src/app/shared/device-list/device-list.component.html b/src/main/angular/src/app/shared/device-list/device-list.component.html
index d018b0f..e53db6e 100644
--- a/src/main/angular/src/app/shared/device-list/device-list.component.html
+++ b/src/main/angular/src/app/shared/device-list/device-list.component.html
@@ -1,24 +1,5 @@
-<div class="deviceList tileContainer">
+<div class="tileContainer deviceList">
 
-  <div class="tile" *ngFor="let device of sorted(); trackBy: Device.trackBy">
-
-    <div class="device tileInner" [ngClass]="ngClass(device)">
-
-      <div class="name">
-        {{ device.nameWithArea }}
-      </div>
-
-      <div class="actions">
-        <div class="action switchOn" (click)="deviceService.setState(device, true)"></div>
-        <div class="action switchOff" (click)="deviceService.setState(device, false)"></div>
-      </div>
-
-      <div class="timestamp details">
-        {{ device.stateProperty?.lastValueChange | relative:now }}
-      </div>
-
-    </div>
-
-  </div>
+  <app-device-tile [now]="now" [device]="device" *ngFor="let device of sorted(); trackBy: Device.trackBy"></app-device-tile>
 
 </div>
diff --git a/src/main/angular/src/app/shared/device-list/device-list.component.less b/src/main/angular/src/app/shared/device-list/device-list.component.less
index 58263fc..7adc753 100644
--- a/src/main/angular/src/app/shared/device-list/device-list.component.less
+++ b/src/main/angular/src/app/shared/device-list/device-list.component.less
@@ -1,41 +1 @@
 @import "../../../config";
-
-.deviceList {
-
-  .device {
-
-    .name {
-      float: left;
-    }
-
-    .timestamp {
-      clear: left;
-      float: left;
-      font-size: 80%;
-    }
-
-    .actions {
-      float: right;
-
-      .action  {
-        float: left;
-        margin-left: @space;
-        width: 4em;
-        aspect-ratio: 1;
-      }
-
-      .switchOn {
-        //noinspection CssUnknownTarget
-        background-image: url("/switchOn.svg");
-      }
-
-      .switchOff {
-        //noinspection CssUnknownTarget
-        background-image: url("/switchOff.svg");
-      }
-
-    }
-
-  }
-
-}
diff --git a/src/main/angular/src/app/shared/device-list/device-list.component.ts b/src/main/angular/src/app/shared/device-list/device-list.component.ts
index 2e452f7..fa2a0a1 100644
--- a/src/main/angular/src/app/shared/device-list/device-list.component.ts
+++ b/src/main/angular/src/app/shared/device-list/device-list.component.ts
@@ -1,17 +1,15 @@
 import {Component, Input, OnDestroy, OnInit} from '@angular/core';
-import {NgClass, NgForOf} from '@angular/common';
+import {NgForOf} from '@angular/common';
 import {Device} from '../../api/Device/Device';
-import {DeviceService} from '../../api/Device/device.service';
-import {RelativePipe} from '../../api/common/relative.pipe';
 import {Subscription, timer} from 'rxjs';
+import {DeviceTileComponent} from '../device-tile/device-tile.component';
 
 @Component({
   selector: 'app-device-list',
   standalone: true,
   imports: [
     NgForOf,
-    NgClass,
-    RelativePipe
+    DeviceTileComponent
   ],
   templateUrl: './device-list.component.html',
   styleUrl: './device-list.component.less'
@@ -27,12 +25,6 @@ export class DeviceListComponent implements OnInit, OnDestroy {
   @Input()
   list: Device[] = [];
 
-  constructor(
-    protected readonly deviceService: DeviceService,
-  ) {
-    //
-  }
-
   ngOnInit(): void {
     this.now = new Date();
     this.subs.push(timer(1000, 1000).subscribe(() => this.now = new Date()));
@@ -42,13 +34,6 @@ export class DeviceListComponent implements OnInit, OnDestroy {
     this.subs.forEach(sub => sub.unsubscribe());
   }
 
-  ngClass(device: Device) {
-    return {
-      "stateOn": device.stateProperty?.state?.value === true,
-      "stateOff": device.stateProperty?.state?.value === false,
-    };
-  }
-
   sorted(): Device[] {
     return this.list.sort(Device.compareByAreaThenName);
   }
diff --git a/src/main/angular/src/app/shared/device-tile/device-tile.component.html b/src/main/angular/src/app/shared/device-tile/device-tile.component.html
new file mode 100644
index 0000000..fc370d1
--- /dev/null
+++ b/src/main/angular/src/app/shared/device-tile/device-tile.component.html
@@ -0,0 +1,20 @@
+<div class="tile">
+
+  <div class="tileInner device" [ngClass]="ngClass(device)">
+
+    <div class="name">
+      {{ device.nameWithArea }}
+    </div>
+
+    <div class="actions">
+      <div class="action switchOn" (click)="deviceService.setState(device, true)"></div>
+      <div class="action switchOff" (click)="deviceService.setState(device, false)"></div>
+    </div>
+
+    <div class="timestamp details">
+      {{ device.stateProperty?.lastValueChange | relative:now }}
+    </div>
+
+  </div>
+
+</div>
diff --git a/src/main/angular/src/app/shared/device-tile/device-tile.component.less b/src/main/angular/src/app/shared/device-tile/device-tile.component.less
new file mode 100644
index 0000000..158e7b8
--- /dev/null
+++ b/src/main/angular/src/app/shared/device-tile/device-tile.component.less
@@ -0,0 +1,37 @@
+@import "../../../config";
+
+.device {
+
+  .name {
+    float: left;
+  }
+
+  .timestamp {
+    clear: left;
+    float: left;
+    font-size: 80%;
+  }
+
+  .actions {
+    float: right;
+
+    .action {
+      float: left;
+      margin-left: @space;
+      width: 4em;
+      aspect-ratio: 1;
+    }
+
+    .switchOn {
+      //noinspection CssUnknownTarget
+      background-image: url("/switchOn.svg");
+    }
+
+    .switchOff {
+      //noinspection CssUnknownTarget
+      background-image: url("/switchOff.svg");
+    }
+
+  }
+
+}
diff --git a/src/main/angular/src/app/shared/device-tile/device-tile.component.ts b/src/main/angular/src/app/shared/device-tile/device-tile.component.ts
new file mode 100644
index 0000000..74d5da8
--- /dev/null
+++ b/src/main/angular/src/app/shared/device-tile/device-tile.component.ts
@@ -0,0 +1,38 @@
+import {Component, Input} from '@angular/core';
+import {RelativePipe} from "../../api/common/relative.pipe";
+import {Device} from "../../api/Device/Device";
+import {DeviceService} from '../../api/Device/device.service';
+import {NgClass} from '@angular/common';
+
+@Component({
+  selector: 'app-device-tile',
+  standalone: true,
+  imports: [
+    RelativePipe,
+    NgClass
+  ],
+  templateUrl: './device-tile.component.html',
+  styleUrl: './device-tile.component.less'
+})
+export class DeviceTileComponent {
+
+  @Input()
+  now!: Date;
+
+  @Input()
+  device!: Device;
+
+  constructor(
+    protected readonly deviceService: DeviceService,
+  ) {
+    //
+  }
+
+  ngClass(device: Device) {
+    return {
+      "stateOn": device.stateProperty?.state?.value === true,
+      "stateOff": device.stateProperty?.state?.value === false,
+    };
+  }
+
+}
diff --git a/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.html b/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.html
index 2bb9b8d..f637379 100644
--- a/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.html
+++ b/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.html
@@ -1,35 +1,5 @@
-<div class="groupList tileContainer">
+<div class="tileContainer groupList">
 
-  <div class="tile" *ngFor="let group of sorted(); trackBy: Group.trackBy">
-
-    <div class="group tileInner" [ngClass]="ngClass(group)">
-
-      <div class="name">
-        {{ group.name }}
-      </div>
-
-      <div class="details">
-
-        <div class="stackLeft address">
-          {{ group.address }}
-        </div>
-
-        <div class="stackLeft dpt">
-          DPT {{ group.dpt }}
-        </div>
-
-        <div class="stackRight state">
-          {{ group.state?.string || '-' }}
-        </div>
-
-        <div class="stackRight timestamp">
-          {{ group.lastValueChange | relative:now }}:
-        </div>
-
-      </div>
-
-    </div>
-
-  </div>
+  <app-knx-group-tile [now]="now" [group]="group" *ngFor="let group of sorted(); trackBy: Group.trackBy"></app-knx-group-tile>
 
 </div>
diff --git a/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.less b/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.less
index fe7d093..7adc753 100644
--- a/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.less
+++ b/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.less
@@ -1,13 +1 @@
 @import "../../../config";
-
-.groupList {
-
-  .group {
-
-    .name {
-      margin-bottom: @space;
-    }
-
-  }
-
-}
diff --git a/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.ts b/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.ts
index ff5a601..daed7bb 100644
--- a/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.ts
+++ b/src/main/angular/src/app/shared/knx-group-list/knx-group-list.component.ts
@@ -1,16 +1,15 @@
 import {Component, Input, OnDestroy, OnInit} from '@angular/core';
-import {NgClass, NgForOf} from '@angular/common';
+import {NgForOf} from '@angular/common';
 import {Group} from '../../api/Group/Group';
-import {RelativePipe} from '../../api/common/relative.pipe';
 import {Subscription, timer} from 'rxjs';
+import {KnxGroupTileComponent} from '../knx-group-tile/knx-group-tile.component';
 
 @Component({
   selector: 'app-knx-group-list',
   standalone: true,
   imports: [
     NgForOf,
-    NgClass,
-    RelativePipe
+    KnxGroupTileComponent
   ],
   templateUrl: './knx-group-list.component.html',
   styleUrl: './knx-group-list.component.less'
@@ -26,13 +25,6 @@ export class KnxGroupListComponent implements OnInit, OnDestroy {
   @Input()
   groupList: Group[] = [];
 
-  ngClass(group: Group) {
-    return {
-      "stateOn": group.state?.value === true,
-      "stateOff": group.state?.value === false,
-    };
-  }
-
   ngOnInit(): void {
     this.now = new Date();
     this.subs.push(timer(1000, 1000).subscribe(() => this.now = new Date()));
diff --git a/src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.html b/src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.html
new file mode 100644
index 0000000..faf6466
--- /dev/null
+++ b/src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.html
@@ -0,0 +1,31 @@
+<div class="tile">
+
+  <div class="tileInner group" [ngClass]="ngClass(group)">
+
+    <div class="name">
+      {{ group.name }}
+    </div>
+
+    <div class="details">
+
+      <div class="stackLeft address">
+        {{ group.address }}
+      </div>
+
+      <div class="stackLeft dpt">
+        DPT {{ group.dpt }}
+      </div>
+
+      <div class="stackRight state">
+        {{ group.state?.string || '-' }}
+      </div>
+
+      <div class="stackRight timestamp">
+        {{ group.lastValueChange | relative:now }}:
+      </div>
+
+    </div>
+
+  </div>
+
+</div>
diff --git a/src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.less b/src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.less
new file mode 100644
index 0000000..31c9f8e
--- /dev/null
+++ b/src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.less
@@ -0,0 +1,9 @@
+@import "../../../config";
+
+.group {
+
+  .name {
+    margin-bottom: @space;
+  }
+
+}
diff --git a/src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.ts b/src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.ts
new file mode 100644
index 0000000..f2db7a6
--- /dev/null
+++ b/src/main/angular/src/app/shared/knx-group-tile/knx-group-tile.component.ts
@@ -0,0 +1,33 @@
+import {Component, Input} from '@angular/core';
+import {NgClass} from '@angular/common';
+import {RelativePipe} from '../../api/common/relative.pipe';
+import {Group} from '../../api/Group/Group';
+
+@Component({
+  selector: 'app-knx-group-tile',
+  standalone: true,
+  imports: [
+    RelativePipe,
+    NgClass
+  ],
+  templateUrl: './knx-group-tile.component.html',
+  styleUrl: './knx-group-tile.component.less'
+})
+export class KnxGroupTileComponent {
+
+  protected readonly Group = Group;
+
+  @Input()
+  now!: Date;
+
+  @Input()
+  group!: Group;
+
+  ngClass(group: Group) {
+    return {
+      "stateOn": group.state?.value === true,
+      "stateOff": group.state?.value === false,
+    };
+  }
+
+}
diff --git a/src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.html b/src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.html
deleted file mode 100644
index 742af25..0000000
--- a/src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="window" (click)="activate.emit(position)">
-  <div class="shutter" [style.height]="position + '%'">
-    <!-- -->
-  </div>
-</div>
diff --git a/src/main/angular/src/app/shared/shutter-list/shutter-list.component.html b/src/main/angular/src/app/shared/shutter-list/shutter-list.component.html
index 211de5e..47b44aa 100644
--- a/src/main/angular/src/app/shared/shutter-list/shutter-list.component.html
+++ b/src/main/angular/src/app/shared/shutter-list/shutter-list.component.html
@@ -1,41 +1,5 @@
-<div class="shutterList tileContainer">
+<div class="tileContainer shutterList">
 
-  <div class="tile" *ngFor="let shutter of sorted(); trackBy: Shutter.trackBy">
-
-    <div class="shutter tileInner">
-
-      <div class="name">
-        {{ shutter.nameWithArea }}
-      </div>
-
-      <div class="icon">
-        <app-shutter-icon [position]="shutter.positionProperty?.state?.value"></app-shutter-icon>
-      </div>
-
-      <div class="timestamp details">
-        {{ shutter.positionProperty?.lastValueChange | relative:now }}
-      </div>
-
-      <div class="actions">
-        <div class="action">
-          <app-shutter-icon [position]="0" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
-        </div>
-        <div class="action">
-          <app-shutter-icon [position]="50" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
-        </div>
-        <div class="action">
-          <app-shutter-icon [position]="80" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
-        </div>
-        <div class="action">
-          <app-shutter-icon [position]="90" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
-        </div>
-        <div class="action">
-          <app-shutter-icon [position]="100" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
-        </div>
-      </div>
-
-    </div>
-
-  </div>
+  <app-shutter-tile [now]="now" [shutter]="shutter" *ngFor="let shutter of sorted(); trackBy: Shutter.trackBy"></app-shutter-tile>
 
 </div>
diff --git a/src/main/angular/src/app/shared/shutter-list/shutter-list.component.less b/src/main/angular/src/app/shared/shutter-list/shutter-list.component.less
index 4102efb..7adc753 100644
--- a/src/main/angular/src/app/shared/shutter-list/shutter-list.component.less
+++ b/src/main/angular/src/app/shared/shutter-list/shutter-list.component.less
@@ -1,38 +1 @@
 @import "../../../config";
-
-.shutterList {
-
-  .shutter {
-
-    .name {
-      float: left;
-    }
-
-    .icon {
-      clear: left;
-      float: left;
-      width: 4em;
-      aspect-ratio: 1;
-    }
-
-    .timestamp {
-      float: right;
-      font-size: 80%;
-    }
-
-    .actions {
-      clear: right;
-      float: right;
-
-      .action {
-        float: left;
-        margin-left: @space;
-        width: 3em;
-        aspect-ratio: 1;
-      }
-
-    }
-
-  }
-
-}
diff --git a/src/main/angular/src/app/shared/shutter-list/shutter-list.component.ts b/src/main/angular/src/app/shared/shutter-list/shutter-list.component.ts
index 29e0c40..32dbc3f 100644
--- a/src/main/angular/src/app/shared/shutter-list/shutter-list.component.ts
+++ b/src/main/angular/src/app/shared/shutter-list/shutter-list.component.ts
@@ -1,18 +1,15 @@
 import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {NgForOf} from '@angular/common';
 import {Shutter} from '../../api/Shutter/Shutter';
-import {ShutterService} from '../../api/Shutter/shutter.service';
-import {RelativePipe} from '../../api/common/relative.pipe';
 import {Subscription, timer} from 'rxjs';
-import {ShutterIconComponent} from './shutter-icon/shutter-icon.component';
+import {ShutterTileComponent} from '../shutter-tile/shutter-tile.component';
 
 @Component({
   selector: 'app-shutter-list',
   standalone: true,
   imports: [
     NgForOf,
-    RelativePipe,
-    ShutterIconComponent
+    ShutterTileComponent
   ],
   templateUrl: './shutter-list.component.html',
   styleUrl: './shutter-list.component.less'
@@ -28,12 +25,6 @@ export class ShutterListComponent implements OnInit, OnDestroy {
   @Input()
   list: Shutter[] = [];
 
-  constructor(
-    protected readonly shutterService: ShutterService,
-  ) {
-    //
-  }
-
   ngOnInit(): void {
     this.now = new Date();
     this.subs.push(timer(1000, 1000).subscribe(() => this.now = new Date()));
diff --git a/src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.html b/src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.html
new file mode 100644
index 0000000..ff1cb1a
--- /dev/null
+++ b/src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.html
@@ -0,0 +1,4 @@
+<div class="window" (click)="activate.emit(position)">
+  <div *ngIf="isSet(position)" class="shutter" [style.height]="position + '%'"></div>
+  <div *ngIf="isUnset(position)" class="unknown">?</div>
+</div>
diff --git a/src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.less b/src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.less
similarity index 55%
rename from src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.less
rename to src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.less
index c6e1116..2ad86bd 100644
--- a/src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.less
+++ b/src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.less
@@ -1,6 +1,7 @@
 @import "../../../../config";
 
 .window {
+  position: relative;
   width: 100%;
   height: 100%;
   background-color: lightskyblue;
@@ -11,4 +12,15 @@
     border-bottom: @border solid black;
   }
 
+  .unknown {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 1.25em;
+    color: red;
+    font-size: 260%;
+    text-align: center;
+  }
+
 }
diff --git a/src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.ts b/src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.ts
similarity index 64%
rename from src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.ts
rename to src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.ts
index dd19f77..d49f3cd 100644
--- a/src/main/angular/src/app/shared/shutter-list/shutter-icon/shutter-icon.component.ts
+++ b/src/main/angular/src/app/shared/shutter-tile/shutter-icon/shutter-icon.component.ts
@@ -1,14 +1,23 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgIf} from '@angular/common';
+
+import {isSet, isUnset} from '../../../api/common/validators';
 
 @Component({
   selector: 'app-shutter-icon',
   standalone: true,
-  imports: [],
+  imports: [
+    NgIf
+  ],
   templateUrl: './shutter-icon.component.html',
   styleUrl: './shutter-icon.component.less'
 })
 export class ShutterIconComponent {
 
+  protected readonly isUnset = isUnset;
+
+  protected readonly isSet = isSet;
+
   @Input()
   position?: number
 
diff --git a/src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.html b/src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.html
new file mode 100644
index 0000000..97bf089
--- /dev/null
+++ b/src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.html
@@ -0,0 +1,37 @@
+<div class="tile">
+
+  <div class="tileInner shutter" [class.unknown]="isUnset(shutter.positionProperty?.state?.value)">
+
+    <div class="name">
+      {{ shutter.nameWithArea }}
+    </div>
+
+    <div class="icon">
+      <app-shutter-icon [position]="shutter.positionProperty?.state?.value"></app-shutter-icon>
+    </div>
+
+    <div class="timestamp details">
+      {{ shutter.positionProperty?.lastValueChange | relative:now }}
+    </div>
+
+    <div class="actions">
+      <div class="action">
+        <app-shutter-icon [position]="0" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
+      </div>
+      <div class="action">
+        <app-shutter-icon [position]="50" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
+      </div>
+      <div class="action">
+        <app-shutter-icon [position]="80" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
+      </div>
+      <div class="action">
+        <app-shutter-icon [position]="90" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
+      </div>
+      <div class="action">
+        <app-shutter-icon [position]="100" (activate)="shutterService.setPosition(shutter, $event)"></app-shutter-icon>
+      </div>
+    </div>
+
+  </div>
+
+</div>
diff --git a/src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.less b/src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.less
new file mode 100644
index 0000000..f8626f6
--- /dev/null
+++ b/src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.less
@@ -0,0 +1,36 @@
+@import "../../../config";
+
+.shutter {
+  background-color: lightgray;
+  border: @border solid gray !important;
+
+  .name {
+    float: left;
+  }
+
+  .icon {
+    clear: left;
+    float: left;
+    width: 4em;
+    aspect-ratio: 1;
+  }
+
+  .timestamp {
+    float: right;
+    font-size: 80%;
+  }
+
+  .actions {
+    clear: right;
+    float: right;
+
+    .action {
+      float: left;
+      margin-left: @space;
+      width: 3em;
+      aspect-ratio: 1;
+    }
+
+  }
+
+}
diff --git a/src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.ts b/src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.ts
new file mode 100644
index 0000000..682220b
--- /dev/null
+++ b/src/main/angular/src/app/shared/shutter-tile/shutter-tile.component.ts
@@ -0,0 +1,34 @@
+import {Component, Input} from '@angular/core';
+import {RelativePipe} from "../../api/common/relative.pipe";
+import {Shutter} from "../../api/Shutter/Shutter";
+import {ShutterService} from '../../api/Shutter/shutter.service';
+import {ShutterIconComponent} from './shutter-icon/shutter-icon.component';
+import {isUnset} from '../../api/common/validators';
+
+@Component({
+  selector: 'app-shutter-tile',
+  standalone: true,
+  imports: [
+    RelativePipe,
+    ShutterIconComponent
+  ],
+  templateUrl: './shutter-tile.component.html',
+  styleUrl: './shutter-tile.component.less'
+})
+export class ShutterTileComponent {
+
+  protected readonly isUnset = isUnset;
+
+  @Input()
+  now!: Date;
+
+  @Input()
+  shutter!: Shutter;
+
+  constructor(
+    protected readonly shutterService: ShutterService,
+  ) {
+    //
+  }
+
+}
diff --git a/src/main/angular/src/app/shared/tunable-list/tunable-list.component.html b/src/main/angular/src/app/shared/tunable-list/tunable-list.component.html
index e4afa1c..31fb032 100644
--- a/src/main/angular/src/app/shared/tunable-list/tunable-list.component.html
+++ b/src/main/angular/src/app/shared/tunable-list/tunable-list.component.html
@@ -1,33 +1,5 @@
-<div class="tunableList tileContainer">
+<div class="tileContainer tunableList">
 
-  <div *ngFor="let tunable of sorted(); trackBy: Tunable.trackBy" class="tile">
-
-    <div [ngClass]="ngClass(tunable)" class="tunable tileInner">
-
-      <div class="name">
-        {{ tunable.nameWithArea }}
-      </div>
-
-      <div class="timestamp details">
-        {{ tunable.stateProperty?.lastValueChange | relative:now }}
-      </div>
-
-      <div class="sliders">
-        <div class="slider" *ngIf="tunable.brightnessPropertyId !== ''">
-          <input type="range" [ngModel]="tunable.brightnessProperty?.state?.value" (ngModelChange)="tunableService.setBrightness(tunable, $event)">
-        </div>
-        <div class="slider" *ngIf="tunable.coldnessPropertyId !== ''">
-          <input type="range" [ngModel]="tunable.coldnessProperty?.state?.value" (ngModelChange)="tunableService.setColdness(tunable, $event)">
-        </div>
-      </div>
-
-      <div class="actions">
-        <div class="switch switchOn" (click)="tunableService.setState(tunable, true)"></div>
-        <div class="switch switchOff" (click)="tunableService.setState(tunable, false)"></div>
-      </div>
-
-    </div>
-
-  </div>
+  <app-tunable-tile [now]="now" [tunable]="tunable" *ngFor="let tunable of sorted(); trackBy: Tunable.trackBy"></app-tunable-tile>
 
 </div>
diff --git a/src/main/angular/src/app/shared/tunable-list/tunable-list.component.less b/src/main/angular/src/app/shared/tunable-list/tunable-list.component.less
index d15b542..7adc753 100644
--- a/src/main/angular/src/app/shared/tunable-list/tunable-list.component.less
+++ b/src/main/angular/src/app/shared/tunable-list/tunable-list.component.less
@@ -1,63 +1 @@
 @import "../../../config";
-
-.tunableList {
-
-  .tunable {
-
-    .name {
-      float: left;
-    }
-
-    .timestamp {
-      float: right;
-      font-size: 80%;
-    }
-
-    .sliders {
-      float: left;
-      clear: left;
-      width: 60%;
-      overflow: visible;
-      padding-top: 0.4em;
-
-      .slider {
-        float: left;
-        clear: left;
-        margin-left: @space;
-        width: 100%;
-        overflow: visible;
-
-        input {
-          width: 100%;
-          height: 2em;
-        }
-
-      }
-
-    }
-
-    .actions {
-      float: right;
-
-      .switch {
-        float: left;
-        margin-left: @space;
-        width: 4em;
-        aspect-ratio: 1;
-      }
-
-      .switchOn {
-        //noinspection CssUnknownTarget
-        background-image: url("/switchOn.svg");
-      }
-
-      .switchOff {
-        //noinspection CssUnknownTarget
-        background-image: url("/switchOff.svg");
-      }
-
-    }
-
-  }
-
-}
diff --git a/src/main/angular/src/app/shared/tunable-list/tunable-list.component.ts b/src/main/angular/src/app/shared/tunable-list/tunable-list.component.ts
index ad2f504..b4bfe31 100644
--- a/src/main/angular/src/app/shared/tunable-list/tunable-list.component.ts
+++ b/src/main/angular/src/app/shared/tunable-list/tunable-list.component.ts
@@ -1,20 +1,17 @@
 import {Component, Input, OnDestroy, OnInit} from '@angular/core';
-import {NgClass, NgForOf, NgIf} from '@angular/common';
+import {NgForOf} from '@angular/common';
 import {Tunable} from '../../api/Tunable/Tunable';
-import {TunableService} from '../../api/Tunable/tunable.service';
-import {RelativePipe} from '../../api/common/relative.pipe';
 import {Subscription, timer} from 'rxjs';
 import {FormsModule} from '@angular/forms';
+import {TunableTileComponent} from '../tunable-tile/tunable-tile.component';
 
 @Component({
   selector: 'app-tunable-list',
   standalone: true,
   imports: [
     NgForOf,
-    NgClass,
-    RelativePipe,
     FormsModule,
-    NgIf
+    TunableTileComponent
   ],
   templateUrl: './tunable-list.component.html',
   styleUrl: './tunable-list.component.less'
@@ -30,12 +27,6 @@ export class TunableListComponent implements OnInit, OnDestroy {
 
   private readonly subs: Subscription[] = [];
 
-  constructor(
-    protected readonly tunableService: TunableService,
-  ) {
-    //
-  }
-
   ngOnInit(): void {
     this.now = new Date();
     this.subs.push(timer(1000, 1000).subscribe(() => this.now = new Date()));
@@ -45,13 +36,6 @@ export class TunableListComponent implements OnInit, OnDestroy {
     this.subs.forEach(sub => sub.unsubscribe());
   }
 
-  ngClass(tunable: Tunable) {
-    return {
-      "stateOn": tunable.stateProperty?.state?.value === true,
-      "stateOff": tunable.stateProperty?.state?.value === false,
-    };
-  }
-
   sorted(): Tunable[] {
     return this.list.sort(Tunable.compareByAreaThenName);
   }
diff --git a/src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.html b/src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.html
new file mode 100644
index 0000000..eb60efd
--- /dev/null
+++ b/src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.html
@@ -0,0 +1,29 @@
+<div class="tile">
+
+  <div class="tileInner tunable" [ngClass]="ngClass(tunable)">
+
+    <div class="name">
+      {{ tunable.nameWithArea }}
+    </div>
+
+    <div class="timestamp details">
+      {{ tunable.stateProperty?.lastValueChange | relative:now }}
+    </div>
+
+    <div class="sliders">
+      <div class="slider" *ngIf="tunable.brightnessPropertyId !== ''">
+        <input type="range" [ngModel]="tunable.brightnessProperty?.state?.value" (ngModelChange)="tunableService.setBrightness(tunable, $event)">
+      </div>
+      <div class="slider" *ngIf="tunable.coldnessPropertyId !== ''">
+        <input type="range" [ngModel]="tunable.coldnessProperty?.state?.value" (ngModelChange)="tunableService.setColdness(tunable, $event)">
+      </div>
+    </div>
+
+    <div class="actions">
+      <div class="switch switchOn" (click)="tunableService.setState(tunable, true)"></div>
+      <div class="switch switchOff" (click)="tunableService.setState(tunable, false)"></div>
+    </div>
+
+  </div>
+
+</div>
diff --git a/src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.less b/src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.less
new file mode 100644
index 0000000..8646ea1
--- /dev/null
+++ b/src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.less
@@ -0,0 +1,59 @@
+@import "../../../config";
+
+.tunable {
+
+  .name {
+    float: left;
+  }
+
+  .timestamp {
+    float: right;
+    font-size: 80%;
+  }
+
+  .sliders {
+    float: left;
+    clear: left;
+    width: 60%;
+    overflow: visible;
+    padding-top: 0.4em;
+
+    .slider {
+      float: left;
+      clear: left;
+      margin-left: @space;
+      width: 100%;
+      overflow: visible;
+
+      input {
+        width: 100%;
+        height: 2em;
+      }
+
+    }
+
+  }
+
+  .actions {
+    float: right;
+
+    .switch {
+      float: left;
+      margin-left: @space;
+      width: 4em;
+      aspect-ratio: 1;
+    }
+
+    .switchOn {
+      //noinspection CssUnknownTarget
+      background-image: url("/switchOn.svg");
+    }
+
+    .switchOff {
+      //noinspection CssUnknownTarget
+      background-image: url("/switchOff.svg");
+    }
+
+  }
+
+}
diff --git a/src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.ts b/src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.ts
new file mode 100644
index 0000000..4055d2f
--- /dev/null
+++ b/src/main/angular/src/app/shared/tunable-tile/tunable-tile.component.ts
@@ -0,0 +1,44 @@
+import {Component, Input} from '@angular/core';
+import {NgClass, NgIf} from "@angular/common";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {RelativePipe} from "../../api/common/relative.pipe";
+import {Tunable} from "../../api/Tunable/Tunable";
+import {TunableService} from '../../api/Tunable/tunable.service';
+
+@Component({
+  selector: 'app-tunable-tile',
+  standalone: true,
+  imports: [
+    NgIf,
+    ReactiveFormsModule,
+    RelativePipe,
+    NgClass,
+    FormsModule
+  ],
+  templateUrl: './tunable-tile.component.html',
+  styleUrl: './tunable-tile.component.less'
+})
+export class TunableTileComponent {
+
+  protected readonly Tunable = Tunable;
+
+  @Input()
+  now!: Date;
+
+  @Input()
+  tunable!: Tunable;
+
+  constructor(
+    protected readonly tunableService: TunableService,
+  ) {
+    //
+  }
+
+  ngClass(tunable: Tunable) {
+    return {
+      "stateOn": tunable.stateProperty?.state?.value === true,
+      "stateOff": tunable.stateProperty?.state?.value === false,
+    };
+  }
+
+}
diff --git a/src/main/angular/src/config.less b/src/main/angular/src/config.less
index c79c629..2f45fd3 100644
--- a/src/main/angular/src/config.less
+++ b/src/main/angular/src/config.less
@@ -55,6 +55,7 @@
     .tileInner {
       padding: @space;
       border: @border solid lightgray;
+      border-radius: calc(@space / 2);
     }
 
   }