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

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>