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

CHANGE: Created seperate output for discovery

Browse Source
This commit is contained in:
Tom Tröger
2024-08-02 07:34:09 +02:00
parent 942142f517
commit f4eea9bebe
7 changed files with 23 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/entity-output/entity-output.component.css
View File

@@ -0,0 +1,5 @@
.jsonPrev {
max-width: 50%;
text-wrap: wrap;
flex-shrink: 0;
}

13
src/app/entity-output/entity-output.component.html
View File

@@ -1 +1,12 @@
<p>entity-output works!</p> <!DOCTYPE html>
<div class="property" >
<p>Discovery String</p>
<div class="flex flex-row gap-2">
<pre class="jsonPrev" >{{outputService.getDiscoveryString(basemodel) | json}}</pre>
<span contenteditable>{{outputService.getDiscoveryString(basemodel, true)}}</span>
</div>
</div>
<div class="property" >
<p>Discovery Topic</p>
<input type="text" readonly [ngModel]="outputService.getDiscoveryTopic(basemodel)">
</div>

9
src/app/entity-output/entity-output.component.ts
View File

@@ -1,10 +1,13 @@
import { Component } from '@angular/core'; import { Component, Input } from '@angular/core';
import { MQTTEntity } from '../_models/mqtt_base';
import { OutputService } from '../_services/output.service';
@Component({ @Component({
selector: 'app-entity-output', selector: 'app-entity-output',
templateUrl: './entity-output.component.html', templateUrl: './entity-output.component.html',
styleUrl: './entity-output.component.css' styleUrl: './entity-output.component.css',
}) })
export class EntityOutputComponent { export class EntityOutputComponent {
constructor(public outputService: OutputService) {}
@Input() basemodel!: MQTTEntity;
} }

3
src/app/entity/entity.component.css
View File

@@ -1,3 +0,0 @@
pre{
}

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

@@ -1,80 +0,0 @@
<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 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; 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"/>
</svg>
</button>
</div>
</div>
<div class="property" *ngIf="generatorService.has_property('cmd_t')">
<p>Command Topic</p>
<input type="text" [ngModel]="entity_cmd_t" (input)="lock_auto_topic(); update('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)="lock_auto_topic(); update('entity_bri_cmd_t', $event)"/>
</div>
<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"/>
</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>
<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>
<div class="property" *ngIf="generatorService.has_property('stat_t')">
<p>State Topic</p>
<div class="flex-row flex gap-2">
<input type="text" [ngModel]="stat_t" (ngModelChange)="lock_auto_topic(); update('stat_t', $event)"/>
</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>
<div class="flex flex-row gap-2">
<pre>{{discoveryString | json}}</pre>
<span contenteditable>{{JSONdiscoveryString}}</span>
</div>
</div>
<div class="col-span-2 property" >
<p>Discovery Topic</p>
<input type="text" readonly [ngModel]="_discoveryTopic">
</div>
</ng-container>
</main>

23
src/app/entity/entity.component.spec.ts
View File

