ngFor approach works, non-local mqtt broker doesn't work so far
This commit is contained in:
parent
4cc8251afb
commit
ac322e4154
@ -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>
|
||||
|
@ -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) => {
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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'
|
||||
}
|
||||
|
||||
|
||||
|
@ -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) => {
|
||||
|
Loading…
x
Reference in New Issue
Block a user