Add colors that show the current state

src/config.js

@@ -43,7 +43,7 @@ const config : Config = {
     rundumleuchte: {
       state: "/service/openhab/out/pca301_rundumleuchte/state",
       command: "/service/openhab/in/pca301_rundumleuchte/command",
-      value: "ON",
+      value: "OFF",
       values: { on: "ON", off: "OFF" }
     }
   },
@@ -52,6 +52,7 @@ const config : Config = {
       name: "LED Stahlträger",
       position: [360, 80],
       icon: "wb_incandescent",
+      iconColor: state => state.led_stahltraeger == "on" ? "#CCCC00" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -64,6 +65,7 @@ const config : Config = {
       name: "Snackbar",
       position: [560, 200],
       icon: "kitchen",
+      iconColor: state => state.snackbar == "on" ? "#E20074" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -76,6 +78,7 @@ const config : Config = {
       name: "Twinkle",
       position: [500, 280],
       icon: "wb_incandescent",
+      iconColor: state => state.twinkle == "on" ? "#CCCC00" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -88,6 +91,7 @@ const config : Config = {
       name: "Fliegenbratgerät",
       position: [450, 320],
       icon: "whatshot",
+      iconColor: state => state.flyfry == "on" ? "#6666FF" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -100,6 +104,15 @@ const config : Config = {
       name: "Artnet",
       position: [560,165],
       icon: "wb_incandescent",
+      iconColor: state => 
+        ({
+          off: "#000000",
+          yellow: "#CCCC00",
+          red: "#FF0000",
+          purple: "#FF00FF",
+          green: "#00FF00",
+          cycle: "#CCCC00"
+        })[state.artnet],
       ui: [
         {
           type: "toggle",
@@ -141,6 +154,7 @@ const config : Config = {
       name: "Rundumleuchte",
       position: [240,210],
       icon: "wb_sunny",
+      iconColor: state => state.rundumleuchte == "on" ? "#CCCC00" : "#000000",
       ui: [
         {
           type: "toggle",

src/map.js

@@ -11,11 +11,28 @@ import ReactDOM from "react-dom";
 // convert width/height coordinates to -height/width coordinates
 const c = (p) => [-p[1], p[0]]
 
+const keyOf = (map: Map<any,any>, value: any) : ?any =>
+  ((keys) => keys[R.findIndex(k => map[k] == value, keys)])
+    (R.keys(map));
+
+const color = (iconColor, state: State) => {
+  console.log(
+      R.mapObjIndexed((x,k) => keyOf(Config.topics[k].values, x), state.values)
+  ); return iconColor == null ? "#000000" :
+    iconColor(
+      R.mapObjIndexed((x,k) => keyOf(Config.topics[k].values, x), state.values)
+    );
+}
+const iconHtml = (el, state: State) =>
+  "<i class=\"material-icons\" style=\""
+    + "color:" + color(el.iconColor, state) + ";\">"
+    + el.icon + "</i>"
+
 const Markers = (props) => R.values(R.mapObjIndexed((el,key) => (
   <Marker position={c(el.position)} key={el.name}
     icon={Leaflet.divIcon(
       {
-        html: "<i class=\"material-icons\">" + el.icon + "</i>",
+        html: iconHtml(el, props.state),
         iconSize: Leaflet.point(32,32)
       })}>
     <Popup onOpen={() => props.store.dispatch({type: "uiopen", ui: key})}