tune with dispatcher output

sample-configuration.json

@@ -0,0 +1,64 @@
+{
+    "switches": [
+        { 
+            "room": "Wohnzimmer", 
+            "switches": [
+                {
+                    "label": "kleine Lampe",
+                    "actionTopic": "dispatcher_ng/items/Gnd/LivingRoom/SmallLight/state",
+                    "feedbackTopic": "dispatcher_ng/items/Gnd/LivingRoom/SmallLight/state/feedback"
+                },
+                {
+                    "label": "große Lampe",
+                    "actionTopic": "dispatcher_ng/items/Gnd/LivingRoom/LargeLight/state",
+                    "feedbackTopic": "dispatcher_ng/items/Gnd/LivingRoom/LargeLight/state/feedback"
+                },
+                {
+                    "label": "Sterne",
+                    "actionTopic": "dispatcher_ng/items/Gnd/LivingRoom/Stars/state",
+                    "feedbackTopic": "dispatcher_ng/items/Gnd/LivingRoom/Stars/state/feedback"
+                },
+                {
+                    "label": "Stehlampe",
+                    "actionTopic": "dispatcher_ng/items/Gnd/LivingRoom/StandLight/state",
+                    "feedbackTopic": "dispatcher_ng/items/Gnd/LivingRoom/StandLight/state/feedback"
+                }
+            ]
+        },
+        {
+            "room": "Esszimmer",
+            "switches": [
+                {
+                    "label": "kleine Lampe",
+                    "actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/SmallLight/state",
+                    "feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/SmallLight/state/feedback"
+                },
+                {
+                    "label": "Stehlampe",
+                    "actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/StandLight/state",
+                    "feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/StandLight/state/feedback"
+                },
+                {
+                    "label": "Schranklicht",
+                    "actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/CupboardLight/state",
+                    "feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/CupboardLight/state/feedback"
+                },
+                {
+                    "label": "Naehkaestchenlicht",
+                    "actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/NaehkaestchenLight/state",
+                    "feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/NaehkaestchenLight/state/feedback"
+                },
+                {
+                    "label": "Regallicht",
+                    "actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/ShelfLight/state",
+                    "feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/ShelfLight/state/feedback"
+                }
+            ]
+        }
+    ],
+    "windows": [
+        { "label": "Fenster 1", "topic": "test/fenster1" },
+        { "label": "Fenster 2", "topic": "test/fenster2" },
+        { "label": "Fenster 3", "topic": "test/fenster3" }
+    ]
+}

src/app/app.component.css

@@ -6,7 +6,16 @@ ledbox {
     float: left;
     display: block;
 }
+onoff {
+    float: left;
+    display: block;
+}
 
 p.clear {
     clear: both;
+}
+
+div#scenes {
+    margin-top: 10px;
+    margin-bottom: 10px;
 }

src/app/app.component.html

@@ -1,64 +1,30 @@
 
 <mat-tab-group>
     <mat-tab label="Licht">
-        <mat-accordion>
+      <div id="scenes">
-          <mat-expansion-panel>
+      <onoff *ngFor="let scene of configuration.scenes"
-            <mat-expansion-panel-header>
+        [label]="scene.label" [topic]="scene.actionTopic"></onoff>
-              <mat-panel-title>
+      <p class="clear"></p>
-                Wohnzimmer
+      </div>
-              </mat-panel-title>
+      <mat-divider></mat-divider>
-            </mat-expansion-panel-header>
-                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
-                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
-                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
-                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
-                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
-                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
-                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
-                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
-                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
-                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
-                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
-                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
-                    <p class="clear"></p>
-              </mat-expansion-panel>
-          <mat-expansion-panel>
-            <mat-expansion-panel-header>
-              <mat-panel-title>
-                Esszimmer
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <table id="maintable">
-                <tr>
-                  <td>
-                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
-                  </td>
-                  <td>
-                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
-                  </td>
-                  <td>
-                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
-                  </td>
-                  <td>
-                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
-                  </td>
-                </tr>
-              </table>
-              </mat-expansion-panel>
-        </mat-accordion>
-          
 
