tom_trgr/mqtt_creator
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

CHANGE: UI improvements and button to switch auto state topci

Browse Source
This commit is contained in:
Tom Tröger
2024-05-29 21:32:52 +02:00
parent 13e15a24b7
commit 34b3ec1751
5 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/entity/entity.component.css
View File

@@ -21,3 +21,7 @@
border-radius: 1rem;
/* width: 100%; */
}
.buttonOff path{
fill:#535353;
}

18
src/app/entity/entity.component.html
View File

@@ -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">

2
src/app/entity/entity.component.ts
View File

@@ -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

2
src/app/generator/generator.component.html
View File

@@ -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>

9
src/styles.css
View File

@@ -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 {