ADD: Device and Output control

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<MQTTEntity> = new Set();
-  // private entities: Map<string, MQTTEntity> = new Map<string, MQTTEntity>();
 
-  @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) {

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

src/app/generator/generator.component.html

@@ -1,23 +1,44 @@
 <!DOCTYPE html>
-<div class="flex flex-col gap-2">
-  <div class="genContainer">
+<div id="mainContainer" class="" [ngClass]="{'outEnable':outputService.output}">
+  <div class="genContainer grid grid-cols-2 gap-4">
     <!-- Statetopic -->
     <!-- <h3>Data Channel</h3> -->
     
-      <div class="property">
+      <div class="property col-span-2">
         <p>Bereich</p>
-        <input type="text" [ngModel]="generatorService.upperTopic"
-        (ngModelChange)="generatorService.upperTopic = $event" />
+        <input type="text" [ngModel]="generatorService.upper_topic"
+        (ngModelChange)="generatorService.upper_topic = $event" />
       </div>
-      <div class="property">  
-        <p>Automatische Topics</p>
-        <div class="customCheckboxContainer">
-          <input [ngModel]="generatorService.auto_topic" (ngModelChange)="generatorService.auto_topic=$event" id="auto_topic_0" type="radio" name="auto_topic" [value]="true">
-          <label class="customCheckbox" for="auto_topic_0">Alles</label>
-          <input [ngModel]="generatorService.auto_topic" (ngModelChange)="generatorService.auto_topic=$event" id="auto_topic_2" type="radio" name="auto_topic" [value]="false">
-          <label class="customCheckbox" for="auto_topic_2">Aus</label>
+      <div class="property" >
+        <p>Device</p>
+        <div class="customCheckboxContainer" >
+          <input [ngModel]="generatorService.use_device" (ngModelChange)="generatorService.use_device = $event" id="device" type="checkbox">
+          <label class="customCheckbox" for="device" >combine in device</label>
         </div>
       </div>
+      <div class="property">  
+        <p>Automatic Topics</p>
+        <div class="customCheckboxContainer">
+          <input [ngModel]="generatorService.auto_topic" (ngModelChange)="generatorService.auto_topic=$event" id="auto_topic" type="checkbox" name="auto_topic">
+          <label class="customCheckbox" for="auto_topic">automatically generate mqtt topics</label>
+        </div>
+      </div>
+      <ng-container *ngIf="generatorService.use_device">
+        <div class="property">
+          <p>Device Name</p>
+          <input type="text" [ngModel]="device.name" (ngModelChange)="device.name = $event" >
+        </div>
+        <div class="property">
+          <p>Device Identifier</p>
+          <input type="text" [ngModel]="device.indetifier">
+        </div>
+        <!-- <div class="property">
+          <p>Device Serial Number</p>
+        </div>
+        <div class="property">
+          <p>Device Config Url</p>
+        </div> -->
+      </ng-container>
       <div class="col-span-2 property">
         <h3>EntityTyp:</h3>
         <select #typeinput autofocus [ngModel]="entity_type" (ngModelChange)="select_type($event)">
@@ -28,10 +49,26 @@
     
 
   </div>
-  <ng-container *ngIf="generatorService.selected_entity == null" >
-    <button (click)="select_type(entity_type)" class="genContainer" id="entityPlaceholder">Create new entity</button>
+  <div class="outContainer">
+    <h2>Output</h2>
+    <div class="customCheckboxContainer">
+      <input id="output" type="checkbox" [ngModel]="outputService.output" (ngModelChange)="outputService.output = $event">
+      <label class="customCheckbox" for="output" >show output</label>
+    </div>
+    <p>Seperate Output</p>
+    <div class="customCheckboxContainer">
+      <input id="seperate_output" type="checkbox" [ngModel]="outputService.integrated_output" (ngModelChange)="outputService.integrated_output = $event">
+      <label class="customCheckbox" for="seperate_output">Integrate into Code</label>
 
+    </div>
+  </div>
+  <ng-container *ngIf="generatorService.selected_entity == null" >
+    <button (click)="select_type(entity_type)" class="genContainer !col-span-2" id="entityPlaceholder">Create new entity</button>
   </ng-container>
   <app-entity-data class="genContainer" [basemodel]="generatorService.selected_entity" *ngIf="generatorService.selected_entity != null" ></app-entity-data>
-  <app-entity-data class="genContainer" *ngFor="let entity of created_entities" [basemodel]="entity" [created]="true" ></app-entity-data>
+  <app-output class="outContainer" [ngStyle]="{'grid-row': codeSpan}" *ngIf="outputService.integrated_output" ></app-output>
+  <ng-container *ngFor="let entity of created_entities">
+    <app-entity-data class="genContainer" [basemodel]="entity" [created]="true" ></app-entity-data>
+    <app-entity-output class="outContainer" *ngIf="outputService.seperate_outputs" [basemodel]="entity" ></app-entity-output>
+  </ng-container>
 </div>

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));
-  }
 }