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

ADD: components to display entity data

Browse Source
This commit is contained in:
Tom Tröger
2024-07-29 15:33:39 +02:00
parent 8bcc350544
commit 56365214b8
8 changed files with 269 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/app/entity-data/entity-data.component.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html5>
<main class="grid grid-cols-2 gap-4">
<div class="property" *ngIf="hasProperty('name')">
<p>Name</p>
<input required placeholder="entity name" type="text"[ngModel]="entity_name" (ngModelChange)="entity_name = $event"/>
</div>
<div class="property" *ngIf="hasProperty('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"/>
<button 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"/>
</svg>
</button>
</div>
</div>
<div class="property" *ngIf="hasProperty('cmd_t')">
<p>Command Topic</p>
<input placeholder="command/topic" type="text" [ngModel]="entity_cmd_t" (ngModelChange)="entity_cmd_t = $event" /> <!-- (input)="lock_auto_topic(); update('entity_cmd_t', $event)"-->
</div>
<div class="property" *ngIf="hasProperty('bri_cmd_t')">
<p>Brightness Command Topic</p>
<input placeholder="brightness/command/topic" type="text" [ngModel]="entity_bri_cmd_t" (ngModelChange)="entity_bri_cmd_t = $event" /> <!--(ngModelChange)="lock_auto_topic(); update('entity_bri_cmd_t', $event)"-->
</div>
<div class="property !flex-row" *ngIf="hasProperty('pl_off') || hasProperty('pl_on')">
<div *ngIf="hasProperty('pl_on')">
<p>Payload on</p>
<input placeholder="1" type="text" [ngModel]="entity_pl_on" (ngModelChange)="entity_pl_on = $event"/>
</div>
<div *ngIf="hasProperty('pl_off')">
<p>Payload off</p>
<input placeholder="0" type="text" [ngModel]="entity_pl_off" (ngModelChange)="entity_pl_off = $event"/>
</div>
</div>
<div class="property" *ngIf="hasProperty('unit_of_meas')">
<p>Unit of meassurement</p>
<input placeholder="°C" type="text" [ngModel]="entity_unit_of_meas" (ngModelChange)="entity_unit_of_meas = $event"/>
</div>
<div class="property" *ngIf="hasProperty('val_tpl')">
<p>Value Template</p>
<input type="text" [ngModel]="entity_val_tpl" (ngModelChange)="entity_val_tpl = $event"/>
</div>
<div class="property bg-mySecondary" *ngIf="hasProperty('dev_cla')">
<p>Device Class</p>
<select [ngModel]="basemodel.getProperty('dev_cla').value" (ngModelChange)="entity_dev_cla =$event">
<option *ngFor="let choice of basemodel.getProperty('dev_cla').choices" value="{{basemodel.getProperty('dev_cla').choices.indexOf(choice)}}">{{choice}}</option>
</select>
</div>
<div class="property" *ngIf="hasProperty('stat_t')">
<p>State Topic</p>
<div class="flex-row flex gap-2">
<input placeholder="state/topic" type="text" [ngModel]="basemodel.getProperty('stat_t')" (ngModelChange)="basemodel.stat_t= $event" /> <!--(ngModelChange)="lock_auto_topic(); update('stat_t', $event)"-->
</div>
</div>
</main>