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}