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/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;
+      this.paramsSet = true;
-      if (this.tagSet) {
+      if (this.paramsSet) {
         this.filter.tag = params['tag'] || '';
         this.liveList.refresh();
       } else {

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

@@ -5,7 +5,9 @@
     <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/demo/DemoService.java

@@ -20,6 +20,8 @@ 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;
 
@@ -57,12 +59,12 @@ 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 tagBack = tagService.create("house_backside", "Haus Hinten");
+    final TagDto tagBack = tagService.create("house_back", "Haus Hinten");
 
     /* EG ----------------------------------------------------------------------------------------- */
 
     final AreaDto eg = area(null, "eg", "EG");
-    device(eg, "eg_ambiente", "Ambiente", 849, 848, tagDecoration, tagDecorationInside);
+    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);
@@ -145,7 +147,7 @@ public class DemoService {
 
   @NonNull
   private AreaDto area(@Nullable final AreaDto parent, @NonNull final String subSlug, @NonNull final String name) {
-    final String slug = parent == null ? subSlug : parent.getSlug() + "_" + subSlug;
+    final String slug = combine(map(parent, AreaDto::getSlug), subSlug);
     return areaService.create(map(parent, AreaDto::getUuid), name, slug);
   }
 
@@ -157,8 +159,8 @@ public class DemoService {
     @Nullable final Integer stateWrite,
     @NonNull final TagDto... tagList
   ) {
-    final String slug = area.getSlug() + "_" + subSlug;
+    final String slug = combine(area.getSlug(), subSlug);
-    final String statePropertyId = slug + "_state";
+    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());
   }
@@ -181,8 +183,8 @@ public class DemoService {
     @Nullable final Integer positionWrite,
     @NonNull final TagDto... tagList
   ) {
-    final String slug = area.getSlug() + "_" + subSlug;
+    final String slug = combine(area.getSlug(), subSlug);
-    final String statePropertyId = slug + "_state";
+    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());
   }
@@ -199,10 +201,10 @@ public class DemoService {
     @Nullable final Integer coldnessWrite,
     @NonNull final TagDto... tagList
   ) {
-    final String slug = area.getSlug() + "_" + subSlug;
+    final String slug = combine(area.getSlug(), subSlug);
-    final String stateProperty = knxProperty(slug + "_state", KnxPropertyType.BOOLEAN, stateRead, stateWrite);
+    final String stateProperty = knxProperty(combine(slug, "state"), KnxPropertyType.BOOLEAN, stateRead, stateWrite);
-    final String brightnessProperty = knxProperty(slug + "_brightness", KnxPropertyType.DOUBLE, brightnessRead, brightnessWrite);
+    final String brightnessProperty = knxProperty(combine(slug, "brightness"), KnxPropertyType.DOUBLE, brightnessRead, brightnessWrite);
-    final String coldnessProperty = knxProperty(slug + "_coldness", KnxPropertyType.DOUBLE, coldnessRead, coldnessWrite);
+    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());
   }
 
@@ -222,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("_"));
+  }
+
 }