@@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EntityComponent } from './entity.component';
describe('EntityComponent', () => {
let component: EntityComponent;
let fixture: ComponentFixture<EntityComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [EntityComponent]
})
.compileComponents();
fixture = TestBed.createComponent(EntityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

@@ -1,177 +0,0 @@
import { Component, Input } from '@angular/core';
import {
GeneratorService,
entity_types,
randomString,
} from '../_services/generator.service';
import { MqttBinary } from '../_models/mqtt-binary';
import { DeviceClass, MQTTEntity } from '../_models/mqtt_base';
@Component({
selector: 'app-entity',
templateUrl: './entity.component.html',
styleUrl: './entity.component.css',
})
export class EntityComponent {
constructor(public generatorService: GeneratorService) {
generatorService.updateObserver.subscribe((date) => {
this.update();
});
}
readonly useObject = Object;
readonly entities = entity_types;
readonly useRandomString = randomString;
showDiscovery: boolean = false;
_discoveryTopic: string = '';
@Input() entity_type: number = 0;
@Input() stat_t: 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 = '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(model: keyof this = 'stat_t', event: Event | boolean = false): void {
// if (this.generatorService.auto_topic == 2) {
// this.stat_t = this.updateTopic('stat');
// this.entity_cmd_t = this.updateTopic('cmd');
// this.entity_bri_cmd_t = this.updateTopic('bri_cmd');
// return;
// }
// if (event instanceof Event)
// var value = (event.target as HTMLInputElement).value;
// else return;
// if (this.generatorService.auto_topic == 1) {
// this.sync_topcis(model, value);
// } else {
// if (!this.hasOwnProperty(model)) return;
// if (typeof this[model] === 'string') {
// this[model] = value as (typeof this)[keyof this];
// }
// }
}
sync_topcis(model: keyof this, value: string) {
let new_list = value.split('/');
let old_list = String(this[model]).split('/');
let missing = new_list.filter((item) => old_list.indexOf(item) < 0);
if (old_list.filter((item) => new_list.indexOf(item) < 0).length > 1)
return (this.generatorService.auto_topic = false);
if (missing.length == 0) return; //(this.generatorService.auto_topic = 2);
if (new_list.indexOf(missing[0]) == new_list.length - 1) {
this[model] = value as (typeof this)[keyof this];
return;
}
let missing_index = new_list.indexOf(missing[0]);
this.stat_t = this.replaceComponent(this.stat_t, missing[0], missing_index);
this.entity_cmd_t = this.replaceComponent(
this.entity_cmd_t,
missing[0],
missing_index
);
this.entity_bri_cmd_t = this.replaceComponent(
this.entity_bri_cmd_t,
missing[0],
missing_index
);
return;
}
replaceComponent(object: string, value: string, index: number) {
let param_list = object.split('/');
param_list[index] = value;
return param_list.join('/');
}
updateTopic(topic: string) {
let topic_str = join(
'/',
this.generatorService.upperTopic,
entity_types[this.entity_type][0],
this.generatorService.device_name,
this.display_name,
topic
).toLowerCase();
return topic_str;
}
select_type(event: unknown) {}
// let ent_type = entity_types[event as keyof typeof entity_types];
// let ent_class = ent_type[1];
// if (typeof ent_class === 'function' && event != 0) {
// this.basemodel = new ent_class();
// this.generatorService.selected_entity = this.basemodel;
// // if (this.generatorService.has_property('dev_cla')) {
// // this.entity_dev_cla = this.basemodel.;
// // }
// } else this.generatorService.selected_entity = null;
// this.entity_type = event as number;
// this.update();
// }
lock_auto_topic() {
// this.generatorService.auto_topic = 1;
}
create_entity() {}
// this.basemodel?.setProperty('stat_t', this.stat_t);
// this.basemodel?.setProperty('name', this.entity_name);
// this.basemodel?.setProperty('cmd_t', this.entity_cmd_t);
// this.basemodel?.setProperty('bri_cmd_t', this.entity_bri_cmd_t);
// this.basemodel?.setProperty('pl_off', this.entity_pl_off);
// this.basemodel?.setProperty('pl_on', this.entity_pl_on);
// this.basemodel?.setProperty('unit_of_meas', this.entity_unit_of_meas);
// this.basemodel?.setProperty('val_tpl', this.entity_val_tpl);
// this.basemodel?.setProperty('dev_cla', this.entity_dev_cla);
// this._discoveryTopic = this.discoveryTopic;
// this.showDiscovery = true;
// return;
// }
get discoveryString() {
return this.basemodel?.toJSON();
}
get JSONdiscoveryString() {
return JSON.stringify(this.basemodel?.toJSON()).replaceAll('"', '\\"');
}
get discoveryTopic() {
if (this.entity_type == 0) return '';
return join(
'/',
'homeassistant',
entity_types[this.entity_type][0],
this.display_name
).toLowerCase();
}
}
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;
}