KNXIllegalArgumentException when reading wrong DPT 2

+ Devices in Property::usages
+ code clean

application.properties

@@ -4,7 +4,8 @@ spring.datasource.url=jdbc:h2:./Homeautomation;AUTO_SERVER=TRUE
 spring.datasource.driverClassName=org.h2.Driver
 spring.datasource.username=sa
 spring.datasource.password=password
-spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
+#-
+spring.jackson.serialization.indent_output=true
 #-
 spring.jpa.hibernate.ddl-auto=create
 #-

pom.xml

@@ -9,14 +9,14 @@
   <version>1.0-SNAPSHOT</version>
 
   <properties>
-    <maven.compiler.source>17</maven.compiler.source>
+    <maven.compiler.source>21</maven.compiler.source>
-    <maven.compiler.target>17</maven.compiler.target>
+    <maven.compiler.target>21</maven.compiler.target>
   </properties>
 
   <parent>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-parent</artifactId>
-    <version>2.7.5</version>
+    <version>3.3.3</version>
   </parent>
 
   <dependencies>
@@ -41,6 +41,10 @@
       <groupId>com.h2database</groupId>
       <artifactId>h2</artifactId>
     </dependency>
+    <dependency>
+      <groupId>org.postgresql</groupId>
+      <artifactId>postgresql</artifactId>
+    </dependency>
     <dependency>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
@@ -54,7 +58,7 @@
     <dependency>
       <groupId>com.github.calimero</groupId>
       <artifactId>calimero-core</artifactId>
-      <version>2.5</version>
+      <version>2.5.1</version>
     </dependency>
     <dependency>
       <groupId>com.luckycatlabs</groupId>
@@ -62,6 +66,12 @@
       <version>1.2</version>
     </dependency>
 
+    <dependency>
+      <groupId>org.springframework.boot</groupId>
+      <artifactId>spring-boot-starter-test</artifactId>
+      <scope>test</scope>
+    </dependency>
+
   </dependencies>
   <build>
     <plugins>

src/main/angular/angular.json

@@ -125,5 +125,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/main/angular/src/app/api/Duration.ts

@@ -0,0 +1,82 @@
+export class Duration {
+
+  static readonly ZERO: Duration = new Duration('0');
+
+  readonly totalSeconds: number;
+
+  readonly days: number;
+
+  readonly hours: number;
+
+  readonly minutes: number;
+
+  readonly seconds: number;
+
+  readonly code: string;
+
+  readonly zero: boolean;
+
+  private constructor(input: string) {
+    this.totalSeconds = Duration.parse(input);
+    const sign = Math.sign(this.totalSeconds);
+    const abs = Math.abs(this.totalSeconds);
+    this.days = sign * Math.floor(abs / (24 * 60 * 60));
+    this.hours = sign * Math.floor(abs / (60 * 60)) % 24;
+    this.minutes = sign * Math.floor(abs / 60) % 60;
+    this.seconds = sign * Math.floor(abs) % 60;
+    this.zero = this.totalSeconds === 0;
+    this.code = this.buildCode();
+  }
+
+  static ofCode(code: string) {
+    return new Duration(code);
+  }
+
+  private static parse(input: string) {
+    const regex = /(?<signs>[+-]*)(?<value>\d+(?:[.,]\d+)?)(?<unit>d|h|m|s|ms)/g;
+    let totalSeconds = 0;
+    for (const match of input.matchAll(regex)) {
+      if (!match?.groups) {
+        continue;
+      }
+      const sign = ((match.groups["signs"].replace(/\++/g, '').length % 2) === 1) ? -1 : 1;
+      const value = sign * parseInt(match.groups["value"]);
+      switch (match.groups["unit"]) {
+        case 'd':
+          totalSeconds += value * 24 * 60 * 60;
+          break;
+        case 'h':
+          totalSeconds += value * 60 * 60;
+          break;
+        case 'm':
+          totalSeconds += value * 60;
+          break;
+        case 's':
+          totalSeconds += value;
+          break;
+      }
+    }
+    return totalSeconds;
+  }
+
+  private buildCode() {
+    if (this.zero) {
+      return '0';
+    }
+    let code = "";
+    if (this.days != 0) {
+      code += this.days + "d";
+    }
+    if (this.hours != 0) {
+      code += this.hours + "h";
+    }
+    if (this.minutes != 0) {
+      code += this.minutes + "m";
+    }
+    if (this.seconds != 0) {
+      code += this.seconds + "s";
+    }
+    return code;
+  }
+
+}

src/main/angular/src/app/api/Timestamp.ts

@@ -1,28 +1,9 @@
-import {prefix} from "../helpers";
-
 export class Timestamp {
 
-  public readonly WEEKDAY: string[] = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
-
-  public readonly dayName;
-
-  public readonly timeString;
-
   public constructor(
     readonly date: Date,
   ) {
-    const now = new Date();
+    // -
-    const minutes: string = prefix(this.date.getMinutes(), '0', 2);
-    if (date.getDate() === now.getDate()) {
-      this.dayName = "Heute";
-      this.timeString = date.getHours() + ":" + minutes;
-    } else if (date.getDate() === now.getDate() + 1) {
-      this.dayName = "Morgen";
-      this.timeString = date.getHours() + ":" + minutes;
-    } else {
-      this.dayName = this.WEEKDAY[date.getDay()];
-      this.timeString = date.getHours() + ":" + minutes;
-    }
   }
 
   public static fromDateOrNull(date: Date | null): Timestamp | null {

src/main/angular/src/app/api/astro/Astro.ts

@@ -0,0 +1,25 @@
+import {validateDateAllowNull, validateNumberNotNull, validateStringNullToEmpty} from "../validators";
+
+export class Astro {
+
+  constructor(
+    readonly zenith: number,
+    readonly sunrise: Date,
+    readonly sunset: Date,
+    readonly sunriseName: string,
+    readonly sunsetName: string,
+  ) {
+    // nothing
+  }
+
+  static fromJson(json: any): Astro {
+    return new Astro(
+      validateNumberNotNull(json['zenith']),
+      validateDateAllowNull(json['sunrise']),
+      validateDateAllowNull(json['sunset']),
+      validateStringNullToEmpty(json['sunriseName']),
+      validateStringNullToEmpty(json['sunsetName']),
+    );
+  }
+
+}

src/main/angular/src/app/api/bulk/BulkEntry.ts

@@ -25,4 +25,14 @@ export class BulkEntry {
     );
   }
 
+  static compareName(a: BulkEntry, b: BulkEntry) {
+    if (!a.property) {
+      return +1;
+    }
+    if (!b.property) {
+      return -1;
+    }
+    return a.property.title.localeCompare(b.property.title);
+  }
+
 }

src/main/angular/src/app/api/bulk/BulkService.ts

@@ -38,11 +38,11 @@ export class BulkService implements ISearchService {
     this.api.subscribe("BulkDto", Bulk.fromJson, next);
   }
 
