From 0403eb90d3751e3d4d86267a30614a6bb4ac7e09 Mon Sep 17 00:00:00 2001 From: tom Date: Fri, 2 Aug 2024 07:34:57 +0200 Subject: [PATCH] ADD: Device and Output control --- src/app/_services/generator.service.ts | 79 +++++++--------------- src/app/generator/generator.component.css | 66 +++++++++++------- src/app/generator/generator.component.html | 67 ++++++++++++++---- src/app/generator/generator.component.ts | 19 +++--- 4 files changed, 132 insertions(+), 99 deletions(-) diff --git a/src/app/_services/generator.service.ts b/src/app/_services/generator.service.ts index 735f828..5abdd63 100644 --- a/src/app/_services/generator.service.ts +++ b/src/app/_services/generator.service.ts @@ -4,6 +4,7 @@ import { MqttLight } from '../_models/mqtt-light'; import { MqttSensor } from '../_models/mqtt-sensor'; import { MqttSwitch } from '../_models/mqtt-switch'; import { MQTTEntity } from '../_models/mqtt_base'; +import { MQTTDevice } from '../_models/mqtt-device'; @Injectable({ providedIn: 'root', @@ -11,25 +12,31 @@ import { MQTTEntity } from '../_models/mqtt_base'; export class GeneratorService { public _selected_entity: MQTTEntity | null = null; public created_enteties: Set = new Set(); - // private entities: Map = new Map(); - @Input() device_name: string = ''; - @Input() device_id: string = ''; - @Input() device_standalone: boolean = false; @Input() auto_topic: boolean = true; + @Input() use_device: boolean = false; - _upperTopic: string = ''; + device: MQTTDevice = new MQTTDevice(); + _upper_topic: string = ''; - get upperTopic(): string { - return this._upperTopic; + constructor() { + this.device.topic_updates.subscribe((topic) => { + for (let entity of [...this.created_enteties, this.selected_entity]) { + entity?.setProperty(topic, this.updateTopic(entity, topic)); + } + }); } - set upperTopic(value: string) { - this._upperTopic = value; + get upper_topic(): string { + return this._upper_topic; + } + + set upper_topic(value: string) { + this._upper_topic = value; for (let entity of [...this.created_enteties, this.selected_entity]) { entity?.setProperty('stat_t', this.updateTopic(entity, 'stat_t')); entity?.setProperty('cmd_t', this.updateTopic(entity, 'cmd_t')); - entity?.setProperty('bri_cmd_t', this.updateTopic(entity, 'bri_cmd_tt')); + entity?.setProperty('bri_cmd_t', this.updateTopic(entity, 'bri_cmd_t')); } } @@ -47,16 +54,18 @@ export class GeneratorService { return this._selected_entity; } - //TODO: add dynamic topic gen -> use already set topic if there are changes + get created_entity_num(): number { + return Array.from(this.created_enteties).length; + } + updateTopic(entity: MQTTEntity, topic: string) { let topicStr: string = entity.getProperty(topic).split('/').pop(); let customTopic = topicStr == 'topic' || topicStr == topic ? topic : topicStr; return join( '/', - this.upperTopic, - entity.ent_type, - this.device_name, + this.upper_topic, + this.use_device ? this.device.indetifier : entity.ent_type, entity.display_name, customTopic ).toLowerCase(); @@ -70,33 +79,13 @@ export class GeneratorService { } } - // get_properties() { - // return Object.getOwnPropertyNames(this.selected_entity); - // } - - // update() { - // this.updateObserver.emit(); - // } + deleteEntity(entity: MQTTEntity) { + this.created_enteties.delete(entity); + } has_property(property: string): boolean { return false; } - // console.log(this.selected_entity); - // if (this.selected_entity == null) return false; - // if (this.selected_entity.attrs.has(property)) return true; - // if (this.selected_entity.hasOwnProperty(property)) return true; - // return false; - // } - - // get_entity(key: string): MQTTEntity | undefined { - // return this.entities.get(key); - // if (res === undefined) return new MQTTEntity(); - // return res; - // } - - // add_entity(key: string, data: MQTTEntity) { - // this.entities.set(key, data); - // } entity_types: { [id: string]: [string, typeof MQTTEntity] } = { '0': ['select type', MQTTEntity], @@ -107,22 +96,6 @@ export class GeneratorService { }; } -export function randomString(length: number): string { - return Math.round( - Math.pow(36, length + 1) - Math.random() * Math.pow(36, length) - ) - .toString(36) - .slice(1); -} - -export const entity_types: { [id: string]: [string, typeof MQTTEntity] } = { - '0': ['select type', MQTTEntity], - '1': ['light', MqttLight], - '2': ['switch', MqttSwitch], - '3': ['sensor', MqttSensor], - '4': ['binary_sensor', MqttBinary], -}; - function join(seperator = '/', first: string, ...args: string[]): string { let result = ''; for (let str of args) { diff --git a/src/app/generator/generator.component.css b/src/app/generator/generator.component.css index cd945ae..1b35e87 100644 --- a/src/app/generator/generator.component.css +++ b/src/app/generator/generator.component.css @@ -1,32 +1,52 @@ +#mainContainer { + display: grid; + grid-template-columns: 3fr 1fr; + gap: 0.5rem; + transition: all 0.25s; +} + +.genContainer, +.outContainer { + background: #9d9d9d; + border-radius: 1rem; + padding: 1rem 0.8rem; + gap: 1rem; +} + .genContainer { - background: #9D9D9D; - border-radius: 1rem; - padding: 1rem .8rem ; - display: flex; - flex-direction: column; - gap: 1rem; + grid-column: 1; } -.customCheckboxContainer{ - display: flex; - flex-direction: row; - gap: .5rem; +.outContainer { + display: flex; + flex-direction: column; + grid-column: 2; } -.customCheckboxContainer input[type="radio"]{ - display: none; +.customCheckboxContainer { + display: flex; + flex-direction: row; + gap: 0.5rem; } -.customCheckbox{ - width: 100%; - padding: .25rem 0; - text-align: center; - background: #B3B3B3; - transition: background .25s ease-in-out, color .25s ease-in-out; - user-select: none; +.customCheckboxContainer input { + display: none; } -.customCheckboxContainer input:checked + label{ - background: var(--accent); - color: var(--secondary); -} \ No newline at end of file +.customCheckbox { + width: 100%; + padding: 0.25rem 0; + text-align: center; + background: #b3b3b3; + transition: background 0.25s ease-in-out, color 0.25s ease-in-out; + user-select: none; +} + +.customCheckboxContainer input:checked + label { + background: var(--accent); + color: var(--secondary); +} + +.outEnable { + grid-template-columns: 1fr 1fr !important; +} diff --git a/src/app/generator/generator.component.html b/src/app/generator/generator.component.html index 5d665d2..3dced6c 100644 --- a/src/app/generator/generator.component.html +++ b/src/app/generator/generator.component.html @@ -1,23 +1,44 @@ -
-
+
+
-
+

Bereich

- +
-
-

Automatische Topics

-
- - - - +
+

Device

+
+ +
+
+

Automatic Topics

+
+ + +
+
+ +
+

Device Name

+ +
+
+

Device Identifier

+ +
+ +

EntityTyp:

+ +
+

Seperate Output

+
+ + +
+
+ + - + + + + +
\ No newline at end of file diff --git a/src/app/generator/generator.component.ts b/src/app/generator/generator.component.ts index 725083c..4bb234d 100644 --- a/src/app/generator/generator.component.ts +++ b/src/app/generator/generator.component.ts @@ -1,7 +1,8 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { EntityService } from '../_services/entity.service'; -import { GeneratorService, randomString } from '../_services/generator.service'; +import { GeneratorService } from '../_services/generator.service'; import { MQTTEntity } from '../_models/mqtt_base'; +import { OutputService } from '../_services/output.service'; +import { MQTTDevice } from '../_models/mqtt-device'; @Component({ selector: 'app-home', @@ -11,19 +12,25 @@ import { MQTTEntity } from '../_models/mqtt_base'; export class GeneratorComponent { constructor( public generatorService: GeneratorService, - private entityService: EntityService + public outputService: OutputService ) {} readonly useObject = Object; - readonly useRandomString = randomString; @ViewChild('typeinput') typeinput: any; @Input() entity_type: number = 0; + device: MQTTDevice = this.generatorService.device; + get created_entities(): MQTTEntity[] { return Array.from(this.generatorService.created_enteties).reverse(); } + get codeSpan(): string { + let start = this.generatorService.selected_entity == null ? 3 : 2; + return `${start}/${3 + this.generatorService.created_entity_num}`; + } + select_type(entity_num: number) { this.entity_type = entity_num; let entity_type = @@ -39,8 +46,4 @@ export class GeneratorComponent { this.typeinput.nativeElement.focus(); } } - - log(event: any) { - console.log(Number(event)); - } }