Implement every UI type except slider

src/UiItems.js

@@ -25,8 +25,8 @@ const enabled = (props: ControlUI, state: State) => {
     const val = state.values[props.topic];
     return props.enableCondition(
       val.internal == null ? val.actual : val.internal, val.actual,
-      R.map(x => x.internal == null ? x.actual
-        : x.internal, state.values == null ? {} : state.values));
+      R.map((x) => (x.internal == null ? x.actual
+        : x.internal), state.values == null ? {} : state.values));
   }
 };
 

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>
+    );
+  }
 }

src/map.js

@@ -14,8 +14,8 @@ const color = (iconColor, state: State) => {
   // TODO: give iconColor not only internal but also actual values
   return iconColor == null ? "#000000" :
     iconColor(
-      R.map(x => x.internal == null ?
-        x.actual : x.internal, state.values == null ? {} : state.values)
+      R.map((x) => (x.internal == null ?
+        x.actual : x.internal), state.values == null ? {} : state.values)
     );
 };
 const iconHtml = (el, state: State) =>
@@ -59,7 +59,7 @@ class SpaceMap extends React.Component<SpaceMapProps> {
         crs={Leaflet.CRS.Simple}>
         {Markers(props)}
         <LayersControl position="topright">
-          {Config.layers.map(x =>
+          {Config.layers.map((x) =>
             this.renderLayer(x, [c([0, 0]), c([props.width, props.height])]))}
         </LayersControl>
       </Map>

src/mqtt.js

@@ -11,7 +11,7 @@ export default function connectMqtt(url: string, store: Store<*, *>) {
     store.dispatch({
       type: Actions.MQTT_CONNECT, payload: client
     });
-    R.forEachObjIndexed(v =>
+    R.forEachObjIndexed((v) =>
       client.subscribe(v.state), Config.topics);
   });
   client.on("message", (topic, message) => {

src/state.js

@@ -15,7 +15,7 @@ const initState : State = {
   mqtt: null,
   uiOpened: null,
   values: R.map(
-    topic => {
+    (topic) => {
       return {
         internal: keyOf(topic.values, topic.defaultValue),
         actual: topic.defaultValue
@@ -37,7 +37,7 @@ const onMessage = (state: State, action: StateAction) => {
   const payload = action.payload == null ? { topic: "", message: {} }
     : action.payload; // thx flow </3
   const topics = R.keys(R.pickBy(
-    val => val.state === payload.topic, Config.topics));
+    (val) => val.state === payload.topic, Config.topics));
   const message = payload.message;
   const parsedMessage = (topic: string) => {
     let parseFunction = Config.topics[topic].parseState;
@@ -54,7 +54,7 @@ const onMessage = (state: State, action: StateAction) => {
     };
   };
   return R.mergeDeepRight(state, R.objOf("values", R.mergeAll(
-    R.map(topic => R.objOf(topic, newValue(topic)), topics)
+    R.map((topic) => R.objOf(topic, newValue(topic)), topics)
   )));
 };
 

src/util.js

@@ -2,4 +2,4 @@
 import R from "ramda";
 
 export const keyOf = <a, b> (map: Map<b, a>, value: a): ?b =>
-  ((keys) => keys[R.findIndex(k => map[k] === value, keys)])(R.keys(map));
+  ((keys) => keys[R.findIndex((k) => map[k] === value, keys)])(R.keys(map));

src/utils/parseIconName.js

@@ -2,7 +2,7 @@
 import React from "react";
 
 export default function parseIconName(name: string): string {
-  return `mdi ${name.split(" ").map(icon => "mdi-".concat(icon)).join(" ")}`;
+  return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;
 }
 
 export const renderIcon = (name: string, extraClass?: string) => {