From 34b3ec1751c22664a31d77e2262bb568e43e2262 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20Tr=C3=B6ger?= <t.troeger.02@gmail.com>
Date: Wed, 29 May 2024 21:32:52 +0200
Subject: [PATCH] CHANGE: UI improvements and button to switch auto state topci

---
 src/app/entity/entity.component.css        |  4 ++++
 src/app/entity/entity.component.html       | 18 +++++++++++++-----
 src/app/entity/entity.component.ts         |  2 +-
 src/app/generator/generator.component.html |  2 +-
 src/styles.css                             |  9 ++++-----
 5 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/app/entity/entity.component.css b/src/app/entity/entity.component.css
index 2f613fb..e95a034 100644
--- a/src/app/entity/entity.component.css
+++ b/src/app/entity/entity.component.css
@@ -20,4 +20,8 @@
     padding: .25rem .75rem;
     border-radius: 1rem;
     /* width: 100%; */
+}
+
+.buttonOff path{
+    fill:#535353;
 }
\ No newline at end of file
diff --git a/src/app/entity/entity.component.html b/src/app/entity/entity.component.html
index c605766..7fda1d1 100644
--- a/src/app/entity/entity.component.html
+++ b/src/app/entity/entity.component.html
@@ -16,9 +16,9 @@
         <div class="flex-row flex gap-2">
             <input type="text"[ngModel]="entity_uniq_id" (ngModelChange)="entity_uniq_id = $event; updateStateTopic()"/>
             <button (click)="entity_uniq_id = useRandomString(10); updateStateTopic()" class="randomButton" >
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
-                    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
+                <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"/>
                   </svg>
             </button>
         </div>
@@ -49,7 +49,7 @@
         <p>Value Template</p>
         <input type="text" [ngModel]="entity_val_tpl" (ngModelChange)="entity_val_tpl = $event"/>
     </div>
-    <div class="property" *ngIf="generatorService.has_property('dev_cla')">
+    <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"/>
     </div>
@@ -57,7 +57,15 @@
 
     <div class="property" *ngIf="generatorService.has_property('stat_t')">
         <p>State Topic</p>
-        <input type="text" [ngModel]="state_topic" (change)="lockStateTopic($event)"/>
+        <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">
diff --git a/src/app/entity/entity.component.ts b/src/app/entity/entity.component.ts
index 0842e2d..245446c 100644
--- a/src/app/entity/entity.component.ts
+++ b/src/app/entity/entity.component.ts
@@ -55,7 +55,7 @@ export class EntityComponent {
   select_type(event: unknown) {
     let ent_type = entity_types[event as keyof typeof entity_types]
     let ent_class = ent_type[1];
-    if (typeof ent_class === 'function') {
+    if (typeof ent_class === 'function' &&  event != 0) {
       this.basemodel = new ent_class();
       this.generatorService.selected_entity = this.basemodel
     } else this.generatorService.selected_entity = null
diff --git a/src/app/generator/generator.component.html b/src/app/generator/generator.component.html
index e7005af..4b59326 100644
--- a/src/app/generator/generator.component.html
+++ b/src/app/generator/generator.component.html
@@ -1,5 +1,5 @@
 <main class="flex flex-col gap-2 p-4">
-  <h2>MQTT Discovery Creator:</h2>
+  <h2 class="text-3xl font-bold text-myButton text-center my-2 mb-4" >MQTT Discovery Creator</h2>
 
   <!-- <div class="border border-slate-800 my-2">
     <h2>Device: - not working</h2>
diff --git a/src/styles.css b/src/styles.css
index 623f843..a2e191d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3,13 +3,12 @@
 @tailwind components;
 @tailwind utilities;
 
-input {
+input, select {
     background: #B3B3B3;
     padding: .25rem .75rem;
-    outline: none;
     border-radius: 1rem;
     width: 100%;
-    
+    @apply focus:outline focus:outline-myAccent focus:outline-2;
 }
 
 input::placeholder{
@@ -31,7 +30,7 @@ svg{
     color: #535353;
 }
 
-button{
+button, label{
     background-color: #4CB926;
     border-radius: 1rem;
     color: #F8F8F8;
@@ -40,7 +39,7 @@ button{
 }
 
 .randomButton{
-    @apply flex justify-center content-center;
+    @apply flex justify-center content-center p-1;
 }
 
 button path {