Implement every UI type except slider

src/components/App.js

@@ -12,6 +12,8 @@ import ControlMap from "components/ControlMap";
 import TopBar from "components/TopBar";
 import UiItemList from "components/UiItemList";
 
+import { keyOf } from "../util";
+
 export type AppProps = {
   config: Config
 };
@@ -28,9 +30,9 @@ class App extends React.Component<AppProps & Classes, AppState> {
     this.state = {
       selectedControl: null,
       drawerOpened: false,
-      mqttState: _.map(props.topics, topic => ({
+      mqttState: _.mapValues(props.config.topics, (topic) => ({
         actual: topic.defaultValue,
-        internal: topic.values[topic.defaultValue]
+        internal: keyOf(topic.values, topic.defaultValue)
       }))
     };
   }
@@ -71,7 +73,8 @@ class App extends React.Component<AppProps & Classes, AppState> {
               onCloseRequest={this.closeDrawer.bind(this)}
             >
               {this.state.selectedControl == null
-                || <UiItemList state={this.state.mqttState} controls={this.state.selectedControl.ui} />}
+                || <UiItemList state={this.state.mqttState}
+                  controls={this.state.selectedControl.ui} />}
             </SideBar>
           </div>
         </MuiThemeProvider>

src/components/UiItemList.js

@@ -10,6 +10,11 @@ import {
 } from "material-ui/List";
 import Switch from "material-ui/Switch";
 import { renderIcon } from "utils/parseIconName";
+import Input, { InputLabel } from "material-ui/Input";
+import { FormControl } from "material-ui/Form";
+import Select from "material-ui/Select";
+import { MenuItem } from "material-ui/Menu";
+import Button from "material-ui/Button";
 
 export type UiItemListProps = {
   controls: Array<ControlUI>,
@@ -22,25 +27,44 @@ export default class UiItemList extends React.Component<UiItemListProps> {
   }
 
   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>
-    ));
+    return this.props.controls.map((control, key) => {
+      if (control.type == null) {
+        throw new Error(
+          "A control is missing the \"type\" parameter"
+        );
+      }
+      if (control.type === "section") {
+        return this.renderControl(control);
+      }
+      return (
+        <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";
-      }
+    case "toggle": {
+      return this.renderToggle(control);
+    }
+    case "dropDown": {
+      return this.renderDropDown(control);
+    }
+    case "section": {
+      return this.renderSection(control);
+    }
+    case "link": {
+      return this.renderLink(control);
+    }
+    default: {
+      throw new Error(
+        `Unknown UI type "${control.type}" for "${control.text}" component`
+      );
+    }
     }
   }
 
@@ -58,21 +82,20 @@ export default class UiItemList extends React.Component<UiItemListProps> {
   getValue(control: ControlUI) {
     const value = this.props.state[control.topic];
     if (value == null) {
-      console.error(
+      throw new Error(
         `Unknown topic "${control.topic}" in ${control.type} "${control.text}"`
       );
-      return { internal: "error", actual: "error" };
     }
     return value;
   }
 
-  toggleSwitch(control: ControlUI, newState: boolean) {
+  toggleSwitch(_control: ControlUI, _newState: boolean) {
 
   }
 
   renderToggle(control: ControlUI) {
     const value = this.getValue(control);
-    const isToggled = control.isToggled || (i => i === (control.on || "on"));
+    const isToggled = control.isToggled || ((i) => i === (control.on || "on"));
     const checked = isToggled(
       value.internal || value.actual, value.actual, this.props.state);
     return [
@@ -80,9 +103,58 @@ export default class UiItemList extends React.Component<UiItemListProps> {
       <ListItemSecondaryAction key="action">
         <Switch label={control.text}
           checked={checked}
-          onChange={state => this.toggleSwitch(control, state)}
+          onChange={(state) => this.toggleSwitch(control, state)}
           disabled={!this.isEnabled(control)} />
       </ListItemSecondaryAction>
     ];
   }
+
+  changeDropDown(_control: ControlUI, _newState: string) {
+
+  }
+
+  renderDropDown(control: ControlUI) {
+    const value = this.getValue(control);
+    const id = `${control.topic}-${control.name}`;
+    const options = control.options;
+    if (options == null) {
+      throw new Error(
+        `Parameter "options" missing for ${control.type} "${control.text}"`
+      );
+    }
+    return (
+      <FormControl>
+        <InputLabel htmlFor={id}>{control.text}</InputLabel>
+        <Select value={value}
+          onChange={(state) => this.changeDropDown(control, state)}
+          disabled={!this.isEnabled(control)}
+          input={<Input id={id} />}
+        >
+          {_.map(options, (v, k) => <MenuItem value={k} key={k}>{v}</MenuItem>)}
+        </Select>
+      </FormControl>
+    );
+  }
+
+  renderSection(control: ControlUI) {
+    return (
+      <ListSubheader key={control.text}>{control.text}</ListSubheader>
+    );
+  }
+
+  renderLink(control: ControlUI) {
+    if (control.link == null) {
+      throw new Error(
+        `Parameter "link" missing for ${control.type} "${control.text}"`
+      );
+    }
+    return (
+      <Button raised
+        onClick={() => window.open(control.link, "_blank")}
+        color="primary"
+      >
+        {control.text}
+      </Button>
+    );
+  }
 }