ADD: partial syncing for all topics

src/app/entity/entity.component.html

@@ -25,11 +25,11 @@
     </div>
     <div class="property" *ngIf="generatorService.has_property('cmd_t')">
         <p>Command Topic</p>
-        <input type="text" [ngModel]="entity_cmd_t" (ngModelChange)="entity_cmd_t = $event"/>
+        <input type="text" [ngModel]="entity_cmd_t" (input)="lock_auto_topic(); update('entity_cmd_t',  $event)"/>
     </div>
     <div class="property" *ngIf="generatorService.has_property('bri_cmd_t')">
         <p>Brightness Command Topic</p>
-        <input type="text" [ngModel]="entity_bri_cmd_t" (ngModelChange)="entity_bri_cmd_t = $event"/>
+        <input type="text" [ngModel]="entity_bri_cmd_t" (ngModelChange)="lock_auto_topic(); update('entity_bri_cmd_t', $event)"/>
     </div>
     <div class="property !flex-row" *ngIf="generatorService.has_property('pl_off') || generatorService.has_property('pl_on')">
         <div *ngIf="generatorService.has_property('pl_off')">
@@ -60,7 +60,7 @@
     <div class="property" *ngIf="generatorService.has_property('stat_t')">
         <p>State Topic</p>
         <div class="flex-row flex gap-2">
-            <input type="text" [ngModel]="state_topic" (change)="lockStateTopic($event)"/>
+            <input type="text" [ngModel]="stat_t" (ngModelChange)="lock_auto_topic(); update('stat_t', $event)"/>
         </div>
     </div>
     <button class="col-span-2 py-1" (click)="create_entity()" >Create Entity</button>

src/app/entity/entity.component.ts

@@ -23,11 +23,10 @@ export class EntityComponent {
   readonly entities = entity_types;
   readonly useRandomString = randomString;
 
-  auto_stat_t: boolean = true;
   showDiscovery: boolean = false;
 
   @Input() entity_type: number = 0;
-  @Input() state_topic: string = '';
+  @Input() stat_t: string = '';
   @Input() basemodel: MQTTEntity | null = null;
 
   @Input() entity_name: string = '';
@@ -48,12 +47,43 @@ export class EntityComponent {
     }
   }
 
-  update() {
+  update(model: keyof this = 'stat_t', event: Event | boolean = false): void {
     if (this.generatorService.auto_topic == 2) {
-      this.state_topic = this.updateTopic('stat');
+      this.stat_t = this.updateTopic('stat');
       this.entity_cmd_t = this.updateTopic('cmd');
       this.entity_bri_cmd_t = this.updateTopic('bri_cmd');
+      return;
     }
+    if (event instanceof Event)
+      var value = (event.target as HTMLInputElement).value;
+    else return;
+    if (this.generatorService.auto_topic == 1) {
+      this.sync_topcis(model, value);
+    } else {
+      if (!this.hasOwnProperty(model)) return;
+      if (typeof this[model] === 'string') {
+        this[model] = value as (typeof this)[keyof this];
+      }
+    }
+  }
+
+  sync_topcis(model: keyof this, value: string) {
+    let new_list = value.split('/');
+    let old_list = String(this[model]).split('/');
+    let missing = new_list.filter((item) => old_list.indexOf(item) < 0);
+
+    if (old_list.filter((item) => new_list.indexOf(item) < 0).length > 1)
+      return (this.generatorService.auto_topic = 0);
+    if (missing.length == 0) return; //(this.generatorService.auto_topic = 2);
+    if (new_list.indexOf(missing[0]) == new_list.length - 1) {
+      this[model] = value as (typeof this)[keyof this];
+      return;
+    }
+    let sync_topic = new_list.slice(0, -1).join('/');
+    this.stat_t = sync_topic + '/stat';
+    this.entity_cmd_t = sync_topic + '/cmd';
+    this.entity_bri_cmd_t = sync_topic + '/bri_cmd';
+    return;
   }
 
   updateTopic(topic: string) {
@@ -68,7 +98,6 @@ export class EntityComponent {
     return topic_str;
   }
 
-
   select_type(event: unknown) {
     let ent_type = entity_types[event as keyof typeof entity_types];
     let ent_class = ent_type[1];
@@ -83,12 +112,12 @@ export class EntityComponent {
     this.update();
   }
 
-  lockStateTopic(event: any) {
+  lock_auto_topic() {
     this.generatorService.auto_topic = 1;
   }
 
   create_entity() {
-    this.basemodel?.setProperty('stat_t', this.state_topic);
+    this.basemodel?.setProperty('stat_t', this.stat_t);
 
     this.basemodel?.setProperty('name', this.entity_name);
     this.basemodel?.setProperty('cmd_t', this.entity_cmd_t);

src/app/generator/generator.component.css

@@ -20,6 +20,7 @@
     text-align: center;
     background: #B3B3B3;
     transition: background .25s ease-in-out, color .25s ease-in-out;
+    user-select: none;
 }
 
 .customCheckboxContainer input:checked + label{