-
+      <mat-accordion>
-
+        <mat-expansion-panel *ngFor="let room of configuration.switches">
-
+          <mat-expansion-panel-header>
-
+            <mat-panel-title>
-          
+              {{room.room}}
+            </mat-panel-title>
+          </mat-expansion-panel-header >
+            <ledbutton2 *ngFor="let switch of room.switches" 
+              [actionTopic]="switch.actionTopic" [feedbackTopic]="switch.feedbackTopic"
+              [label]="switch.label"></ledbutton2>
+            <p class="clear"></p>
+        </mat-expansion-panel>
+      </mat-accordion>
     </mat-tab>
     <mat-tab label="Fenster">
-        <ledbox topic="led/test4" label="test4"></ledbox>
+      <ledbox *ngFor="let window of configuration.windows" [topic]="window.topic" [label]="window.label"></ledbox>
-        <ledbox topic="led/test4" label="test4"></ledbox>
+      <p class="clear"></p>
-        <p class="clear"></p>
-
     </mat-tab>
     <mat-tab label="Heizung">
 

src/app/app.component.ts

@@ -1,10 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { MqttclientService } from './mqttclient.service'
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'app';
+  private topic : string = 'smartclient/configuration'
+  configuration : any = { 
+    'switches': [],
+    'windows': []
+  }
+
+  constructor(private mqttclientService : MqttclientService) { 
+  }
+
+  ngOnInit() {
+    this.mqttclientService.register(this.topic, (message: string) => {
+      try {
+        this.configuration = JSON.parse(message)
+      } catch (e) {
+        alert(`Error when parsing received configuration: ${e}`)
+      }
+    })
+  }
+
 }

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
 
 import { MqttclientService } from './mqttclient.service'
 
@@ -32,7 +33,8 @@ import { LedBoxComponent } from './led-box/led-box.component';
     BrowserAnimationsModule,
     MatTabsModule,
     MatExpansionModule,
-    MatButtonModule
+    MatButtonModule,
+    MatDividerModule
   ],
   providers: [
     MqttclientService

src/app/led-box/led-box.component.ts

@@ -5,7 +5,7 @@ import { MqttclientService } from '../mqttclient.service'
   selector: 'ledbox',
   template: `
   <div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px', 
-  'width': '100px', 'padding':'5px', 'margin': '5px',
+  'width': '100px', 'height':'80px', 'padding':'5px', 'margin': '5px',
   'font-family': 'sans-serif' }">
     {{label}}<br/>
     <led [topic]="topic" greenToken="CLOSED" redToken="OPEN"></led>

src/app/led-button-group2/led-button-group2.component.ts

@@ -16,16 +16,13 @@ import { MqttclientService } from '../mqttclient.service'
 })
 export class LedButtonGroup2Component implements OnInit {
 
-  actionTopic : string
+  @Input() actionTopic : string
-  feedbackTopic : string
+  @Input() feedbackTopic : string
-  @Input('topic') topicPre : string
   @Input() label : string
 
   constructor(private mqttclientService : MqttclientService) { }
 
   ngOnInit() {
-    this.actionTopic = this.topicPre + '/state'
-    this.feedbackTopic = this.topicPre + '/feedback'
   }
 
 

src/app/mqttclient.service.ts

@@ -9,7 +9,7 @@ export class MqttclientService {
   private callbacks : Map<string, callbackFunc> = new Map()
 
   constructor() { 
-    this.mqttClient = Mqtt.connect('ws://localhost:9001')
+    this.mqttClient = Mqtt.connect('ws://127.0.0.1:9001')
     this.mqttClient.on('connect', () => {
       console.log('MQTT connected')
       this.callbacks.forEach((value: callbackFunc, key: string) => {

src/app/on-off-button/on-off-button.component.ts

@@ -4,14 +4,18 @@ import { MqttclientService } from '../mqttclient.service'
 @Component({
   selector: 'onoff',
   template: `
-  <div class="button">
+  <div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px', 
-    <button (click)="clickOn()" [ngStyle]="{'font-size':'150%'}">on</button>
+                    'width': '150px', 'padding':'5px', 'margin': '5px',
-    <button (click)="clickOff()" [ngStyle]="{'font-size':'150%'}">off</button>
+                    'font-family': 'sans-serif' }">
+    {{label}}<br/>
+    <button mat-mini-fab color="primary" (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
+    <button mat-mini-fab color="primary" (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
   </div>
   `
 })
 export class OnOffButtonComponent implements OnInit {
   @Input() topic : string = 'invalid'
+  @Input() label : string = 'invalid'
 
   constructor(private mqttclientService : MqttclientService) { }