-  getById(id: number, next: (results: Bulk) => void, error?: (error: any) => void): void {
+  getById(id: number, next: (results: Bulk) => void): void {
     this.api.getReturnItem("bulk/getById/" + id, Bulk.fromJson, next);
   }
 
-  searchById(id: number, next: (results: SearchResult) => void, error: (error: any) => void): void {
+  searchById(id: number, next: (results: SearchResult) => void): void {
     this.api.getReturnItem("bulk/searchById/" + id, SearchResult.fromJson, next);
   }
 
@@ -55,13 +55,21 @@ export class BulkService implements ISearchService {
   }
 
   create(next: (item: Bulk) => void): void {
-    this.api.postReturnItem("bulk/create/", new BulkCreate("Neu", true), Bulk.fromJson, next);
+    this.api.postReturnItem("bulk/create", new BulkCreate("Neu", true), Bulk.fromJson, next);
   }
 
   delete(bulk: Bulk, next: () => void): void {
     this.api.getReturnItem("bulk/delete/" + bulk.id, _ => _, next);
   }
 
+  run(bulk: Bulk, next?: () => void): void {
+    this.api.getReturnItem("bulk/run/" + bulk.id, _ => _, next);
+  }
+
+  duplicate(bulk: Bulk, next: (item: Bulk) => void): void {
+    this.api.getReturnItem("bulk/duplicate/" + bulk.id, _ => _, next);
+  }
+
   setEntry(entry: BulkEntry, key: string, value: any, next: (result: BulkEntry) => void = NO_OP): void {
     this.api.putReturnItem("BulkEntry/" + entry.id + "/set/" + key, value, next);
   }

src/main/angular/src/app/api/device/Device.ts

@@ -62,12 +62,48 @@ export abstract class Device {
     return a.position - b.position;
   }
 
+  public static compareTitle(a: Device, b: Device): number {
+    return a.title.localeCompare(b.title);
+  }
+
   abstract updateProperty(property: Property): void;
 
   static filterByAreaIdAndRoomId(areaId: number | null, roomId: number | null): (_: Device) => boolean {
     return d => d.areaId === areaId && d.roomId === roomId;
   }
 
+  getSwitchClassList(): object {
+    if (!(this instanceof DeviceSwitch)) {
+      throw Error();
+    }
+    const value: number | null | undefined = (this as DeviceSwitch).stateProperty?.readChannel?.value;
+    return {
+      deviceSwitchOnBack: value === 1,
+      deviceSwitchOffBack: value === 0,
+      disabledBack: value === null || value === undefined,
+    };
+  }
+
+  getStateSceneClassList(): object {
+    if (!(this instanceof DeviceStateScene)) {
+      throw Error();
+    }
+    return this.getSwitchClassList();
+  }
+
+  getShutterClassList(): object {
+    if (!(this instanceof DeviceShutter)) {
+      throw Error();
+    }
+    const value: number | null | undefined = (this as DeviceShutter).positionProperty?.readChannel?.value;
+    return {
+      deviceShutterOpenBack: value === 0,
+      deviceShutterIntermediateBack: value !== null && value !== undefined && value > 0 && value < 100,
+      deviceShutterClosedBack: value === 100,
+      disabledBack: value === null || value === undefined,
+    };
+  }
+
 }
 
 export class DeviceSwitch extends Device {

src/main/angular/src/app/api/device/device.service.ts

@@ -24,7 +24,7 @@ export class DeviceService {
     this.api.getList("device/findAll", Device.fromJson, compare, next);
   }
 
-  set(device: Device, key: string, value: any, next: (item: Device) => void): void {
+  set(device: Device, key: string, value: any, next?: (item: Device) => void): void {
     this.api.postReturnItem("device/set/" + device.id + "/" + key, value, Device.fromJson, next);
   }
 
@@ -69,7 +69,7 @@ export class DeviceService {
   }
 
   create(type: string, next: (item: Device) => void): void {
-    this.api.postReturnItem("device/create/", type, Device.fromJson, next);
+    this.api.postReturnItem("device/create", type, Device.fromJson, next);
   }
 
   delete(device: Device, next: () => void): void {

src/main/angular/src/app/api/property/Property.ts

@@ -1,20 +1,37 @@
-import {validateDateAllowNull, validateListOrEmpty, validateNumberAllowNull, validateNumberNotNull, validateStringNotEmptyNotNull} from "../validators";
+import {undefinedOrNull, validateListOrEmpty, validateNumberNotNull, validateStringEmptyToNull, validateStringNotEmptyNotNull} from "../validators";
 import {Channel} from "../channel/Channel";
 import {SearchResult} from "../SearchResult";
+import {environment} from "../../../environments/environment";
+
+export enum PropertyType {
+  BOOLEAN = 'BOOLEAN',
+  SHUTTER = 'SHUTTER',
+  BRIGHTNESS_PERCENT = 'BRIGHTNESS_PERCENT',
+  COLOR_TEMPERATURE = 'COLOR_TEMPERATURE',
+  LUX = 'LUX',
+}
 
 export class Property {
 
+  readonly hrefId: string | null;
+
+  readonly hrefSlug: string | null;
+
   constructor(
     public id: number,
-    public type: string,
+    public type: PropertyType,
     public title: string,
-    public value: number | null,
+    public slug: string | null,
-    public timestamp: Date | null,
     public readChannel: Channel | null,
     public writeChannel: Channel | null,
     public usages: SearchResult[],
   ) {
-    // nothing
+    if (writeChannel || true) {
+      this.hrefId = environment.restBase + '/property/write/id/' + id + '/'
+      if (slug) {
+        this.hrefSlug = environment.restBase + '/property/write/slug/' + slug + '/';
+      }
+    }
   }
 
   static fromJsonAllowNull(json: any): Property | null {
@@ -27,10 +44,9 @@ export class Property {
   static fromJson(json: any): Property {
     return new Property(
       validateNumberNotNull(json['id']),
-      validateStringNotEmptyNotNull(json['type']),
+      validateStringNotEmptyNotNull(json['type']) as PropertyType,
       validateStringNotEmptyNotNull(json['title']),
-      validateNumberAllowNull(json['value']),
+      validateStringEmptyToNull(json['slug']),
-      validateDateAllowNull(json['timestamp']),
       Channel.fromJsonAllowNull(json['readChannel']),
       Channel.fromJsonAllowNull(json['writeChannel']),
       validateListOrEmpty(json['usages'], SearchResult.fromJson),
@@ -55,4 +71,32 @@ export class Property {
     }
     return a.title.localeCompare(b.title);
   }
+
+  getStateClassList() {
+    const value = this.readChannel?.value;
+    switch (this.type) {
+      case PropertyType.BOOLEAN:
+        return {
+          propertyStateBooleanUnknown: undefinedOrNull(value),
+          propertyStateBooleanTrue: value > 0,
+          propertyStateBooleanFalse: value === 0,
+        };
+      case PropertyType.SHUTTER:
+        return {
+          propertyStatePercentUnknown: undefinedOrNull(value),
+          propertyStatePercentActive: value === 0,
+          propertyStatePercentBetween: value > 0 && value < 100,
+          propertyStatePercentInactive: value === 100,
+        };
+      case PropertyType.BRIGHTNESS_PERCENT:
+        return {
+          propertyStatePercentUnknown: undefinedOrNull(value),
+          propertyStatePercentActive: value === 100,
+          propertyStatePercentBetween: value > 0 && value < 100,
+          propertyStatePercentInactive: value === 0,
+        };
+    }
+    return {};
+  }
+
 }

src/main/angular/src/app/api/property/property.service.ts

@@ -38,7 +38,7 @@ export class PropertyService implements ISearchService {
   }
 
   create(next: (item: Property) => void): void {
-    this.api.getReturnItem("property/create/", Property.fromJson, next);
+    this.api.getReturnItem("property/create", Property.fromJson, next);
   }
 
   delete(property: Property, next: Next<void>): void {

src/main/angular/src/app/api/schedule/Schedule.ts

@@ -5,13 +5,16 @@ export class Schedule {
 
   readonly next?: ScheduleEntry;
 
+  readonly last?: ScheduleEntry;
+
   constructor(
     readonly id: number,
     readonly enabled: boolean,
     readonly title: string,
     readonly entries: ScheduleEntry[],
   ) {
-    this.next = entries.filter(e => e.nextFuzzyTimestamp)[0];
+    this.next = entries.filter(e => e.nextFuzzyTimestamp).sort((a, b) => a.nextFuzzyTimestamp.date.getTime() - b.nextFuzzyTimestamp.date.getTime())[0];
+    this.last = entries.filter(e => e.lastFuzzyTimestamp).sort((a, b) => b.lastFuzzyTimestamp.date.getTime() - a.lastFuzzyTimestamp.date.getTime())[0];
   }
 
   static fromJson(json: any): Schedule {

src/main/angular/src/app/api/schedule/entry/ScheduleEntry.ts

@@ -1,14 +1,19 @@
-import {validateBooleanNotNull, validateDateAllowNull, validateNumberNotNull, validateStringNotEmptyNotNull} from "../../validators";
+import {validateBooleanNotNull, validateDateAllowNull, validateNumberAllowNull, validateNumberNotNull, validateStringNotEmptyNotNull} from "../../validators";
 import {Timestamp} from "../../Timestamp";
 import {Property} from "../../property/Property";
 import {Bulk} from "../../bulk/Bulk";
-
+import {formatNumber} from "@angular/common";
-function getDaySeconds(date: Date): number {
-  return date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
-}
 
 export class ScheduleEntry {
 
+  readonly todo: string;
+
+  readonly dayMinute: number;
+
+  readonly anyWeekday: boolean;
+
+  readonly executable: boolean;
+
   private constructor(
     readonly id: number,
     readonly position: number,
@@ -26,14 +31,33 @@ export class ScheduleEntry {
     readonly minute: number,
     readonly second: number,
     readonly fuzzySeconds: number,
+    readonly skip: number,
     readonly lastClearTimestamp: Timestamp | null,
     readonly nextClearTimestamp: Timestamp | null,
     readonly nextFuzzyTimestamp: Timestamp | null,
+    readonly lastFuzzyTimestamp: Timestamp | null,
     readonly property: Property | null,
     readonly value: number,
     readonly bulk: Bulk | null,
   ) {
-    // nothing
+    this.dayMinute = hour * 60 + minute;
+    this.anyWeekday = this.monday || this.tuesday || this.wednesday || this.thursday || this.friday || this.saturday || this.sunday;
+    this.executable = this.enabled && this.anyWeekday && !!this.bulk;
+    this.todo = this.getToDo();
+  }
+
+  getToDo(): string {
+    let result: string[] = [];
+    if (!this.enabled) {
+      result.push("inaktiv");
+    }
+    if (!this.bulk) {
+      result.push("keine Aktion");
+    }
+    if (!this.anyWeekday) {
+      result.push("kein Wochentag");
+    }
+    return result.join(", ");
   }
 
   static fromJson(json: any): ScheduleEntry {
@@ -54,9 +78,11 @@ export class ScheduleEntry {
       validateNumberNotNull(json['minute']),
       validateNumberNotNull(json['second']),
       validateNumberNotNull(json['fuzzySeconds']),
+      validateNumberAllowNull(json['skip']) || 0,
       Timestamp.fromDateOrNull(validateDateAllowNull(json['lastClearTimestamp'])),
       Timestamp.fromDateOrNull(validateDateAllowNull(json['nextClearTimestamp'])),
       Timestamp.fromDateOrNull(validateDateAllowNull(json['nextFuzzyTimestamp'])),
+      Timestamp.fromDateOrNull(validateDateAllowNull(json['lastFuzzyTimestamp'])),
       Property.fromJsonAllowNull(json['property']),
       validateNumberNotNull(json['value']),
       Bulk.fromJsonOrNull(json['bulk']),
@@ -71,4 +97,8 @@ export class ScheduleEntry {
     return a.position - b.position;
   }
 
+  get time(): string {
+    return formatNumber(this.hour, 'de-DE', '2.0-0') + ':' + formatNumber(this.minute, 'de-DE', '2.0-0');
+  }
+
 }

src/main/angular/src/app/api/schedule/entry/Zenith.ts

@@ -0,0 +1,12 @@
+export class Zenith {
+
+  constructor(
+    readonly title: string,
+    readonly value: number,
+    readonly sunrise: boolean,
+    readonly sunset: boolean,
+  ) {
+    // -
+  }
+
+}

src/main/angular/src/app/api/schedule/schedule.service.ts

@@ -28,7 +28,7 @@ export class ScheduleService {
   }
 
   create(next: Next<Schedule> = NO_OP): void {
-    this.api.getReturnItem("schedule/create/", Schedule.fromJson, next);
+    this.api.getReturnItem("schedule/create", Schedule.fromJson, next);
   }
 
   set(schedule: Schedule, key: string, value: any, next: Next<Schedule> = NO_OP): void {

src/main/angular/src/app/api/time.service.ts

@@ -0,0 +1,65 @@
+import {Inject, Injectable, LOCALE_ID} from '@angular/core';
+import {DatePipe} from "@angular/common";
+import {Timestamp} from "./Timestamp";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TimeService {
+
+  readonly datePipe: DatePipe = new DatePipe(this.locale);
+
+  private _now: Date = new Date();
+
+  constructor(
+    @Inject(LOCALE_ID) readonly locale: string,
+  ) {
+    // -
+  }
+
+  get now(): Date {
+    return this._now;
+  }
+
+  relativeDate(timestamp: Timestamp | undefined) {
+    const date: Date = timestamp?.date;
+    if (date === undefined || date === null) {
+      return "";
+    }
+    const relativeName = this.relativeCalendarDaysName(date);
+    return relativeName + " " + this.datePipe.transform(date, 'HH:mm');
+  }
+
+  relativeCalendarDaysName(date: Date): string {
+    const prefix = this.relativeCalendarDaysPrefix(date);
+    const weekday = date.toLocaleDateString(this.locale, {weekday: 'long'});
+    return prefix + ", " + weekday;
+  }
+
+  private relativeCalendarDaysPrefix(date: Date): string {
+    const days = this.calendarDays(date);
+    if (days < -2) {
+      return "Vor " + -days + " Tagen";
+    } else if (days === -2) {
+      return "Vorgestern";
+    } else if (days === -1) {
+      return "Gestern";
+    } else if (days === 1) {
+      return "Morgen";
+    } else if (days === 2) {
+      return "Übermorgen";
+    } else if (days > 2) {
+      return "In " + days + " Tagen";
+    }
+    return "Heute";
+  }
+
+  private calendarDays(date: Date) {
+    const DAY_MS = 1000 * 60 * 60 * 24;
+    const aMidnight = new Date(this._now.getFullYear(), this._now.getMonth(), this._now.getDate());
+    const bMidnight = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const milliseconds = bMidnight.getTime() - aMidnight.getTime();
+    return Math.floor(milliseconds / DAY_MS);
+  }
+
+}

src/main/angular/src/app/api/validators.ts

@@ -87,3 +87,7 @@ export function validateMap<T>(json: any, valueFromJson: (json: any) => T): Map<
   }
   return map;
 }
+
+export function undefinedOrNull(value: any) {
+  return value === undefined || value === null;
+}

src/main/angular/src/app/app-routing.module.ts

@@ -25,7 +25,7 @@ const routes: Routes = [
   {path: 'Bulk', component: BulkEditorComponent},
   {path: 'BulkList', component: BulkListComponent},
 
-  {path: '**', redirectTo: '/ScheduleList'},
+  {path: '**', redirectTo: '/DeviceList;type=DeviceSwitch'},
 ];
 
 @NgModule({

src/main/angular/src/app/app.component.html

@@ -1,22 +1,27 @@
 <div class="menubar">
 
+  <div class="item" [routerLink]="['/DeviceList', {'type': 'DeviceSwitch'}]" [class.itemActive]="isRouteActive('/DeviceList', 'DeviceSwitch')">
+    Geräte
+  </div>
+
+  <div class="item" [routerLink]="['/DeviceList', {'type': 'DeviceShutter'}]" [class.itemActive]="isRouteActive('/DeviceList', 'DeviceShutter')">
+    Rollläden
+  </div>
+
+  <div class="item" routerLink="/BulkList" routerLinkActive="itemActive">
+    Stapel
+  </div>
+
   <div class="item" routerLink="/ScheduleList" routerLinkActive="itemActive">
     Zeitpläne
   </div>
-  <div class="item" routerLink="/DeviceList" routerLinkActive="itemActive">
-    Geräte
-  </div>
-
-  <div class="item" routerLink="/BulkList" routerLinkActive="itemActive">
-    Massenausführungen
-  </div>
 
   <div class="item itemSecondary" routerLink="/PropertyList" routerLinkActive="itemActive">
-    Eigenschaften
+    P
   </div>
 
   <div class="item itemSecondary" routerLink="/ChannelList" routerLinkActive="itemActive">
-    Kanäle
+    C
   </div>
 
 </div>

src/main/angular/src/app/app.component.less

@@ -1,15 +1,17 @@
+@import "../config";
+
 .menubar {
-  border-bottom: 1px solid black;
+  border-bottom: @border solid black;
 
   .item {
     float: left;
-    padding: 10px;
+    padding: @padding;
-    border-right: 1px solid black;
+    border-right: @border solid black;
   }
 
   .itemSecondary {
     float: right;
-    border-left: 1px solid black;
+    border-left: @border solid black;
     border-right: none;
   }
 

src/main/angular/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {Params, Router, UrlSegment} from "@angular/router";
 
 @Component({
   selector: 'app-root',
@@ -8,10 +9,27 @@ import {Component} from '@angular/core';
 export class AppComponent {
   title = 'angular';
 
+  private url: UrlSegment[];
+
+  private params: Params;
+
   constructor(
-    // nothing
+    readonly router: Router,
   ) {
     // nothing
   }
 
+  isRouteActive(base: string, type: string): boolean {
+    const parts = this.router.url.split(';');
+    if (parts[0] === base) {
+      for (let i = 1; i < parts.length; i++) {
+        const param = parts[i].split('=');
+        if (param[0] === 'type' && param[1] === type) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
 }

src/main/angular/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import {NgModule} from '@angular/core';
+import {LOCALE_ID, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 
 import {AppRoutingModule} from './app-routing.module';
@@ -17,6 +17,16 @@ import {PropertyListComponent} from './pages/property/list/property-list.compone
 import {ChannelListComponent} from './pages/channel/list/channel-list.component';
 import {BulkListComponent} from './pages/bulk/list/bulk-list.component';
 import {BulkEditorComponent} from './pages/bulk/editor/bulk-editor.component';
+import {LeftPadDirective} from './pipes/left-pad.directive';
+import {EntryValueComponent} from './shared/entry-value/entry-value.component';
+
+import {registerLocaleData} from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+import localeDeExtra from '@angular/common/locales/extra/de';
+import {BoolComponent} from './shared/bool/bool.component';
+import {DurationComponent} from './shared/duration/duration.component';
+
+registerLocaleData(localeDe, 'de-DE', localeDeExtra);
 
 @NgModule({
   declarations: [
@@ -33,6 +43,10 @@ import {BulkEditorComponent} from './pages/bulk/editor/bulk-editor.component';
     DeviceListComponent,
     BulkListComponent,
     BulkEditorComponent,
+    LeftPadDirective,
+    EntryValueComponent,
+    BoolComponent,
+    DurationComponent,
   ],
   imports: [
     BrowserModule,
@@ -41,7 +55,9 @@ import {BulkEditorComponent} from './pages/bulk/editor/bulk-editor.component';
     FormsModule,
     FontAwesomeModule,
   ],
-  providers: [],
+  providers: [
+    {provide: LOCALE_ID, useValue: 'de-DE'}
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.html

@@ -1,7 +1,9 @@
 <ng-container *ngIf="bulk">
+
   <h1>
     <app-text [initial]="bulk.name" (valueChange)="set(bulk, 'name', $event)"></app-text>
   </h1>
+
   <table>
     <tr>
       <th>Eigenschaft</th>
@@ -9,7 +11,7 @@
       <th>&nbsp;</th>
     </tr>
     <ng-container *ngIf="bulk">
-      <tr *ngFor="let entry of bulk.entries">
+      <tr *ngFor="let entry of bulk.entries.sort(BulkEntry.compareName)">
         <td>
           <app-search [searchService]="propertyService" [allowEmpty]="false" [initial]="entry.property?.id" (valueChange)="setEntry(entry, 'property', $event)"></app-search>
         </td>
@@ -20,12 +22,7 @@
           </td>
           <td *ngSwitchCase="'SHUTTER'" [class.true]="entry.value === 0" [class.false]="entry.value === 100" [class.tristate]="0 < entry.value && entry.value < 100">
             <select [ngModel]="entry.value" (ngModelChange)="setEntry(entry, 'value', $event)">
-              <option [ngValue]="0">100% Offen</option>
+              <option *ngFor="let _ of [].constructor(21); let value = index" [ngValue]="value * 5">{{value * 5}}%</option>
-              <option [ngValue]="35">&nbsp;50%</option>
-              <option [ngValue]="55">&nbsp;75%</option>
-              <option [ngValue]="75">&nbsp;90% Sonnenschutz</option>
-              <option [ngValue]="85">100% Schlitze</option>
-              <option [ngValue]="100">100% Geschlossen</option>
             </select>
           </td>
           <td *ngSwitchCase="'BRIGHTNESS_PERCENT'" [class.true]="entry.value" [class.false]="!entry.value" [class.tristate]="0 < entry.value && entry.value < 100">
@@ -56,7 +53,6 @@
     </ng-container>
   </table>
 
-  <p>
   <button (click)="create()">+ Hinzufügen</button>
-  </p>
+
 </ng-container>

src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.less

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.ts

@@ -13,6 +13,8 @@ import {faTimesCircle} from "@fortawesome/free-regular-svg-icons";
 })
 export class BulkEditorComponent implements OnInit {
 
+  protected readonly BulkEntry = BulkEntry;
+
   readonly faTimes = faTimesCircle;
 
   bulk!: Bulk;

src/main/angular/src/app/pages/bulk/list/bulk-list.component.html

@@ -1,27 +1,32 @@
-<table>
+<div class="tiles">
-  <tr>
+  <div class="tile" *ngFor="let bulk of bulks.sort(Bulk.compareName); trackBy: Bulk.trackBy">
-    <th>&nbsp;</th>
+    <div class="tileHead disabledBack" [class.enabledBack]="bulk.enabled">
-    <th>Bezeichnung</th>
-    <th>&nbsp;</th>
-  </tr>
-  <tr *ngFor="let bulk of bulks; trackBy: Bulk.trackBy">
 
-    <td class="boolean" (click)="set(bulk, 'enabled', !bulk.enabled)" [class.true]="bulk.enabled" [class.false]="!bulk.enabled">
+      <div (click)="set(bulk, 'enabled', !bulk.enabled)">
         <fa-icon *ngIf="bulk.enabled" [icon]="faCheckCircle"></fa-icon>
         <fa-icon *ngIf="!bulk.enabled" [icon]="faCircle"></fa-icon>
-    </td>
+      </div>
 
-    <td [routerLink]="['/Bulk', {id: bulk.id}]">
+      <div class="flexGrow" [routerLink]="['/Bulk', {id: bulk.id}]">
         {{ bulk.name }}
-    </td>
+      </div>
 
-    <td class="delete" (click)="delete(bulk)">
+      <div class="tileHeadRight" (click)="run(bulk)">
+        <fa-icon title="Ausführen" [icon]="faPlay"></fa-icon>
+      </div>
+
+      <div class="tileHeadRight" (click)="duplicate(bulk)">
+        <fa-icon title="Duplizieren" [icon]="faCopy"></fa-icon>
+      </div>
+
+      <div class="tileHeadDelete" (click)="delete(bulk)">
         <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
-    </td>
+      </div>
 
-  </tr>
+    </div>
-</table>
+  </div>
+</div>
 
-<p>
+<div class="config">
   <button (click)="create()">+ Hinzufügen</button>
-</p>
+</div>

src/main/angular/src/app/pages/bulk/list/bulk-list.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {BulkService} from "../../../api/bulk/BulkService";
 import {Bulk} from "../../../api/bulk/Bulk";
-import {faCheckCircle, faCircle, faTimesCircle} from "@fortawesome/free-regular-svg-icons";
+import {faCheckCircle, faCircle, faCopy, faPlayCircle, faTimesCircle} from "@fortawesome/free-regular-svg-icons";
 
 @Component({
   selector: 'app-bulk-list',
@@ -16,6 +16,8 @@ export class BulkListComponent implements OnInit {
 
   readonly faTimes = faTimesCircle;
 
+  readonly faPlay = faPlayCircle;
+
   readonly Bulk = Bulk;
 
   bulks: Bulk[] = [];
@@ -52,10 +54,21 @@ export class BulkListComponent implements OnInit {
     this.bulkService.create(bulk => this.addOrReplace(bulk));
   }
 
+  run(bulk: Bulk): void {
+    if (confirm("Zeitplan \"" + bulk.name + "\" wirklich ausführen?")) {
+      this.bulkService.run(bulk);
+    }
+  }
+
+  duplicate(bulk: Bulk): void {
+    this.bulkService.duplicate(bulk, bulk => this.addOrReplace(bulk));
+  }
+
   delete(bulk: Bulk): void {
     if (confirm("Zeitplan \"" + bulk.name + "\" wirklich löschen?")) {
       this.bulkService.delete(bulk, () => this.remove(bulk));
     }
   }
 
+  protected readonly faCopy = faCopy;
 }

src/main/angular/src/app/pages/channel/list/channel-list.component.html

@@ -1,24 +1,24 @@
-<table>
+<div class="tiles">
-  <tr>
+  <div class="tile" *ngFor="let channel of channels">
-    <th>Titel</th>
+    <div>
-    <th>Typ</th>
+      {{ channel.title }}
-    <th colspan="3">Adresse</th>
+    </div>
-    <th>DPT</th>
+    <div class="left">
-    <th colspan="2">Wert</th>
+      {{ channel.type }}
-  </tr>
+    </div>
-  <tr *ngFor="let channel of channels">
-    <td>{{channel.title}}</td>
-    <td>{{channel.type}}</td>
     <ng-container *ngIf="channel.type === 'KnxGroup'">
-      <td class="first number">{{asKnxGroup(channel).addresMain}}&nbsp;/&nbsp;</td>
+      <div class="left">
-      <td class="middle number">{{asKnxGroup(channel).addresMid}}&nbsp;/&nbsp;</td>
+        {{ asKnxGroup(channel).addresMain }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresMid }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresSub }}
-      <td class="last number">{{asKnxGroup(channel).addresSub}}</td>
+      </div>
-      <td class="number">{{asKnxGroup(channel).dpt}}</td>
+      <div class="right">
+        DPT {{ asKnxGroup(channel).dpt }}
+      </div>
     </ng-container>
-    <ng-container *ngIf="channel.type === 'Logic'">
+    <div class="timestamp">
-      <td colspan="4">{{asLogic(channel).operator}}</td>
+      {{ channel.timestamp | date:'yyyy-MM-dd HH:mm:ss' || '-' }}
-    </ng-container>
+    </div>
-    <td class="number">{{channel.value}}</td>
+    <div class="value">
-    <td>{{channel.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+      {{ channel.value || '-' }}
-  </tr>
+    </div>
-</table>
+  </div>
+</div>

src/main/angular/src/app/pages/channel/list/channel-list.component.less

@@ -1,3 +1,23 @@
-table {
+@import "../../../../config";
-  width: 100%;
+
+div {
+  padding: @padding;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+.timestamp {
+  clear: left;
+  float: left;
+}
+
+.value {
+  clear: right;
+  float: right;
 }

src/main/angular/src/app/pages/device/editor/device-editor.component.less

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

src/main/angular/src/app/pages/device/editor/device-editor.component.ts

@@ -53,7 +53,7 @@ export class DeviceEditorComponent implements OnInit {
 
   delete(): void {
     if (confirm(this.getDeviceTypeTitle() + " \"" + this.device.title + "\" wirklich löschen?")) {
-      this.deviceService.delete(this.device, () => this.router.navigate(["/DeviceList"]));
+      this.deviceService.delete(this.device, () => this.router.navigate(["/DeviceList", {type: this.device.type}]));
     }
   }
 

src/main/angular/src/app/pages/device/list/device-list.component.html

@@ -1,66 +1,85 @@
+<div class="tiles">
+
+  <ng-container *ngFor="let device of devices; trackBy: Device.trackBy">
+
+    <div class="tile" *ngIf="device.type == 'DeviceSwitch'" [ngClass]="device.getSwitchClassList()">
+      <div class="tileHead">
+        <div class="flexGrow">
+          <app-text [initial]="device.title" (valueChange)="set(device, 'title', $event)"></app-text>
+        </div>
+        <div class="tileHeadRight" [routerLink]="['/Device', {id: device.id}]">
+          <fa-icon [icon]="faEdit"></fa-icon>
+        </div>
+      </div>
+      <div class="tileBody">
+        <img alt="An" class="control" src="assets/switch-on.svg" (click)="deviceService.setSwitchState(device, true)"/>
+        <img alt="Aus" class="control" src="assets/switch-off.svg" (click)="deviceService.setSwitchState(device, false)"/>
+      </div>
+    </div>
+
+    <div class="tile" *ngIf="device.type === 'DeviceStateScene'" [ngClass]="device.getStateSceneClassList()">
+      <div class="tileHead">
+        <div class="flexGrow">
+          <app-text [initial]="device.title" (valueChange)="set(device, 'title', $event)"></app-text>
+        </div>
+        <div class="tileHeadRight" [routerLink]="['/Device', {id: device.id}]">
+          <fa-icon [icon]="faEdit"></fa-icon>
+        </div>
+      </div>
+      <div class="tileBody">
+        <div class="control" *ngFor="let scene of getStateScenes(device)" (click)="deviceService.setStateScene(device, scene.number)">
+          {{ scene.title }}
+        </div>
+      </div>
+    </div>
+
+    <div class="tile" *ngIf="device.type === 'DeviceShutter'" [ngClass]="device.getShutterClassList()">
+      <div class="tileHead">
+        <div class="flexGrow">
+          <app-text [initial]="device.title" (valueChange)="set(device, 'title', $event)"></app-text>
+        </div>
+        <div class="tileHeadRight" [routerLink]="['/Device', {id: device.id}]">
+          <fa-icon [icon]="faEdit"></fa-icon>
+        </div>
+      </div>
+      <div class="tileBody">
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 0)">
+          Auf
+        </div>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 20)">
+          20%
+        </div>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 30)">
+          30%
+        </div>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 40)">
+          40%
+        </div>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 50)">
+          50%
+        </div>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 60)">
+          60%
+        </div>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 70)">
+          70%
+        </div>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 80)">
+          80%
+        </div>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 90)">
+          90%
+        </div>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 100)">
+          Zu
+        </div>
+      </div>
+    </div>
+
+  </ng-container>
+
+</div>
+
 <div class="config">
-  <select [(ngModel)]="createType">
-    <option ngValue="DeviceSwitch">Schalter</option>
-    <option ngValue="DeviceShutter">Rollladen</option>
-  </select>
   <button (click)="create()">+ Hinzufügen</button>
 </div>
-
-<ng-container *ngFor="let device of devices.sort(Device.comparePosition); trackBy: Device.trackBy">
-  <ng-container [ngSwitch]="device.type">
-
-    <div class="device" *ngSwitchCase="'DeviceSwitch'" [ngClass]="getSwitchClassList(device)">
-      <div class="title">
-        {{device.title}}
-      </div>
-      <div class="edit" [routerLink]="['/Device', {id: device.id}]">
-        <fa-icon [icon]="faEdit"></fa-icon>
-      </div>
-      <div class="controls">
-        <img alt="An" class="control" src="../../../../assets/switch-on.svg" (click)="deviceService.setSwitchState(device, true)"/>
-        <img alt="Aus" class="control" src="../../../../assets/switch-off.svg" (click)="deviceService.setSwitchState(device, false)"/>
-      </div>
-    </div>
-
-    <div class="device" *ngSwitchCase="'DeviceStateScene'" [ngClass]="getStateSceneClassList(device)">
-      <div class="title">
-        {{device.title}}
-      </div>
-      <div class="edit" [routerLink]="['/Device', {id: device.id}]">
-        <fa-icon [icon]="faEdit"></fa-icon>
-      </div>
-      <div class="controls">
-        <div *ngFor="let scene of getStateScenes(device)" class="control button" (click)="deviceService.setStateScene(device, scene.number)">
-          <span class="center">{{scene.title}}</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="device" *ngSwitchCase="'DeviceShutter'" [ngClass]="getShutterClassList(device)">
-      <div class="title">
-        {{device.title}}
-      </div>
-      <div class="edit" [routerLink]="['/Device', {id: device.id}]">
-        <fa-icon [icon]="faEdit"></fa-icon>
-      </div>
-      <div class="controls">
-        <div class="control button" (click)="deviceService.setShutterPosition(device, 0)">
-          <span class="center">Auf</span>
-        </div>
-        <div class="control button" (click)="deviceService.setShutterPosition(device, 40)">
-          <span class="center">50%</span>
-        </div>
-        <div class="control button" (click)="deviceService.setShutterPosition(device, 75)">
-          <span class="center">90%</span>
-        </div>
-        <div class="control button" (click)="deviceService.setShutterPosition(device, 85)">
-          <span class="center">Schlitze</span>
-        </div>
-        <div class="control button" (click)="deviceService.setShutterPosition(device, 100)">
-          <span class="center">Zu</span>
-        </div>
-      </div>
-    </div>
-
-  </ng-container>
-</ng-container>

src/main/angular/src/app/pages/device/list/device-list.component.less

@@ -1,71 +1,17 @@
-.device {
+@import "../../../../config";
-  padding: 5px;
-  margin-bottom: 5px;
-  border-radius: 10px;
-
-  @media (min-width: 1000px) {
-    float: left;
-    width: 400px;
-    margin-right: 5px;
-  }
-
-  .title {
-    float: left;
-    font-weight: bold;
-  }
-
-  .edit {
-    float: right;
-  }
-
-  .controls {
-    clear: both;
 
 .control {
-      position: relative;
   float: left;
-      width: 60px;
+  width: 4em;
-      height: 60px;
+  aspect-ratio: 1;
-      padding: 5px;
+  margin: @margin;
-      margin: 5px;
   border-radius: 25%;
 }
 
-    .button {
+.controlShutter {
-      background-color: lightblue;
+  width: 17.3%;
-    }
+  padding-top: 1.1em;
-
+  text-align: center;
-    .control:hover {
+  margin: calc(@margin / 2);
-      background-color: lightskyblue;
+  background-color: lightsteelblue;
-    }
-
-  }
-}
-
-.switchOn {
-  background-color: palegreen;
-}
-
-.switchOff {
-  background-color: indianred;
-}
-
-.switchUnknown {
-  background-color: gray;
-}
-
-.shutterOpen {
-  background-color: palegreen;
-}
-
-.shutterBetween {
-  background-color: yellow;
-}
-
-.shutterClosed {
-  background-color: indianred;
-}
-
-.shutterUnknown {
-  background-color: gray;
 }

src/main/angular/src/app/pages/device/list/device-list.component.ts

@@ -1,10 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 import {DeviceService} from "../../../api/device/device.service";
 import {PropertyService} from "../../../api/property/property.service";
-import {Device, DeviceShutter, DeviceStateScene, DeviceSwitch} from "../../../api/device/Device";
+import {Device, DeviceStateScene} from "../../../api/device/Device";
 import {faEdit} from '@fortawesome/free-regular-svg-icons';
 import {Scene} from "../../../api/scene/Scene";
 import {SceneService} from "../../../api/scene/scene.service";
+import {ActivatedRoute} from "@angular/router";
 
 @Component({
   selector: 'app-device-list',
@@ -19,30 +20,34 @@ export class DeviceListComponent implements OnInit {
 
   devices: Device[] = [];
 
-  scenes: Scene[] = [];
+  typeFilter: string;
 
-  createType: string = "DeviceSwitch";
+  scenes: Scene[] = [];
 
   constructor(
     readonly deviceService: DeviceService,
     readonly sceneService: SceneService,
     readonly propertyService: PropertyService,
+    readonly activatedRoute: ActivatedRoute,
   ) {
     // nothing
   }
 
   ngOnInit(): void {
+    this.activatedRoute.params.subscribe(params => {
+      this.typeFilter = params['type'];
       this.propertyService.subscribe(update => this.devices.forEach(d => d.updateProperty(update.payload)));
 
       this.deviceService.subscribe(update => this.updateDevice(update.payload, update.existing));
-    this.deviceService.findAll(devices => this.devices = devices);
+      this.deviceService.findAll(devices => this.devices = devices.filter(d => !this.typeFilter || this.typeFilter == d.type).sort(Device.compareTitle));
 
       this.sceneService.subscribe(update => this.updateScene(update.payload, update.existing));
       this.sceneService.findAll(scenes => this.scenes = scenes);
+    });
   }
 
   create(): void {
-    this.deviceService.create(this.createType, device => this.updateDevice(device, true));
+    this.deviceService.create(this.typeFilter, device => this.updateDevice(device, true));
   }
 
   private updateDevice(device: Device, existing: boolean): void {
@@ -73,32 +78,13 @@ export class DeviceListComponent implements OnInit {
     }
   }
 
-  getSwitchClassList(device: Device): object {
+  getStateScenes(device: Device): Scene[] {
-    const value: number | null | undefined = (device as DeviceSwitch).stateProperty?.value;
+    const casted: DeviceStateScene = device as DeviceStateScene;
-    return {
+    return casted.sceneNumbers.map(sceneNumber => this.scenes.find(scene => scene.number === sceneNumber)).filter(scene => scene !== undefined).map(s => s as Scene);
-      switchOn: value === 1,
-      switchOff: value === 0,
-      switchUnknown: value === null || value === undefined,
-    };
   }
 
-  getStateSceneClassList(device: Device): object {
+  set(device: Device, key: string, value: any): void {
-    return this.getSwitchClassList(device);
+    this.deviceService.set(device, key, value);
-  }
-
-  getShutterClassList(device: Device): object {
-    const value: number | null | undefined = (device as DeviceShutter).positionProperty?.value;
-    return {
-      shutterOpen: value === 0,
-      shutterBetween: value !== null && value !== undefined && value > 0 && value < 100,
-      shutterClosed: value === 100,
-      shutterUnknown: value === null || value === undefined,
-    };
-  }
-
-  getStateScenes(d: Device): Scene[] {
-    const device: DeviceStateScene = d as DeviceStateScene;
-    return device.sceneNumbers.map(sceneNumber => this.scenes.find(scene => scene.number === sceneNumber)).filter(scene => scene !== undefined).map(s => s as Scene);
   }
 
 }

src/main/angular/src/app/pages/property/list/property-list.component.html

@@ -2,30 +2,17 @@
   <td class="empty">-</td>
 </ng-template>
 
-<div class="config">
+<div class="tiles">
-  <button (click)="create()">+ Hinzufügen</button>
+
+  <div *ngFor="let list of listLists()">
+    <div class="tile" *ngFor="let property of list">
+
+      <div class="tileHead" [ngClass]="property.getStateClassList()">
+        <app-text [initial]="property.title" (valueChange)="edit(property, 'title', $event)"></app-text>
       </div>
 
-<table>
+      <div class="tileBody">
-  <tr>
-    <th>Bezeichnung</th>
-    <th>Typ</th>
-    <th>Wert</th>
-    <th>Zeitstempel</th>
-    <th>Lesekanal</th>
-    <th>Schreibkanal</th>
-    <th>
-      <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
-    </th>
-  </tr>
-  <ng-container *ngFor="let property of properties.sort(Property.compareTypeThenTitle)">
-    <tr>
 
-      <td>
-        <app-text [initial]="property.title" (valueChange)="edit(property, 'title', $event)"></app-text>
-      </td>
-
-      <td>
         <select [(ngModel)]="property.type" (ngModelChange)="edit(property, 'type', property.type)">
           <option value="BOOLEAN">Schalter</option>
           <option value="SHUTTER">Rollladen</option>
@@ -34,44 +21,22 @@
           <option value="LUX">Helligkeit [lux]</option>
           <option value="SCENE">Szene</option>
         </select>
-      </td>
 
-      <ng-container *ngIf="property.value !== null else empty">
-        <td *ngIf="property.type === 'BOOLEAN'" class="boolean" [class.true]="property.value" [class.false]="!property.value" (click)="edit(property, 'value', property.value > 0 ? 0 : 1)">
-          {{property.value ? "An" : "Aus"}}
-        </td>
-        <td *ngIf="property.type === 'SHUTTER'" class="number" [class.true]="property.value === 0" [class.false]="property.value === 100" [class.tristate]="0 < property.value && property.value < 100">
-          {{property.value}} %
-        </td>
-        <td *ngIf="property.type === 'BRIGHTNESS_PERCENT'" class="number">
-          {{property.value}} %
-        </td>
-        <td *ngIf="property.type === 'COLOR_TEMPERATURE'" class="number">
-          {{property.value}} K
-        </td>
-        <td *ngIf="property.type === 'LUX'" class="number">
-          {{property.value | number:'0.0-0'}} lux
-        </td>
-        <td *ngIf="property.type === 'SCENE'">
-          {{findScene(property)?.title || "Unbekannt: " + property.value}}
-        </td>
-      </ng-container>
-
-      <td *ngIf="property.timestamp !== null else empty">
-        {{property.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}
-      </td>
-
-      <td class="full">
         <app-search [searchService]="channelService" [initial]="property.readChannel?.id" (valueChange)="set(property, 'readChannel', $event)"></app-search>
-      </td>
+
-      <td class="full">
         <app-search [searchService]="channelService" [initial]="property.writeChannel?.id" (valueChange)="set(property, 'writeChannel', $event)"></app-search>
-      </td>
 
-      <td class="delete">
+        <div class="delete">
           <fa-icon title="Löschen" *ngIf="property.usages.length === 0" [icon]="faTimes" (click)="delete(property)"></fa-icon>
-      </td>
+        </div>
 
-    </tr>
+      </div>
-  </ng-container>
+
-</table>
+    </div>
+  </div>
+
+</div>
+
+<div class="config">
+  <button (click)="create()">+ Hinzufügen</button>
+</div>

src/main/angular/src/app/pages/property/list/property-list.component.less

@@ -1,3 +1,29 @@
-table {
+@import "../../../../config";
-  width: 100%;
+
+.propertyStateBooleanUnknown {
+  background-color: @COLOR_UNKNOWN;
+}
+
+.propertyStateBooleanTrue {
+  background-color: @COLOR_ACTIVE;
+}
+
+.propertyStateBooleanFalse {
+  background-color: @COLOR_INACTIVE;
+}
+
+.propertyStatePercentUnknown {
+  background-color: @COLOR_UNKNOWN;
+}
+
+.propertyStatePercentActive {
+  background-color: @COLOR_ACTIVE;
+}
+
+.propertyStatePercentBetween {
+  background-color: @COLOR_BETWEEN;
+}
+
+.propertyStatePercentInactive {
+  background-color: @COLOR_INACTIVE;
 }

src/main/angular/src/app/pages/property/list/property-list.component.ts

@@ -1,10 +1,11 @@
 import {Component, OnInit} from '@angular/core';
-import {Property} from "../../../api/property/Property";
+import {Property, PropertyType} from "../../../api/property/Property";
 import {PropertyService} from "../../../api/property/property.service";
 import {Scene} from "../../../api/scene/Scene";
 import {SceneService} from "../../../api/scene/scene.service";
 import {ChannelService} from "../../../api/channel/channel.service";
 import {faTimesCircle} from "@fortawesome/free-regular-svg-icons";
+import {environment} from 'src/environments/environment';
 
 @Component({
   selector: 'app-property-list',
@@ -13,11 +14,15 @@ import {faTimesCircle} from "@fortawesome/free-regular-svg-icons";
 })
 export class PropertyListComponent implements OnInit {
 
+  readonly environment = environment;
+
   readonly faTimes = faTimesCircle;
 
-  Property = Property;
+  protected booleans: Property[] = [];
 
-  properties: Property[] = [];
+  protected shutters: Property[] = [];
+
+  Property = Property;
 
   scenes: Scene[] = [];
 
@@ -30,7 +35,10 @@ export class PropertyListComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.propertyService.findAll(properties => this.properties = properties, Property.compareTypeThenTitle);
+    this.propertyService.findAll(properties => {
+      this.booleans = properties.filter(p => p.type === PropertyType.BOOLEAN).sort(Property.compareTypeThenTitle);
+      this.shutters = properties.filter(p => p.type === PropertyType.SHUTTER).sort(Property.compareTypeThenTitle);
+    }, Property.compareTypeThenTitle);
     this.propertyService.subscribe(update => this.updateProperty(update.payload, update.existing));
 
     this.sceneService.findAll(scenes => this.scenes = scenes, Scene.compareNumber);
@@ -46,15 +54,23 @@ export class PropertyListComponent implements OnInit {
   }
 
   private updateProperty(property: Property, existing: boolean): void {
-    const index: number = this.properties.findIndex(p => p.id === property.id);
+    if (property.type === PropertyType.BOOLEAN) {
+      this.updateProperty2(this.booleans, property, existing);
+    } else if (property.type === PropertyType.SHUTTER) {
+      this.updateProperty2(this.shutters, property, existing);
+    }
+  }
+
+  private updateProperty2(properties: Property[], property: Property, existing: boolean) {
+    const index: number = properties.findIndex(p => p.id === property.id);
     if (index >= 0) {
       if (existing) {
-        this.properties[index] = property;
+        properties[index] = property;
       } else {
-        this.properties.slice(index, 1);
+        properties.slice(index, 1);
       }
     } else if (existing) {
-      this.properties.push(property);
+      properties.push(property);
     }
   }
 
@@ -72,7 +88,7 @@ export class PropertyListComponent implements OnInit {
   }
 
   findScene(property: Property): Scene | undefined {
-    return this.scenes.find(s => s.id === property.value);
+    return this.scenes.find(s => s.id === property.readChannel?.value);
   }
 
   set(property: Property, key: string, value: any): void {
@@ -85,8 +101,22 @@ export class PropertyListComponent implements OnInit {
 
   delete(property: Property): void {
     if (confirm(`Eigenschaft "${property.title}" wirklich löschen?`)) {
-      this.propertyService.delete(property, () => this.properties.splice(this.properties.findIndex(p => p.id === property.id), 1));
+      this.propertyService.delete(property, () => {
+        this.delete2(this.booleans, property);
+        this.delete2(this.shutters, property);
+      });
     }
   }
 
+  private delete2(properties: Property[], property: Property) {
+    const index = properties.findIndex(p => p.id === property.id);
+    if (index >= 0) {
+      properties.splice(index, 1);
+    }
+  }
+
+  listLists(): Property[][] {
+    return [this.shutters, this.booleans];
+  }
+
 }

src/main/angular/src/app/pages/schedule/editor/schedule-editor.component.html

@@ -1,197 +1,126 @@
 <ng-container *ngIf="schedule">
 
-  <ng-template #boolean let-entry="entry" let-value="value" let-key="key">
+  <div id="title">
-    <td class="boolean" (click)="set(entry, key, !value)" [class.true]="value" [class.false]="!value">
+    <app-text [initial]="schedule.title" (valueChange)="scheduleService.set(schedule, 'title', $event)"></app-text>
-      <fa-icon *ngIf="value" [icon]="faCheckCircle"></fa-icon>
+  </div>
-      <fa-icon *ngIf="!value" [icon]="faCircle"></fa-icon>
-    </td>
-  </ng-template>
 
-  <table>
+  <div class="tiles">
-    <tr class="header">
-      <ng-container *ngTemplateOutlet="boolean;context:{schedule: schedule, value: schedule.enabled, key:'enabled'}"></ng-container>
-      <td colspan="24">
-        <app-text [initial]="schedule.title" (valueChange)="set(null, 'title', $event)"></app-text>
-      </td>
-    </tr>
-    <tr [class.disabled]="!schedule.enabled">
-      <th>&nbsp;</th>
-      <th>Mo</th>
-      <th>Di</th>
-      <th>Mi</th>
-      <th>Do</th>
-      <th>Fr</th>
-      <th>Sa</th>
-      <th>So</th>
-      <th>Typ</th>
-      <th>Sonnenstand</th>
-      <th colspan="3">Uhrzeit</th>
-      <th>Unschärfe</th>
-      <th colspan="6">Nächste Ausführung</th>
-      <th colspan="2">Eingeschaft setzen</th>
-      <th>Massenausführung</th>
-      <th class="noBorderFirst">&nbsp;</th>
-      <th class="noBorderMiddle">&nbsp;</th>
-      <th class="noBorderLast">&nbsp;</th>
-    </tr>
-    <tr *ngFor="let entry of schedule.entries; trackBy: ScheduleEntry.trackBy" [class.disabled]="entry.nextClearTimestamp === null">
-      <ng-container *ngTemplateOutlet="boolean;context:{entry: entry, value: entry.enabled, key:'enabled'}"></ng-container>
-      <ng-container *ngTemplateOutlet="boolean;context:{entry: entry, value: entry.monday, key:'monday'}"></ng-container>
-      <ng-container *ngTemplateOutlet="boolean;context:{entry: entry, value: entry.tuesday, key:'tuesday'}"></ng-container>
-      <ng-container *ngTemplateOutlet="boolean;context:{entry: entry, value: entry.wednesday, key:'wednesday'}"></ng-container>
-      <ng-container *ngTemplateOutlet="boolean;context:{entry: entry, value: entry.thursday, key:'thursday'}"></ng-container>
-      <ng-container *ngTemplateOutlet="boolean;context:{entry: entry, value: entry.friday, key:'friday'}"></ng-container>
-      <ng-container *ngTemplateOutlet="boolean;context:{entry: entry, value: entry.saturday, key:'saturday'}"></ng-container>
-      <ng-container *ngTemplateOutlet="boolean;context:{entry: entry, value: entry.sunday, key:'sunday'}"></ng-container>
 
-      <td>
+    <div class="tile" *ngFor="let entry of schedule.entries; trackBy: ScheduleEntry.trackBy">
-        <select [ngModel]="entry.type" (ngModelChange)="set(entry, 'type', entry.type)">
+
-          <option value="TIME">Uhrzeit</option>
+      <div class="tileHead disabledBack" [class.enabledBack]="entry.executable" [class.skipBack]="entry.skip">
-          <option value="SUNRISE">Sonnenaufgang</option>
+        <div class="enabled" (click)="set(entry, 'enabled', !entry.enabled)">
-          <option value="SUNSET">Sonnenuntergang</option>
+          <fa-icon *ngIf="entry.enabled" [icon]="faCheckCircle"></fa-icon>
+          <fa-icon *ngIf="!entry.enabled" [icon]="faCircle"></fa-icon>
+        </div>
+        <div class="flexGrow">
+          <select [ngModel]="entry.bulk?.id" (ngModelChange)="entryService.set(entry, 'bulk', $event)">
+            <option [ngValue]="null">-</option>
+            <option [ngValue]="bulk.id" *ngFor="let bulk of bulks.sort(Bulk.compareName)">{{ bulk.name }}</option>
           </select>
-      </td>
+        </div>
+        <div class="tileHeadDelete">
+          <fa-icon [icon]="faTimesCircle" (click)="delete(entry)"></fa-icon>
+        </div>
+      </div>
 
-      <ng-container *ngIf="entry.type === 'SUNRISE' || entry.type === 'SUNSET'">
+      <div class="tileBodyFlex">
-        <td>
+        <div class="weekdays">
-          <select [ngModel]="entry.zenith" (ngModelChange)="set(entry, 'zenith', entry.zenith)">
+          <div>
-            <option value="87">
+            <app-bool label="Mo" [value]="entry.monday" (onChange)="entryService.set(entry, 'monday', $event)"></app-bool>
-              [&nbsp;87°]
+          </div>
-              <ng-container *ngIf="entry.type === 'SUNRISE'">Nach Sonnenaufgang</ng-container>
+          <div>
-              <ng-container *ngIf="entry.type === 'SUNSET'">Vor Sonnenuntergang</ng-container>
+            <app-bool label="Di" [value]="entry.tuesday" (onChange)="entryService.set(entry, 'tuesday', $event)"></app-bool>
-            </option>
+          </div>
-            <option value="90.8333">
+          <div>
-              [&nbsp;90°]
+            <app-bool label="Mi" [value]="entry.wednesday" (onChange)="entryService.set(entry, 'wednesday', $event)"></app-bool>
-              <ng-container *ngIf="entry.type === 'SUNRISE'">Sonnenaufgang</ng-container>
+          </div>
-              <ng-container *ngIf="entry.type === 'SUNSET'">Sonnenuntergang</ng-container>
+          <div>
-            </option>
+            <app-bool label="Do" [value]="entry.thursday" (onChange)="entryService.set(entry, 'thursday', $event)"></app-bool>
-            <option value="93">[&nbsp;93°]</option>
+          </div>
-            <option value="96">[&nbsp;96°] Bürgerliche Dämmerung</option>
+          <div>
-            <option value="99">[&nbsp;99°]</option>
+            <app-bool label="Fr" [value]="entry.friday" (onChange)="entryService.set(entry, 'friday', $event)"></app-bool>
-            <option value="102">[102°] Nautische Dämmerung</option>
+          </div>
-            <option value="105">[105°]</option>
+          <div>
-            <option value="108">[108°] Astronomische Dämmerung</option>
+            <app-bool label="Sa" [value]="entry.saturday" (onChange)="entryService.set(entry, 'saturday', $event)"></app-bool>
-          </select>
+          </div>
-        </td>
+          <div>
-      </ng-container>
+            <app-bool label="So" [value]="entry.sunday" (onChange)="entryService.set(entry, 'sunday', $event)"></app-bool>
-      <td *ngIf="entry.type !== 'SUNRISE' && entry.type !== 'SUNSET'" class="empty"></td>
+          </div>
+        </div>
+        <div class="modes">
+          <div class="_inner_">
+            <div>
+              <app-bool icon="faClock" [value]="entry.type === 'TIME'" (onChange)="entryService.set(entry, 'type', 'TIME')"></app-bool>
+            </div>
+            <div>
+              <app-bool icon="faArrowAltCircleUp" [value]="entry.type === 'SUNRISE'" (onChange)="entryService.set(entry, 'type', 'SUNRISE')"></app-bool>
+            </div>
+            <div>
+              <app-bool icon="faArrowAltCircleDown" [value]="entry.type === 'SUNSET'" (onChange)="entryService.set(entry, 'type', 'SUNSET')"></app-bool>
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <ng-container *ngIf="entry.type === 'TIME'">
+      <div class="tileBodyFlex" *ngIf="entry.type === 'TIME'">
-        <td class="first">
+        <div class="flexGrow time">
-          <select [ngModel]="entry.hour" (ngModelChange)="set(entry, 'hour', entry.hour)">
+          <button class="buttonPlus" (click)="dayMinuteAdd(entry, +60)">+</button>
-            <option *ngFor="let _ of [].constructor(24); let value = index" [ngValue]="value">{{value}}</option>
+          <button class="buttonMinus" (click)="dayMinuteAdd(entry, -60)">-</button>
-          </select>
+          <input type="time" [ngModel]="entry.time" (ngModelChange)="timeFromString(entry, $event)">
-        </td>
+          <button class="buttonPlus" (click)="dayMinuteAdd(entry, +1)">+</button>
-        <td class="middle">:</td>
+          <button class="buttonMinus" (click)="dayMinuteAdd(entry, -1)">-</button>
-        <td class="last">
+        </div>
-          <select [ngModel]="entry.minute" (ngModelChange)="set(entry, 'minute', entry.minute)">
+      </div>
-            <option *ngFor="let _ of [].constructor(60); let value = index" [ngValue]="value">{{value | number:'2.0'}}</option>
-          </select>
-        </td>
-      </ng-container>
-      <td *ngIf="entry.type !== 'TIME'" colspan="3" class="empty"></td>
 
-      <td>
+      <div class="tileBodyFlex" *ngIf="entry.type === 'SUNRISE' || entry.type === 'SUNSET'">
-        <select [ngModel]="entry.fuzzySeconds" (ngModelChange)="set(entry, 'fuzzySeconds', entry.fuzzySeconds)">
+        <div class="flexGrow sun">
-          <option [ngValue]="0">Keine</option>
+          <div *ngFor="let zenith of getZenithEntries(entry.type)">
-          <option [ngValue]="60">1 Minute</option>
+            <app-bool [label]="zenith.title" [value]="entry.zenith === zenith.value" (onChange)="entryService.set(entry, 'zenith', zenith.value)"></app-bool>
-          <option [ngValue]="300">5 Minuten</option>
+          </div>
-          <option [ngValue]="600">10 Minuten</option>
+          <div>
-          <option [ngValue]="1800">30 Minuten</option>
+            <input type="number" min="45" max="120" [ngModel]="entry.zenith" (ngModelChange)="entryService.set(entry, 'zenith', $event || 0)">
-          <option [ngValue]="3600">1 Stunde</option>
+          </div>
-          <option [ngValue]="7200">2 Stunden</option>
+        </div>
-          <option [ngValue]="10800">3 Stunden</option>
+      </div>
-          <option [ngValue]="21600">6 Stunden</option>
-          <option [ngValue]="43200">12 Stunden</option>
-          <option [ngValue]="86400">1 Tag</option>
-        </select>
-      </td>
 
-      <ng-container *ngIf="entry.nextClearTimestamp">
+      <div class="tileBodyFlex">
-        <td class="number first" [class.empty]="entry.fuzzySeconds > 0">{{entry.nextClearTimestamp.dayName}}</td>
+        <div class="flexHalf">
-        <td class="number middle" [class.empty]="entry.fuzzySeconds > 0">:&nbsp;</td>
+          <div class="flexIcon">
-        <td class="number last" [class.empty]="entry.fuzzySeconds > 0">{{entry.nextClearTimestamp.timeString}}</td>
+            <img class="icon" src="assets/dice.svg" alt="+/-" title="Zufallsabweichung +/-">
-      </ng-container>
+          </div>
-      <ng-container *ngIf="!entry.nextClearTimestamp">
+          <div class="flexIconInput">
-        <td class="empty first"></td>
+            <app-duration [duration]="Duration.ofCode(entry.fuzzySeconds + 's')" [inputClass]="entry.fuzzySeconds ? 'fuzzyBack' : ''" [min]="Duration.ofCode('')" (onChange)="entryService.set(entry, 'fuzzySeconds', $event.totalSeconds)"></app-duration>
-        <td class="empty middle"></td>
+          </div>
-        <td class="empty last"></td>
+        </div>
-      </ng-container>
+        <div class="flexHalf">
+          <div class="flexIcon">
+            <img class="icon" src="assets/skip.svg" alt="Überspringen">
+          </div>
+          <div class="flexIconInput flexInputLast">
+            <input type="number" min="0" [class.skipBack]="entry.skip" [ngModel]="entry.skip" (ngModelChange)="entryService.set(entry, 'skip', $event || 0)">
+          </div>
+        </div>
+      </div>
 
-      <ng-container *ngIf="entry.nextFuzzyTimestamp && entry.fuzzySeconds > 0">
+      <div class="tileBodyFlex">
-        <td class="number first">{{entry.nextFuzzyTimestamp.dayName}}</td>
+        <div class="flexGrow timestamp" [class.skipFont]="entry.skip" *ngIf="entry.executable">
-        <td class="number middle">:&nbsp;</td>
+          {{ timeService.relativeDate(entry.nextFuzzyTimestamp) }}
-        <td class="number last">{{entry.nextFuzzyTimestamp.timeString}}</td>
+          <span [class.fuzzyFont]="entry.fuzzySeconds" *ngIf="entry.fuzzySeconds">
-      </ng-container>
+            (eig: {{ entry.nextClearTimestamp.date | date:'HH:mm' }})
-      <ng-container *ngIf="!entry.nextFuzzyTimestamp || entry.fuzzySeconds <= 0">
+          </span>
-        <td class="empty first"></td>
+        </div>
-        <td class="empty middle"></td>
+        <div class="flexGrow inactive" *ngIf="entry.todo">
-        <td class="empty last"></td>
+          {{ entry.todo }}
-      </ng-container>
+        </div>
+      </div>
 
-      <td>
+    </div>
-        <app-search [searchService]="propertyService" [initial]="entry.property?.id" (valueChange)="set(entry, 'property', $event)"></app-search>
-      </td>
-      <ng-container [ngSwitch]="entry.property?.type">
-        <td *ngSwitchCase="'BOOLEAN'" [class.true]="entry.value" [class.false]="!entry.value" (click)="set(entry, 'value', entry.value > 0 ? 0 : 1)">
-          {{entry.value ? "An" : "Aus"}}
-        </td>
-        <td *ngSwitchCase="'SHUTTER'" [class.true]="entry.value === 0" [class.false]="entry.value === 100" [class.tristate]="0 < entry.value && entry.value < 100">
-          <select [ngModel]="entry.value" (ngModelChange)="set(entry, 'value', entry.value)">
-            <option [ngValue]="0">100% Offen</option>
-            <option [ngValue]="35">&nbsp;50%</option>
-            <option [ngValue]="55">&nbsp;75%</option>
-            <option [ngValue]="75">&nbsp;90% Sonnenschutz</option>
-            <option [ngValue]="85">100% Schlitze</option>
-            <option [ngValue]="100">100% Geschlossen</option>
-          </select>
-        </td>
-        <td *ngSwitchCase="'BRIGHTNESS_PERCENT'" [class.true]="entry.value" [class.false]="!entry.value" [class.tristate]="0 < entry.value && entry.value < 100">
-          <select [ngModel]="entry.value" (ngModelChange)="set(entry, 'value', entry.value)">
-            <option *ngFor="let _ of [].constructor(21); let value = index" [ngValue]="value * 5">{{value * 5}}%</option>
-          </select>
-        </td>
-        <td *ngSwitchCase="'COLOR_TEMPERATURE'" [class.true]="entry.value" [class.false]="!entry.value" [class.tristate]="0 < entry.value && entry.value < 100">
-          <select [ngModel]="entry.value" (ngModelChange)="set(entry, 'value', entry.value)">
-            <option *ngFor="let _ of [].constructor(21); let value = index" [ngValue]="value * 5">{{value * 5}}%</option>
-          </select>
-        </td>
-        <td *ngSwitchCase="'LUX'" [class.true]="entry.value" [class.false]="!entry.value" [class.tristate]="0 < entry.value && entry.value < 100">
-          <select [ngModel]="entry.value" (ngModelChange)="set(entry, 'value', entry.value)">
-            <option *ngFor="let _ of [].constructor(21); let value = index" [ngValue]="value * 5">{{value * 5}}%</option>
-          </select>
-        </td>
-        <td *ngSwitchCase="'SCENE'">
-          <select [ngModel]="entry.value" (ngModelChange)="set(entry, 'value', entry.value)">
-            <option *ngFor="let scene of scenes" [ngValue]="scene.number">#{{scene.number | number:'2.0-0'}} {{scene.title}}</option>
-          </select>
-        </td>
-        <td *ngSwitchDefault class="empty">
-          &nbsp;
-        </td>
-      </ng-container>
 
-      <td>
+  </div>
-        <app-search [searchService]="bulkService" [initial]="entry.bulk?.id" (valueChange)="set(entry, 'bulk', $event)"></app-search>
-      </td>
 
-      <td class="delete noBorderFirst" (click)="delete(entry)">
+  <div class="config">
-        <fa-icon [icon]="faTimes"></fa-icon>
-      </td>
-
-      <td class="noBorderMiddle" (click)="set(entry, 'position', entry.position - 1)">
-        <fa-icon *ngIf="entry.position > 0" [icon]="faUp"></fa-icon>
-      </td>
-
-      <td class="noBorderLast" (click)="set(entry, 'position', entry.position + 1)">
-        <fa-icon *ngIf="entry.position < schedule.entries.length - 1" [icon]="faDown"></fa-icon>
-      </td>
-
-    </tr>
-  </table>
-
-  <p>
     <button (click)="create()">+ Hinzufügen</button>
-  </p>
+  </div>
 
 </ng-container>

src/main/angular/src/app/pages/schedule/editor/schedule-editor.component.less

@@ -1,19 +1,73 @@
-select {
+@import "../../../../config";
-  background-color: transparent;
+
-  border-width: 0;
+@time_input_width: 35%;
+
+#title {
+  margin: @margin;
+}
+
+.weekdays {
+  float: left;
+  width: 75%;
+  border-radius: @border-radius;
+
+  div {
+    float: left;
+    width: 14.2857%;
+  }
+
+}
+
+.modes {
+  float: left;
+  width: 25%;
+
+  ._inner_ {
+    margin-left: @margin;
+    border-radius: @border-radius;
+
+    div {
+      float: left;
+      width: 33.3333%;
+    }
+
+  }
+}
+
+.time {
   width: 100%;
-  outline: none;
+
-  font-family: monospace;
+  input {
+    width: @time_input_width;
+    text-align: center;
+    margin-right: @margin;
   }
 
-th {
+  button {
-  background-color: lightblue;
+    width: calc(((100% - @time_input_width) - 4 * @margin) / 4);
+    margin-right: @margin;
   }
 
-tr.header {
+  button:last-child {
-
+    margin-right: 0;
-  th:not(:first-child), td:not(:first-child) {
-    border: none;
   }
 
 }
+
+.sun {
+
+  div {
+    float: left;
+    width: 20%;
+  }
+
+}
+
+.timestamp {
+  text-align: center;
+}
+
+.inactive {
+  color: gray;
+  text-align: center;
+}

src/main/angular/src/app/pages/schedule/editor/schedule-editor.component.ts

@@ -3,15 +3,31 @@ import {ScheduleService} from "../../../api/schedule/schedule.service";
 import {Schedule} from "../../../api/schedule/Schedule";
 import {ScheduleEntry} from "../../../api/schedule/entry/ScheduleEntry";
 import {ScheduleEntryService} from "../../../api/schedule/entry/schedule-entry.service";
-import {faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCircle, faTimesCircle} from '@fortawesome/free-regular-svg-icons';
 import {ActivatedRoute, Router} from "@angular/router";
-import {PropertyService} from "../../../api/property/property.service";
-import {Scene} from "../../../api/scene/Scene";
-import {SceneService} from "../../../api/scene/scene.service";
-import {BulkService} from "../../../api/bulk/BulkService";
 import {Update} from "../../../api/Update";
 import {NO_OP} from "../../../api/api.service";
 
+import {Duration} from "../../../api/Duration";
+import {Bulk} from "../../../api/bulk/Bulk";
+import {BulkService} from "../../../api/bulk/BulkService";
+import {Zenith} from "../../../api/schedule/entry/Zenith";
+import {TimeService} from "../../../api/time.service";
+import {faCheckCircle, faCircle, faTimesCircle} from "@fortawesome/free-regular-svg-icons";
+
+const DAY_MINUTES: number = 24 * 60;
+
+const ZENITH_ENTRIES: Zenith[] = [
+  new Zenith("Astr.", 107, true, true),
+  new Zenith("Naut.", 102, true, true),
+  new Zenith("Bürg.", 96, true, true),
+  new Zenith("Aufg.", 90.8, true, false),
+  new Zenith("Unterg.", 90.8, false, true),
+];
+
+const ZENITH_SUNRISE = ZENITH_ENTRIES.filter(zenith => zenith.sunrise);
+
+const ZENITH_SUNSET = ZENITH_ENTRIES.filter(zenith => zenith.sunset).reverse();
+
 @Component({
   selector: 'app-schedule-editor',
   templateUrl: './schedule-editor.component.html',
@@ -19,40 +35,43 @@ import {NO_OP} from "../../../api/api.service";
 })
 export class ScheduleEditorComponent implements OnInit {
 
-  readonly ScheduleEntry = ScheduleEntry;
+  protected readonly faCheckCircle = faCheckCircle;
 
-  readonly faCheckCircle = faCheckCircle;
+  protected readonly faTimesCircle = faTimesCircle;
 
-  readonly faCircle = faCircle;
+  protected readonly faCircle = faCircle;
 
-  readonly faTimes = faTimesCircle;
+  protected readonly ScheduleEntry = ScheduleEntry;
 
-  readonly faUp = faArrowAltCircleUp;
+  protected readonly Schedule = Schedule;
 
-  readonly faDown = faArrowAltCircleDown;
+  protected readonly Duration = Duration;
 
-  readonly Schedule = Schedule;
+  protected readonly Bulk = Bulk;
 
-  schedule!: Schedule;
+  protected readonly expanded: number[] = [];
 
-  scenes: Scene[] = [];
+  protected now: Date = new Date(Date.now());
+
+  protected schedule!: Schedule;
+
+  protected bulks: Bulk[] = [];
 
   constructor(
     readonly router: Router,
     readonly activatedRoute: ActivatedRoute,
     readonly scheduleService: ScheduleService,
-    readonly scheduleEntryService: ScheduleEntryService,
+    readonly entryService: ScheduleEntryService,
-    readonly propertyService: PropertyService,
     readonly bulkService: BulkService,
-    readonly sceneService: SceneService,
+    readonly timeService: TimeService,
   ) {
-    // nothing
+    // -
   }
 
   ngOnInit(): void {
     this.scheduleService.subscribe(update => this.update(update));
-    this.sceneService.findAll(scenes => this.scenes = scenes);
+    this.bulkService.findAll(list => this.bulks = list);
-    this.activatedRoute.params.subscribe(params => this.scheduleService.getById(params['id'], schedule => this.schedule = schedule));
+    this.activatedRoute.params.subscribe(params => this.scheduleService.getById(params['id'], schedule => this.setSchedule(schedule)));
   }
 
   private update(update: Update<Schedule>): void {
@@ -63,25 +82,58 @@ export class ScheduleEditorComponent implements OnInit {
       this.router.navigate(['/ScheduleList']);
       return;
     }
-    this.schedule = update.payload;
+    this.setSchedule(update.payload);
+  }
+
+  private setSchedule(schedule: Schedule) {
+    this.schedule = schedule;
+    this.expanded.length = 0;
+    this.expanded.push(...schedule.entries.map(e => e.id));
   }
 
   create(): void {
-    this.scheduleEntryService.create(this.schedule, NO_OP);
+    this.entryService.create(this.schedule, NO_OP);
   }
 
   delete(entry: ScheduleEntry): void {
-    if (confirm("Eintrag \"" + entry.nextClearTimestamp?.timeString + " +/-" + entry.fuzzySeconds + "\" wirklich löschen?")) {
+    if (confirm("Eintrag \"" + this.timeService.relativeDate(entry.nextClearTimestamp) + " +/-" + entry.fuzzySeconds + "\" wirklich löschen?")) {
-      this.scheduleEntryService.delete(entry, NO_OP);
+      this.entryService.delete(entry, NO_OP);
     }
   }
 
   set(entry: ScheduleEntry | null, key: string, value: any): void {
     if (entry) {
-      this.scheduleEntryService.set(entry, key, value, NO_OP);
+      this.entryService.set(entry, key, value, NO_OP);
     } else {
       this.scheduleService.set(this.schedule, key, value, NO_OP);
     }
   }
 
+  timeFromString(entry: ScheduleEntry, time: string) {
+    const parts = time.split(':');
+    const hour = parseInt(parts[0]);
+    const minute = parseInt(parts[1]);
+    let second = 0;
+    if (parts.length === 3) {
+      second = parseInt(parts[2]);
+    }
+    const daySecond = (hour * 24 + minute) * 60 + second;
+    this.entryService.set(entry, 'daySecond', daySecond);
+  }
+
+  dayMinuteAdd(entry: ScheduleEntry, minutes: number) {
+    let newMinutes = entry.dayMinute + minutes;
+    while (newMinutes < 0 || newMinutes >= DAY_MINUTES) {
+      newMinutes = (newMinutes + DAY_MINUTES) % DAY_MINUTES;
+    }
+    this.entryService.set(entry, 'daySecond', newMinutes * 60);
+  }
+
+  getZenithEntries(type: string) {
+    if (type === 'SUNRISE') {
+      return ZENITH_SUNRISE;
+    }
+    return ZENITH_SUNSET;
+  }
+
 }

src/main/angular/src/app/pages/schedule/list/schedule-list.component.html

@@ -1,42 +1,53 @@
-<table>
+<div class="tiles">
-  <tr>
-    <th>&nbsp;</th>
-    <th>Bezeichnung</th>
-    <th colspan="3">Zeitpunkt</th>
-    <th colspan="3">Eigenschaft</th>
-    <th>Massenausführung</th>
-    <th>&nbsp;</th>
-  </tr>
-  <tr *ngFor="let schedule of schedules; trackBy: Schedule.trackBy">
 
-    <td class="boolean" (click)="set(schedule, 'enabled', !schedule.enabled)" [class.true]="schedule.enabled" [class.false]="!schedule.enabled">
+  <div class="tile" *ngFor="let schedule of schedules; trackBy: Schedule.trackBy">
+
+    <div class="tileHead disabledBack" [class.enabledBack]="schedule.next" [class.skipBack]="schedule.next?.skip">
+
+      <div class="enabled" (click)="set(schedule, 'enabled', !schedule.enabled)">
         <fa-icon *ngIf="schedule.enabled" [icon]="faCheckCircle"></fa-icon>
         <fa-icon *ngIf="!schedule.enabled" [icon]="faCircle"></fa-icon>
-    </td>
+      </div>
 
-    <td [routerLink]="['/Schedule', {id: schedule.id}]">
+      <div class="flexGrow" [routerLink]="['/Schedule', {id: schedule.id}]">
         {{ schedule.title }}
-    </td>
+      </div>
 
-    <td class="number first" [class.empty]="!schedule.next?.nextClearTimestamp">{{schedule.next?.nextClearTimestamp.dayName}}</td>
+      <div class="tileHeadRight" (click)="skip(schedule.next)" *ngIf="schedule.next">
-    <td class="number middle" [class.empty]="!schedule.next?.nextClearTimestamp">:&nbsp;</td>
+        <img class="icon" src="assets/skip.svg" [alt]="'Über.'">{{ schedule.next?.skip }}
-    <td class="number last" [class.empty]="!schedule.next?.nextClearTimestamp">{{schedule.next?.nextClearTimestamp.timeString}}</td>
+      </div>
 
-    <td class="number first" [class.empty]="!schedule.next?.property">{{schedule.next?.property?.title}}</td>
+      <div class="tileHeadRight" (click)="delete(schedule)">
-    <td class="number middle" [class.empty]="!schedule.next?.property">&nbsp;=&nbsp;</td>
-    <td class="number last" [class.empty]="!schedule.next?.property">{{schedule.next?.value}}</td>
-
-    <td [class.empty]="!schedule.next?.bulk">
-      {{schedule.next?.bulk?.name}}
-    </td>
-
-    <td class="delete" (click)="delete(schedule)">
         <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
-    </td>
+      </div>
 
-  </tr>
+    </div>
-</table>
 
-<p>
+    <div class="tileBody next">
+      <div class="timestamp">
+        <ng-container *ngIf="schedule.next">{{ timeService.relativeDate(schedule.next?.nextFuzzyTimestamp) }}</ng-container>
+      </div>
+      <div class="bulk" [class.timestampBulkEmpty]="!schedule.next?.bulk" *ngIf="schedule.next?.bulk">
+        {{ schedule.next?.bulk?.name }}
+        <fa-icon [icon]="faPlayCircle" (click)="execute(schedule.next?.bulk)"></fa-icon>
+      </div>
+    </div>
+
+    <div class="tileBody last">
+      <div class="timestamp">
+        <ng-container *ngIf="schedule.last">{{ timeService.relativeDate(schedule.last?.lastFuzzyTimestamp) }}</ng-container>
+        <ng-container *ngIf="!schedule.last">- - -</ng-container>
+      </div>
+      <div class="bulk" [class.timestampBulkEmpty]="!schedule.last?.bulk" *ngIf="schedule.last?.bulk">
+        {{ schedule.last?.bulk?.name }}
+        <fa-icon [icon]="faPlayCircle" (click)="execute(schedule.last?.bulk)"></fa-icon>
+      </div>
+    </div>
+
+  </div>
+
+</div>
+
+<div class="config">
   <button (click)="create()">+ Hinzufügen</button>
-</p>
+</div>

src/main/angular/src/app/pages/schedule/list/schedule-list.component.less

@@ -1,11 +1,15 @@
-select {
+@import "../../../../config";
-  background-color: transparent;
+
-  border-width: 0;
+.last {
-  width: 100%;
+  color: gray;
-  outline: none;
+  font-size: 60%;
-  font-family: monospace;
+  border-top: @border solid gray;
 }
 
-th {
+.timestamp {
-  background-color: lightblue;
+  float: left;
+}
+
+.bulk {
+  float: right;
 }

src/main/angular/src/app/pages/schedule/list/schedule-list.component.ts

@@ -1,9 +1,14 @@
 import {Component, OnInit} from '@angular/core';
 import {ScheduleService} from "../../../api/schedule/schedule.service";
 import {Schedule} from "../../../api/schedule/Schedule";
-import {faCheckCircle, faCircle, faTimesCircle} from '@fortawesome/free-regular-svg-icons';
+import {faCheckCircle, faCircle, faPlayCircle, faTimesCircle} from '@fortawesome/free-regular-svg-icons';
 import {NO_OP} from "../../../api/api.service";
 import {Update} from "../../../api/Update";
+import {ScheduleEntryService} from "../../../api/schedule/entry/schedule-entry.service";
+import {ScheduleEntry} from "../../../api/schedule/entry/ScheduleEntry";
+import {Bulk} from "../../../api/bulk/Bulk";
+import {BulkService} from "../../../api/bulk/BulkService";
+import {TimeService} from "../../../api/time.service";
 
 @Component({
   selector: 'app-schedule-list',
@@ -24,6 +29,9 @@ export class ScheduleListComponent implements OnInit {
 
   constructor(
     readonly scheduleService: ScheduleService,
+    readonly entryService: ScheduleEntryService,
+    readonly bulkService: BulkService,
+    readonly timeService: TimeService,
   ) {
     // nothing
   }
@@ -63,4 +71,19 @@ export class ScheduleListComponent implements OnInit {
     }
   }
 
+  skip(entry: ScheduleEntry) {
+    let skip = entry.skip + 1;
+    if (skip > 7) {
+      skip = 0;
+    }
+    this.entryService.set(entry, 'skip', skip);
+  }
+
+  execute(bulk: Bulk | undefined) {
+    if (bulk && confirm("Stapel Ausführen?\n\n" + bulk.name)) {
+      this.bulkService.run(bulk);
+    }
+  }
+
+  protected readonly faPlayCircle = faPlayCircle;
 }

src/main/angular/src/app/pipes/left-pad.directive.ts

@@ -0,0 +1,20 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'leftPad',
+})
+export class LeftPadDirective implements PipeTransform {
+
+  constructor() {
+  }
+
+  transform(value: any, count: number): any {
+    let result = "" + value;
+    const rest: number = count - result.length;
+    if (rest > 0) {
+      result = " ".repeat(rest) + result;
+    }
+    return result;
+  }
+
+}

src/main/angular/src/app/shared/bool/bool.component.html

@@ -0,0 +1,18 @@
+<div type="checkbox" [style.background-color]="color()" (click)="onChange.emit(!value)">
+  <ng-container *ngIf="label">
+    {{ label }}
+  </ng-container>
+  <ng-container *ngIf="!label">
+    <ng-container *ngIf="icon">
+      <fa-icon *ngIf="icon === 'faCircle'" [icon]="faCircle"></fa-icon>
+      <fa-icon *ngIf="icon === 'faCheckCircle'" [icon]="faCheckCircle"></fa-icon>
+      <fa-icon *ngIf="icon === 'faClock'" [icon]="faClock"></fa-icon>
+      <fa-icon *ngIf="icon === 'faArrowAltCircleUp'" [icon]="faArrowAltCircleUp"></fa-icon>
+      <fa-icon *ngIf="icon === 'faArrowAltCircleDown'" [icon]="faArrowAltCircleDown"></fa-icon>
+    </ng-container>
+    <ng-container *ngIf="!icon">
+      <fa-icon *ngIf="value" [icon]="faCheckCircle"></fa-icon>
+      <fa-icon *ngIf="!value" [icon]="faCircle"></fa-icon>
+    </ng-container>
+  </ng-container>
+</div>

src/main/angular/src/app/shared/bool/bool.component.less

@@ -0,0 +1,8 @@
+div {
+  width: 100%;
+  height: 100%;
+  padding-top: 0.1em;
+  padding-bottom: 0.1em;
+  text-align: center;
+  background-color: gray;
+}

src/main/angular/src/app/shared/bool/bool.component.ts

@@ -0,0 +1,58 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCircle, faClock} from "@fortawesome/free-regular-svg-icons";
+
+@Component({
+  selector: 'app-bool',
+  templateUrl: './bool.component.html',
+  styleUrls: ['./bool.component.less']
+})
+export class BoolComponent implements OnInit {
+
+  protected readonly faCheckCircle = faCheckCircle;
+
+  protected readonly faCircle = faCircle;
+
+  protected readonly faClock = faClock;
+
+  protected readonly faArrowAltCircleUp = faArrowAltCircleUp;
+
+  protected readonly faArrowAltCircleDown = faArrowAltCircleDown;
+
+  @Input()
+  icon: string | undefined = undefined;
+
+  @Input()
+  colorActive: string = '#8FBC8FFF';
+
+  @Input()
+  colorInactive: string = '#8c8c8c';
+
+  @Input()
+  label: string | undefined = undefined;
+
+  @Input()
+  value: boolean | undefined = undefined;
+
+  @Output()
+  onChange: EventEmitter<boolean> = new EventEmitter();
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+  toggle() {
+
+  }
+
+  color(): string {
+    if (this.value === true) {
+      return this.colorActive;
+    } else if (this.value === false) {
+      return this.colorInactive;
+    }
+    return "";
+  }
+
+}

src/main/angular/src/app/shared/duration/duration.component.html

@@ -0,0 +1 @@
+<input type="text" [class]="inputClass" [(ngModel)]="code" (focus)="focus = true" (blur)="apply()" (keydown.enter)="apply()" (keydown.escape)="cancel()">

src/main/angular/src/app/shared/duration/duration.component.less

@@ -0,0 +1,3 @@
+input {
+  width: 100%;
+}

src/main/angular/src/app/shared/duration/duration.component.ts

@@ -0,0 +1,63 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Duration} from "../../api/Duration";
+
+@Component({
+  selector: 'app-duration',
+  templateUrl: './duration.component.html',
+  styleUrls: ['./duration.component.less']
+})
+export class DurationComponent implements OnInit {
+
+  private _duration: Duration = Duration.ZERO;
+
+  @Input()
+  set duration(duration: Duration) {
+    this._duration = duration;
+    if (!this.focus) {
+      this.code = this.duration.code;
+    }
+  }
+
+  get duration(): Duration {
+    return this._duration;
+  }
+
+  @Input()
+  inputClass: string = '';
+
+  @Input()
+  min: Duration | undefined = undefined;
+
+  @Input()
+  max: Duration | undefined = undefined;
+
+  @Output()
+  readonly onChange: EventEmitter<Duration> = new EventEmitter();
+
+  protected code: string = '';
+
+  protected focus: boolean = false;
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+  apply() {
+    let duration = Duration.ofCode(this.code);
+    if (this.min !== undefined && duration.totalSeconds < this.min.totalSeconds) {
+      duration = this.min;
+    }
+    if (this.max !== undefined && duration.totalSeconds > this.max.totalSeconds) {
+      duration = this.max;
+    }
+    this.code = duration.code;
+    this.onChange.emit(duration);
+  }
+
+  cancel() {
+    this.code = this.duration.code;
+  }
+
+}

src/main/angular/src/app/shared/entry-value/entry-value.component.html

@@ -0,0 +1,41 @@
+<ng-container [ngSwitch]="entry.property?.type">
+
+  <div *ngSwitchCase="'BOOLEAN'" [class.true]="entry.value" [class.false]="!entry.value" (click)="set('value', entry.value > 0 ? 0 : 1)">
+    {{entry.value ? "An" : "Aus"}}
+  </div>
+
+  <div *ngSwitchCase="'SHUTTER'" [class.true]="entry.value === 0" [class.false]="entry.value === 100" [class.tristate]="0 < entry.value && entry.value < 100">
+    <select [ngModel]="entry.value" (ngModelChange)="set('value', $event)" [disabled]="!allowChange">
+      <option *ngFor="let _ of [].constructor(21); let value = index" [ngValue]="value * 5">{{value * 5}}%</option>
+    </select>
+  </div>
+
+  <div *ngSwitchCase="'BRIGHTNESS_PERCENT'" [class.true]="entry.value" [class.false]="!entry.value" [class.tristate]="0 < entry.value && entry.value < 100">
+    <select [ngModel]="entry.value" (ngModelChange)="set('value', $event)" [disabled]="!allowChange">
+      <option *ngFor="let _ of [].constructor(21); let value = index" [ngValue]="value * 5">{{value * 5}}%</option>
+    </select>
+  </div>
+
+  <div *ngSwitchCase="'COLOR_TEMPERATURE'" [class.true]="entry.value" [class.false]="!entry.value" [class.tristate]="0 < entry.value && entry.value < 100">
+    <select [ngModel]="entry.value" (ngModelChange)="set('value', $event)" [disabled]="!allowChange">
+      <option *ngFor="let _ of [].constructor(21); let value = index" [ngValue]="value * 5">{{value * 5}}%</option>
+    </select>
+  </div>
+
+  <div *ngSwitchCase="'LUX'" [class.true]="entry.value" [class.false]="!entry.value" [class.tristate]="0 < entry.value && entry.value < 100">
+    <select [ngModel]="entry.value" (ngModelChange)="set('value', $event)" [disabled]="!allowChange">
+      <option *ngFor="let _ of [].constructor(21); let value = index" [ngValue]="value * 5">{{value * 5}}%</option>
+    </select>
+  </div>
+
+  <div *ngSwitchCase="'SCENE'">
+    <select [ngModel]="entry.value" (ngModelChange)="set('value', $event)" [disabled]="!allowChange">
+      <option *ngFor="let scene of scenes" [ngValue]="scene.number">#{{scene.number | number:'2.0-0'}} {{scene.title}}</option>
+    </select>
+  </div>
+  <div *ngSwi
+       tchDefault class="empty">
+    &nbsp;
+  </div>
+
+</ng-container>

src/main/angular/src/app/shared/entry-value/entry-value.component.ts

@@ -0,0 +1,51 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ScheduleEntry} from "../../api/schedule/entry/ScheduleEntry";
+import {Scene} from "../../api/scene/Scene";
+import {SceneService} from "../../api/scene/scene.service";
+
+export class OnSet {
+
+  constructor(
+    readonly key: string,
+    readonly value: any,
+  ) {
+    // nothing
+  }
+
+}
+
+@Component({
+  selector: 'app-entry-value',
+  templateUrl: './entry-value.component.html',
+  styleUrls: ['./entry-value.component.less']
+})
+export class EntryValueComponent implements OnInit {
+
+  @Input()
+  entry!: ScheduleEntry;
+
+  @Input()
+  allowChange: boolean = false;
+
+  @Output()
+  onSet: EventEmitter<OnSet> = new EventEmitter<OnSet>();
+
+  scenes: Scene[] = [];
+
+  constructor(
+    readonly sceneService: SceneService,) {
+    // nothing
+  }
+
+  ngOnInit(): void {
+    this.sceneService.findAll(scenes => this.scenes = scenes);
+  }
+
+  set(key: string, value: any): void {
+    if (!this.allowChange) {
+      return;
+    }
+    this.onSet.emit(new OnSet(key, value));
+  }
+
+}

src/main/angular/src/app/shared/number/number.component.less

@@ -1,7 +1,9 @@
+@import "../../../config";
+
 input {
   outline: none;
   border: none;
-  padding: 5px;
+  padding: @padding;
   margin: 0;
   width: 100%;
   background-color: transparent;

src/main/angular/src/app/shared/search/search.component.html

@@ -7,9 +7,8 @@
     <ng-container *ngIf="!selected">-</ng-container>
   </div>
 
+  <div *ngIf="searching" class="resultList">
     <input #input type="text" *ngIf="searching" [(ngModel)]="term" (ngModelChange)="changed()" (keydown.enter)="doSearch()" (keydown.escape)="cancelSearch()" (focus)="cancelOnBlur=true" (blur)="blur()">
-
-  <div #resultList *ngIf="searching" class="resultList">
     <div *ngIf="allowEmpty" class="result" (mousedown)="dontCancelOnBlur()" (click)="select(undefined)">
       -
     </div>

src/main/angular/src/app/shared/search/search.component.less

@@ -1,22 +1,30 @@
+@import "../../../config";
+
 .all {
+
   .initial {
-    padding: 5px;
+    padding: @padding;
     height: 100%;
   }
 
   .selected {
     font-weight: bold;
-    border-bottom: 1px solid black;
+    border-bottom: @border solid black;
   }
 
   .resultList {
-    position: absolute;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
     background-color: lightgray;
-    min-width: 200px;
+    min-width: 10em;
-    border: 1px solid black;
+    border: @border solid black;
 
     .result {
-      padding: 5px;
+      padding: @padding;
     }
 
     .result:hover {

src/main/angular/src/app/shared/search/search.component.ts

@@ -7,25 +7,21 @@ import {ISearchService} from "../../api/ISearchService";
   templateUrl: './search.component.html',
   styleUrls: ['./search.component.less']
 })
-export class SearchComponent<T> implements OnInit {
+export class SearchComponent implements OnInit {
 
   private changedTimeout: number | undefined;
 
+  private initial_?: number;
+
   @ViewChild('input')
   input2?: ElementRef;
 
   @ViewChild('input')
   input?: HTMLInputElement;
 
-  @ViewChild('resultList')
-  resultList?: HTMLDivElement;
-
   @Input()
   searchService!: ISearchService;
 
-  @Input()
-  initial?: number;
-
   @Input()
   allowEmpty: boolean = true;
 
@@ -42,13 +38,24 @@ export class SearchComponent<T> implements OnInit {
 
   cancelOnBlur: boolean = true;
 
+  @Input()
+  set initial(value: number | undefined) {
+    this.initial_ = value;
+    if (this.initial) {
+      this.searchService.searchById(this.initial, result => this.selected = result, _ => _);
+    } else {
+      this.selected = undefined;
+    }
+  }
+
+  get initial(): number {
+    return this.initial_;
+  }
+
   constructor() {
   }
 
   ngOnInit(): void {
-    if (this.initial) {
-      this.searchService.searchById(this.initial, result => this.selected = result, _ => _);
-    }
   }
 
   changed(): void {
@@ -65,9 +72,6 @@ export class SearchComponent<T> implements OnInit {
 
   start(): void {
     this.term = this.selected?.title || "";
-    if (this.resultList && this.input) {
-      this.resultList.style.left = this.input.style.left;
-    }
     this.searching = true;
     setTimeout(() => this.input2?.nativeElement.focus(), 0);
     this.doSearch();

src/main/angular/src/app/shared/text/text.component.html

@@ -1,5 +1,5 @@
 <input #input *ngIf="editing" type="text" [(ngModel)]="value" (keydown.enter)="finish()" (blur)="finish()">
 <div *ngIf="!editing" [class.empty]="initial == ''" (click)="start()">
   <ng-container *ngIf="initial != ''">{{initial}}</ng-container>
-  <ng-container *ngIf="initial == ''">-</ng-container>
+  <ng-container *ngIf="!initial">-</ng-container>
 </div>

src/main/angular/src/app/shared/text/text.component.ts

@@ -28,6 +28,9 @@ export class TextComponent implements OnInit {
   }
 
   finish(): void {
+    if (!this.editing) {
+      return;
+    }
     this.editing = false;
     if (this.value != this.initial) {
       this.valueChange.emit(this.value);

src/main/angular/src/assets/checked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
+</svg>

src/main/angular/src/assets/delete.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="M175 175C184.4 165.7 199.6 165.7 208.1 175L255.1 222.1L303 175C312.4 165.7 327.6 165.7 336.1 175C346.3 184.4 346.3 199.6 336.1 208.1L289.9 255.1L336.1 303C346.3 312.4 346.3 327.6 336.1 336.1C327.6 346.3 312.4 346.3 303 336.1L255.1 289.9L208.1 336.1C199.6 346.3 184.4 346.3 175 336.1C165.7 327.6 165.7 312.4 175 303L222.1 255.1L175 208.1C165.7 199.6 165.7 184.4 175 175V175zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
+</svg>

src/main/angular/src/assets/dice.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(-220.000000, -8079.000000)">
+    <g transform="translate(56.000000, 160.000000)">
+      <path
+        d="M174,7927.1047 C172.896,7927.1047 172,7927.9997 172,7929.1047 C172,7930.2097 172.896,7931.1047 174,7931.1047 C175.104,7931.1047 176,7930.2097 176,7929.1047 C176,7927.9997 175.104,7927.1047 174,7927.1047 L174,7927.1047 Z M182,7921.9997 C182,7921.4477 181.552,7920.9997 181,7920.9997 L167,7920.9997 C166.448,7920.9997 166,7921.4477 166,7921.9997 L166,7935.9997 C166,7936.5527 166.448,7936.9997 167,7936.9997 L181,7936.9997 C181.552,7936.9997 182,7936.5527 182,7935.9997 L182,7921.9997 Z M184,7920.9997 L184,7936.9997 C184,7938.1047 183.105,7938.9997 182,7938.9997 L166,7938.9997 C164.896,7938.9997 164,7938.1047 164,7936.9997 L164,7920.9997 C164,7919.8957 164.896,7918.9997 166,7918.9997 L182,7918.9997 C183.105,7918.9997 184,7919.8957 184,7920.9997 L184,7920.9997 Z M170,7927.1047 C171.104,7927.1047 172,7926.2097 172,7925.1047 C172,7923.9997 171.104,7923.1047 170,7923.1047 C168.896,7923.1047 168,7923.9997 168,7925.1047 C168,7926.2097 168.896,7927.1047 170,7927.1047 L170,7927.1047 Z M170,7931.1047 C168.896,7931.1047 168,7931.9997 168,7933.1047 C168,7934.2097 168.896,7935.1047 170,7935.1047 C171.104,7935.1047 172,7934.2097 172,7933.1047 C172,7931.9997 171.104,7931.1047 170,7931.1047 L170,7931.1047 Z M178,7923.1047 C176.896,7923.1047 176,7923.9997 176,7925.1047 C176,7926.2097 176.896,7927.1047 178,7927.1047 C179.104,7927.1047 180,7926.2097 180,7925.1047 C180,7923.9997 179.104,7923.1047 178,7923.1047 L178,7923.1047 Z M180,7933.1047 C180,7934.2097 179.104,7935.1047 178,7935.1047 C176.896,7935.1047 176,7934.2097 176,7933.1047 C176,7931.9997 176.896,7931.1047 178,7931.1047 C179.104,7931.1047 180,7931.9997 180,7933.1047 L180,7933.1047 Z"></path>
+    </g>
+  </g>
+</svg>

src/main/angular/src/assets/down.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 9L12 15L6 9" stroke="#33363F" stroke-width="2"/>
+</svg>

src/main/angular/src/assets/right.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9 6L15 12L9 18" stroke="#33363F" stroke-width="2"/>
+</svg>

src/main/angular/src/assets/skip.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="8" cy="37" r="6"/>
+  <path d="M24,31a6,6,0,1,0,6,6A6,6,0,0,0,24,31Zm0,8a2,2,0,1,1,2-2A2,2,0,0,1,24,39Z"/>
+  <circle cx="40" cy="37" r="6"/>
+  <path d="M37.4,19.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7l4,3.9a1.9,1.9,0,0,0,2.8,0l4-3.9a2.3,2.3,0,0,0,.3-2.7,2,2,0,0,0-3.1-.2l-.6.6A18,18,0,0,0,6,21v2a2,2,0,0,0,4,0V21a14,14,0,0,1,28-.9Z"/>
+</svg>

src/main/angular/src/assets/sun.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="5"/>
+  <path d="M12 2V4" stroke-linecap="round"/>
+  <path d="M12 20V22" stroke-linecap="round"/>
+  <path d="M4 12L2 12" stroke-linecap="round"/>
+  <path d="M22 12L20 12" stroke-linecap="round"/>
+  <path d="M19.7778 4.22266L17.5558 6.25424" stroke-linecap="round"/>
+  <path d="M4.22217 4.22266L6.44418 6.25424" stroke-linecap="round"/>
+  <path d="M6.44434 17.5557L4.22211 19.7779" stroke-linecap="round"/>
+  <path d="M19.7778 19.7773L17.5558 17.5551" stroke-linecap="round"/>
+</svg>

src/main/angular/src/assets/time.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 7V12L10.5 14.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke-linecap="round"/>
+</svg>

src/main/angular/src/assets/unchecked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
+</svg>

src/main/angular/src/config.less

@@ -0,0 +1,53 @@
+@margin: 0.5em;
+@padding: 0.2em;
+@border: 0.05em;
+@border-radius: 0.2em;
+
+@COLOR_UNKNOWN: gray;
+@COLOR_ACTIVE: #8fbc8f;
+@COLOR_BETWEEN: #e4db9c;
+@COLOR_INACTIVE: #bc8f8f;
+
+.disabledBack {
+  background-color: @COLOR_UNKNOWN;
+}
+
+.enabledBack {
+  background-color: @COLOR_ACTIVE;
+}
+
+.skipBack {
+  background-color: #ffc059;
+}
+
+.skipFont {
+  color: #ff9a00;
+}
+
+.fuzzyFont {
+  color: #489dff;
+}
+
+.fuzzyBack {
+  background-color: #88c0ff;
+}
+
+.deviceSwitchOnBack {
+  background-color: @COLOR_ACTIVE;
+}
+
+.deviceSwitchOffBack {
+  background-color: @COLOR_INACTIVE;
+}
+
+.deviceShutterOpenBack {
+  background-color: @COLOR_ACTIVE;
+}
+
+.deviceShutterIntermediateBack {
+  background-color: @COLOR_BETWEEN;
+}
+
+.deviceShutterClosedBack {
+  background-color: @COLOR_INACTIVE;
+}

src/main/angular/src/environments/environment.ts

@@ -1,20 +1,9 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 import {getBaseUrl} from "./UrlHelper";
 
+const PROD: boolean = false;
+
 export const environment = {
   production: false,
-  restBase: getBaseUrl('http', 8080),
+  restBase: PROD ? 'http://10.0.0.50:8082' : getBaseUrl('http', 8080),
-  websocketBase: getBaseUrl('ws', 8080),
+  websocketBase: PROD ? 'ws://10.0.0.50:8082' : getBaseUrl('ws', 8080),
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/main/angular/src/styles.less

@@ -1,6 +1,35 @@
+@import "config";
+
+* {
+  box-sizing: border-box;
+}
+
+// font
+body, input, select, button {
+  font-size: 5vw;
+  font-family: arial, sans-serif;
+  @media (min-width: 1001px) {
+    font-size: 18px;
+  }
+}
+
+// forms
+input, select, button {
+  width: 100%;
+  margin: 0;
+  border: none;
+  outline: none;
+  padding: 0.1em;
+  border-radius: @border-radius;
+}
+
+select {
+  margin-top: -0.1em;
+  background-color: transparent;
+}
+
 body {
   margin: 0;
-  font-family: arial, sans-serif;
   width: 100%;
 }
 
@@ -10,6 +39,8 @@ a {
 
 div {
   overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 img {
@@ -25,11 +56,11 @@ table {
 
   td, th {
     height: 0; // (=> auto growth) enables use of height percent for children
-    padding: 5px;
+    padding: @padding;
-    border: 1px solid black;
+    border: @border solid black;
 
     img.fullCell {
-      margin: -5px;
+      margin: calc(-@margin);
     }
   }
 
@@ -41,14 +72,6 @@ table.vertical {
   }
 }
 
-.center {
-  position: absolute;
-  margin: 0;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .empty {
   text-align: center;
   color: gray;
@@ -122,5 +145,19 @@ table.vertical {
 
 .config {
   clear: both;
-  margin-bottom: 5px;
+  margin: 0 @margin @margin;
+
+  @media (min-width: 1001px) {
+    width: 400px;
   }
+}
+
+.buttonPlus {
+  background-color: #8fbc8f;
+}
+
+.buttonMinus {
+  background-color: #ef8787;
+}
+
+@import "tile";

src/main/angular/src/tile.less

@@ -0,0 +1,77 @@
+@import "config";
+
+.tiles {
+  margin-top: @margin;
+  margin-left: @margin;
+
+  .tile {
+    border-radius: @border-radius;
+    margin-right: @margin;
+    margin-bottom: @margin;
+    background-color: #ececec;
+
+    @media (min-width: 1001px) {
+      width: 400px;
+      float: left;
+    }
+
+    .tileHead {
+      display: flex;
+
+      div {
+        float: left;
+        padding: @padding;
+      }
+
+      .tileHeadTitle {
+        flex-grow: 1;
+      }
+
+      .tileHeadRight {
+        float: right;
+      }
+
+      .tileHeadDelete {
+        float: right;
+        color: darkred;
+      }
+
+    }
+
+    .tileBody {
+      padding: @padding;
+    }
+
+    .tileBodyFlex {
+      display: flex;
+      padding: @padding;
+    }
+
+    .icon {
+      display: inline;
+      vertical-align: bottom;
+      height: 1.1em;
+    }
+
+  }
+
+  .flexGrow {
+    flex-grow: 1;
+  }
+
+  .flexHalf {
+    width: 50%;
+  }
+
+  .flexIcon {
+    float: left;
+    width: 1.5em;
+    text-align: center;
+  }
+
+  .flexIconInput {
+    float: left;
+    width: calc(100% - 1.5em);
+  }
+
+}

src/main/java/de/ph87/homeautomation/Config.java

@@ -13,8 +13,6 @@ public class Config {
 
   private double longitude = 6.9645334;
 
-  private String timezone = "Europe/Berlin";
-
   private boolean insertDemoData = false;
 
 }

src/main/java/de/ph87/homeautomation/DemoDataService.java

@@ -7,6 +7,7 @@ import de.ph87.homeautomation.bulk.BulkDto;
 import de.ph87.homeautomation.bulk.entry.BulkEntryController;
 import de.ph87.homeautomation.bulk.entry.BulkEntryCreateDto;
 import de.ph87.homeautomation.channel.Channel;
+import de.ph87.homeautomation.device.DeviceController;
 import de.ph87.homeautomation.property.Property;
 import de.ph87.homeautomation.property.PropertyRepository;
 import de.ph87.homeautomation.property.PropertyType;
@@ -39,27 +40,37 @@ public class DemoDataService {
 
   private final ScheduleEntryController scheduleEntryController;
 
+  private final DeviceController deviceController;
+
   public void insertDemoData() {
     if (!config.isInsertDemoData()) {
       return;
     }
-    final Property propertyDirect = createProperty("propertyDirect", PropertyType.BOOLEAN, null, null);
+
-    final Property propertyBulkBoolean = createProperty("propertyBulkBoolean", PropertyType.BOOLEAN, null, null);
+    final long schedule = createSchedule(true, "Schedule");
-    final Property propertyBulkShutter = createProperty("propertyBulkShutter", PropertyType.SHUTTER, null, null);
+
-    final Property propertyBulkBrightness = createProperty("propertyBulkBrightness", PropertyType.BRIGHTNESS_PERCENT, null, null);
+    deviceController.create("DeviceSwitch");
-    final Property propertyBulkColorTemperature = createProperty("propertyBulkColorTemperature", PropertyType.COLOR_TEMPERATURE, null, null);
+    deviceController.create("DeviceSwitch");
-    final BulkDto bulk = bulkController.create(new BulkCreateDto("bulk", true));
+    deviceController.create("DeviceSwitch");
-    bulkEntryController.create(new BulkEntryCreateDto(bulk.getId(), propertyBulkBoolean.getId(), 1, 0));
+    deviceController.create("DeviceShutter");
-    bulkEntryController.create(new BulkEntryCreateDto(bulk.getId(), propertyBulkShutter.getId(), 35, 0));
+    deviceController.create("DeviceShutter");
-    bulkEntryController.create(new BulkEntryCreateDto(bulk.getId(), propertyBulkBrightness.getId(), 40, 0));
+    deviceController.create("DeviceShutter");
-    bulkEntryController.create(new BulkEntryCreateDto(bulk.getId(), propertyBulkColorTemperature.getId(), 55, 0));
+
-    final long scheduleId = createSchedule(true, "schedule");
+    final Property propWeihnachtsbeleuchtung = createProperty("Weihnachtsbeleuchtung", null, PropertyType.BOOLEAN, null, null);
+    final BulkDto bulkWeihnachtsbeleuchtungAn = bulkController.create(new BulkCreateDto("Weihnachtsbeleuchtung An", true));
+    bulkEntryController.create(new BulkEntryCreateDto(bulkWeihnachtsbeleuchtungAn.getId(), propWeihnachtsbeleuchtung.getId(), 35, 0));
     final ZonedDateTime now = ZonedDateTime.now().plusSeconds(3);
-    createTime(scheduleId, true, now.getHour(), now.getMinute(), now.getSecond(), 0, propertyDirect, 1, bulk);
+    createTime(schedule, true, now.getHour(), now.getMinute(), now.getSecond(), 0, 1, bulkWeihnachtsbeleuchtungAn);
+
+    final Property propRollladenSchlafzimmer = createProperty("Schlafzimmer", null, PropertyType.SHUTTER, null, null);
+    final BulkDto bulkRollladenSchlafzimmerAufstehen = bulkController.create(new BulkCreateDto("Rollladen Schlafzimmer Aufstehen", true));
+    bulkEntryController.create(new BulkEntryCreateDto(bulkRollladenSchlafzimmerAufstehen.getId(), propRollladenSchlafzimmer.getId(), 1, 0));
+    createSunrise(schedule, true, Zenith.CIVIL, 0, 1, bulkRollladenSchlafzimmerAufstehen);
   }
 
-  private Property createProperty(final String title, final PropertyType type, final Channel readChannel, final Channel writeChannel) {
+  private Property createProperty(final String title, final String slug, final PropertyType type, final Channel readChannel, final Channel writeChannel) {
     final Property property = propertyRepository.findByTitle(title).orElseGet(() -> propertyRepository.save(new Property(title, type)));
+    property.setSlug(slug == null || slug.isEmpty() ? null : slug);
     property.setReadChannel(readChannel);
     property.setWriteChannel(writeChannel);
     return property;
@@ -72,24 +83,26 @@ public class DemoDataService {
     return id;
   }
 
-  private void createTime(final long scheduleId, final boolean enabled, final int hour, final int minute, final int second, final int fuzzySeconds, final Property property, final double value, final BulkDto bulk) {
+  private void createTime(final long scheduleId, final boolean enabled, final int hour, final int minute, final int second, final int fuzzySeconds, final double value, final BulkDto bulk) {
-    newScheduleEntry(scheduleId, enabled, ScheduleEntryType.TIME, null, hour, minute, second, fuzzySeconds, property, value, bulk);
+    newScheduleEntry(scheduleId, enabled, ScheduleEntryType.TIME, null, hour, minute, second, fuzzySeconds, value, bulk);
   }
 
-  private void newScheduleEntry(final long scheduleId, final boolean enabled, final ScheduleEntryType type, final Zenith zenith, final int hour, final int minute, final int second, final int fuzzySeconds, final Property property, final double value, final BulkDto bulk) {
+  private void createSunrise(final long scheduleId, final boolean enabled, final Zenith zenith, final int fuzzySeconds, final double value, final BulkDto bulk) {
+    newScheduleEntry(scheduleId, enabled, ScheduleEntryType.SUNRISE, zenith, 0, 0, 0, fuzzySeconds, value, bulk);
+  }
+
+  private void newScheduleEntry(final long scheduleId, final boolean enabled, final ScheduleEntryType type, final Zenith zenith, final int hour, final int minute, final int second, final int fuzzySeconds, final double value, final BulkDto bulk) {
     final long id = scheduleEntryController.create(scheduleId).getId();
     scheduleEntryController.setEnabled(id, enabled);
     scheduleEntryController.setType(id, type.name());
     if (zenith != null) {
       scheduleEntryController.setZenith(id, zenith.degrees() + "");
     }
-    scheduleEntryController.setHour(id, hour);
+    scheduleEntryController.daySecond(id, (hour * 60 + minute) * 60 + second);
-    scheduleEntryController.setMinute(id, minute);
-    scheduleEntryController.setSecond(id, second);
     scheduleEntryController.setFuzzySeconds(id, fuzzySeconds);
-    scheduleEntryController.setProperty(id, property == null ? null : property.getId());
     scheduleEntryController.setValue(id, value);
     scheduleEntryController.setBulk(id, bulk == null ? null : bulk.getId());
+    scheduleEntryController.setSkip(id, 1);
   }
 
 }

src/main/java/de/ph87/homeautomation/RepositorySearchHelper.java

@@ -0,0 +1,36 @@
+package de.ph87.homeautomation;
+
+import jakarta.persistence.criteria.Expression;
+import jakarta.persistence.criteria.Predicate;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Sort;
+import org.springframework.data.jpa.domain.Specification;
+import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
+
+import java.util.Arrays;
+import java.util.List;
+import java.util.Locale;
+import java.util.function.Function;
+
+public class RepositorySearchHelper {
+
+  public static <T, D> List<D> search(final String term, final JpaSpecificationExecutor<T> repository, final String fieldName, final Function<T, D> map) {
+    final Specification<T> specification = (root, query, criteriaBuilder) -> {
+      final Expression<String> field = criteriaBuilder.lower(root.get(fieldName));
+      final String term2 = term
+          .replaceAll("([a-zA-Z])([0-9])", "$1 $2")
+          .replaceAll("([0-9])([a-zA-Z])", "$1 $2")
+          .replaceAll("([A-Z])([A-Z])", "$1 $2")
+          .replaceAll("([a-z])([A-Z])", "$1 $2")
+          .toLowerCase(Locale.ROOT);
+      final List<Predicate> predicates = Arrays.stream(term2.split("\\s"))
+          .filter(word -> !word.isEmpty())
+          .map(word -> criteriaBuilder.like(field, "%" + word + "%"))
+          .toList();
+      return criteriaBuilder.and(predicates.toArray(Predicate[]::new));
+    };
+    final PageRequest pageRequest = PageRequest.of(0, 20, Sort.by(Sort.Direction.ASC, fieldName));
+    return repository.findAll(specification, pageRequest).stream().map(map).toList();
+  }
+
+}

src/main/java/de/ph87/homeautomation/StartupService.java

@@ -1,7 +1,7 @@
 package de.ph87.homeautomation;
 
 import de.ph87.homeautomation.knx.group.KnxGroupImportService;
-import de.ph87.homeautomation.property.PropertyWriteService;
+import de.ph87.homeautomation.property.PropertyWriter;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.boot.context.event.ApplicationStartedEvent;
@@ -17,13 +17,13 @@ public class StartupService {
 
   private final DemoDataService demoDataService;
 
-  private final PropertyWriteService propertyWriteService;
+  private final PropertyWriter propertyWriter;
 
   @EventListener(ApplicationStartedEvent.class)
   public void startup() {
     knxGroupImportService.importGroups();
     demoDataService.insertDemoData();
-    propertyWriteService.updateAllProperties();
+    propertyWriter.updateAllProperties();
   }
 
 }

src/main/java/de/ph87/homeautomation/bulk/Bulk.java

@@ -1,12 +1,12 @@
 package de.ph87.homeautomation.bulk;
 
 import de.ph87.homeautomation.bulk.entry.BulkEntry;
+import jakarta.persistence.*;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
 import lombok.Setter;
 import lombok.ToString;
 
-import javax.persistence.*;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -40,6 +40,12 @@ public class Bulk {
     return entries.size();
   }
   
+  public Bulk(final Bulk original, final String name) {
+    this.enabled = original.isEnabled();
+    this.name = name;
+    this.entries = original.getEntries().stream().map(BulkEntry::new).toList();
+  }
+  
   public Bulk(final BulkCreateDto dto) {
     this.enabled = dto.isEnabled();
     this.name = dto.getName();

src/main/java/de/ph87/homeautomation/bulk/BulkController.java

@@ -1,13 +1,11 @@
 package de.ph87.homeautomation.bulk;
 
-import de.ph87.homeautomation.property.PropertyReader;
+import de.ph87.homeautomation.shared.*;
-import de.ph87.homeautomation.shared.ISearchController;
+import lombok.*;
-import de.ph87.homeautomation.shared.SearchResult;
+import org.springframework.data.domain.*;
-import lombok.RequiredArgsConstructor;
-import org.springframework.data.domain.Page;
 import org.springframework.web.bind.annotation.*;
 
-import java.util.List;
+import java.util.*;
 
 @RestController
 @RequestMapping("bulk")
@@ -18,8 +16,6 @@ public class BulkController implements ISearchController {
 
   private final BulkReader bulkReader;
 
-  private final PropertyReader propertyReader;
-
   @PostMapping("create")
   public BulkDto create(@RequestBody final BulkCreateDto dto) {
     return bulkWriter.createDto(dto);
@@ -35,6 +31,16 @@ public class BulkController implements ISearchController {
     bulkWriter.delete(id);
   }
   
+  @GetMapping("run/{id}")
+  public void run(@PathVariable final long id) {
+    bulkWriter.run(id);
+  }
+  
+  @GetMapping("duplicate/{id}")
+  public BulkDto duplicate(@PathVariable final long id) {
+    return bulkWriter.duplicate(id);
+  }
+  
   @PostMapping("set/{id}/name")
   public BulkDto name(@PathVariable final long id, @RequestBody final String name) {
     return bulkWriter.set(id, bulk -> bulk.setName(name));
@@ -61,7 +67,7 @@ public class BulkController implements ISearchController {
   @PostMapping("searchLike")
   @Deprecated(since = "Use 'filter' instead", forRemoval = true)
   public List<SearchResult> searchLike(@RequestBody final String term) {
-    return bulkReader.findAllDtoLike("%" + term + "%").stream().map(this::toSearchResult).toList();
+    return bulkReader.search(term).stream().map(this::toSearchResult).toList();
   }
 
   @GetMapping("findAll")

src/main/java/de/ph87/homeautomation/bulk/BulkExecutor.java

@@ -1,6 +1,6 @@
 package de.ph87.homeautomation.bulk;
 
-import de.ph87.homeautomation.property.PropertyWriteService;
+import de.ph87.homeautomation.property.PropertyWriter;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
@@ -12,11 +12,15 @@ import org.springframework.transaction.annotation.Transactional;
 @RequiredArgsConstructor
 public class BulkExecutor {
 
-  private final PropertyWriteService propertyWriteService;
+  private final PropertyWriter propertyWriter;
 
   public void execute(final Bulk bulk) {
+    if (!bulk.isEnabled()) {
+      log.info("Bulk disabled, not executing it: {}", bulk);
+      return;
+    }
     log.info("Executing Bulk: {}", bulk);
-    bulk.getEntries().forEach(entry -> propertyWriteService.writeToChannel(entry.getProperty(), entry.getValue()));
+    bulk.getEntries().forEach(entry -> propertyWriter.writeToChannel(entry.getProperty(), entry.getValue()));
     log.debug("Finished executing Bulk: {}", bulk);
   }
 

src/main/java/de/ph87/homeautomation/bulk/BulkFilter.java

@@ -1,9 +1,9 @@
 package de.ph87.homeautomation.bulk;
 
 import de.ph87.homeautomation.common.Filter;
+import jakarta.persistence.criteria.Predicate;
 import org.springframework.data.jpa.domain.Specification;
 
-import javax.persistence.criteria.Predicate;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.List;

src/main/java/de/ph87/homeautomation/bulk/BulkReader.java

@@ -1,14 +1,15 @@
 package de.ph87.homeautomation.bulk;
 
-import de.ph87.homeautomation.property.Property;
+import de.ph87.homeautomation.*;
-import de.ph87.homeautomation.web.NotFoundException;
+import de.ph87.homeautomation.property.*;
-import lombok.RequiredArgsConstructor;
+import de.ph87.homeautomation.web.*;
-import lombok.extern.slf4j.Slf4j;
+import lombok.*;
-import org.springframework.data.domain.Page;
+import lombok.extern.slf4j.*;
-import org.springframework.stereotype.Service;
+import org.springframework.data.domain.*;
-import org.springframework.transaction.annotation.Transactional;
+import org.springframework.stereotype.*;
+import org.springframework.transaction.annotation.*;
 
-import java.util.List;
+import java.util.*;
 
 @Slf4j
 @Service
@@ -50,4 +51,8 @@ public class BulkReader {
     return bulkRepository.findDistinctByEntries_Property(property);
   }
 
+  public List<BulkDto> search(final String term) {
+    return RepositorySearchHelper.search(term, bulkRepository, "name", bulkMapper::toDto);
+  }
+
 }

src/main/java/de/ph87/homeautomation/bulk/BulkRepository.java

@@ -1,11 +1,9 @@
 package de.ph87.homeautomation.bulk;
 
-import de.ph87.homeautomation.property.Property;
+import de.ph87.homeautomation.property.*;
-import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.*;
-import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
 
-import java.util.List;
+import java.util.*;
-import java.util.Optional;
 
 public interface BulkRepository extends JpaRepository<Bulk, Long>, JpaSpecificationExecutor<Bulk> {
   
@@ -16,4 +14,6 @@ public interface BulkRepository extends JpaRepository<Bulk, Long>, JpaSpecificat
   
   List<Bulk> findDistinctByEntries_Property(Property property);
   
+  boolean existsByName(String name);
+  
 }

src/main/java/de/ph87/homeautomation/bulk/BulkWriter.java

@@ -1,11 +1,11 @@
 package de.ph87.homeautomation.bulk;
 
-import lombok.RequiredArgsConstructor;
+import lombok.*;
-import lombok.extern.slf4j.Slf4j;
+import lombok.extern.slf4j.*;
-import org.springframework.stereotype.Service;
+import org.springframework.stereotype.*;
-import org.springframework.transaction.annotation.Transactional;
+import org.springframework.transaction.annotation.*;
 
-import java.util.function.Consumer;
+import java.util.function.*;
 
 @Slf4j
 @Service
@@ -19,6 +19,8 @@ public class BulkWriter {
   
   private final BulkMapper bulkMapper;
   
+  private final BulkExecutor bulkExecutor;
+  
   public Bulk create(final BulkCreateDto dto) {
     final Bulk bulk = bulkRepository.save(new Bulk(dto));
     log.info("Bulk created: {}", bulk);
@@ -31,6 +33,24 @@ public class BulkWriter {
     log.info("Bulk deleted: {}", bulk);
   }
   
+  public void run(final long id) {
+    final Bulk bulk = bulkReader.getById(id);
+    bulkExecutor.execute(bulk);
+  }
+  
+  public BulkDto duplicate(final long id) {
+    final Bulk original = bulkReader.getById(id);
+    int number = 1;
+    while (true) {
+      final String copyName = original.getName() + " Kopie " + number;
+      if (!bulkRepository.existsByName(copyName)) {
+        final Bulk copy = bulkRepository.save(new Bulk(original, copyName));
+        log.info("Bulk duplicated: {}", copy);
+        return bulkMapper.toDto(copy);
+      }
+    }
+  }
+  
   public BulkDto set(final long id, final Consumer<Bulk> consumer) {
     final Bulk bulk = bulkReader.getById(id);
     consumer.accept(bulk);

src/main/java/de/ph87/homeautomation/bulk/entry/BulkEntry.java

@@ -1,13 +1,12 @@
 package de.ph87.homeautomation.bulk.entry;
 
 import de.ph87.homeautomation.property.Property;
+import jakarta.persistence.*;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
 import lombok.Setter;
 import lombok.ToString;
 
-import javax.persistence.*;
-
 @Entity
 @Getter
 @ToString
@@ -41,4 +40,11 @@ public class BulkEntry {
     this.value = dto.getValue();
   }
   
+  @SuppressWarnings("CopyConstructorMissesField")
+  public BulkEntry(final BulkEntry original) {
+    this.position = original.getPosition();
+    this.property = original.getProperty();
+    this.value = original.getValue();
+  }
+  
 }

src/main/java/de/ph87/homeautomation/channel/Channel.java

@@ -1,8 +1,8 @@
 package de.ph87.homeautomation.channel;
 
+import jakarta.persistence.*;
 import lombok.*;
 
-import javax.persistence.*;
 import java.time.ZonedDateTime;
 
 @Getter

src/main/java/de/ph87/homeautomation/channel/ChannelController.java

@@ -13,23 +13,23 @@ import java.util.List;
 @RequiredArgsConstructor
 public class ChannelController implements ISearchController {
 
-  private final ChannelService channelService;
+  private final ChannelReader channelReader;
 
   @GetMapping("findAll")
   public List<? extends ChannelDto> findAll() {
-    return channelService.findAllDto();
+    return channelReader.findAllDto();
   }
 
   @Override
   @GetMapping("searchById/{id}")
   public SearchResult searchById(@PathVariable final long id) {
-    return channelService.findDtoById(id).map(this::toSearchResult).orElseThrow(() -> new NotFoundException("Channel.id=" + id));
+    return channelReader.findDtoById(id).map(this::toSearchResult).orElseThrow(() -> new NotFoundException("Channel.id=" + id));
   }
 
   @Override
   @PostMapping("searchLike")
   public List<SearchResult> searchLike(@RequestBody final String term) {
-    return channelService.findAllDtoLike(term).stream().map(this::toSearchResult).toList();
+    return channelReader.findAllDtoLike(term).stream().map(this::toSearchResult).toList();
   }
 
   private SearchResult toSearchResult(final ChannelDto dto) {

src/main/java/de/ph87/homeautomation/channel/ChannelReader.java

@@ -2,6 +2,7 @@ package de.ph87.homeautomation.channel;
 
 import de.ph87.homeautomation.property.Property;
 import de.ph87.homeautomation.shared.Helpers;
+import lombok.NonNull;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
@@ -15,7 +16,7 @@ import java.util.Optional;
 @Service
 @Transactional
 @RequiredArgsConstructor
-public class ChannelService {
+public class ChannelReader {
 
   private final List<IChannelOwner> channelOwners;
 
@@ -29,12 +30,11 @@ public class ChannelService {
     return findByChannel(channel).orElseThrow(RuntimeException::new);
   }
 
-  public void write(final Property property, final double value) {
+  @NonNull
-    final Channel channel = property.getWriteChannel();
+  public Optional<Double> read(@NonNull final Property property) {
-    if (channel == null) {
+    return Optional.ofNullable(property.getReadChannel())
-      return;
+      .map(this::getByChannel)
-    }
+      .map(owner -> owner.read(property.getReadChannel().getId()));
-    getByChannel(channel).write(property.getWriteChannel().getId(), value);
   }
 
   public ChannelDto toDtoAllowNull(final Channel channel) {

src/main/java/de/ph87/homeautomation/channel/ChannelWriter.java

@@ -0,0 +1,36 @@
+package de.ph87.homeautomation.channel;
+
+import de.ph87.homeautomation.property.Property;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.List;
+import java.util.Optional;
+
+@Slf4j
+@Service
+@Transactional
+@RequiredArgsConstructor
+public class ChannelWriter {
+
+  private final List<IChannelOwner> channelOwners;
+
+  public Optional<IChannelOwner> findByChannel(final Channel channel) {
+    return channelOwners.stream().filter(owner -> channel.getChannelOwnerClass().isInstance(owner)).findFirst();
+  }
+
+  public IChannelOwner getByChannel(final Channel channel) {
+    return findByChannel(channel).orElseThrow(RuntimeException::new);
+  }
+
+  public void write(final Property property, final double value) {
+    final Channel channel = property.getWriteChannel();
+    if (channel == null) {
+      return;
+    }
+    getByChannel(channel).write(property.getWriteChannel().getId(), value);
+  }
+
+}

src/main/java/de/ph87/homeautomation/channel/IChannelOwner.java

@@ -6,6 +6,8 @@ public interface IChannelOwner {
 
   void requestUpdate(final Channel channel);
 
+  Double read(final long id);
+
   void write(final long id, final double value);
 
   ChannelDto toDto(final long id);

src/main/java/de/ph87/homeautomation/device/DeviceController.java

@@ -15,60 +15,60 @@ import static de.ph87.homeautomation.shared.Helpers.mapOrNull;
 @RequiredArgsConstructor
 public class DeviceController {
 
-  private final DeviceReadService deviceReadService;
+  private final DeviceReader deviceReader;
 
-  private final DeviceWriteService deviceWriteService;
+  private final DeviceWriter deviceWriter;
 
   private final PropertyReader propertyReader;
 
   @GetMapping("findAll")
   public List<DeviceDto> findAll() {
-    return deviceReadService.findAll();
+    return deviceReader.findAll();
   }
 
   @GetMapping("searchById/{id}")
   public DeviceDto getById(@PathVariable final long id) {
-    return deviceReadService.getDtoById(id);
+    return deviceReader.getDtoById(id);
   }
 
   @PostMapping("create")
   public DeviceDto create(@RequestBody final String typeString) {
-    return deviceWriteService.create(typeString);
+    return deviceWriter.create(typeString);
   }
 
   @GetMapping("delete/{id}")
   public void delete(@PathVariable final long id) {
-    deviceWriteService.delete(id);
+    deviceWriter.delete(id);
   }
 
   @PostMapping("set/{id}/enabled")
   public DeviceDto setEnabled(@PathVariable final long id, @RequestBody final boolean enabled) {
-    return deviceWriteService.set(id, Device::setEnabled, enabled);
+    return deviceWriter.set(id, Device::setEnabled, enabled);
   }
 
   @PostMapping("set/{id}/title")
   public DeviceDto setName(@PathVariable final long id, @RequestBody final String title) {
-    return deviceWriteService.set(id, Device::setTitle, title);
+    return deviceWriter.set(id, Device::setTitle, title);
   }
 
   @PostMapping("set/{id}/DeviceSwitch/stateProperty")
   public DeviceDto setDeviceSwitchStateProperty(@PathVariable final long id, @RequestBody(required = false) final Long propertyId) {
-    return deviceWriteService.setDeviceSwitch(id, (device, v) -> device.setStateProperty(mapOrNull(v, propertyReader::getById)), propertyId);
+    return deviceWriter.setDeviceSwitch(id, (device, v) -> device.setStateProperty(mapOrNull(v, propertyReader::getById)), propertyId);
   }
 
   @PostMapping("set/{id}/DeviceStateScene/stateProperty")
   public DeviceDto setDeviceStateSceneStateProperty(@PathVariable final long id, @RequestBody(required = false) final Long propertyId) {
-    return deviceWriteService.setDeviceStateScene(id, (device, v) -> device.setStateProperty(mapOrNull(v, propertyReader::getById)), propertyId);
+    return deviceWriter.setDeviceStateScene(id, (device, v) -> device.setStateProperty(mapOrNull(v, propertyReader::getById)), propertyId);
   }
 
   @PostMapping("set/{id}/DeviceStateScene/sceneProperty")
   public DeviceDto setDeviceStateSceneSceneProperty(@PathVariable final long id, @RequestBody(required = false) final Long propertyId) {
-    return deviceWriteService.setDeviceStateScene(id, (device, v) -> device.setSceneProperty(mapOrNull(v, propertyReader::getById)), propertyId);
+    return deviceWriter.setDeviceStateScene(id, (device, v) -> device.setSceneProperty(mapOrNull(v, propertyReader::getById)), propertyId);
   }
 
   @PostMapping("set/{id}/DeviceShutter/positionProperty")
   public DeviceDto setDeviceShutterPositionProperty(@PathVariable final long id, @RequestBody(required = false) final Long propertyId) {
-    return deviceWriteService.setDeviceShutter(id, (device, v) -> device.setPositionProperty(mapOrNull(v, propertyReader::getById)), propertyId);
+    return deviceWriter.setDeviceShutter(id, (device, v) -> device.setPositionProperty(mapOrNull(v, propertyReader::getById)), propertyId);
   }
 
 }

src/main/java/de/ph87/homeautomation/device/DeviceReader.java

@@ -16,7 +16,7 @@ import static de.ph87.homeautomation.shared.Helpers.mapOrNull;
 @Service
 @Transactional
 @RequiredArgsConstructor
-public class DeviceReadService {
+public class DeviceReader {
 
   private final DeviceRepository deviceRepository;
 
@@ -27,14 +27,11 @@ public class DeviceReadService {
   }
 
   public DeviceDto toDto(final Device device) {
-    if (device instanceof DeviceSwitch) {
+    if (device instanceof final DeviceSwitch deviceSwitch) {
-      final DeviceSwitch deviceSwitch = (DeviceSwitch) device;
       return new DeviceSwitchDto(deviceSwitch, mapOrNull(deviceSwitch.getStateProperty(), propertyMapper::toDto));
-    } else if (device instanceof DeviceStateScene) {
+    } else if (device instanceof final DeviceStateScene deviceStateScene) {
-      final DeviceStateScene deviceStateScene = (DeviceStateScene) device;
       return new DeviceStateSceneDto(deviceStateScene, mapOrNull(deviceStateScene.getStateProperty(), propertyMapper::toDto), mapOrNull(deviceStateScene.getSceneProperty(), propertyMapper::toDto));
-    } else if (device instanceof DeviceShutter) {
+    } else if (device instanceof final DeviceShutter deviceShutter) {
-      final DeviceShutter deviceShutter = (DeviceShutter) device;
       return new DeviceShutterDto(deviceShutter, mapOrNull(deviceShutter.getPositionProperty(), propertyMapper::toDto));
     }
     throw new RuntimeException();

src/main/java/de/ph87/homeautomation/device/DeviceShutterRepository.java

@@ -0,0 +1,13 @@
+package de.ph87.homeautomation.device;
+
+import de.ph87.homeautomation.device.devices.DeviceShutter;
+import de.ph87.homeautomation.property.Property;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.List;
+
+public interface DeviceShutterRepository extends JpaRepository<DeviceShutter, Long> {
+
+  List<DeviceShutter> findDistinctByPositionProperty(Property property);
+
+}

src/main/java/de/ph87/homeautomation/device/DeviceStateSceneRepository.java

@@ -0,0 +1,13 @@
+package de.ph87.homeautomation.device;
+
+import de.ph87.homeautomation.device.devices.DeviceStateScene;
+import de.ph87.homeautomation.property.Property;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.List;
+
+public interface DeviceStateSceneRepository extends JpaRepository<DeviceStateScene, Long> {
+
+  List<DeviceStateScene> findDistinctByStatePropertyOrSceneProperty(Property state, Property scene);
+
+}

src/main/java/de/ph87/homeautomation/device/DeviceSwitchRepository.java

@@ -0,0 +1,13 @@
+package de.ph87.homeautomation.device;
+
+import de.ph87.homeautomation.device.devices.DeviceSwitch;
+import de.ph87.homeautomation.property.Property;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.List;
+
+public interface DeviceSwitchRepository extends JpaRepository<DeviceSwitch, Long> {
+
+  List<DeviceSwitch> findDistinctByStateProperty(Property property);
+
+}

src/main/java/de/ph87/homeautomation/device/DeviceWriter.java

@@ -2,6 +2,7 @@ package de.ph87.homeautomation.device;
 
 import de.ph87.homeautomation.device.devices.*;
 import de.ph87.homeautomation.property.Property;
+import de.ph87.homeautomation.property.PropertyDto;
 import de.ph87.homeautomation.scene.SceneDto;
 import de.ph87.homeautomation.schedule.ScheduleWriter;
 import de.ph87.homeautomation.web.BadRequestException;
@@ -10,22 +11,32 @@ import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
+import org.springframework.transaction.event.TransactionPhase;
+import org.springframework.transaction.event.TransactionalEventListener;
 
 import java.util.Arrays;
 import java.util.function.BiConsumer;
 
+import static de.ph87.homeautomation.shared.Helpers.getCurrentTransactionName;
+
 @Slf4j
 @Service
 @Transactional
 @RequiredArgsConstructor
-public class DeviceWriteService {
+public class DeviceWriter {
 
   private final DeviceRepository deviceRepository;
 
-  private final DeviceReadService deviceReadService;
+  private final DeviceReader deviceReader;
 
   private final WebSocketService webSocketService;
 
+  @TransactionalEventListener(phase = TransactionPhase.AFTER_COMPLETION)
+  public void onPropertyChanged(final PropertyDto dto) {
+    log.debug("Listen [{}]: {}", getCurrentTransactionName(), dto.getTitle());
+    // TODO
+  }
+
   public DeviceDto createDeviceSwitch(final Property stateProperty) {
     return createDeviceSwitch(null, stateProperty);
   }
@@ -65,13 +76,13 @@ public class DeviceWriteService {
   }
 
   public <T> DeviceDto set(final long id, final BiConsumer<Device, T> setter, final T value) {
-    final Device device = deviceReadService.getById(id);
+    final Device device = deviceReader.getById(id);
     setter.accept(device, value);
     return publish(device, true);
   }
 
   public <T> DeviceDto setDeviceSwitch(final long id, final BiConsumer<DeviceSwitch, T> setter, final T value) {
-    final Device device = deviceReadService.getById(id);
+    final Device device = deviceReader.getById(id);
     if (!(device instanceof DeviceSwitch)) {
       throw new BadRequestException("Not a DeviceSwitch: %s", device);
     }
@@ -80,7 +91,7 @@ public class DeviceWriteService {
   }
 
   public <T> DeviceDto setDeviceStateScene(final long id, final BiConsumer<DeviceStateScene, T> setter, final T value) {
-    final Device device = deviceReadService.getById(id);
+    final Device device = deviceReader.getById(id);
     if (!(device instanceof DeviceStateScene)) {
       throw new BadRequestException("Not a DeviceStateScene: %s", device);
     }
@@ -89,7 +100,7 @@ public class DeviceWriteService {
   }
 
   public <T> DeviceDto setDeviceShutter(final long id, final BiConsumer<DeviceShutter, T> setter, final T value) {
-    final Device device = deviceReadService.getById(id);
+    final Device device = deviceReader.getById(id);
     if (!(device instanceof DeviceShutter)) {
       throw new BadRequestException("Not a DeviceShutter: %s", device);
     }
@@ -98,7 +109,7 @@ public class DeviceWriteService {
   }
 
   public void delete(final long id) {
-    final Device device = deviceReadService.getById(id);
+    final Device device = deviceReader.getById(id);
     deviceRepository.delete(device);
     publish(device, false);
   }
@@ -118,7 +129,7 @@ public class DeviceWriteService {
   }
 
   private DeviceDto publish(final Device device, final boolean existing) {
-    return publish(deviceReadService.toDto(device), existing);
+    return publish(deviceReader.toDto(device), existing);
   }
 
   private DeviceDto publish(final DeviceDto dto, final boolean existing) {

src/main/java/de/ph87/homeautomation/device/devices/Device.java

@@ -1,12 +1,11 @@
 package de.ph87.homeautomation.device.devices;
 
+import jakarta.persistence.*;
 import lombok.AccessLevel;
 import lombok.Getter;
 import lombok.Setter;
 import lombok.ToString;
 
-import javax.persistence.*;
-
 @Getter
 @Setter
 @ToString

src/main/java/de/ph87/homeautomation/device/devices/DeviceShutter.java

@@ -1,13 +1,12 @@
 package de.ph87.homeautomation.device.devices;
 
 import de.ph87.homeautomation.property.Property;
+import jakarta.persistence.Entity;
+import jakarta.persistence.ManyToOne;
 import lombok.Getter;
 import lombok.Setter;
 import lombok.ToString;
 
-import javax.persistence.Entity;
-import javax.persistence.ManyToOne;
-
 @Getter
 @Setter
 @ToString

src/main/java/de/ph87/homeautomation/device/devices/DeviceStateScene.java

@@ -1,14 +1,14 @@
 package de.ph87.homeautomation.device.devices;
 
 import de.ph87.homeautomation.property.Property;
+import jakarta.persistence.ElementCollection;
+import jakarta.persistence.Entity;
+import jakarta.persistence.FetchType;
+import jakarta.persistence.ManyToOne;
 import lombok.Getter;
 import lombok.Setter;
 import lombok.ToString;
 
-import javax.persistence.ElementCollection;
-import javax.persistence.Entity;
-import javax.persistence.FetchType;
-import javax.persistence.ManyToOne;
 import java.util.ArrayList;
 import java.util.List;
 

src/main/java/de/ph87/homeautomation/device/devices/DeviceSwitch.java

@@ -1,13 +1,12 @@
 package de.ph87.homeautomation.device.devices;
 
 import de.ph87.homeautomation.property.Property;
+import jakarta.persistence.Entity;
+import jakarta.persistence.ManyToOne;
 import lombok.Getter;
 import lombok.Setter;
 import lombok.ToString;
 
-import javax.persistence.Entity;
-import javax.persistence.ManyToOne;
-
 @Getter
 @Setter
 @ToString