Introduce DropDowns...

By the way, someone surely should cleanup this code...

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015", "react"
+  ]
+}

src/UiItems.js

@@ -1,20 +1,47 @@
 // @flow
 import React from "react";
 import Toggle from "material-ui/Toggle";
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
 import Config from "./config";
 import R from "ramda";
 
-const onToggle = (topic, props, state) => (x, toggled) =>
-  state.mqtt.publish(Config.topics[topic].command,
-    toggled ? Config.topics[topic].values[R.propOr("on", "on", props)]
-      : Config.topics[topic].values[R.propOr("off", "off", props)]);
+const getValue = (topic: string, val: string) =>
+  Config.topics[topic].values[val];
 
-export const toggle = (props: Object) => (
+const onToggle = (topic: string, props: ControlUI, state: State) =>
+  (x, toggled: boolean) => {
+    if (state.mqtt != null) {
+      state.mqtt.publish(Config.topics[topic].command,
+        toggled ? getValue(topic, R.propOr("on", "on", props))
+          : getValue(topic, R.propOr("off", "off", props)));
+    }
+  };
+
+export const toggle = (state: State, props: ControlUI) => (
   <Toggle label={props.text}
           toggled={
-            props.state.values[props.topic] ===
-              Config.topics[props.topic].values[R.propOr("on", "on", props)]
+            state.values[props.topic] ===
+              getValue(props.topic, R.propOr("on", "on", props))
           }
-          onToggle={onToggle(props.topic, props, props.state)}
+          onToggle={onToggle(props.topic, props, state)}
   />
 );
+
+const onDropDownChange = (topic: string, props: ControlUI, state: State) =>
+  (event, index, value) => {
+    if (state.mqtt != null) {
+      state.mqtt.publish(Config.topics[topic].command, value);
+    }
+  };
+
+const dropDownItem = (topic: string) => (text: string, key: string) => (
+  <MenuItem value={Config.topics[topic].values[key]} primaryText={text} />
+);
+
+export const dropDown = (state: State, props: ControlUI) => (
+  <SelectField value={state.values[props.topic]}
+                onChange={onDropDownChange(props.topic, props, state)}>
+    {R.values(R.mapObjIndexed(dropDownItem(props.topic), props.options))}
+  </SelectField>
+);

src/config.js

@@ -4,7 +4,7 @@ const config : Config = {
     led_stahltraeger: {
       state: "/service/openhab/out/pca301_ledstrips/state",
       command: "/service/openhab/in/pca301_ledstrips/command",
-      value: "OFF", # defaultValue
+      value: "OFF", // defaultValue
       values: { on: "ON", off: "OFF" }
     },
     snackbar: {
@@ -89,34 +89,17 @@ const config : Config = {
       icon: "",
       ui: [
         {
-          type: "toggle",
-          text: "Gelb",
+          type: "dropDown",
+          text: "Artnet",
           topic: "artnet",
-          on: "yellow"
-        },
-        {
-          type: "toggle",
-          text: "Rot",
-          topic: "artnet",
-          on: "red"
-        },
-        {
-          type: "toggle",
-          text: "Pink",
-          topic: "artnet",
-          on: "purple"
-        },
-        {
-          type: "toggle",
-          text: "Grün",
-          topic: "artnet",
-          on: "green"
-        },
-        {
-          type: "toggle",
-          text: "Cycle Random",
-          topic: "artnet",
-          on: "cycle"
+          options: {
+            off: "Aus",
+            yellow: "Gelb",
+            red: "Rot",
+            purple: "Pink",
+            green: "Grün",
+            cycle: "Cycle Random"
+          }
         }
       ]
     }

src/index.jsx

@@ -54,8 +54,8 @@ const handleEvent = (state = appState, action) => {
 
 const store = createStore(handleEvent);
 
-const UiItem = (state) => (props) =>
-  UiItems[props.type](R.merge(props, {state:state}));
+const UiItem = (state) => (props : ControlUI) =>
+  UiItems[props.type](state, props);
 
 const renderUi = (state, key) => key != null && Config.controls[key] != null ?
     R.map(UiItem(state), Config.controls[key].ui) : null;

types/types.js

@@ -10,9 +10,12 @@ declare type Topic = {
 declare type Topics = Map<string,Topic>;
 
 declare type ControlUI = {
-  type: "toggle",
+  type: "toggle" | "dropDown",
   text: string,
-  topic: string
+  topic: string,
+  on?: string, // on override for toggle
+  off?: string, // off override for toggle
+  options?: Map<string,any> //options for dropDown
 };
 
 declare type Control = {