ngFor approach works, non-local mqtt broker doesn't work so far

This commit is contained in:
Wolfgang Hottgenroth 2018-06-25 09:37:43 +02:00
parent 4cc8251afb
commit ac322e4154
Signed by: wn
GPG Key ID: B586EAFCDF2F65F4
4 changed files with 77 additions and 56 deletions

View File

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

View File

@ -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) => {
})
}
}

View File

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

View File

@ -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) => {