81 lines
4.5 KiB
HTML
81 lines
4.5 KiB
HTML
<main class="grid grid-cols-2 gap-4">
|
|
<!-- Entity -->
|
|
<div class="col-span-2 property">
|
|
<h3>EntityTyp:</h3>
|
|
<select [ngModel]="entity_type" (ngModelChange)="select_type($event)">
|
|
<option *ngFor="let key of useObject.keys(entities)" value="{{key}}">{{entities[key][0]}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<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()"/>
|
|
</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()"/>
|
|
<button (click)="entity_uniq_id = useRandomString(10); updateStateTopic()" 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="generatorService.has_property('cmd_t')">
|
|
<p>Command Topic</p>
|
|
<input type="text" [ngModel]="entity_cmd_t" (ngModelChange)="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"/>
|
|
</div>
|
|
<div class="property !flex-row" >
|
|
<div *ngIf="generatorService.has_property('pl_off')">
|
|
<p>Payload off</p>
|
|
<input type="text" [ngModel]="entity_pl_off" (ngModelChange)="entity_pl_off = $event"/>
|
|
</div>
|
|
<div *ngIf="generatorService.has_property('pl_on')">
|
|
<p>Payload on</p>
|
|
<input type="text" [ngModel]="entity_pl_on" (ngModelChange)="entity_pl_on = $event"/>
|
|
</div>
|
|
</div>
|
|
<div class="property" *ngIf="generatorService.has_property('unit_of_meas')">
|
|
<p>Unit of meassurement</p>
|
|
<input type="text" [ngModel]="entity_unit_of_meas" (ngModelChange)="entity_unit_of_meas = $event"/>
|
|
</div>
|
|
<div class="property" *ngIf="generatorService.has_property('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="generatorService.has_property('dev_cla')">
|
|
<p>Device Class</p>
|
|
<input type="text" [ngModel]="entity_dev_cla" (ngModelChange)="entity_dev_cla = $event"/>
|
|
</div>
|
|
|
|
|
|
<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)"/>
|
|
<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>
|
|
</div>
|
|
<div class="col-span-2 property" >
|
|
<p>Discovery Topic</p>
|
|
<input type="text" readonly value="{{discoveryTopic}}">
|
|
</div>
|
|
</ng-container>
|
|
</main> |