Update to material-ui 1.0 beta

src/index.jsx

@@ -2,17 +2,25 @@
 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 } from "./state";
+import { store, Actions } from "./state";
 import connectMqtt from "./mqtt";
-import AppBar from "./appbar";
-import Toggle from "material-ui/Toggle";
+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, ToolbarGroup, ToolbarTitle } from "material-ui/Toolbar";
+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();
 
@@ -23,36 +31,60 @@ const renderUi = (state: State, key: ?string) =>
   key != null && Config.controls[key] != null ?
     R.map(UiItem(state), Config.controls[key].ui) : null;
 
-const App = (state: State) => {
-  if (state == null) return (<div></div>);
-return (
-  <div>
-    <MuiThemeProvider>
+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>
-        <AppBar title="RZL Map" {...state} />
-        <Drawer open={state.uiOpened != null}
-          openSecondary={true} disableSwipeToOpen={true}>
-          <Toolbar>
-            <ToolbarGroup firstChild={true}>
-              <ToolbarTitle text={
-                state.uiOpened == null ? "" : Config.controls[state.uiOpened].name}
-                style={{"marginLeft": 10}} />
-            </ToolbarGroup>
-          </Toolbar>
-          <div id="drawer_uiComponents">
-            {renderUi(state, state.uiOpened)}
+        <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>
-        </Drawer>
+        </MuiThemeProvider>
+        <SpaceMap width={1000} height={700} image="rzl.png" zoom={0.1} state={state} />
       </div>
-    </MuiThemeProvider>
-    <SpaceMap width={950} height={640} image="rzl.png" zoom={0.1} state={state} />
-  </div>
-);}
+    );
+  }
+}
 
+const App = appStyles(app);
 
-store.subscribe(() => ReactDOM.render(<App {...store.getState()} />, document.getElementById("content")));
+store.subscribe(() => ReactDOM.render(<App state={store.getState()} />, document.getElementById("content")));
 
 store.dispatch({type:null});
 
-// 192.168.178.6
-connectMqtt("ws://172.22.36.207:1884", store); // wss://mqtt.starletp9.de/mqtt", store); 
+connectMqtt("ws://172.22.36.207:1884", store);