From 6463713edf53b3cd57d6947df04798171cedb446 Mon Sep 17 00:00:00 2001 From: tom Date: Thu, 27 Jun 2024 21:15:36 +0100 Subject: [PATCH] CHANGE: general updates + new topic update function --- src/app/entity/entity.component.html | 21 +++--- src/app/entity/entity.component.ts | 101 ++++++++++++++++++--------- src/styles.css | 29 +++++--- 3 files changed, 97 insertions(+), 54 deletions(-) diff --git a/src/app/entity/entity.component.html b/src/app/entity/entity.component.html index 7fda1d1..a421dc4 100644 --- a/src/app/entity/entity.component.html +++ b/src/app/entity/entity.component.html @@ -9,13 +9,13 @@

Name

- +

Uniqe ID

- -
-
+

Payload off

@@ -51,7 +51,9 @@

Device Class

- +
@@ -59,19 +61,14 @@

State Topic

-

Discovery String

- {{discoveryString}} + 
{{discoveryString | json}}
+ {{JSONdiscoveryString}}

Discovery Topic

diff --git a/src/app/entity/entity.component.ts b/src/app/entity/entity.component.ts index 9309781..caa51d9 100644 --- a/src/app/entity/entity.component.ts +++ b/src/app/entity/entity.component.ts @@ -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; +} diff --git a/src/styles.css b/src/styles.css index a2e191d..8c9d32b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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); } \ No newline at end of file