43 lines
1012 B
TypeScript
43 lines
1012 B
TypeScript
|
import { Component, Input, OnInit } from '@angular/core';
|
||
|
|
import * as Mqtt from 'mqtt'
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-ledindicator',
|
||
|
|
template: `
|
||
|
|
<div [ngStyle]="{'text-align':'center'}">
|
||
|
|
{{ledId}}<br/>
|
||
|
|
<span [ngStyle]="{'color':color, 'font-size':'200%'}">●</span>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
})
|
||
|
|
export class LedindicatorComponent implements OnInit {
|
||
|
|
|
||
|
|
@Input() topic : string = 'invalid'
|
||
|
|
@Input() ledId : string = 'invalid'
|
||
|
|
color : string = 'red'
|
||
|
|
|
||
|
|
private mqttClient : Mqtt.MqttClient
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
this.mqttClient = Mqtt.connect('ws://localhost:9001')
|
||
|
|
this.mqttClient.on('connect', () => {
|
||
|
|
this.mqttClient.subscribe(this.topic)
|
||
|
|
})
|
||
|
|
this.mqttClient.on('message', (topic: string, messageBuf: Buffer) => {
|
||
|
|
let message : string = messageBuf.toString('UTF-8')
|
||
|
|
if (message == 'ON') {
|
||
|
|
this.color = 'green'
|
||
|
|
} else if (message == 'OFF') {
|
||
|
|
this.color = 'red'
|
||
|
|
} else {
|
||
|
|
this.color = 'blue'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnInit() {
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|