Version 1.0 working Entity creation and string generator

src/app/_models/mqtt-binary.spec.ts

@@ -0,0 +1,7 @@
+import { MqttBinary } from './mqtt-binary';
+
+describe('MqttBinary', () => {
+  it('should create an instance', () => {
+    expect(new MqttBinary()).toBeTruthy();
+  });
+});

src/app/_models/mqtt-binary.ts

@@ -0,0 +1,7 @@
+import { DEVICE_CLASS, MQTTEntity } from "./mqtt_base";
+
+export class MqttBinary extends MQTTEntity {
+    dev_cla: DEVICE_CLASS = 0
+    pl_on: string = "1";
+    pl_off: string = "0";
+}

src/app/_models/mqtt-light.spec.ts

@@ -0,0 +1,7 @@
+import { MqttLight } from './mqtt-light';
+
+describe('MqttLight', () => {
+  it('should create an instance', () => {
+    expect(new MqttLight()).toBeTruthy();
+  });
+});

src/app/_models/mqtt-light.ts

@@ -0,0 +1,9 @@
+import { MQTTEntity } from "./mqtt_base";
+
+export class MqttLight extends MQTTEntity {
+    cmd_t: string = "command/topic";
+    bri_cmd_t: string = "brightness/command/topic";
+    pl_on: string = "1";
+    pl_off: string = "0";
+    val_tpl: string = "";
+}

src/app/_models/mqtt-sensor.spec.ts

@@ -0,0 +1,7 @@
+import { MqttSensor } from './mqtt-sensor';
+
+describe('MqttSensor', () => {
+  it('should create an instance', () => {
+    expect(new MqttSensor()).toBeTruthy();
+  });
+});

src/app/_models/mqtt-sensor.ts

@@ -0,0 +1,5 @@
+import { MQTTEntity } from "./mqtt_base";
+
+export class MqttSensor extends MQTTEntity {
+  unit_of_meas: string = "meassure";
+  }

src/app/_models/mqtt-switch.spec.ts

@@ -0,0 +1,7 @@
+import { MqttSwitch } from './mqtt-switch';
+
+describe('MqttSwitch', () => {
+  it('should create an instance', () => {
+    expect(new MqttSwitch()).toBeTruthy();
+  });
+});

src/app/_models/mqtt-switch.ts

@@ -0,0 +1,8 @@
+import { DEVICE_CLASS, MQTTEntity } from "./mqtt_base";
+
+export class MqttSwitch extends MQTTEntity {
+    dev_cla: DEVICE_CLASS = 0
+    cmd_t: string = "command/topic";
+    pl_on: string = "1";
+    pl_off: string = "0";
+}

src/app/_models/mqtt_base.spec.ts

@@ -0,0 +1,7 @@
+import { MQTTEntity } from './mqtt_base';
+
+describe('MQTTEntity', () => {
+  it('should create an instance', () => {
+    expect(new MQTTEntity()).toBeTruthy();
+  });
+});

src/app/_models/mqtt_base.ts

@@ -0,0 +1,43 @@
+export class MQTTEntity {
+    name: string = "";
+    stat_t: string = "state/topic";
+    uniq_id: string = "unique_id";
+    dev: MQTTDevice | null = null;
+    // entity_type: ENTITY_TYPE = 0;
+
+    setProperty(name: unknown, value: any): void {
+        if(!this.hasOwnProperty(String(name))) return
+        this[name as keyof this] = value; 
+    }
+
+    createString() : string{
+        let string: string = "";
+        for(let property of Object.getOwnPropertyNames(this)){
+            if(this[property as keyof this] ==  null) continue;
+            string += `"${property}": "${this[property as keyof this]}",`
+        }
+        console.log(string);
+        return string;
+    }
+}
+
+export class MQTTDevice {
+    name: string = "";
+    identifiers: string[] = ["MQTT"];
+    serial_number: string = "";
+    configuration_url: string = "";
+}
+
+// export enum ENTITY_TYPE {
+//     light = 0,
+//     switch = 1,
+//     sensor = 2,
+//     binary_sensor = 3,
+//     button = 4,
+// }
+
+export enum DEVICE_CLASS {
+    motion = 0,
+    movement = 1,
+    outlet = 2
+  }

