From ac322e41545828d0522328ba98bc8925acea4071 Mon Sep 17 00:00:00 2001
From: Wolfgang Hottgenroth <wolfgang.hottgenroth@icloud.com>
Date: Mon, 25 Jun 2018 09:37:43 +0200
Subject: [PATCH] ngFor approach works, non-local mqtt broker doesn't work so
 far

---
 src/app/app.component.html                    | 63 ++++--------------
 src/app/app.component.ts                      | 66 ++++++++++++++++++-
 .../led-button-group2.component.ts            |  2 +-
 src/app/mqttclient.service.ts                 |  2 +-
 4 files changed, 77 insertions(+), 56 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0f4ca0b..afabe32 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,58 +1,17 @@
 
 <mat-tab-group>
     <mat-tab label="Licht">
-        <mat-accordion>
-          <mat-expansion-panel>
-            <mat-expansion-panel-header>
-              <mat-panel-title>
-                Wohnzimmer
-              </mat-panel-title>
-            </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" [topic]="switch.topic" [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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..ed4f5ee 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,72 @@
-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': [
+      { 
+        'room': 'Wohnzimmer', 
+        'switches': [
+          {
+            'label': 'kleine Lampe',
+            'topic': 'dispatcher_ng/items/Gnd/LivingRoom/SmallLight'
+          },
+          {
+            'label': 'große Lampe',
+            'topic': 'dispatcher_ng/items/Gnd/LivingRoom/LargeLight'
+          },
+          {
+            'label': 'Sterne',
+            'topic': 'dispatcher_ng/items/Gnd/LivingRoom/Stars'
+          },
+          {
+            'label': 'Stehlampe',
+            'topic': 'dispatcher_ng/items/Gnd/LivingRoom/StandLight'
+          }
+        ]
+      },
+      {
+        'room': 'Esszimmer',
+        'switches': [
+          {
+            'label': 'kleine Lampe',
+            'topic': 'dispatcher_ng/items/Gnd/DiningRoom/SmallLight'
+          },
+          {
+            'label': 'Stehlampe',
+            'topic': 'dispatcher_ng/items/Gnd/DiningRoom/StandLight'
+          },
+          {
+            'label': 'Schranklicht',
+            'topic': 'dispatcher_ng/items/Gnd/DiningRoom/CupboardLight'
+          },
+          {
+            'label': 'Naehkaestchenlicht',
+            'topic': 'dispatcher_ng/items/Gnd/DiningRoom/NaehkaestchenLight'
+          },
+          {
+            'label': 'Regallicht',
+            'topic': 'dispatcher_ng/items/Gnd/DiningRoom/ShelfLight'
+          }
+        ]
+      }
+    ]
+
+  }
+
+  constructor(private mqttclientService : MqttclientService) { 
+  }
+
+  ngOnInit() {
+    this.mqttclientService.register(this.topic, (message: string) => {
+    })
+  }
+
 }
diff --git a/src/app/led-button-group2/led-button-group2.component.ts b/src/app/led-button-group2/led-button-group2.component.ts
index ce807f9..acb0cca 100644
--- a/src/app/led-button-group2/led-button-group2.component.ts
+++ b/src/app/led-button-group2/led-button-group2.component.ts
@@ -25,7 +25,7 @@ export class LedButtonGroup2Component implements OnInit {
 
   ngOnInit() {
     this.actionTopic = this.topicPre + '/state'
-    this.feedbackTopic = this.topicPre + '/feedback'
+    this.feedbackTopic = this.topicPre + '/state/feedback'
   }
 
 
diff --git a/src/app/mqttclient.service.ts b/src/app/mqttclient.service.ts
index 72b8b1f..169584e 100644
--- a/src/app/mqttclient.service.ts
+++ b/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://mqttbroker:9001')
     this.mqttClient.on('connect', () => {
       console.log('MQTT connected')
       this.callbacks.forEach((value: callbackFunc, key: string) => {