CHANGE: general updates + new topic update function

src/app/entity/entity.component.html

@@ -9,13 +9,13 @@
 
     <div class="property" *ngIf="generatorService.has_property('name')">
         <p>Name</p>
-        <input placeholder="Name here" type="text"[ngModel]="entity_name" (ngModelChange)="entity_name = $event; updateStateTopic()"/>
+        <input required placeholder="Name here" type="text"[ngModel]="entity_name" (ngModelChange)="entity_name = $event; update()"/>
     </div>
     <div class="property" *ngIf="generatorService.has_property('uniq_id')">
         <p>Uniqe ID</p>
         <div class="flex-row flex gap-2">
-            <input type="text"[ngModel]="entity_uniq_id" (ngModelChange)="entity_uniq_id = $event; updateStateTopic()"/>
+            <input type="text"[ngModel]="entity_uniq_id" (ngModelChange)="entity_uniq_id = $event; update()"/>
-            <button (click)="entity_uniq_id = useRandomString(10); updateStateTopic()" class="randomButton" >
+            <button (click)="entity_uniq_id = useRandomString(10); update()" class="randomButton" >
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-3" viewBox="0 0 16 16">
                     <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3z"/>
                     <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m8 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
@@ -31,7 +31,7 @@
         <p>Brightness Command Topic</p>
         <input type="text" [ngModel]="entity_bri_cmd_t" (ngModelChange)="entity_bri_cmd_t = $event"/>
     </div>
-    <div class="property !flex-row" >
+    <div class="property !flex-row" *ngIf="generatorService.has_property('pl_off') || generatorService.has_property('pl_on')">
         <div *ngIf="generatorService.has_property('pl_off')">
             <p>Payload off</p>
             <input type="text" [ngModel]="entity_pl_off" (ngModelChange)="entity_pl_off = $event"/>
@@ -51,7 +51,9 @@
     </div>
     <div class="property bg-mySecondary" *ngIf="generatorService.has_property('dev_cla')">
         <p>Device Class</p>
-        <input type="text" [ngModel]="entity_dev_cla" (ngModelChange)="entity_dev_cla = $event"/>
+        <select [ngModel]="entity_dev_cla.value" (ngModelChange)="entity_dev_cla.value =$event">
+            <option *ngFor="let choice of entity_dev_cla.choices" value="{{entity_dev_cla.choices.indexOf(choice)}}">{{choice}}</option>
+        </select>
     </div>
 
 
@@ -59,19 +61,14 @@
         <p>State Topic</p>
         <div class="flex-row flex gap-2">
             <input type="text" [ngModel]="state_topic" (change)="lockStateTopic($event)"/>
-            <label class="randomButton" [ngClass]="auto_stat_t ? 'bg-mySecondary buttonOff' : ''">
-                <input type="checkbox" class="hidden" [ngModel]="auto_stat_t" (ngModelChange)="auto_stat_t = $event; updateStateTopic()"/> 
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="fill-myButton" viewBox="0 0 16 16">
-                    <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
-                </svg>
-            </label>
         </div>
     </div>
     <button class="col-span-2 py-1" (click)="create_entity()" >Create Entity</button>
     <ng-container *ngIf="showDiscovery">
         <div class="col-span-2 property" >
             <p>Discovery String</p>
-            <span contenteditable>{{discoveryString}}</span>
+            <pre>{{discoveryString | json}}</pre>
+            <span contenteditable>{{JSONdiscoveryString}}</span>
         </div>
         <div class="col-span-2 property" >
             <p>Discovery Topic</p>

src/app/entity/entity.component.ts

@@ -1,18 +1,22 @@
 import { Component, Input } from '@angular/core';
-import { GeneratorService, entity_types, randomString } from '../_services/generator.service';
+import {
+  GeneratorService,
+  entity_types,
+  randomString,
+} from '../_services/generator.service';
 import { MqttBinary } from '../_models/mqtt-binary';
