First sketch of ui types

src/components/App.js

@@ -10,6 +10,7 @@ import * as Colors from "material-ui/colors";
 import SideBar from "components/SideBar";
 import ControlMap from "components/ControlMap";
 import TopBar from "components/TopBar";
+import UiItemList from "components/UiItemList";
 
 export type AppProps = {
   config: Config
@@ -27,7 +28,10 @@ class App extends React.Component<AppProps & Classes, AppState> {
     this.state = {
       selectedControl: null,
       drawerOpened: false,
-      mqttState: _.map(props.topics, ({defaultValue}) => defaultValue)
+      mqttState: _.map(props.topics, topic => ({
+        actual: topic.defaultValue,
+        internal: topic.values[topic.defaultValue]
+      }))
     };
   }
 
@@ -64,7 +68,11 @@ class App extends React.Component<AppProps & Classes, AppState> {
               connected={false} />
             <SideBar open={this.state.drawerOpened}
               control={this.state.selectedControl}
-              onCloseRequest={this.closeDrawer.bind(this)} />
+              onCloseRequest={this.closeDrawer.bind(this)}
+            >
+              {this.state.selectedControl == null
+                || <UiItemList state={this.state.mqttState} controls={this.state.selectedControl.ui} />}
+            </SideBar>
           </div>
         </MuiThemeProvider>
         <ControlMap width={1000} height={700} zoom={0}

src/components/SideBar.js

@@ -60,6 +60,7 @@ class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
           </Toolbar>
         </AppBar>
         <List id="drawer_uiComponents">
+          {this.props.children}
         </List>
       </Drawer>
     );

src/components/UiItemList.js

@@ -0,0 +1,88 @@
+// @flow
+import React from "react";
+import _ from "lodash";
+import {
+  ListItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader
+} from "material-ui/List";
+import Switch from "material-ui/Switch";
+import { renderIcon } from "utils/parseIconName";
+
+export type UiItemListProps = {
+  controls: Array<ControlUI>,
+  state: State
+};
+
+export default class UiItemList extends React.Component<UiItemListProps> {
+  constructor(props: UiItemListProps) {
+    super(props);
+  }
+
+  render() {
+    return this.props.controls.map((control, key) => (
+      <ListItem key={key}>
+        {control.icon == null || <ListItemIcon>{renderIcon(control.icon, "mdi-24px")}</ListItemIcon>}
+        {this.renderControl(control)}
+      </ListItem>
+    ));
+  }
+
+  renderControl(control: ControlUI) {
+    switch (control.type) {
+      case "toggle": {
+        return this.renderToggle(control);
+      }
+      default: {
+        console.error(
+          `Unknown UI type "${control.type}" for "${control.text}" component`
+        );
+        return "unknown ui type";
+      }
+    }
+  }
+
+  isEnabled(control: ControlUI) {
+    const enableCondition = control.enableCondition;
+    if (enableCondition == null) {
+      return true;
+    } else {
+      const value = this.getValue(control);
+      return enableCondition(
+        value.internal || value.actual, value.actual, this.props.state);
+    }
+  }
+
+  getValue(control: ControlUI) {
+    const value = this.props.state[control.topic];
+    if (value == null) {
+      console.error(
+        `Unknown topic "${control.topic}" in ${control.type} "${control.text}"`
+      );
+      return { internal: "error", actual: "error" };
+    }
+    return value;
+  }
+
+  toggleSwitch(control: ControlUI, newState: boolean) {
+
+  }
+
+  renderToggle(control: ControlUI) {
+    const value = this.getValue(control);
+    const isToggled = control.isToggled || (i => i === (control.on || "on"));
+    const checked = isToggled(
+      value.internal || value.actual, value.actual, this.props.state);
+    return [
+      <ListItemText key="label" primary={control.text} />,
+      <ListItemSecondaryAction key="action">
+        <Switch label={control.text}
+          checked={checked}
+          onChange={state => this.toggleSwitch(control, state)}
+          disabled={!this.isEnabled(control)} />
+      </ListItemSecondaryAction>
+    ];
+  }
+}