Now with sliders!

Seriously, someone really should clean this mess of code up soon

src/UiItems.js

@@ -3,6 +3,7 @@ import React from "react";
 import Toggle from "material-ui/Toggle";
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
+import Slider from 'material-ui/Slider';
 import Config from "./config";
 import R from "ramda";
 
@@ -72,3 +73,19 @@ export const dropDown = (state: State, props: ControlUI) => (
     {R.values(R.mapObjIndexed(dropDownItem(props.topic), props.options))}
   </SelectField>
 );
+
+const onSliderChange = (state: State, props: ControlUI) =>
+  (event, value) => {
+    if (state.mqtt != null) {
+      state.mqtt.publish(Config.topics[props.topic].command, value.toString());
+    }
+  };
+
+export const slider = (state: State, props: ControlUI) => (
+  <Slider value={state.values[props.topic]}
+          min={props.min == null ? 0 : props.min}
+          max={props.max == null ? 1 : props.max}
+          step={props.step == null ? 1 : props.step}
+          onChange={onSliderChange(state, props)}
+  />
+);

src/config.js

@@ -32,6 +32,13 @@ const config : Config = {
       values: { off: "blackout", yellow: "yellow", purple: "purple",
                 blue: "blue", green: "green", red: "red", random: "random",
                 cycle: "cycle-random" }
+    },
+    onkyo_volume: {
+      state: "/service/onkyo/status/volume",
+      command: "/service/onkyo/set/volume",
+      value: 0,
+      values: {},
+      parseState: msg => JSON.parse(msg.toString()).val
     }
   },
   controls: {
@@ -109,6 +116,20 @@ const config : Config = {
           enableCondition: val => val != "off"
         }
       ]
+    },
+    onkyo: {
+      name: "Onkyo",
+      position: [350, 350],
+      icon: "",
+      ui: [
+        {
+          type: "slider",
+          text: "Volume",
+          topic: "onkyo_volume",
+          min: 0,
+          max: 100
+        }
+      ]
     }
   }
 };