KNXIllegalArgumentException when reading wrong DPT 2

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.target>17</maven.compiler.target>
+    <maven.compiler.source>21</maven.compiler.source>
+    <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

@@ -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,18 +1,37 @@
-import {validateListOrEmpty, 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 slug: string | 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 {
@@ -25,8 +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']),
+      validateStringEmptyToNull(json['slug']),
       Channel.fromJsonAllowNull(json['readChannel']),
       Channel.fromJsonAllowNull(json['writeChannel']),
       validateListOrEmpty(json['usages'], SearchResult.fromJson),
@@ -51,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,6 +5,8 @@ export class Schedule {
 
   readonly next?: ScheduleEntry;
 
+  readonly last?: ScheduleEntry;
+
   constructor(
     readonly id: number,
     readonly enabled: boolean,
@@ -12,6 +14,7 @@ export class Schedule {
     readonly entries: ScheduleEntry[],
   ) {
     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";
-
-function getDaySeconds(date: Date): number {
-  return date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
-}
+import {formatNumber} from "@angular/common";
 
 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;
-    border-right: 1px solid black;
+    padding: @padding;
+    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 [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>
+              <option *ngFor="let _ of [].constructor(21); let value = index" [ngValue]="value * 5">{{value * 5}}%</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>
-  <tr>
-    <th>&nbsp;</th>
-    <th>Bezeichnung</th>
-    <th>&nbsp;</th>
-  </tr>
-  <tr *ngFor="let bulk of bulks.sort(Bulk.compareName); trackBy: Bulk.trackBy">
+<div class="tiles">
+  <div class="tile" *ngFor="let bulk of bulks.sort(Bulk.compareName); trackBy: Bulk.trackBy">
+    <div class="tileHead disabledBack" [class.enabledBack]="bulk.enabled">
 
-    <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}]">
-      {{bulk.name}}
-    </td>
+      <div class="flexGrow" [routerLink]="['/Bulk', {id: bulk.id}]">
+        {{ bulk.name }}
+      </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>
-</table>
+    </div>
+  </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>
-  <tr>
-    <th>Titel</th>
-    <th>Typ</th>
-    <th colspan="3">Adresse</th>
-    <th>DPT</th>
-    <th colspan="2">Wert</th>
-  </tr>
-  <tr *ngFor="let channel of channels">
-    <td>{{channel.title}}</td>
-    <td>{{channel.type}}</td>
+<div class="tiles">
+  <div class="tile" *ngFor="let channel of channels">
+    <div>
+      {{ channel.title }}
+    </div>
+    <div class="left">
+      {{ channel.type }}
+    </div>
     <ng-container *ngIf="channel.type === 'KnxGroup'">
-      <td class="first number">{{asKnxGroup(channel).addresMain}}&nbsp;/&nbsp;</td>
-      <td class="middle number">{{asKnxGroup(channel).addresMid}}&nbsp;/&nbsp;</td>
-      <td class="last number">{{asKnxGroup(channel).addresSub}}</td>
-      <td class="number">{{asKnxGroup(channel).dpt}}</td>
+      <div class="left">
+        {{ asKnxGroup(channel).addresMain }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresMid }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresSub }}
+      </div>
+      <div class="right">
+        DPT {{ asKnxGroup(channel).dpt }}
+      </div>
     </ng-container>
-    <ng-container *ngIf="channel.type === 'Logic'">
-      <td colspan="4">{{asLogic(channel).operator}}</td>
-    </ng-container>
-    <td class="number">{{channel.value}}</td>
-    <td>{{channel.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
-  </tr>
-</table>
+    <div class="timestamp">
+      {{ channel.timestamp | date:'yyyy-MM-dd HH:mm:ss' || '-' }}
+    </div>
+    <div class="value">
+      {{ channel.value || '-' }}
+    </div>
+  </div>
+</div>

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

@@ -1,3 +1,23 @@
-table {
-  width: 100%;
+@import "../../../../config";
+
+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="config">
-  <select [(ngModel)]="createType">
-    <option ngValue="DeviceSwitch">Schalter</option>
-    <option ngValue="DeviceShutter">Rollladen</option>
-  </select>
-  <button (click)="create()">+ Hinzufügen</button>
-</div>
+<div class="tiles">
 
-<ng-container *ngFor="let device of devices.sort(Device.comparePosition); trackBy: Device.trackBy">
-  <ng-container [ngSwitch]="device.type">
+  <ng-container *ngFor="let device of devices; trackBy: Device.trackBy">
 
-    <div class="device" *ngSwitchCase="'DeviceSwitch'" [ngClass]="getSwitchClassList(device)">
-      <div class="title">
-        {{device.title}}
+    <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="edit" [routerLink]="['/Device', {id: device.id}]">
+        <div class="tileHeadRight" [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 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="device" *ngSwitchCase="'DeviceStateScene'" [ngClass]="getStateSceneClassList(device)">
-      <div class="title">
-        {{device.title}}
+    <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="edit" [routerLink]="['/Device', {id: device.id}]">
+        <div class="tileHeadRight" [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 class="tileBody">
+        <div class="control" *ngFor="let scene of getStateScenes(device)" (click)="deviceService.setStateScene(device, scene.number)">
+          {{ scene.title }}
         </div>
       </div>
     </div>
 
-    <div class="device" *ngSwitchCase="'DeviceShutter'" [ngClass]="getShutterClassList(device)">
-      <div class="title">
-        {{device.title}}
+    <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="edit" [routerLink]="['/Device', {id: device.id}]">
+        <div class="tileHeadRight" [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 class="tileBody">
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 0)">
+          Auf
         </div>
-        <div class="control button" (click)="deviceService.setShutterPosition(device, 75)">
-          <span class="center">90%</span>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 20)">
+          20%
         </div>
-        <div class="control button" (click)="deviceService.setShutterPosition(device, 85)">
-          <span class="center">Schlitze</span>
+        <div class="control controlShutter" (click)="deviceService.setShutterPosition(device, 30)">
+          30%
         </div>
-        <div class="control button" (click)="deviceService.setShutterPosition(device, 100)">
-          <span class="center">Zu</span>
+        <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>
-</ng-container>
+
+</div>
+
+<div class="config">
+  <button (click)="create()">+ Hinzufügen</button>
+</div>

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

@@ -1,71 +1,17 @@
-.device {
-  padding: 5px;
-  margin-bottom: 5px;
-  border-radius: 10px;
+@import "../../../../config";
 
-  @media (min-width: 1000px) {
+.control {
   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;
-      height: 60px;
-      padding: 5px;
-      margin: 5px;
+  width: 4em;
+  aspect-ratio: 1;
+  margin: @margin;
   border-radius: 25%;
-    }
-
-    .button {
-      background-color: lightblue;
-    }
-
-    .control:hover {
-      background-color: lightskyblue;
-    }
-
-  }
 }
 
-.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;
+.controlShutter {
+  width: 17.3%;
+  padding-top: 1.1em;
+  text-align: center;
+  margin: calc(@margin / 2);
+  background-color: lightsteelblue;
 }

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 {
-    const value: number | null | undefined = (device as DeviceSwitch).stateProperty?.readChannel?.value;
-    return {
-      switchOn: value === 1,
-      switchOff: value === 0,
-      switchUnknown: value === null || value === undefined,
-    };
+  getStateScenes(device: Device): Scene[] {
+    const casted: DeviceStateScene = device as DeviceStateScene;
+    return casted.sceneNumbers.map(sceneNumber => this.scenes.find(scene => scene.number === sceneNumber)).filter(scene => scene !== undefined).map(s => s as Scene);
   }
 
-  getStateSceneClassList(device: Device): object {
-    return this.getSwitchClassList(device);
-  }
-
-  getShutterClassList(device: Device): object {
-    const value: number | null | undefined = (device as DeviceShutter).positionProperty?.readChannel?.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);
+  set(device: Device, key: string, value: any): void {
+    this.deviceService.set(device, key, value);
   }
 
 }

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">
-  <button (click)="create()">+ Hinzufügen</button>
-</div>
+<div class="tiles">
 
-<table>
-  <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>
+  <div *ngFor="let list of listLists()">
+    <div class="tile" *ngFor="let property of list">
 
-      <td>
+      <div class="tileHead" [ngClass]="property.getStateClassList()">
         <app-text [initial]="property.title" (valueChange)="edit(property, 'title', $event)"></app-text>
-      </td>
+      </div>
+
+      <div class="tileBody">
 
-      <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.readChannel?.value !== null else empty">
-        <td *ngIf="property.type === 'BOOLEAN'" class="boolean" [class.true]="property.readChannel?.value" [class.false]="!property.readChannel?.value" (click)="edit(property, 'value', property.readChannel?.value > 0 ? 0 : 1)">
-          {{property.readChannel?.value ? "An" : "Aus"}}
-        </td>
-        <td *ngIf="property.type === 'SHUTTER'" class="number" [class.true]="property.readChannel?.value === 0" [class.false]="property.readChannel?.value === 100" [class.tristate]="0 < property.readChannel?.value && property.readChannel?.value < 100">
-          {{property.readChannel?.value}} %
-        </td>
-        <td *ngIf="property.type === 'BRIGHTNESS_PERCENT'" class="number">
-          {{property.readChannel?.value}} %
-        </td>
-        <td *ngIf="property.type === 'COLOR_TEMPERATURE'" class="number">
-          {{property.readChannel?.value}} K
-        </td>
-        <td *ngIf="property.type === 'LUX'" class="number">
-          {{property.readChannel?.value | number:'0.0-0'}} lux
-        </td>
-        <td *ngIf="property.type === 'SCENE'">
-          {{findScene(property)?.title || "Unbekannt: " + property.readChannel?.value}}
-        </td>
-      </ng-container>
-
-      <td *ngIf="property.readChannel?.timestamp !== null else empty">
-        {{property.readChannel?.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>
-  </ng-container>
-</table>
+      </div>
+
+    </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 {
-  width: 100%;
+@import "../../../../config";
+
+.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);
     }
   }
 
@@ -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">
-    <td class="boolean" (click)="set(entry, key, !value)" [class.true]="value" [class.false]="!value">
-      <fa-icon *ngIf="value" [icon]="faCheckCircle"></fa-icon>
-      <fa-icon *ngIf="!value" [icon]="faCircle"></fa-icon>
-    </td>
-  </ng-template>
+  <div id="title">
+    <app-text [initial]="schedule.title" (valueChange)="scheduleService.set(schedule, 'title', $event)"></app-text>
+  </div>
 
-  <table>
-    <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>
+  <div class="tiles">
 
-      <td>
-        <select [ngModel]="entry.type" (ngModelChange)="set(entry, 'type', $event)">
-          <option value="TIME">Uhrzeit</option>
-          <option value="SUNRISE">Sonnenaufgang</option>
-          <option value="SUNSET">Sonnenuntergang</option>
+    <div class="tile" *ngFor="let entry of schedule.entries; trackBy: ScheduleEntry.trackBy">
+
+      <div class="tileHead disabledBack" [class.enabledBack]="entry.executable" [class.skipBack]="entry.skip">
+        <div class="enabled" (click)="set(entry, 'enabled', !entry.enabled)">
+          <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'">
-        <td>
-          <select [ngModel]="entry.zenith" (ngModelChange)="set(entry, 'zenith', $event)">
-            <option value="87">
-              [&nbsp;87°]
-              <ng-container *ngIf="entry.type === 'SUNRISE'">Nach Sonnenaufgang</ng-container>
-              <ng-container *ngIf="entry.type === 'SUNSET'">Vor Sonnenuntergang</ng-container>
-            </option>
-            <option value="90.8333">
-              [&nbsp;90°]
-              <ng-container *ngIf="entry.type === 'SUNRISE'">Sonnenaufgang</ng-container>
-              <ng-container *ngIf="entry.type === 'SUNSET'">Sonnenuntergang</ng-container>
-            </option>
-            <option value="93">[&nbsp;93°]</option>
-            <option value="96">[&nbsp;96°] Bürgerliche Dämmerung</option>
-            <option value="99">[&nbsp;99°]</option>
-            <option value="102">[102°] Nautische Dämmerung</option>
-            <option value="105">[105°]</option>
-            <option value="108">[108°] Astronomische Dämmerung</option>
-          </select>
-        </td>
-      </ng-container>
-      <td *ngIf="entry.type !== 'SUNRISE' && entry.type !== 'SUNSET'" class="empty"></td>
+      <div class="tileBodyFlex">
+        <div class="weekdays">
+          <div>
+            <app-bool label="Mo" [value]="entry.monday" (onChange)="entryService.set(entry, 'monday', $event)"></app-bool>
+          </div>
+          <div>
+            <app-bool label="Di" [value]="entry.tuesday" (onChange)="entryService.set(entry, 'tuesday', $event)"></app-bool>
+          </div>
+          <div>
+            <app-bool label="Mi" [value]="entry.wednesday" (onChange)="entryService.set(entry, 'wednesday', $event)"></app-bool>
+          </div>
+          <div>
+            <app-bool label="Do" [value]="entry.thursday" (onChange)="entryService.set(entry, 'thursday', $event)"></app-bool>
+          </div>
+          <div>
+            <app-bool label="Fr" [value]="entry.friday" (onChange)="entryService.set(entry, 'friday', $event)"></app-bool>
+          </div>
+          <div>
+            <app-bool label="Sa" [value]="entry.saturday" (onChange)="entryService.set(entry, 'saturday', $event)"></app-bool>
+          </div>
+          <div>
+            <app-bool label="So" [value]="entry.sunday" (onChange)="entryService.set(entry, 'sunday', $event)"></app-bool>
+          </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'">
-        <td class="first">
-          <select [ngModel]="entry.hour" (ngModelChange)="set(entry, 'hour', $event)">
-            <option *ngFor="let _ of [].constructor(24); let value = index" [ngValue]="value">{{value}}</option>
-          </select>
-        </td>
-        <td class="middle">:</td>
-        <td class="last">
-          <select [ngModel]="entry.minute" (ngModelChange)="set(entry, 'minute', $event)">
-            <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>
+      <div class="tileBodyFlex" *ngIf="entry.type === 'TIME'">
+        <div class="flexGrow time">
+          <button class="buttonPlus" (click)="dayMinuteAdd(entry, +60)">+</button>
+          <button class="buttonMinus" (click)="dayMinuteAdd(entry, -60)">-</button>
+          <input type="time" [ngModel]="entry.time" (ngModelChange)="timeFromString(entry, $event)">
+          <button class="buttonPlus" (click)="dayMinuteAdd(entry, +1)">+</button>
+          <button class="buttonMinus" (click)="dayMinuteAdd(entry, -1)">-</button>
+        </div>
+      </div>
 
-      <td>
-        <select [ngModel]="entry.fuzzySeconds" (ngModelChange)="set(entry, 'fuzzySeconds', $event)">
-          <option [ngValue]="0">Keine</option>
-          <option [ngValue]="60">1 Minute</option>
-          <option [ngValue]="300">5 Minuten</option>
-          <option [ngValue]="600">10 Minuten</option>
-          <option [ngValue]="1800">30 Minuten</option>
-          <option [ngValue]="3600">1 Stunde</option>
-          <option [ngValue]="7200">2 Stunden</option>
-          <option [ngValue]="10800">3 Stunden</option>
-          <option [ngValue]="21600">6 Stunden</option>
-          <option [ngValue]="43200">12 Stunden</option>
-          <option [ngValue]="86400">1 Tag</option>
-        </select>
-      </td>
+      <div class="tileBodyFlex" *ngIf="entry.type === 'SUNRISE' || entry.type === 'SUNSET'">
+        <div class="flexGrow sun">
+          <div *ngFor="let zenith of getZenithEntries(entry.type)">
+            <app-bool [label]="zenith.title" [value]="entry.zenith === zenith.value" (onChange)="entryService.set(entry, 'zenith', zenith.value)"></app-bool>
+          </div>
+          <div>
+            <input type="number" min="45" max="120" [ngModel]="entry.zenith" (ngModelChange)="entryService.set(entry, 'zenith', $event || 0)">
+          </div>
+        </div>
+      </div>
 
-      <ng-container *ngIf="entry.nextClearTimestamp">
-        <td class="number first" [class.empty]="entry.fuzzySeconds > 0">{{entry.nextClearTimestamp.dayName}}</td>
-        <td class="number middle" [class.empty]="entry.fuzzySeconds > 0">:&nbsp;</td>
-        <td class="number last" [class.empty]="entry.fuzzySeconds > 0">{{entry.nextClearTimestamp.timeString}}</td>
-      </ng-container>
-      <ng-container *ngIf="!entry.nextClearTimestamp">
-        <td class="empty first"></td>
-        <td class="empty middle"></td>
-        <td class="empty last"></td>
-      </ng-container>
+      <div class="tileBodyFlex">
+        <div class="flexHalf">
+          <div class="flexIcon">
+            <img class="icon" src="assets/dice.svg" alt="+/-" title="Zufallsabweichung +/-">
+          </div>
+          <div class="flexIconInput">
+            <app-duration [duration]="Duration.ofCode(entry.fuzzySeconds + 's')" [inputClass]="entry.fuzzySeconds ? 'fuzzyBack' : ''" [min]="Duration.ofCode('')" (onChange)="entryService.set(entry, 'fuzzySeconds', $event.totalSeconds)"></app-duration>
+          </div>
+        </div>
+        <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">
-        <td class="number first">{{entry.nextFuzzyTimestamp.dayName}}</td>
-        <td class="number middle">:&nbsp;</td>
-        <td class="number last">{{entry.nextFuzzyTimestamp.timeString}}</td>
-      </ng-container>
-      <ng-container *ngIf="!entry.nextFuzzyTimestamp || entry.fuzzySeconds <= 0">
-        <td class="empty first"></td>
-        <td class="empty middle"></td>
-        <td class="empty last"></td>
-      </ng-container>
+      <div class="tileBodyFlex">
+        <div class="flexGrow timestamp" [class.skipFont]="entry.skip" *ngIf="entry.executable">
+          {{ timeService.relativeDate(entry.nextFuzzyTimestamp) }}
+          <span [class.fuzzyFont]="entry.fuzzySeconds" *ngIf="entry.fuzzySeconds">
+            (eig: {{ entry.nextClearTimestamp.date | date:'HH:mm' }})
+          </span>
+        </div>
+        <div class="flexGrow inactive" *ngIf="entry.todo">
+          {{ entry.todo }}
+        </div>
+      </div>
 
-      <td>
-        <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', $event)">
-            <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', $event)">
-            <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', $event)">
-            <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', $event)">
-            <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', $event)">
-            <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>
+    </div>
 
-      <td>
-        <app-search [searchService]="bulkService" [initial]="entry.bulk?.id" (valueChange)="set(entry, 'bulk', $event)"></app-search>
-      </td>
+  </div>
 
-      <td class="delete noBorderFirst" (click)="delete(entry)">
-        <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>
+  <div class="config">
     <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 {
-  background-color: transparent;
-  border-width: 0;
-  width: 100%;
-  outline: none;
-  font-family: monospace;
+@import "../../../../config";
+
+@time_input_width: 35%;
+
+#title {
+  margin: @margin;
 }
 
-th {
-  background-color: lightblue;
-}
+.weekdays {
+  float: left;
+  width: 75%;
+  border-radius: @border-radius;
 
-tr.header {
-
-  th:not(:first-child), td:not(:first-child) {
-    border: none;
+  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%;
+
+  input {
+    width: @time_input_width;
+    text-align: center;
+    margin-right: @margin;
+  }
+
+  button {
+    width: calc(((100% - @time_input_width) - 4 * @margin) / 4);
+    margin-right: @margin;
+  }
+
+  button:last-child {
+    margin-right: 0;
+  }
+
+}
+
+.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 propertyService: PropertyService,
+    readonly entryService: ScheduleEntryService,
     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.activatedRoute.params.subscribe(params => this.scheduleService.getById(params['id'], schedule => this.schedule = schedule));
+    this.bulkService.findAll(list => this.bulks = list);
+    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?")) {
-      this.scheduleEntryService.delete(entry, NO_OP);
+    if (confirm("Eintrag \"" + this.timeService.relativeDate(entry.nextClearTimestamp) + " +/-" + entry.fuzzySeconds + "\" wirklich löschen?")) {
+      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>
-  <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">
+<div class="tiles">
 
-    <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}]">
-      {{schedule.title}}
-    </td>
+      <div class="flexGrow" [routerLink]="['/Schedule', {id: schedule.id}]">
+        {{ schedule.title }}
+      </div>
 
-    <td class="number first" [class.empty]="!schedule.next?.nextFuzzyTimestamp">{{schedule.next?.nextFuzzyTimestamp.dayName}}</td>
-    <td class="number middle" [class.empty]="!schedule.next?.nextFuzzyTimestamp">:&nbsp;</td>
-    <td class="number last" [class.empty]="!schedule.next?.nextFuzzyTimestamp">{{schedule.next?.nextFuzzyTimestamp.timeString}}</td>
+      <div class="tileHeadRight" (click)="skip(schedule.next)" *ngIf="schedule.next">
+        <img class="icon" src="assets/skip.svg" [alt]="'Über.'">{{ schedule.next?.skip }}
+      </div>
 
-    <td class="number first" [class.empty]="!schedule.next?.property">{{schedule.next?.property?.title}}</td>
-    <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)">
+      <div class="tileHeadRight" (click)="delete(schedule)">
         <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
-    </td>
+      </div>
 
-  </tr>
-</table>
+    </div>
 
-<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 {
-  background-color: transparent;
-  border-width: 0;
-  width: 100%;
-  outline: none;
-  font-family: monospace;
+@import "../../../../config";
+
+.last {
+  color: gray;
+  font-size: 60%;
+  border-top: @border solid gray;
 }
 
-th {
-  background-color: lightblue;
+.timestamp {
+  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;
-    border: 1px solid black;
+    min-width: 10em;
+    border: @border solid black;
 
     .result {
-      padding: 5px;
+      padding: @padding;
     }
 
     .result:hover {

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

@@ -7,7 +7,7 @@ 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;
 
@@ -19,9 +19,6 @@ export class SearchComponent<T> implements OnInit {
   @ViewChild('input')
   input?: HTMLInputElement;
 
-  @ViewChild('resultList')
-  resultList?: HTMLDivElement;
-
   @Input()
   searchService!: ISearchService;
 
@@ -75,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/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),
-  websocketBase: getBaseUrl('ws', 8080),
+  restBase: PROD ? 'http://10.0.0.50:8082' : getBaseUrl('http', 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;
-    border: 1px solid black;
+    padding: @padding;
+    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 Property propertyBulkShutter = createProperty("propertyBulkShutter", PropertyType.SHUTTER, null, null);
-    final Property propertyBulkBrightness = createProperty("propertyBulkBrightness", PropertyType.BRIGHTNESS_PERCENT, null, null);
-    final Property propertyBulkColorTemperature = createProperty("propertyBulkColorTemperature", PropertyType.COLOR_TEMPERATURE, null, null);
-    final BulkDto bulk = bulkController.create(new BulkCreateDto("bulk", true));
-    bulkEntryController.create(new BulkEntryCreateDto(bulk.getId(), propertyBulkBoolean.getId(), 1, 0));
-    bulkEntryController.create(new BulkEntryCreateDto(bulk.getId(), propertyBulkShutter.getId(), 35, 0));
-    bulkEntryController.create(new BulkEntryCreateDto(bulk.getId(), propertyBulkBrightness.getId(), 40, 0));
-    bulkEntryController.create(new BulkEntryCreateDto(bulk.getId(), propertyBulkColorTemperature.getId(), 55, 0));
-    final long scheduleId = createSchedule(true, "schedule");
+
+    final long schedule = createSchedule(true, "Schedule");
+
+    deviceController.create("DeviceSwitch");
+    deviceController.create("DeviceSwitch");
+    deviceController.create("DeviceSwitch");
+    deviceController.create("DeviceShutter");
+    deviceController.create("DeviceShutter");
+    deviceController.create("DeviceShutter");
+
+    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) {
-    newScheduleEntry(scheduleId, enabled, ScheduleEntryType.TIME, null, hour, minute, second, fuzzySeconds, property, value, 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, 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.setMinute(id, minute);
-    scheduleEntryController.setSecond(id, second);
+    scheduleEntryController.daySecond(id, (hour * 60 + minute) * 60 + 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/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,12 +1,11 @@
 package de.ph87.homeautomation.bulk;
 
-import de.ph87.homeautomation.shared.ISearchController;
-import de.ph87.homeautomation.shared.SearchResult;
-import lombok.RequiredArgsConstructor;
-import org.springframework.data.domain.Page;
+import de.ph87.homeautomation.shared.*;
+import lombok.*;
+import org.springframework.data.domain.*;
 import org.springframework.web.bind.annotation.*;
 
-import java.util.List;
+import java.util.*;
 
 @RestController
 @RequestMapping("bulk")
@@ -32,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));
@@ -58,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/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.web.NotFoundException;
-import lombok.RequiredArgsConstructor;
-import lombok.extern.slf4j.Slf4j;
-import org.springframework.data.domain.Page;
-import org.springframework.stereotype.Service;
-import org.springframework.transaction.annotation.Transactional;
+import de.ph87.homeautomation.*;
+import de.ph87.homeautomation.property.*;
+import de.ph87.homeautomation.web.*;
+import lombok.*;
+import lombok.extern.slf4j.*;
+import org.springframework.data.domain.*;
+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 org.springframework.data.jpa.repository.JpaRepository;
-import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
+import de.ph87.homeautomation.property.*;
+import org.springframework.data.jpa.repository.*;
 
-import java.util.List;
-import java.util.Optional;
+import java.util.*;
 
 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.extern.slf4j.Slf4j;
-import org.springframework.stereotype.Service;
-import org.springframework.transaction.annotation.Transactional;
+import lombok.*;
+import lombok.extern.slf4j.*;
+import org.springframework.stereotype.*;
+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/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;
@@ -29,12 +30,11 @@ public class ChannelReader {
     return findByChannel(channel).orElseThrow(RuntimeException::new);
   }
 
-  public Double read(final Property property) {
-    final Channel channel = property.getReadChannel();
-    if (channel == null) {
-      return null;
-    }
-    return getByChannel(channel).read(property.getReadChannel().getId());
+  @NonNull
+  public Optional<Double> read(@NonNull final Property property) {
+    return Optional.ofNullable(property.getReadChannel())
+      .map(this::getByChannel)
+      .map(owner -> owner.read(property.getReadChannel().getId()));
   }
 
   public ChannelDto toDtoAllowNull(final Channel channel) {

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

src/main/java/de/ph87/homeautomation/knx/group/KnxGroup.java

@@ -2,12 +2,12 @@ package de.ph87.homeautomation.knx.group;
 
 import de.ph87.homeautomation.channel.Channel;
 import de.ph87.homeautomation.channel.IChannelOwner;
+import jakarta.persistence.Column;
+import jakarta.persistence.Embedded;
+import jakarta.persistence.Entity;
 import lombok.*;
 import tuwien.auto.calimero.GroupAddress;
 
-import javax.persistence.Column;
-import javax.persistence.Embedded;
-import javax.persistence.Entity;
 import java.time.ZonedDateTime;
 
 @Getter

src/main/java/de/ph87/homeautomation/knx/group/KnxGroupChannelOwnerService.java

@@ -19,6 +19,8 @@ public class KnxGroupChannelOwnerService implements IChannelOwner {
 
   private final KnxGroupReader knxGroupReader;
 
+  private final KnxGroupMapper knxGroupMapper;
+
   @Override
   public void requestUpdate(final Channel channel) {
     knxGroupWriter.requestRead((KnxGroup) channel);
@@ -36,21 +38,17 @@ public class KnxGroupChannelOwnerService implements IChannelOwner {
 
   @Override
   public KnxGroupDto toDto(final long id) {
-    return toDto(knxGroupReader.getById(id));
-  }
-
-  public KnxGroupDto toDto(final KnxGroup knxGroup) {
-    return new KnxGroupDto(knxGroup);
+    return knxGroupMapper.toDto(knxGroupReader.getById(id));
   }
 
   @Override
   public List<KnxGroupDto> findAllDto() {
-    return knxGroupReader.findAll().stream().map(this::toDto).toList();
+    return knxGroupReader.findAll().stream().map(knxGroupMapper::toDto).toList();
   }
 
   @Override
-  public List<KnxGroupDto> findAllDtoLikeIgnoreCase(final String like) {
-    return knxGroupReader.findAllLike(like).stream().map(this::toDto).toList();
+  public List<KnxGroupDto> findAllDtoLikeIgnoreCase(final String term) {
+    return knxGroupReader.search(term);
   }
 
 }

src/main/java/de/ph87/homeautomation/knx/group/KnxGroupImportController.java

@@ -0,0 +1,20 @@
+package de.ph87.homeautomation.knx.group;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@RequiredArgsConstructor
+@RequestMapping("knx/group")
+public class KnxGroupImportController {
+
+  private final KnxGroupImportService knxGroupImportService;
+
+  @GetMapping("import")
+  public void doImport() {
+    knxGroupImportService.importGroups();
+  }
+
+}

src/main/java/de/ph87/homeautomation/knx/group/KnxGroupImportService.java

@@ -1,5 +1,6 @@
 package de.ph87.homeautomation.knx.group;
 
+import de.ph87.homeautomation.property.PropertyReader;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.jsoup.Jsoup;
@@ -23,6 +24,8 @@ public class KnxGroupImportService {
 
   private final KnxGroupRepository knxGroupRepository;
 
+  private final PropertyReader propertyReader;
+
   public void importGroups() {
     try {
       execute("/usr/bin/git", "fetch", "--all");
@@ -34,6 +37,18 @@ public class KnxGroupImportService {
     knxGroupRepository.findAll().forEach(knxGroup -> knxGroup.setEts(false));
     try {
       Jsoup.parse(new File(ETS_HOME, "G"), "UTF-8").select("GA").forEach(this::importGroup);
+      knxGroupRepository.findAllByEtsFalse().forEach(group -> {
+        log.warn("Removing obsolete group: {}", group);
+        propertyReader.findAllByReadChannel_Id(group.getId()).forEach(property -> {
+          property.setReadChannel(null);
+          log.warn("  - removed group as Property readChannel: {}", property);
+        });
+        propertyReader.findAllByWriteChannel_Id(group.getId()).forEach(property -> {
+          property.setWriteChannel(null);
+          log.warn("  - removed group as Property writeChannel: {}", property);
+        });
+        knxGroupRepository.delete(group);
+      });
     } catch (IOException e) {
       log.error("Failed to import KnxGroups: {}", e.toString());
     }
@@ -73,7 +88,13 @@ public class KnxGroupImportService {
   private void setDpt(final KnxGroup knxGroup, final String dptString) {
     final Matcher mainSub = Pattern.compile("^DPST-(?<main>\\d+)-(?<sub>\\d+)$").matcher(dptString);
     if (mainSub.matches()) {
-      knxGroup.setDptMain(Integer.parseInt(mainSub.group("main")));
+      final int main = Integer.parseInt(mainSub.group("main"));
+      if (knxGroup.getDptMain() != main) {
+        knxGroup.setLastTelegram(null);
+        knxGroup.setValue(null);
+        knxGroup.setTimestamp(null);
+      }
+      knxGroup.setDptMain(main);
       knxGroup.setDptSub(Integer.parseInt(mainSub.group("sub")));
       return;
     }

src/main/java/de/ph87/homeautomation/knx/group/KnxGroupLinkInfo.java

@@ -1,11 +1,11 @@
 package de.ph87.homeautomation.knx.group;
 
+import jakarta.persistence.Embeddable;
 import lombok.Getter;
 import lombok.Setter;
 import lombok.ToString;
 import lombok.extern.slf4j.Slf4j;
 
-import javax.persistence.Embeddable;
 import java.time.ZonedDateTime;
 
 @Slf4j

src/main/java/de/ph87/homeautomation/knx/group/KnxGroupLinkService.java

@@ -4,10 +4,7 @@ import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
-import tuwien.auto.calimero.GroupAddress;
-import tuwien.auto.calimero.KNXException;
-import tuwien.auto.calimero.KNXFormatException;
-import tuwien.auto.calimero.KNXTimeoutException;
+import tuwien.auto.calimero.*;
 import tuwien.auto.calimero.datapoint.StateDP;
 import tuwien.auto.calimero.dptxlator.TranslatorTypes;
 import tuwien.auto.calimero.process.ProcessCommunicatorImpl;
@@ -74,6 +71,12 @@ public class KnxGroupLinkService {
       knxGroup.getRead().setNextTimestamp(null);
       log.debug("Successfully sent KnxGroup: {}", knxGroup);
       return true;
+    } catch (KNXIllegalArgumentException e) {
+      log.error("Failed to read KnxGroup {}", knxGroup);
+      knxGroup.getRead().setErrorCount(knxGroup.getRead().getErrorCount() + 1);
+      knxGroup.getRead().setErrorMessage(e.getMessage());
+      knxGroup.getRead().setNextTimestamp(null);
+      return true;
     } catch (KNXTimeoutException | KNXFormatException e) {
       log.error("Failed to read KnxGroup {}", knxGroup);
       knxGroup.getRead().setErrorCount(knxGroup.getRead().getErrorCount() + 1);

src/main/java/de/ph87/homeautomation/knx/group/KnxGroupReader.java

@@ -1,5 +1,6 @@
 package de.ph87.homeautomation.knx.group;
 
+import de.ph87.homeautomation.RepositorySearchHelper;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
@@ -17,6 +18,8 @@ public class KnxGroupReader {
 
   private final KnxGroupRepository knxGroupRepository;
 
+  private final KnxGroupMapper knxGroupMapper;
+
   public Optional<KnxGroup> getByAddress(final int main, final int mid, final int sub) {
     return knxGroupRepository.findByAddressRaw(new GroupAddress(main, mid, sub).getRawAddress());
   }
@@ -33,4 +36,8 @@ public class KnxGroupReader {
     return knxGroupRepository.findById(id).orElseThrow(RuntimeException::new);
   }
 
+  public List<KnxGroupDto> search(final String term) {
+    return RepositorySearchHelper.search(term, knxGroupRepository, "name", knxGroupMapper::toDto);
+  }
+
 }

src/main/java/de/ph87/homeautomation/knx/group/KnxGroupRepository.java

@@ -1,17 +1,16 @@
 package de.ph87.homeautomation.knx.group;
 
-import org.springframework.data.repository.CrudRepository;
+import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
+import org.springframework.data.repository.ListCrudRepository;
 
 import java.time.ZonedDateTime;
 import java.util.List;
 import java.util.Optional;
 
-public interface KnxGroupRepository extends CrudRepository<KnxGroup, Long> {
+public interface KnxGroupRepository extends ListCrudRepository<KnxGroup, Long>, JpaSpecificationExecutor<KnxGroup> {
 
   Optional<KnxGroup> findByAddressRaw(int rawAddress);
 
-  List<KnxGroup> findAll();
-
   Optional<KnxGroup> findFirstBySend_NextTimestampNotNullOrderBySend_NextTimestampAsc();
 
   Optional<KnxGroup> findFirstByRead_NextTimestampLessThanEqualOrderByRead_NextTimestampAsc(ZonedDateTime timestamp);
@@ -20,4 +19,6 @@ public interface KnxGroupRepository extends CrudRepository<KnxGroup, Long> {
 
   List<KnxGroup> findAllByNameContainsIgnoreCaseOrAddressStrContainsIgnoreCase(String name, String addressStr);
 
+  List<KnxGroup> findAllByEtsFalse();
+
 }

src/main/java/de/ph87/homeautomation/knx/group/KnxTelegram.java

@@ -1,11 +1,11 @@
 package de.ph87.homeautomation.knx.group;
 
+import jakarta.persistence.Embeddable;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
 import lombok.ToString;
 import tuwien.auto.calimero.IndividualAddress;
 
-import javax.persistence.Embeddable;
 import java.time.ZonedDateTime;
 
 @Getter

src/main/java/de/ph87/homeautomation/property/Property.java

@@ -1,10 +1,9 @@
 package de.ph87.homeautomation.property;
 
 import de.ph87.homeautomation.channel.Channel;
+import jakarta.persistence.*;
 import lombok.*;
 
-import javax.persistence.*;
-
 @Getter
 @Setter
 @ToString
@@ -24,6 +23,9 @@ public final class Property {
   @Column(nullable = false, unique = true)
   private String title;
 
+  @Column(unique = true)
+  private String slug;
+
   @ManyToOne
   private Channel readChannel;
 

src/main/java/de/ph87/homeautomation/property/PropertyController.java

@@ -39,6 +39,16 @@ public class PropertyController implements ISearchController {
     return propertyWriter.set(id, Property::setTitle, propertyTitle);
   }
 
+  @PostMapping("set/{id}/slug")
+  public PropertyDto setPropertySlug(@PathVariable final long id, @RequestBody(required = false) final String value) {
+    return propertyWriter.set(id, Property::setSlug, value == null || value.isEmpty() ? null : value);
+  }
+
+  @GetMapping("get/{id}/value")
+  public Double getValue(@PathVariable final long id) {
+    return channelReader.read(propertyReader.getById(id)).orElse(null);
+  }
+
   @PostMapping("set/{id}/value")
   public PropertyDto setValue(@PathVariable final long id, @RequestBody final double value) {
     return propertyWriter.set(id, propertyWriter::writeToChannel, value);
@@ -61,18 +71,10 @@ public class PropertyController implements ISearchController {
 
   @PostMapping("toggle/{id}")
   public PropertyDto setValue(@PathVariable final long id) {
-    final boolean oldState = getOldStateBoolean(id, false);
+    final boolean oldState = channelReader.read(propertyReader.getById(id)).map(v -> v > 0.0).orElse(false);
     return propertyWriter.set(id, propertyWriter::writeToChannel, oldState ? 0.0 : 1.0);
   }
 
-  private boolean getOldStateBoolean(final long id, final boolean orElse) {
-    final Double oldValue = channelReader.read(propertyReader.getById(id));
-    if (oldValue == null || oldValue.isNaN()) {
-      return orElse;
-    }
-    return oldValue > 0.0;
-  }
-
   @Override
   @GetMapping("searchById/{id}")
   public SearchResult searchById(@PathVariable final long id) {
@@ -82,11 +84,23 @@ public class PropertyController implements ISearchController {
   @Override
   @PostMapping("searchLike")
   public List<SearchResult> searchLike(@RequestBody final String term) {
-    return propertyReader.findAllDtoLike("%" + term + "%").stream().map(this::toSearchResult).toList();
+    return propertyReader.search(term).stream().map(this::toSearchResult).toList();
   }
 
   private SearchResult toSearchResult(final PropertyDto propertyDto) {
     return new SearchResult(Property.class, propertyDto.getId(), propertyDto.getTitle());
   }
 
+  @PostMapping("write/id/{id}/{value}")
+  public void write(@PathVariable final long id, @PathVariable final double value) {
+    final Property property = propertyReader.getById(id);
+    propertyWriter.writeToChannel(property, value);
+  }
+
+  @PostMapping("write/slug/{slug}/{value}")
+  public void write(@PathVariable final String slug, @PathVariable final double value) {
+    final Property property = propertyReader.getBySlug(slug);
+    propertyWriter.writeToChannel(property, value);
+  }
+
 }

src/main/java/de/ph87/homeautomation/property/PropertyDto.java

@@ -16,6 +16,8 @@ public final class PropertyDto implements Serializable {
 
   private final String title;
 
+  private final String slug;
+
   private final ChannelDto readChannel;
 
   private final ChannelDto writeChannel;
@@ -26,6 +28,7 @@ public final class PropertyDto implements Serializable {
     this.id = property.getId();
     this.type = property.getType();
     this.title = property.getTitle();
+    this.slug = property.getSlug();
     this.readChannel = readChannel;
     this.writeChannel = writeChannel;
     this.usages = usages;