uwap/mqtt-control-map
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Correctly change to map icon when mqtt has connected successfully

Browse source
This commit is contained in:
uwap 2018-01-14 01:35:42 +01:00
parent da7105c90b
commit ef41de4349
2 changed files with 15 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

15
config/rzl.js
View file

@ -7,7 +7,7 @@ const config : Config = {
color: "orange", color: "orange",
mqtt: "ws://map.rzl:1884" mqtt: "ws://map.rzl:1884"
}, },
topics: Object.assign({}, { topics: {
led_stahltraeger: { led_stahltraeger: {
state: "/service/openhab/out/pca301_ledstrips/state", state: "/service/openhab/out/pca301_ledstrips/state",
command: "/service/openhab/in/pca301_ledstrips/command", command: "/service/openhab/in/pca301_ledstrips/command",
@ -116,14 +116,13 @@ const config : Config = {
command: "/service/openhab/in/pca301_infoscreen/command", command: "/service/openhab/in/pca301_infoscreen/command",
defaultValue: "OFF", defaultValue: "OFF",
values: { on: "ON", off: "OFF" } values: { on: "ON", off: "OFF" }
}}, }
utils.esper_topics("afba40") },
),
controls: { controls: {
led_stahltrager: { led_stahltrager: {
name: "LED Stahlträger", name: "LED Stahlträger",
position: [380, 300], position: [380, 590],
icon: "white-balance-iridescent rotate-90", icon: "white-balance-iridescent",
iconColor: ({led_stahltraeger}) => led_stahltraeger == "on" ? utils.rainbow : "#000000", iconColor: ({led_stahltraeger}) => led_stahltraeger == "on" ? utils.rainbow : "#000000",
ui: [ ui: [
{ {
@ -221,14 +220,14 @@ const config : Config = {
position: [450, 590], position: [450, 590],
icon: "fire", icon: "fire",
iconColor: ({flyfry}) => flyfry == "on" ? "#6666FF" : "#000000", iconColor: ({flyfry}) => flyfry == "on" ? "#6666FF" : "#000000",
ui: utils.esper_statistics("afba40", [ ui: [
{ {
type: "toggle", type: "toggle",
text: "Fliegenbratgerät", text: "Fliegenbratgerät",
topic: "flyfry", topic: "flyfry",
icon: "power" icon: "power"
} }
]) ]
}, },
artnet: { artnet: {
name: "Artnet", name: "Artnet",

11
src/components/App.js
View file

@ -25,7 +25,8 @@ export type AppState = {
selectedControl: ?Control, selectedControl: ?Control,
drawerOpened: boolean, drawerOpened: boolean,
mqttState: State, mqttState: State,
mqttSend: (topic: string, value: any) => void mqttSend: (topic: string, value: any) => void,
mqttConnected: boolean,
}; };
class App extends React.Component<AppProps & Classes, AppState> { class App extends React.Component<AppProps & Classes, AppState> {
@ -40,8 +41,12 @@ class App extends React.Component<AppProps & Classes, AppState> {
})), })),
mqttSend: connectMqtt(props.config.space.mqtt, { mqttSend: connectMqtt(props.config.space.mqtt, {
onMessage: this.receiveMessage.bind(this), onMessage: this.receiveMessage.bind(this),
onConnect: () => this.setState({ mqttConnected: true }),
onReconnect: () => this.setState({ mqttConnected: false }),
onDisconnect: () => this.setState({ mqttConnected: false }),
subscribe: _.map(props.config.topics, (x) => x.state) subscribe: _.map(props.config.topics, (x) => x.state)
}) }),
mqttConnected: false
}; };
} }
@ -103,7 +108,7 @@ class App extends React.Component<AppProps & Classes, AppState> {
<MuiThemeProvider theme={this.theme}> <MuiThemeProvider theme={this.theme}>
<div> <div>
<TopBar title={`${this.props.config.space.name} Map`} <TopBar title={`${this.props.config.space.name} Map`}
connected={false} /> connected={this.state.mqttConnected} />
<SideBar open={this.state.drawerOpened} <SideBar open={this.state.drawerOpened}
control={this.state.selectedControl} control={this.state.selectedControl}
onCloseRequest={this.closeDrawer.bind(this)} onCloseRequest={this.closeDrawer.bind(this)}