Version 1.0 working Entity creation and string generator
This commit is contained in:
23
src/app/entity/entity.component.css
Normal file
23
src/app/entity/entity.component.css
Normal file
@@ -0,0 +1,23 @@
|
||||
.property {
|
||||
background-color: #9D9D9D;
|
||||
border-radius: .5rem;
|
||||
padding: .5rem;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.property p{
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.property > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.property span {
|
||||
background: #B3B3B3;
|
||||
padding: .25rem .75rem;
|
||||
border-radius: 1rem;
|
||||
/* width: 100%; */
|
||||
}
|
||||
73
src/app/entity/entity.component.html
Normal file
73
src/app/entity/entity.component.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<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="32" height="32" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
|
||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
|
||||
</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" *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>
|
||||
<input type="text" [ngModel]="state_topic" (change)="lockStateTopic($event)"/>
|
||||
</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>
|
||||
23
src/app/entity/entity.component.spec.ts
Normal file
23
src/app/entity/entity.component.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
98
src/app/entity/entity.component.ts
Normal file
98
src/app/entity/entity.component.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { GeneratorService, entity_types, randomString } from '../_services/generator.service';
|
||||
import { MqttBinary } from '../_models/mqtt-binary';
|
||||
import { 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.updateStateTopic();
|
||||
})
|
||||
}
|
||||
|
||||
readonly useObject = Object;
|
||||
readonly entities = entity_types;
|
||||
readonly useRandomString = randomString;
|
||||
|
||||
auto_stat_t: boolean = true;
|
||||
showDiscovery: boolean = false;
|
||||
|
||||
@Input() entity_type: number = 0;
|
||||
@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 = "";
|
||||
|
||||
updateStateTopic() {
|
||||
if (!this.auto_stat_t) return
|
||||
this.state_topic = ""
|
||||
if (this.generatorService.upperTopic != "") this.state_topic += this.generatorService.upperTopic + "/";
|
||||
if (this.entity_type != 0) this.state_topic += entity_types[this.entity_type][0] + "/"
|
||||
if (this.generatorService.device_name != "") this.state_topic += this.generatorService.device_name + "/"
|
||||
if (this.entity_name != "" && this.entity_uniq_id != "") this.state_topic += this.entity_name + "_" + this.entity_uniq_id + "/stat"
|
||||
else if (this.entity_name != "") this.state_topic += this.entity_name + "/stat"
|
||||
this.state_topic = this.state_topic.toLocaleLowerCase();
|
||||
}
|
||||
|
||||
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_class = ent_type[1];
|
||||
if (typeof ent_class === 'function') {
|
||||
this.basemodel = new ent_class();
|
||||
this.generatorService.selected_entity = this.basemodel
|
||||
} else this.generatorService.selected_entity = null
|
||||
this.entity_type = event as number;
|
||||
this.updateStateTopic();
|
||||
}
|
||||
|
||||
lockStateTopic(event: any) {
|
||||
this.auto_stat_t = false;
|
||||
}
|
||||
|
||||
create_entity() {
|
||||
this.basemodel?.setProperty('stat_t', this.state_topic);
|
||||
|
||||
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.showDiscovery = true;
|
||||
return
|
||||
}
|
||||
|
||||
get discoveryString() {
|
||||
let discString = this.basemodel?.createString()
|
||||
if (discString == "" || discString == undefined) return "";
|
||||
discString = discString.replaceAll('"', '\\"')
|
||||
return "{" + discString + "}"
|
||||
}
|
||||
|
||||
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"
|
||||
return discTopic;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user