90 lines
2.9 KiB
JavaScript
90 lines
2.9 KiB
JavaScript
// @flow
|
|
import React from "react";
|
|
import ReactDOM from "react-dom";
|
|
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
|
import createMuiTheme from 'material-ui/styles/createMuiTheme';
|
|
import withStyles from 'material-ui/styles/withStyles';
|
|
import Drawer from 'material-ui/Drawer';
|
|
import injectTapEventPlugin from 'react-tap-event-plugin';
|
|
import { store, Actions } from "./state";
|
|
import connectMqtt from "./mqtt";
|
|
import SpaceMapBar from "./appbar";
|
|
import Switch from "material-ui/Switch";
|
|
import * as UiItems from "./UiItems.js";
|
|
import SpaceMap from "./map.js";
|
|
import R from "ramda";
|
|
import Config from "./config";
|
|
import Toolbar from "material-ui/Toolbar";
|
|
import orange from 'material-ui/colors/orange';
|
|
import Typography from 'material-ui/Typography';
|
|
import List, { ListSubheader } from 'material-ui/List';
|
|
import IconButton from 'material-ui/IconButton';
|
|
import Icon from 'material-ui/Icon';
|
|
import AppBar from 'material-ui/AppBar';
|
|
|
|
injectTapEventPlugin();
|
|
|
|
const UiItem = (state) => (props : ControlUI) =>
|
|
UiItems[props.type](state, props);
|
|
|
|
const renderUi = (state: State, key: ?string) =>
|
|
key != null && Config.controls[key] != null ?
|
|
R.map(UiItem(state), Config.controls[key].ui) : null;
|
|
|
|
const theme = createMuiTheme({
|
|
palette: {
|
|
primary: orange
|
|
}
|
|
});
|
|
|
|
const appStyles = withStyles((theme) => ({
|
|
drawerPaper: {
|
|
width: 320
|
|
}
|
|
}));
|
|
|
|
class app extends React.Component<{state: State, classes: Object}> {
|
|
render() {
|
|
const state = this.props.state;
|
|
const classes = this.props.classes;
|
|
if (state == null) return (<div></div>);
|
|
return (
|
|
<div>
|
|
<MuiThemeProvider theme={theme}>
|
|
<div>
|
|
<SpaceMapBar title="RZL Map" {...state} />
|
|
<Drawer open={state.uiOpened != null}
|
|
anchor="right"
|
|
onRequestClose={() => store.dispatch({type: Actions.CHANGE_UI})}
|
|
classes={{paper: classes.drawerPaper}}
|
|
type="persistent"
|
|
>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
<IconButton onClick={() => store.dispatch({type: Actions.CHANGE_UI})}>
|
|
<Icon>keyboard_tab</Icon>
|
|
</IconButton>
|
|
<Typography type="title">
|
|
{state.uiOpened == null ? "" : Config.controls[state.uiOpened].name}
|
|
</Typography>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<List id="drawer_uiComponents">
|
|
{renderUi(state, state.uiOpened)}
|
|
</List>
|
|
</Drawer>
|
|
</div>
|
|
</MuiThemeProvider>
|
|
<SpaceMap width={1000} height={700} image="rzl.png" zoom={0.1} state={state} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const App = appStyles(app);
|
|
|
|
store.subscribe(() => ReactDOM.render(<App state={store.getState()} />, document.getElementById("content")));
|
|
|
|
store.dispatch({type:null});
|
|
|
|
connectMqtt("ws://172.22.36.207:1884", store);
|