-import { MQTTEntity } from '../_models/mqtt_base';
+import { DeviceClass, MQTTEntity } from '../_models/mqtt_base';
 
 @Component({
   selector: 'app-entity',
   templateUrl: './entity.component.html',
-  styleUrl: './entity.component.css'
+  styleUrl: './entity.component.css',
 })
 export class EntityComponent {
   constructor(public generatorService: GeneratorService) {
-    generatorService.updateObserver.subscribe(date => {
+    generatorService.updateObserver.subscribe((date) => {
-      this.updateStateTopic();
+      this.update();
-    })
+    });
   }
 
   readonly useObject = Object;
@@ -23,18 +27,26 @@ export class EntityComponent {
   showDiscovery: boolean = false;
 
   @Input() entity_type: number = 0;
-  @Input() state_topic: string = "";
+  @Input() state_topic: string = '';
   @Input() basemodel: MQTTEntity | null = null;
 
-  @Input() entity_name: string = "";
+  @Input() entity_name: string = '';
-  @Input() entity_uniq_id: string = "";
+  @Input() entity_uniq_id: string = '';
-  @Input() entity_cmd_t: string = "";
+  @Input() entity_cmd_t: string = '';
-  @Input() entity_bri_cmd_t: string = "";
+  @Input() entity_bri_cmd_t: string = '';
-  @Input() entity_pl_off: string = "";
+  @Input() entity_pl_off: string = '0';
-  @Input() entity_pl_on: string = "";
+  @Input() entity_pl_on: string = '1';
-  @Input() entity_unit_of_meas: string = "";
+  @Input() entity_unit_of_meas: string = '';
-  @Input() entity_val_tpl: string = "";
+  @Input() entity_val_tpl: string = '';
-  @Input() entity_dev_cla: string = "";
+  @Input() entity_dev_cla: DeviceClass = new DeviceClass([]);
+
+  get display_name() {
+    if (this.entity_name != '' && this.entity_uniq_id != '') {
+      return this.entity_name + '_' + this.entity_uniq_id;
+    } else {
+      return this.entity_name;
+    }
+  }
 
   update() {
     if (this.generatorService.auto_topic == 2) {
@@ -56,20 +68,19 @@ export class EntityComponent {
     return topic_str;
   }
 
-  // basemodelProperty(property: string) {
-  //   if (this.basemodel?.hasOwnProperty(property)) console.log(property)
-  //   return this.basemodel?.stat_t
-  // }
 
   select_type(event: unknown) {
-    let ent_type = entity_types[event as keyof typeof entity_types]
+    let ent_type = entity_types[event as keyof typeof entity_types];
     let ent_class = ent_type[1];
-    if (typeof ent_class === 'function' &&  event != 0) {
+    if (typeof ent_class === 'function' && event != 0) {
       this.basemodel = new ent_class();
-      this.generatorService.selected_entity = this.basemodel
+      this.generatorService.selected_entity = this.basemodel;
-    } else this.generatorService.selected_entity = null
+      if (this.generatorService.has_property('dev_cla')) {
+        this.entity_dev_cla = this.basemodel.getProperty('dev_cla');
+      }
+    } else this.generatorService.selected_entity = null;
     this.entity_type = event as number;
-    this.updateStateTopic();
+    this.update();
   }
 
   lockStateTopic(event: any) {
@@ -88,20 +99,44 @@ export class EntityComponent {
     this.basemodel?.setProperty('val_tpl', this.entity_val_tpl);
     this.basemodel?.setProperty('dev_cla', this.entity_dev_cla);
     this.showDiscovery = true;
-    return 
+    return;
   }
 
   get discoveryString() {
-    let discString = this.basemodel?.createString()
+    // this.basemodel?.createString();
-    if (discString == "" || discString == undefined) return "";
+    return this.basemodel?.toJSON();
-    discString = discString.replaceAll('"', '\\"')
+    // let discString = this.basemodel?.toJ();
-    return "{" + discString + "}"
+    // if (discString == '' || discString == undefined) return '';
+  }
+
+  get JSONdiscoveryString() {
+    return JSON.stringify(this.basemodel?.toJSON()).replaceAll('"', '\\"');
+    // let discString = this.basemodel?.createString();
+    // if (discString == '' || discString == undefined) return '';
+    // discString = discString.replaceAll('"', '\\"');
   }
 
   get discoveryTopic() {
-    if (this.entity_type == 0) return "";
+    if (this.entity_type == 0) return '';
-    if (this.entity_name == "") return "";
+    if (this.entity_name == '') return '';
-    let discTopic = "homeassistant/" + entity_types[this.entity_type][0] + "/" + this.entity_name + "_" + this.entity_uniq_id + "/config"
+    let discTopic =
+      'homeassistant/' +
+      entity_types[this.entity_type][0] +
+      '/' +
+      this.entity_name +
+      '_' +
+      this.entity_uniq_id +
+      '/config';
     return discTopic;
   }
 }
+
+function join(seperator = '/', first: string, ...args: string[]): string {
+  let result = '';
+  for (let str of args) {
+    if (str == '') continue;
+    result += seperator + str;
+  }
+  if (first == '') return result.slice(1);
+  return first + result;
+}

src/styles.css

@@ -3,21 +3,32 @@
 @tailwind components;
 @tailwind utilities;
 
-input, select {
+:root{
-    background: #B3B3B3;
+    --accent: #4cb926;
+    --text: #535353;
+    --primary: #b3b3b3;
+    --secondary: #f8f8f8;
+
+}
+
+input, select, label {
+    background: var(--primary);
     padding: .25rem .75rem;
     border-radius: 1rem;
+}
+
+input, select{
     width: 100%;
     @apply focus:outline focus:outline-myAccent focus:outline-2;
 }
 
 input::placeholder{
-    color: #535353;
+    color: var(--text);
     opacity: 1;
 }
 
 input::-ms-input-placeholder { /* Edge 12 -18 */
-    color: #535353;
+    color: var(--text);
   }
 
 svg{
@@ -27,13 +38,13 @@ svg{
 }
 
 *{
-    color: #535353;
+    color: var(--text);
 }
 
-button, label{
+button{
-    background-color: #4CB926;
+    background-color: var(--accent);
     border-radius: 1rem;
-    color: #F8F8F8;
+    color: var(--secondary);
     font-weight: bold;
     min-width: 4rem;
 }
@@ -43,5 +54,5 @@ button, label{
 }
 
 button path {
-    color: #F8F8F8;
+    color: var(--secondary);
 }