ThingList search menu item + fontAwesome, DemoService slug combine

src/main/angular/package-lock.json

@@ -16,6 +16,8 @@
         "@angular/platform-browser": "^18.2.0",
         "@angular/platform-browser-dynamic": "^18.2.0",
         "@angular/router": "^18.2.0",
+        "@fortawesome/angular-fontawesome": "0.15.0",
+        "@fortawesome/free-solid-svg-icons": "^6.7.1",
         "@stomp/ng2-stompjs": "^8.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -2925,6 +2927,52 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fortawesome/angular-fontawesome": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.15.0.tgz",
+      "integrity": "sha512-oxmJDYGNSym5ycFR0LX4ZOPAU+wWmMAznYpkm5DNAtWWkhMLcrZl15eZQmVIEE+qruQ7JiVrg3tpo8bEkFlDgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "tslib": "^2.6.2"
+      },
+      "peerDependencies": {
+        "@angular/core": "^18.0.0"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.1.tgz",
+      "integrity": "sha512-gbDz3TwRrIPT3i0cDfujhshnXO9z03IT1UKRIVi/VEjpNHtSBIP2o5XSm+e816FzzCFEzAxPw09Z13n20PaQJQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.1.tgz",
+      "integrity": "sha512-8dBIHbfsKlCk2jHQ9PoRBg2Z+4TwyE3vZICSnoDlnsHA6SiMlTwfmW6yX0lHsRmWJugkeb92sA0hZdkXJhuz+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.1.tgz",
+      "integrity": "sha512-BTKc0b0mgjWZ2UDKVgmwaE0qt0cZs6ITcDgjrti5f/ki7aF5zs+N91V6hitGo3TItCFtnKg6cUVGdTmBFICFRg==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@inquirer/checkbox": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-2.5.0.tgz",

src/main/angular/package.json

@@ -21,7 +21,9 @@
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10",
-    "@stomp/ng2-stompjs": "^8.0.0"
+    "@stomp/ng2-stompjs": "^8.0.0",
+    "@fortawesome/angular-fontawesome": "0.15.0",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.2.11",

src/main/angular/src/app/Area/Area.ts

@@ -1,8 +1,9 @@
-import {validateString} from "../api/validators";
+import {orNull, validateString} from "../api/validators";
 
 export class Area {
 
   constructor(
+    readonly parent: Area | null,
     readonly uuid: string,
     readonly slug: string,
     readonly name: string,
@@ -12,6 +13,7 @@ export class Area {
 
   static fromJson(json: any): Area {
     return new Area(
+      orNull(json.parent, Area.fromJson),
       validateString(json.uuid),
       validateString(json.slug),
       validateString(json.name),

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

@@ -1,7 +1,8 @@
 import {Property} from "../Property/Property";
-import {orNull, validateString} from "../api/validators";
+import {orNull, validateList, validateString} from "../api/validators";
 import {Area} from '../Area/Area';
 import {Thing} from '../Thing/Thing';
+import {Tag} from '../Tag/Tag';
 
 export class Device extends Thing {
 
@@ -10,10 +11,11 @@ export class Device extends Thing {
     uuid: string,
     name: string,
     slug: string,
+    tagList: Tag[],
     readonly statePropertyId: string,
     readonly stateProperty: Property | null,
   ) {
-    super(area, uuid, name, slug);
+    super(area, uuid, name, slug, tagList);
   }
 
   static fromJson(json: any): Device {
@@ -22,6 +24,7 @@ export class Device extends Thing {
       validateString(json.uuid),
       validateString(json.name),
       validateString(json.slug),
+      validateList(json.tagList, Tag.fromJson),
       validateString(json.statePropertyId),
       orNull(json.stateProperty, Property.fromJson),
     );

src/main/angular/src/app/Device/device-tile/device-tile.component.html

@@ -1,14 +1,14 @@
 <div class="tile">
 
-  <div class="tileInner device" [ngClass]="ngClass(device)">
+  <div class="tileInner device" [ngClass]="ngClass()">
 
     <div class="name">
       {{ device.nameWithArea }}
     </div>
 
     <div class="actions">
-      <div class="action switchOn" (click)="deviceService.setState(device, true)"></div>
-      <div class="action switchOff" (click)="deviceService.setState(device, false)"></div>
+      <div class="action switchOn" (click)="setState(true)"></div>
+      <div class="action switchOff" (click)="setState(false)"></div>
     </div>
 
     <div class="timestamp details">

src/main/angular/src/app/Device/device-tile/device-tile.component.ts

@@ -28,11 +28,17 @@ export class DeviceTileComponent {
     //
   }
 
-  ngClass(device: Device) {
+  ngClass() {
     return {
-      "stateOn": device.stateProperty?.state?.value === true,
-      "stateOff": device.stateProperty?.state?.value === false,
+      "stateOn": this.device.stateProperty?.state?.value === true,
+      "stateOff": this.device.stateProperty?.state?.value === false,
     };
   }
 
+  setState(newState: boolean) {
+    if (!this.device.hasTagBySlug('confirm') || confirm("Sicher?")) {
+      this.deviceService.setState(this.device, newState);
+    }
+  }
+
 }

src/main/angular/src/app/Shutter/Shutter.ts

@@ -1,8 +1,9 @@
 import {Property} from "../Property/Property";
-import {orNull, validateString} from "../api/validators";
+import {orNull, validateList, validateString} from "../api/validators";
 
 import {Area} from '../Area/Area';
 import {Thing} from '../Thing/Thing';
+import {Tag} from '../Tag/Tag';
 
 export class Shutter extends Thing {
 
@@ -11,10 +12,11 @@ export class Shutter extends Thing {
     uuid: string,
     name: string,
     slug: string,
+    tagList: Tag[],
     readonly positionPropertyId: string,
     readonly positionProperty: Property | null,
   ) {
-    super(area, uuid, name, slug);
+    super(area, uuid, name, slug, tagList);
   }
 
   static fromJson(json: any): Shutter {
@@ -23,6 +25,7 @@ export class Shutter extends Thing {
       validateString(json.uuid),
       validateString(json.name),
       validateString(json.slug),
+      validateList(json.tagList, Tag.fromJson),
       validateString(json.positionPropertyId),
       orNull(json.positionProperty, Property.fromJson),
     );

src/main/angular/src/app/Tag/Tag.ts

@@ -4,6 +4,7 @@ export class Tag {
 
   constructor(
     readonly uuid: string,
+    readonly slug: string,
     readonly name: string,
   ) {
     //
@@ -12,6 +13,7 @@ export class Tag {
   static fromJson(json: any): Tag {
     return new Tag(
       validateString(json.uuid),
+      validateString(json.slug),
       validateString(json.name),
     );
   }

src/main/angular/src/app/Thing/Thing.ts

@@ -1,4 +1,5 @@
 import {Area} from '../Area/Area';
+import {Tag} from '../Tag/Tag';
 
 export abstract class Thing {
 
@@ -7,6 +8,7 @@ export abstract class Thing {
     readonly uuid: string,
     readonly name: string,
     readonly slug: string,
+    readonly tagList: Tag[],
   ) {
     //
   }
@@ -25,6 +27,11 @@ export abstract class Thing {
     return this.area.name + ' ' + this.name;
   }
 
+  hasTagBySlug(slug: string): boolean {
+    const slugLower = slug.toLowerCase();
+    return this.tagList.some(t => t.slug.toLocaleLowerCase() === slugLower);
+  }
+
   static trackBy(index: number, thing: Thing) {
     return thing.uuid;
   }

src/main/angular/src/app/Thing/thing-list-page/thing-list-page.component.ts

@@ -28,7 +28,7 @@ export class ThingListPageComponent implements OnInit, OnDestroy {
 
   protected readonly liveList: CrudLiveList<Thing>;
 
-  private tagSet: boolean = false;
+  private paramsSet: boolean = false;
 
   constructor(
     protected readonly thingService: ThingService,
@@ -39,7 +39,7 @@ export class ThingListPageComponent implements OnInit, OnDestroy {
       false,
       undefined,
       next => {
-        if (this.tagSet) {
+        if (this.paramsSet) {
           this.thingService.filter(this.filter, next);
         } else {
           next([]);
@@ -50,8 +50,8 @@ export class ThingListPageComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.subs.push(this.activatedRoute.params.subscribe(params => {
-      this.tagSet = 'tag' in params;
-      if (this.tagSet) {
+      this.paramsSet = true;
+      if (this.paramsSet) {
         this.filter.tag = params['tag'] || '';
         this.liveList.refresh();
       } else {

src/main/angular/src/app/Tunable/Tunable.ts

@@ -1,7 +1,8 @@
 import {Property} from "../Property/Property";
-import {orNull, validateString} from "../api/validators";
+import {orNull, validateList, validateString} from "../api/validators";
 import {Area} from '../Area/Area';
 import {Thing} from '../Thing/Thing';
+import {Tag} from '../Tag/Tag';
 
 export class Tunable extends Thing {
 
@@ -10,6 +11,7 @@ export class Tunable extends Thing {
     uuid: string,
     name: string,
     slug: string,
+    tagList: Tag[],
     readonly statePropertyId: string,
     readonly stateProperty: Property | null,
     readonly brightnessPropertyId: string,
@@ -17,7 +19,7 @@ export class Tunable extends Thing {
     readonly coldnessPropertyId: string,
     readonly coldnessProperty: Property | null,
   ) {
-    super(area, uuid, name, slug);
+    super(area, uuid, name, slug, tagList);
   }
 
   static fromJson(json: any): Tunable {
@@ -26,6 +28,7 @@ export class Tunable extends Thing {
       validateString(json.uuid),
       validateString(json.name),
       validateString(json.slug),
+      validateList(json.tagList, Tag.fromJson),
       validateString(json.statePropertyId),
       orNull(json.stateProperty, Property.fromJson),
       validateString(json.brightnessPropertyId),

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

@@ -3,8 +3,11 @@
     <div class="item itemLeft" routerLink="Dashboard" routerLinkActive="active">Dash</div>
     <div class="item itemLeft" routerLink="ThingList/device" routerLinkActive="active">Geräte</div>
     <div class="item itemLeft" routerLink="ThingList/light" routerLinkActive="active">Licht</div>
+    <div class="item itemLeft" routerLink="ThingList/decoration" routerLinkActive="active">Deko</div>
     <div class="item itemLeft" routerLink="ThingList/shutter" routerLinkActive="active">Rollladen</div>
-    <div class="item itemRight" routerLink="GroupList" routerLinkActive="active">KNX</div>
+    <div class="item itemRight" routerLink="ThingList" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+      <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
+    </div>
   </div>
   <div class="flexBoxRest">
     <router-outlet/>

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

@@ -2,16 +2,19 @@ import {Component} from '@angular/core';
 import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {ApiService} from './api/api.service';
 import {NgIf} from '@angular/common';
+import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive, NgIf],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, NgIf, FontAwesomeModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
 export class AppComponent {
-  title = 'angular';
+
+  readonly faMagnifyingGlass = faMagnifyingGlass;
 
   constructor(
     protected readonly apiService: ApiService,

src/main/java/de/ph87/home/area/Area.java

@@ -1,9 +1,11 @@
 package de.ph87.home.area;
 
 import de.ph87.home.search.ISearchable;
+import jakarta.annotation.Nullable;
 import jakarta.persistence.Column;
 import jakarta.persistence.Entity;
 import jakarta.persistence.Id;
+import jakarta.persistence.ManyToOne;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
 import lombok.NonNull;
@@ -22,6 +24,10 @@ public class Area implements ISearchable {
   @NonNull
   private String uuid = UUID.randomUUID().toString();
 
+  @Nullable
+  @ManyToOne
+  private Area parent;
+
   @NonNull
   @Column(nullable = false)
   private String name;
@@ -35,7 +41,8 @@ public class Area implements ISearchable {
     return List.of(slug, name);
   }
 
-  public Area(@NonNull final String name, @NonNull final String slug) {
+  public Area(@Nullable final Area parent, @NonNull final String name, @NonNull final String slug) {
+    this.parent = parent;
     this.name = name;
     this.slug = slug;
   }

src/main/java/de/ph87/home/area/AreaDto.java

@@ -1,12 +1,15 @@
 package de.ph87.home.area;
 
 import de.ph87.home.web.IWebSocketMessage;
+import jakarta.annotation.Nullable;
 import lombok.Getter;
 import lombok.NonNull;
 import lombok.ToString;
 
 import java.util.List;
 
+import static de.ph87.home.common.map.MapHelper.map;
+
 @Getter
 @ToString
 public class AreaDto implements IWebSocketMessage {
@@ -14,6 +17,9 @@ public class AreaDto implements IWebSocketMessage {
   @ToString.Exclude
   private final List<Object> websocketTopic = List.of("Area");
 
+  @Nullable
+  private final AreaDto parent;
+
   @NonNull
   private final String uuid;
 
@@ -24,6 +30,7 @@ public class AreaDto implements IWebSocketMessage {
   private final String slug;
 
   public AreaDto(@NonNull final Area area) {
+    this.parent = map(area.getParent(), AreaDto::new);
     this.uuid = area.getUuid();
     this.name = area.getName();
     this.slug = area.getSlug();

src/main/java/de/ph87/home/area/AreaService.java

@@ -25,8 +25,9 @@ public class AreaService {
   private final ApplicationEventPublisher applicationEventPublisher;
 
   @NonNull
-  public AreaDto create(@NonNull final String name, @NonNull final String slug) {
-    return publish(areaRepository.save(new Area(name, slug)), CrudAction.UPDATED);
+  public AreaDto create(@Nullable final String parentUuid, @NonNull final String name, @NonNull final String slug) {
+    final Area parent = parentUuid == null ? null : areaRepository.findById(parentUuid).orElseThrow();
+    return publish(areaRepository.save(new Area(parent, name, slug)), CrudAction.UPDATED);
   }
 
   @NonNull

src/main/java/de/ph87/home/demo/DemoService.java

@@ -20,6 +20,10 @@ import org.springframework.transaction.annotation.Transactional;
 import tuwien.auto.calimero.GroupAddress;
 
 import java.util.Arrays;
+import java.util.Objects;
+import java.util.stream.Collectors;
+
+import static de.ph87.home.common.map.MapHelper.map;
 
 @Slf4j
 @Service
@@ -44,6 +48,7 @@ public class DemoService {
   public void startup() {
     final TagDto tagLight = tagService.create("light", "Licht");
     final TagDto tagDevice = tagService.create("device", "Gerät");
+    final TagDto tagConfirm = tagService.create("confirm", "Bestätigen");
     final TagDto tagDecoration = tagService.create("decoration", "Dekoration");
     final TagDto tagDecorationInside = tagService.create("decoration_inside", "Dekoration Innen");
     final TagDto tagDecorationWindow = tagService.create("decoration_window", "Dekoration Fenster");
@@ -54,37 +59,96 @@ public class DemoService {
     final TagDto tagShutter = tagService.create("shutter", "Rollladen");
     final TagDto tagFront = tagService.create("house_front", "Haus Vorne");
     final TagDto tagSide = tagService.create("house_side", "Haus Seite");
-    final TagDto tagHinten = tagService.create("house_backside", "Haus Hinten");
+    final TagDto tagBack = tagService.create("house_back", "Haus Hinten");
 
-    final AreaDto eg = area("eg", "EG");
+    /* EG ----------------------------------------------------------------------------------------- */
 
-    final AreaDto wohnzimmer = area("wohnzimmer", "Wohnzimmer");
-    device(wohnzimmer, "fernseher", "Fernseher", 20, 4, tagDevice, tagMedia, tagVideo);
-    device(wohnzimmer, "verstaerker", "Verstärker", 825, 824, tagDevice, tagMedia, tagAudio);
-    device(wohnzimmer, "haengelampe", "Hängelampe", 1794, 1799, tagLight);
-    device(wohnzimmer, "fensterdeko", "Fenster", 1823, 1822, tagDecoration, tagDecorationWindow);
-    tunable(wohnzimmer, "spots", "", 28, 828, 2344, 2343, 1825, 1824, tagLight);
+    final AreaDto eg = area(null, "eg", "EG");
+    device(eg, "ambiente", "Ambiente", 849, 848, tagDecoration, tagDecorationInside);
+
+    final AreaDto wohnzimmer = area(eg, "wohnzimmer", "Wohnzimmer");
+    tunable(wohnzimmer, "spots", "Spots", 28, 828, 2344, 2343, 1825, 1824, tagLight);
     shutter(wohnzimmer, "links", "Links", 1048, tagShutter, tagFront);
     shutter(wohnzimmer, "rechts", "Rechts", 1811, tagShutter, tagFront);
+    device(wohnzimmer, "fernseher", "Fernseher", 20, 4, tagDevice, tagMedia, tagVideo, tagConfirm);
+    device(wohnzimmer, "verstaerker", "Verstärker", 825, 824, tagDevice, tagMedia, tagAudio, tagConfirm);
+    device(wohnzimmer, "haengelampe", "Hängelampe", 1794, 1799, tagLight);
+    device(wohnzimmer, "fensterdekoration", "Fenster", 1823, 1822, tagDecoration, tagDecorationWindow);
 
-    final AreaDto kueche = area("kueche", "Küche");
-    tunable(kueche, "kueche_spots", "", 2311, 2304, 2342, 2341, 2321, 2317, tagLight);
-    shutter(kueche, "kueche_seite", "Seite", 2316, tagShutter, tagSide);
-    shutter(kueche, "kueche_theke", "Theke", 2320, tagShutter, tagHinten);
-    shutter(kueche, "kueche_tuer", "Tür", 2324, tagShutter, tagHinten);
+    final AreaDto kueche = area(eg, "kueche", "Küche");
+    tunable(kueche, "spots", "Spots", 2311, 2304, 2342, 2341, 2321, 2317, tagLight);
+    device(kueche, "haengelampe", "Hängelampe", 2313, 2312, tagLight);
+    shutter(kueche, "seite", "Seite", 2316, tagShutter, tagSide);
+    shutter(kueche, "theke", "Theke", 2320, tagShutter, tagBack);
+    shutter(kueche, "tuer", "Tür", 2324, tagShutter, tagBack);
 
-    device(eg, "eg_ambiente", "Ambiente", 849, 848, tagLight);
+    final AreaDto waschkueche = area(eg, "waschkueche", "Waschküche");
+    tunable(waschkueche, "spots", "Spots", 1827, 1826, 1829, 1828, 1831, 1830, tagLight);
+    shutter(waschkueche, "seite", "Seite", 1820, tagShutter, tagBack);
 
-    final AreaDto arbeitszimmer = area("arbeitszimmer", "Arbeitszimmer");
-    tunable(arbeitszimmer, "spots", "", 2058, 2057, 2067, 2069, 2049, 2054, tagLight);
+    final AreaDto flurEg = area(eg, "flur", "Flur EG");
+    tunable(flurEg, "spots", "Spots", 1032, 1294, 2340, 2339, 2327, 2325, tagLight);
+
+    /* OG ----------------------------------------------------------------------------------------- */
+
+    final AreaDto og = area(null, "og", "OG");
+
+    final AreaDto flurOg = area(og, "flur", "Flur OG");
+    tunable(flurOg, "spots", "Spots", 814, 813, 2086, 2070, 2074, 2073, tagLight);
+    shutter(flurOg, "vorne", "Vorne", 1293, tagShutter, tagFront);
+    shutter(flurOg, "hinten", "Hinten", 2080, 2079, tagShutter, tagBack);
+    device(flurOg, "ambiente", "Ambiente", 1538, 1539, tagDecoration, tagDecorationInside);
+    device(flurOg, "fenster", "Fenster", 2331, 2332, tagDecoration, tagDecorationWindow);
+
+    final AreaDto badOg = area(og, "bad", "Bad");
+    shutter(badOg, "", "", 1308, 1307, tagShutter, tagBack);
+    tunable(badOg, "spots", "Spots", 1299, 841, 1320, 1319, 1318, 1317, tagLight);
+    tunable(badOg, "waschbecken", "Waschbecken", 790, 789, 1320, 1319, 1318, 1317, tagLight);
+    tunable(badOg, "badewanne", "Badewanne", 782, 781, 1320, 1319, 1318, 1317, tagLight);
+    tunable(badOg, "dusche", "Dusche", 774, 773, 1320, 1319, 1318, 1317, tagLight);
+    tunable(badOg, "toilette", "Toilette", 798, 797, 1320, 1319, 1318, 1317, tagLight);
+
+    final AreaDto arbeitszimmer = area(og, "arbeitszimmer", "Arbeitszimmer");
+    shutter(arbeitszimmer, "", "", 2064, tagShutter, tagBack);
+    tunable(arbeitszimmer, "spots", "Spots", 2058, 2057, 2067, 2069, 2049, 2054, tagLight);
+    device(arbeitszimmer, "pc", "Patrick PC", 2052, 2051, tagDevice, tagMedia, tagAudio, tagVideo, tagConfirm);
+    device(arbeitszimmer, "schreibtisch", "Patrick Schreibtisch", 2050, 2048, tagDevice, tagMedia, tagAudio, tagVideo, tagConfirm);
+    device(arbeitszimmer, "drucker", "Drucker", 2066, 2065, tagDevice, tagConfirm);
+
+    final AreaDto schlafzimmer = area(og, "schlafzimmer", "Schlafzimmer");
+    shutter(schlafzimmer, "links", "Links", 1303, tagShutter, tagFront);
+    shutter(schlafzimmer, "rechts", "Rechts", 1304, tagShutter, tagFront);
+    tunable(schlafzimmer, "spots", "Spots", 1309, 829, 1322, 1321, 1316, 1315, tagLight);
+    device(schlafzimmer, "loewe", "Löwe", 844, 843, tagDecoration, tagDecorationInside);
+    device(schlafzimmer, "sternenhimmel", "Sternenhimmel", 846, 845, tagDecoration, tagDecorationInside);
+    device(schlafzimmer, "fenster", "Fenster", 2333, 2334, tagDecoration, tagDecorationWindow);
+
+    final AreaDto emil = area(og, "emil", "Emil");
+    shutter(emil, "", "", 1807, tagShutter, tagFront);
+    tunable(emil, "spots", "Spots", 1796, 1795, 2085, 2084, 2083, 2082, tagLight);
+    device(emil, "fenster_links", "Fenster Links", 1804, 1803, tagDecoration, tagDecorationWindow);
+    device(emil, "fenster_rechts", "Fenster Rechts", 1802, 1801, tagDevice);
+    device(emil, "wand_scheune", "Wand Scheune", 2072, 2071, tagDevice);
+
+    final AreaDto keller = area(null, "keller", "Keller");
+    device(keller, "receiver", "Receiver", 2561, 2560, tagDevice, tagConfirm);
+
+    /* AUSSEN ------------------------------------------------------------------------------------- */
+
+    final AreaDto aussen = area(null, "aussen", "Außen");
+
+    final AreaDto terrasse = area(aussen, "terrasse", "Terrasse");
+    device(terrasse, "dekoration", "Dekoration", 2337, 2338, tagDecoration, tagDecorationOutside);
+
+    final AreaDto vorgarten = area(aussen, "vorgarten", "Vorgarten");
+    device(vorgarten, "dekoration", "Dekoration", 1036, 1035, tagDecoration, tagDecorationOutside);
 
-    final AreaDto keller = area("keller", "Keller");
-    device(keller, "receiver", "Receiver", 2561, 2560, tagDevice);
   }
 
   @NonNull
-  private AreaDto area(@NonNull final String slug, @NonNull final String name) {
-    return areaService.create(name, slug);
+  private AreaDto area(@Nullable final AreaDto parent, @NonNull final String subSlug, @NonNull final String name) {
+    final String slug = combine(map(parent, AreaDto::getSlug), subSlug);
+    return areaService.create(map(parent, AreaDto::getUuid), name, slug);
   }
 
   private void device(
@@ -95,8 +159,8 @@ public class DemoService {
     @Nullable final Integer stateWrite,
     @NonNull final TagDto... tagList
   ) {
-    final String slug = area.getSlug() + "_" + subSlug;
-    final String statePropertyId = slug + "_state";
+    final String slug = combine(area.getSlug(), subSlug);
+    final String statePropertyId = combine(slug, "state");
     knxPropertyService.create(statePropertyId, KnxPropertyType.BOOLEAN, adr(stateRead), adr(stateWrite));
     deviceService.create(area.getUuid(), name, slug, statePropertyId, Arrays.stream(tagList).map(TagDto::getUuid).toList());
   }
@@ -108,9 +172,20 @@ public class DemoService {
     @Nullable final Integer positionReadWrite,
     @NonNull final TagDto... tagList
   ) {
-    final String slug = area.getSlug() + "_" + subSlug;
-    final String statePropertyId = slug + "_state";
-    knxPropertyService.create(statePropertyId, KnxPropertyType.DOUBLE, adr(positionReadWrite), adr(positionReadWrite));
+    shutter(area, subSlug, name, positionReadWrite, positionReadWrite, tagList);
+  }
+
+  private void shutter(
+    @NonNull final AreaDto area,
+    @NonNull final String subSlug,
+    @NonNull final String name,
+    @Nullable final Integer positionRead,
+    @Nullable final Integer positionWrite,
+    @NonNull final TagDto... tagList
+  ) {
+    final String slug = combine(area.getSlug(), subSlug);
+    final String statePropertyId = combine(slug, "position");
+    knxPropertyService.create(statePropertyId, KnxPropertyType.DOUBLE, adr(positionRead), adr(positionWrite));
     shutterService.create(area.getUuid(), name, slug, statePropertyId, Arrays.stream(tagList).map(TagDto::getUuid).toList());
   }
 
@@ -126,10 +201,10 @@ public class DemoService {
     @Nullable final Integer coldnessWrite,
     @NonNull final TagDto... tagList
   ) {
-    final String slug = area.getSlug() + "_" + subSlug;
-    final String stateProperty = knxProperty(slug + "_state", KnxPropertyType.BOOLEAN, stateRead, stateWrite);
-    final String brightnessProperty = knxProperty(slug + "_brightness", KnxPropertyType.DOUBLE, brightnessRead, brightnessWrite);
-    final String coldnessProperty = knxProperty(slug + "_coldness", KnxPropertyType.DOUBLE, coldnessRead, coldnessWrite);
+    final String slug = combine(area.getSlug(), subSlug);
+    final String stateProperty = knxProperty(combine(slug, "state"), KnxPropertyType.BOOLEAN, stateRead, stateWrite);
+    final String brightnessProperty = knxProperty(combine(slug, "brightness"), KnxPropertyType.DOUBLE, brightnessRead, brightnessWrite);
+    final String coldnessProperty = knxProperty(combine(slug, "coldness"), KnxPropertyType.DOUBLE, coldnessRead, coldnessWrite);
     tunableService.create(area.getUuid(), name, slug, stateProperty, brightnessProperty, coldnessProperty, Arrays.stream(tagList).map(TagDto::getUuid).toList());
   }
 
@@ -149,4 +224,9 @@ public class DemoService {
     return GroupAddress.freeStyle(rawGroupAddress);
   }
 
+  @NonNull
+  private String combine(final Object... parts) {
+    return Arrays.stream(parts).filter(Objects::nonNull).map(Object::toString).filter(s -> !s.isEmpty()).collect(Collectors.joining("_"));
+  }
+
 }

src/main/java/de/ph87/home/device/DeviceDto.java

@@ -3,7 +3,7 @@ package de.ph87.home.device;
 import de.ph87.home.area.AreaDto;
 import de.ph87.home.property.PropertyDto;
 import de.ph87.home.property.PropertyTypeMismatch;
-import de.ph87.home.tag.Tag;
+import de.ph87.home.tag.TagDto;
 import de.ph87.home.web.IWebSocketMessage;
 import jakarta.annotation.Nullable;
 import lombok.Getter;
@@ -39,7 +39,7 @@ public class DeviceDto implements IWebSocketMessage {
   private final PropertyDto<Boolean> stateProperty;
 
   @NonNull
-  private final List<String> tagList;
+  private final List<TagDto> tagList;
 
   public DeviceDto(@NonNull final Device device, @Nullable final PropertyDto<Boolean> stateProperty) {
     this.area = new AreaDto(device.getArea());
@@ -48,7 +48,7 @@ public class DeviceDto implements IWebSocketMessage {
     this.slug = device.getSlug();
     this.statePropertyId = device.getStatePropertyId();
     this.stateProperty = stateProperty;
-    this.tagList = device.getTagList().stream().map(Tag::getName).toList();
+    this.tagList = device.getTagList().stream().map(TagDto::new).toList();
   }
 
   @Nullable

src/main/java/de/ph87/home/shutter/ShutterDto.java

@@ -3,7 +3,7 @@ package de.ph87.home.shutter;
 import de.ph87.home.area.AreaDto;
 import de.ph87.home.property.PropertyDto;
 import de.ph87.home.property.PropertyTypeMismatch;
-import de.ph87.home.tag.Tag;
+import de.ph87.home.tag.TagDto;
 import de.ph87.home.web.IWebSocketMessage;
 import jakarta.annotation.Nullable;
 import lombok.Getter;
@@ -39,7 +39,7 @@ public class ShutterDto implements IWebSocketMessage {
   private final PropertyDto<Double> positionProperty;
 
   @NonNull
-  private final List<String> tagList;
+  private final List<TagDto> tagList;
 
   public ShutterDto(@NonNull final Shutter shutter, @Nullable final PropertyDto<Double> positionProperty) {
     this.area = new AreaDto(shutter.getArea());
@@ -48,7 +48,7 @@ public class ShutterDto implements IWebSocketMessage {
     this.slug = shutter.getSlug();
     this.positionPropertyId = shutter.getPositionPropertyId();
     this.positionProperty = positionProperty;
-    this.tagList = shutter.getTagList().stream().map(Tag::getName).toList();
+    this.tagList = shutter.getTagList().stream().map(TagDto::new).toList();
   }
 
   @Nullable

src/main/java/de/ph87/home/tag/TagDto.java

@@ -9,11 +9,15 @@ public class TagDto {
   @NonNull
   private final String uuid;
 
+  @NonNull
+  private final String slug;
+
   @NonNull
   private final String name;
 
   public TagDto(@NonNull final Tag tag) {
     this.uuid = tag.getUuid();
+    this.slug = tag.getSlug();
     this.name = tag.getName();
   }
 

src/main/java/de/ph87/home/tunable/TunableDto.java

@@ -3,7 +3,7 @@ package de.ph87.home.tunable;
 import de.ph87.home.area.AreaDto;
 import de.ph87.home.property.PropertyDto;
 import de.ph87.home.property.PropertyTypeMismatch;
-import de.ph87.home.tag.Tag;
+import de.ph87.home.tag.TagDto;
 import de.ph87.home.web.IWebSocketMessage;
 import jakarta.annotation.Nullable;
 import lombok.Getter;
@@ -53,7 +53,7 @@ public class TunableDto implements IWebSocketMessage {
   private final PropertyDto<Double> coldnessProperty;
 
   @NonNull
-  private final List<String> tagList;
+  private final List<TagDto> tagList;
 
   public TunableDto(@NonNull final Tunable tunable, @Nullable final PropertyDto<Boolean> stateProperty, @Nullable final PropertyDto<Double> brightnessProperty, @Nullable final PropertyDto<Double> coldnessProperty) {
     this.area = new AreaDto(tunable.getArea());
@@ -66,7 +66,7 @@ public class TunableDto implements IWebSocketMessage {
     this.stateProperty = stateProperty;
     this.brightnessProperty = brightnessProperty;
     this.coldnessProperty = coldnessProperty;
-    this.tagList = tunable.getTagList().stream().map(Tag::getName).toList();
+    this.tagList = tunable.getTagList().stream().map(TagDto::new).toList();
   }
 
   @Nullable