92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
// @flow
|
|
import React from "react";
|
|
import ReactDOM from "react-dom";
|
|
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
|
import Drawer from 'material-ui/Drawer';
|
|
import injectTapEventPlugin from 'react-tap-event-plugin';
|
|
import { createStore } from "redux";
|
|
import { MQTT_CONNECT } from "./stateActions";
|
|
import connectMqtt from "./mqtt";
|
|
import AppBar from "./appbar";
|
|
import Toggle from "material-ui/Toggle";
|
|
import * as UiItems from "./UiItems.js";
|
|
import SpaceMap from "./map.js";
|
|
import R from "ramda";
|
|
import Config from "./config";
|
|
import { Toolbar, ToolbarGroup, ToolbarTitle } from "material-ui/Toolbar";
|
|
|
|
injectTapEventPlugin();
|
|
|
|
const appState : State = {
|
|
mqtt: null,
|
|
ui: null,
|
|
values: R.map(R.prop("value"), Config.topics)
|
|
};
|
|
|
|
console.log(appState.values);
|
|
|
|
const handleEvent = (state = appState, action) => {
|
|
switch (action.type) {
|
|
case "CONNECT":
|
|
return R.merge(state, { mqtt: action.mqtt });
|
|
case "uiopen":
|
|
return R.merge(state, { ui: action.ui });
|
|
case "uiclose":
|
|
return R.merge(state, { ui: null });
|
|
case "mqtt_message":
|
|
console.log(action.topic + ": " + action.message.toString());
|
|
const val = (topic: string) =>
|
|
Config.topics[topic].parseState == null ?
|
|
action.message.toString() :
|
|
Config.topics[topic].parseState(action.message);
|
|
const keysToUpdate = R.keys(R.pickBy(val => val.state == action.topic,
|
|
Config.topics));
|
|
return R.mergeDeepRight(state, R.objOf("values", R.mergeAll(R.map(
|
|
k => R.objOf(k, val(k)), keysToUpdate))));
|
|
/*
|
|
return R.merge(state, R.objOf("topics", R.merge(state.topics,
|
|
R.map(R.merge(R.__, { value: val }),
|
|
R.pickBy(val => val.state == action.topic, Config.topics)))));
|
|
*/
|
|
}
|
|
return state;
|
|
};
|
|
|
|
const store = createStore(handleEvent);
|
|
|
|
const UiItem = (state) => (props : ControlUI) =>
|
|
UiItems[props.type](state, props);
|
|
|
|
const renderUi = (state, key) => key != null && Config.controls[key] != null ?
|
|
R.map(UiItem(state), Config.controls[key].ui) : null;
|
|
|
|
const App = (state: State) => (
|
|
<div>
|
|
<MuiThemeProvider>
|
|
<div>
|
|
<AppBar title="RZL Map" {...state} />
|
|
<Drawer open={state.ui != null} openSecondary={true} disableSwipeToOpen={true}>
|
|
<Toolbar>
|
|
<ToolbarGroup firstChild={true}>
|
|
<ToolbarTitle text={
|
|
state.ui == null ? "" : Config.controls[state.ui].name}
|
|
style={{"marginLeft": 10}} />
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
<div id="drawer_uiComponents">
|
|
{renderUi(state, state.ui)}
|
|
</div>
|
|
</Drawer>
|
|
</div>
|
|
</MuiThemeProvider>
|
|
<SpaceMap width={640} height={400} image="rzl.svg" zoom={0.1}
|
|
store={store} state={state} />
|
|
</div>
|
|
);
|
|
|
|
store.subscribe(() => ReactDOM.render(<App {...store.getState()} />, document.getElementById("content")));
|
|
|
|
store.dispatch({type: null});
|
|
store.dispatch({type: "mqtt_message", topic: "/service/openhab/out/pca301_ledstrips/state", message: "ON"});
|
|
|
|
connectMqtt("ws://172.22.36.207:1884", store); // wss://mqtt.starletp9.de/mqtt", store);
|