semi working drawer

css/styles.css

@@ -16,7 +16,7 @@ body .leaflet-div-icon {
   border: 0;
   background: transparent;
 }
-.leaflet-marker-icon .mdi {
+.leaflet-marker-icon.mdi {
   line-height: 1;
 }
 #drawer_uiComponents .mdi {

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "babel-preset-env": "^1.6.0",
     "leaflet": "^1.2.0",
+    "lodash": "^4.17.4",
     "material-ui": "next",
     "material-ui-old": "npm:material-ui@latest",
     "mdi": "^2.0.46",

src/components/App.js

@@ -15,12 +15,17 @@ export type AppProps = {
 };
 
 export type AppState = {
-  selectedControl: string
+  selectedControl: ?Control,
+  drawerOpened: boolean
 };
 
-class App extends React.Component<AppProps & Classes> {
+class App extends React.Component<AppProps & Classes, AppState> {
   constructor(props: AppProps & Classes) {
     super(props);
+    this.state = {
+      selectedControl: null,
+      drawerOpened: false
+    };
   }
 
   static styles(_theme: Object) {
@@ -39,8 +44,12 @@ class App extends React.Component<AppProps & Classes> {
     });
   }
 
-  get selectedControl(): Control {
-    return this.props.config.controls[this.state.selectedControl];
+  changeControl(control: ?Control = null) {
+    this.setState({selectedControl: control, drawerOpened: control != null});
+  }
+
+  closeDrawer() {
+    this.setState({drawerOpened: false});
   }
 
   render() {
@@ -50,12 +59,15 @@ class App extends React.Component<AppProps & Classes> {
           <div>
             <TopBar title={`${this.props.config.space.name} Map`}
               connected={false} />
-            {false && <SideBar />}
+            <SideBar open={this.state.drawerOpened}
+              control={this.state.selectedControl}
+              onCloseRequest={this.closeDrawer.bind(this)} />
           </div>
         </MuiThemeProvider>
         <ControlMap width={1000} height={700} zoom={0}
           layers={this.props.config.layers}
           controls={this.props.config.controls}
+          onChangeControl={this.changeControl.bind(this)}
         />
       </div>
     );

src/components/ControlMap.js

@@ -2,6 +2,7 @@
 import React from "react";
 import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
 import Leaflet from "leaflet";
+import _ from "lodash";
 
 export type Point = [number, number];
 
@@ -12,7 +13,8 @@ export type ControlMapProps = {
   height: number,
   zoom: number,
   layers: Array<Layer>,
-  controls: Controls
+  controls: Controls,
+  onChangeControl: (control: Control) => void
 };
 
 export default class ControlMap extends React.Component<ControlMapProps> {
@@ -39,7 +41,7 @@ export default class ControlMap extends React.Component<ControlMapProps> {
   }
 
   renderMarkers() {
-    return Object.values(this.props.controls).map(this.renderMarker.bind(this));
+    return _.map(this.props.controls, this.renderMarker.bind(this));
   }
 
   createLeafletIcon(iconRaw: string) {
@@ -51,11 +53,12 @@ export default class ControlMap extends React.Component<ControlMapProps> {
     });
   }
 
-  renderMarker(control: Control) {
+  renderMarker(control: Control, key: string) {
     return (
       <Marker position={convertPoint(control.position)}
-        key={control.name}
+        key={key}
         icon={this.createLeafletIcon(control.icon)}
+        onClick={() => this.props.onChangeControl(control)}
       >
       </Marker>
     );

src/components/SideBar.js

@@ -10,7 +10,8 @@ import Toolbar from "material-ui/Toolbar";
 import List from "material-ui/List";
 
 export type SideBarProps = {
-  control: Control,
+  control: ?Control,
+  open: boolean,
   onCloseRequest: () => void
 };
 
@@ -36,7 +37,7 @@ class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
 
   render() {
     return (
-      <Drawer open={true}
+      <Drawer open={this.props.open}
         anchor="right"
         onRequestClose={this.close}
         classes={{paper: this.props.classes.drawerPaper}}
@@ -44,11 +45,11 @@ class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
       >
         <AppBar position="static">
           <Toolbar>
-            <IconButton onClick={this.close}>
+            <IconButton onClick={this.close.bind(this)}>
               <i className="mdi mdi-format-horizontal-align-right mdi-36px"></i>
             </IconButton>
             <Typography type="title">
-              {this.props.control.name}
+              {this.props.control == null || this.props.control.name}
             </Typography>
           </Toolbar>
         </AppBar>