src/app/_services/generator.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GeneratorService } from './generator.service';
+
+describe('GeneratorService', () => {
+  let service: GeneratorService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GeneratorService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/generator.service.ts

@@ -0,0 +1,50 @@
+import { EventEmitter, Injectable, Input } from '@angular/core';
+import { MQTTEntity } from '../_models/mqtt_base';
+import { MqttLight } from '../_models/mqtt-light';
+import { MqttSwitch } from '../_models/mqtt-switch';
+import { MqttSensor } from '../_models/mqtt-sensor';
+import { MqttBinary } from '../_models/mqtt-binary';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GeneratorService {
+  public selected_entity: MQTTEntity | null = null;
+  public created_enteties: Array<MQTTEntity> = [];
+
+  @Input() device_name: string = "";
+  @Input() device_id: string = "";
+  @Input() device_standalone: boolean = false;
+  @Input() upperTopic: string = "";
+  updateObserver: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+
+  constructor() { }
+
+  get_properties() {
+    return Object.getOwnPropertyNames(this.selected_entity);
+  }
+
+  update(){
+    this.updateObserver.emit();
+  }
+
+  has_property(property: string): boolean {
+    if (this.selected_entity == null) return false;
+    if (this.selected_entity.hasOwnProperty(property)) return true;
+    return false
+  }
+
+}
+
+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]
+}

src/app/app-routing.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { GeneratorComponent } from './generator/generator.component';
+
+const routes: Routes = [
+  {path: '', component: GeneratorComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -0,0 +1,3 @@
+  <div>
+    <router-outlet></router-outlet>
+  </div>

src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'mqtt_creator'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('mqtt_creator');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, mqtt_creator');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = 'mqtt_creator';
+}

src/app/app.module.server.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

src/app/app.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { GeneratorComponent } from './generator/generator.component';
+import { FormsModule } from '@angular/forms';
+import { EntityComponent } from './entity/entity.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    GeneratorComponent,
+    EntityComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    FormsModule,
+  ],
+  providers: [
+    provideClientHydration()
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/entity/entity.component.css

@@ -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%; */
+}

src/app/entity/entity.component.html

@@ -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>

src/app/entity/entity.component.spec.ts

@@ -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();
+  });
+});

src/app/entity/entity.component.ts

@@ -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;
+  }
+}

src/app/generator/generator.component.css

@@ -0,0 +1,5 @@
+.genContainer {
+    background: #9D9D9D;
+    border-radius: 1rem;
+    padding: 1rem .8rem ;
+}

src/app/generator/generator.component.html

@@ -0,0 +1,28 @@
+<main class="flex flex-col gap-2 p-4">
+  <h2>MQTT Discovery Creator:</h2>
+
+  <!-- <div class="border border-slate-800 my-2">
+    <h2>Device: - not working</h2>
+    <p>Name</p><input type="text" placeholder="name here" [ngModel]="generatorService.device_name"
+      (ngModelChange)="generatorService.device_name = $event; generatorService.update()">
+    <p>Identifier</p>
+    <input type="text" placeholder="Identifier here" [ngModel]="generatorService.device_id"
+      (ngModelChange)="generatorService.device_id = $event">
+    <button (click)="generatorService.device_id = useRandomString(16)">Random</button>
+    <p>Standalone -> no device</p>
+    <input type="checkbox" [ngModel]="generatorService.device_standalone"
+      (ngModelChange)="generatorService.device_standalone = $event; generatorService.update()" />
+  </div> -->
+  <div class="genContainer">
+    <!-- Statetopic -->
+    <h3>Data Channel</h3>
+    <div>
+      <p>Bereich</p>
+      <input type="text" [ngModel]="generatorService.upperTopic"
+        (ngModelChange)="generatorService.upperTopic = $event; generatorService.update()" />
+    </div>
+
+  </div>
+  <app-entity class="genContainer" ></app-entity>
+
+</main>

src/app/generator/generator.component.spec.ts

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

src/app/generator/generator.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { MqttLight } from '../_models/mqtt-light';
+import { MqttSwitch } from '../_models/mqtt-switch';
+import { MqttSensor } from '../_models/mqtt-sensor';
+import { MqttBinary } from '../_models/mqtt-binary';
+import { GeneratorService, entity_types, randomString } from '../_services/generator.service';
+import { MQTTEntity } from '../_models/mqtt_base';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './generator.component.html',
+  styleUrl: './generator.component.css'
+})
+
+export class GeneratorComponent {
+  constructor(public generatorService: GeneratorService) {
+  }
+
+
+  readonly useObject = Object;
+  readonly useRandomString = randomString;
+
+
+
+
+}
+
+
+
+
+
+
+