From eb96d9d51146577c5e7fd75300a4de1510208e96 Mon Sep 17 00:00:00 2001
From: uwap <me@uwap.name>
Date: Sun, 17 Sep 2017 04:13:31 +0200
Subject: [PATCH] Introduce DropDowns... By the way, someone surely should
 cleanup this code...

---
 .babelrc       |  5 +++++
 src/UiItems.js | 43 +++++++++++++++++++++++++++++++++++--------
 src/config.js  | 39 +++++++++++----------------------------
 src/index.jsx  |  4 ++--
 types/types.js |  7 +++++--
 5 files changed, 58 insertions(+), 40 deletions(-)
 create mode 100644 .babelrc

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..c61e956
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015", "react"
+  ]
+}
diff --git a/src/UiItems.js b/src/UiItems.js
index 9ef55d1..0e14351 100644
--- a/src/UiItems.js
+++ b/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>
+);
diff --git a/src/config.js b/src/config.js
index 78be97d..40bf8f8 100644
--- a/src/config.js
+++ b/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"
+          }
         }
       ]
     }
diff --git a/src/index.jsx b/src/index.jsx
index 0c3cda2..fdb51ba 100644
--- a/src/index.jsx
+++ b/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;
diff --git a/types/types.js b/types/types.js
index c187465..145289f 100644
--- a/types/types.js
+++ b/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 = {