Fix the icon color + allow changing icons depending on the state

.gitignore

@@ -1,2 +1,2 @@
 node_modules/
-public/
+dist/

config/rzl.js

@@ -150,7 +150,7 @@ const config : Config = {
     twinkle: {
       name: "Twinkle",
       position: [530, 560],
-      icon: "led-off flip-v",
+      icon: ({twinkle}) => twinkle == "on" ? "led-on flip-v" : "led-off flip-v",
       iconColor: ({twinkle}) => twinkle == "on" ? utils.rainbow : "#000000",
       ui: [
         {
@@ -236,7 +236,7 @@ const config : Config = {
       iconColor: ({artnet}) => 
         ({
           off: "#000000",
-          yellow: "#CCCC00",
+          yellow: "#F0DF10",
           red: "#FF0000",
           purple: "#FF00FF",
           green: "#00FF00",
@@ -350,7 +350,7 @@ const config : Config = {
       name: "Rundumleuchte",
       position: [310,275],
       icon: "alarm-light",
-      iconColor: ({rundumleuchte}) => rundumleuchte == "on" ? "#CCCC00" : "#000000",
+      iconColor: ({rundumleuchte}) => rundumleuchte == "on" ? "#F0DF10" : "#000000",
       ui: [
         {
           type: "toggle",

src/components/App.js

@@ -13,6 +13,7 @@ import TopBar from "components/TopBar";
 import UiItemList from "components/UiItemList";
 
 import keyOf from "utils/keyOf";
+import { controlGetIcon } from "utils/parseIconName";
 
 export type AppProps = {
   config: Config
@@ -79,11 +80,15 @@ class App extends React.Component<AppProps & Classes, AppState> {
             <SideBar open={this.state.drawerOpened}
               control={this.state.selectedControl}
               onCloseRequest={this.closeDrawer.bind(this)}
+              icon={this.state.selectedControl == null ? null :
+                controlGetIcon(this.state.selectedControl,
+                  this.state.mqttState)}
             >
               {this.state.selectedControl == null
                 || <UiItemList state={this.state.mqttState}
                   controls={this.state.selectedControl.ui}
-                  onChangeState={this.changeState.bind(this)} />}
+                  onChangeState={this.changeState.bind(this)}
+                />}
             </SideBar>
           </div>
         </MuiThemeProvider>

src/components/ControlMap.js

@@ -3,7 +3,7 @@ import React from "react";
 import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
 import Leaflet from "leaflet";
 import _ from "lodash";
-import parseIconName from "utils/parseIconName";
+import parseIconName, { controlGetIcon } from "utils/parseIconName";
 
 export type Point = [number, number];
 
@@ -47,7 +47,8 @@ export default class ControlMap extends React.Component<ControlMapProps> {
   }
 
   createLeafletIcon(control: Control) {
-    const iconClass = parseIconName(`${control.icon} 36px`);
+    const icon = controlGetIcon(control, this.props.state);
+    const iconClass = parseIconName(`${icon} 36px`);
     return Leaflet.divIcon({
       iconSize: Leaflet.point(36, 36),
       iconAnchor: Leaflet.point(18, 18),
@@ -60,7 +61,11 @@ export default class ControlMap extends React.Component<ControlMapProps> {
     if (control.iconColor == null) {
       return "#000";
     }
-    return control.iconColor(this.props.state);
+    return control.iconColor(
+      _.mapValues(this.props.state, (x) => x.internal || x.actual),
+      _.mapValues(this.props.state, (x) => x.actual),
+      this.props.state
+    );
   }
 
   renderMarker(control: Control, key: string) {

src/components/SideBar.js

@@ -13,7 +13,8 @@ import { renderIcon } from "utils/parseIconName";
 export type SideBarProps = {
   control: ?Control,
   open: boolean,
-  onCloseRequest: () => void
+  onCloseRequest: () => void,
+  icon?: ?string
 };
 
 export type SideBarState = {
@@ -49,8 +50,8 @@ class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
       >
         <AppBar position="static">
           <Toolbar>
-            {this.props.control == null
-              || renderIcon(this.props.control.icon, "mdi-36px")}
+            {this.props.icon == null
+              || renderIcon(this.props.icon, "mdi-36px")}
             <Typography type="title" className={this.props.classes.flex}>
               {this.props.control == null || this.props.control.name}
             </Typography>

src/utils/parseIconName.js

@@ -1,5 +1,6 @@
 // @flow
 import React from "react";
+import _ from "lodash";
 
 export default function parseIconName(name: string): string {
   return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;
@@ -8,3 +9,17 @@ export default function parseIconName(name: string): string {
 export const renderIcon = (name: string, extraClass?: string) => {
   return <i className={`${extraClass || ""} ${parseIconName(name)}`}></i>;
 };
+
+export const controlGetIcon = (control: Control, state: State): string => {
+  return typeof control.icon !== "function" ? control.icon
+    : control.icon(
+      _.mapValues(state, (x) => x.internal || x.actual),
+      _.mapValues(state, (x) => x.actual),
+      state
+    );
+};
+
+export const renderControlIcon = (control: Control,
+  state: State, extraClass?: string) => {
+  return renderIcon(controlGetIcon(control, state), extraClass);
+};

types/types.js

@@ -42,8 +42,16 @@ declare type ControlUI = {
 declare type Control = {
   name: string,
   position: Array<number>,
-  icon: string,
-  iconColor?: (state: State) => string,
+  icon: string | (
+      internals: Map<string, string>,
+      actuals: Map<string, any>,
+      state: State
+    ) => string,
+  iconColor?: (
+      internals: Map<string, string>,
+      actuals: Map<string, any>,
+      state: State
+    ) => string,
   ui: Array<ControlUI>
 };
 declare type Controls = Map<string,Control>;