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

CHANGE: general updates + new topic update function
All checks were successful
mqtt_creator/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Tom Tröger
2024-06-27 21:15:36 +01:00
parent 4c3e713195
commit 6463713edf
3 changed files with 97 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,13 +9,13 @@
<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()"/>
<input required placeholder="Name here" type="text"[ngModel]="entity_name" (ngModelChange)="entity_name = $event; update()"/>
</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" >
<input type="text"[ngModel]="entity_uniq_id" (ngModelChange)="entity_uniq_id = $event; update()"/>
<button (click)="entity_uniq_id = useRandomString(10); update()" 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"/>
@@ -31,7 +31,7 @@
<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 class="property !flex-row" *ngIf="generatorService.has_property('pl_off') || generatorService.has_property('pl_on')">
<div *ngIf="generatorService.has_property('pl_off')">
<p>Payload off</p>
<input type="text" [ngModel]="entity_pl_off" (ngModelChange)="entity_pl_off = $event"/>
@@ -51,7 +51,9 @@
</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"/>
<select [ngModel]="entity_dev_cla.value" (ngModelChange)="entity_dev_cla.value =$event">
<option *ngFor="let choice of entity_dev_cla.choices" value="{{entity_dev_cla.choices.indexOf(choice)}}">{{choice}}</option>
</select>
</div>
@@ -59,19 +61,14 @@
<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>
<pre>{{discoveryString | json}}</pre>
<span contenteditable>{{JSONdiscoveryString}}</span>
</div>
<div class="col-span-2 property" >
<p>Discovery Topic</p>

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

@@ -1,18 +1,22 @@
import { Component, Input } from '@angular/core';
import { GeneratorService, entity_types, randomString } from '../_services/generator.service';
import {
GeneratorService,
entity_types,
randomString,
} from '../_services/generator.service';
import { MqttBinary } from '../_models/mqtt-binary';
import { MQTTEntity } from '../_models/mqtt_base';
import { DeviceClass, MQTTEntity } from '../_models/mqtt_base';
@Component({
selector: 'app-entity',
templateUrl: './entity.component.html',
styleUrl: './entity.component.css'
styleUrl: './entity.component.css',
})
export class EntityComponent {
constructor(public generatorService: GeneratorService) {
generatorService.updateObserver.subscribe(date => {
this.updateStateTopic();
})
generatorService.updateObserver.subscribe((date) => {
this.update();
});
}
readonly useObject = Object;
@@ -23,18 +27,26 @@ export class EntityComponent {
showDiscovery: boolean = false;
@Input() entity_type: number = 0;
@Input() state_topic: string = "";
@Input() state_topic: string = '';
@Input() basemodel: MQTTEntity | null = null;
@Input() entity_name: string = "";
@Input() entity_uniq_id: string = "";
@Input() entity_cmd_t: string = "";
@Input() entity_bri_cmd_t: string = "";
@Input() entity_pl_off: string = "";
@Input() entity_pl_on: string = "";
@Input() entity_unit_of_meas: string = "";
@Input() entity_val_tpl: string = "";
@Input() entity_dev_cla: string = "";
@Input() entity_name: string = '';
@Input() entity_uniq_id: string = '';
@Input() entity_cmd_t: string = '';
@Input() entity_bri_cmd_t: string = '';
@Input() entity_pl_off: string = '0';
@Input() entity_pl_on: string = '1';
@Input() entity_unit_of_meas: string = '';
@Input() entity_val_tpl: string = '';
@Input() entity_dev_cla: DeviceClass = new DeviceClass([]);
get display_name() {
if (this.entity_name != '' && this.entity_uniq_id != '') {
return this.entity_name + '_' + this.entity_uniq_id;
} else {
return this.entity_name;
}
}
update() {
if (this.generatorService.auto_topic == 2) {
@@ -56,20 +68,19 @@ export class EntityComponent {
return topic_str;
}
// basemodelProperty(property: string) {
// if (this.basemodel?.hasOwnProperty(property)) console.log(property)
// return this.basemodel?.stat_t
// }
select_type(event: unknown) {
let ent_type = entity_types[event as keyof typeof entity_types]
let ent_type = entity_types[event as keyof typeof entity_types];
let ent_class = ent_type[1];
if (typeof ent_class === 'function' && event != 0) {
if (typeof ent_class === 'function' && event != 0) {
this.basemodel = new ent_class();
this.generatorService.selected_entity = this.basemodel
} else this.generatorService.selected_entity = null
this.generatorService.selected_entity = this.basemodel;
if (this.generatorService.has_property('dev_cla')) {
this.entity_dev_cla = this.basemodel.getProperty('dev_cla');
}
} else this.generatorService.selected_entity = null;
this.entity_type = event as number;
this.updateStateTopic();
this.update();
}
lockStateTopic(event: any) {
@@ -88,20 +99,44 @@ export class EntityComponent {
this.basemodel?.setProperty('val_tpl', this.entity_val_tpl);
this.basemodel?.setProperty('dev_cla', this.entity_dev_cla);
this.showDiscovery = true;
return
return;
}
get discoveryString() {
let discString = this.basemodel?.createString()
if (discString == "" || discString == undefined) return "";
discString = discString.replaceAll('"', '\\"')
return "{" + discString + "}"
// this.basemodel?.createString();
return this.basemodel?.toJSON();
// let discString = this.basemodel?.toJ();
// if (discString == '' || discString == undefined) return '';
}
get JSONdiscoveryString() {
return JSON.stringify(this.basemodel?.toJSON()).replaceAll('"', '\\"');
// let discString = this.basemodel?.createString();
// if (discString == '' || discString == undefined) return '';
// discString = discString.replaceAll('"', '\\"');
}
get discoveryTopic() {
if (this.entity_type == 0) return "";
if (this.entity_name == "") return "";
let discTopic = "homeassistant/" + entity_types[this.entity_type][0] + "/" + this.entity_name + "_" + this.entity_uniq_id + "/config"
if (this.entity_type == 0) return '';
if (this.entity_name == '') return '';
let discTopic =
'homeassistant/' +
entity_types[this.entity_type][0] +
'/' +
this.entity_name +
'_' +
this.entity_uniq_id +
'/config';
return discTopic;
}
}
function join(seperator = '/', first: string, ...args: string[]): string {
let result = '';
for (let str of args) {
if (str == '') continue;
result += seperator + str;
}
if (first == '') return result.slice(1);
return first + result;
}

29
src/styles.css
View File

@@ -3,21 +3,32 @@
@tailwind components;
@tailwind utilities;
input, select {
background: #B3B3B3;
:root{
--accent: #4cb926;
--text: #535353;
--primary: #b3b3b3;
--secondary: #f8f8f8;
}
input, select, label {
background: var(--primary);
padding: .25rem .75rem;
border-radius: 1rem;
}
input, select{
width: 100%;
@apply focus:outline focus:outline-myAccent focus:outline-2;
}
input::placeholder{
color: #535353;
color: var(--text);
opacity: 1;
}
input::-ms-input-placeholder { /* Edge 12 -18 */
color: #535353;
color: var(--text);
}
svg{
@@ -27,13 +38,13 @@ svg{
}
*{
color: #535353;
color: var(--text);
}
button, label{
background-color: #4CB926;
button{
background-color: var(--accent);
border-radius: 1rem;
color: #F8F8F8;
color: var(--secondary);
font-weight: bold;
min-width: 4rem;
}
@@ -43,5 +54,5 @@ button, label{
}
button path {
color: #F8F8F8;
color: var(--secondary);
}