separate actionTopic and feedbackTopic

src/app/app.component.html

@@ -8,16 +8,16 @@
               {{room.room}}
             </mat-panel-title>
           </mat-expansion-panel-header >
-            <ledbutton2 *ngFor="let switch of room.switches" [topic]="switch.topic" [label]="switch.label"></ledbutton2>
+            <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 topic="led/test4" label="test4"></ledbox>
-        <p class="clear"></p>
-
+      <ledbox *ngFor="let window of configuration.windows" [topic]="window.topic" [label]="window.label"></ledbox>
+      <p class="clear"></p>
     </mat-tab>
     <mat-tab label="Heizung">
 

src/app/app.component.ts

@@ -9,56 +9,9 @@ import { MqttclientService } from './mqttclient.service'
 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'
-          }
-        ]
-      }
-    ]
-
+  configuration : any = { 
+    'switches': [],
+    'windows': []
   }
 
   constructor(private mqttclientService : MqttclientService) { 
@@ -66,6 +19,11 @@ export class AppComponent implements OnInit {
 
   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/led-button-group2/led-button-group2.component.ts

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