add icon colors

config/rzl.js

@@ -123,7 +123,7 @@ const config : Config = {
       name: "LED Stahlträger",
       position: [380, 300],
       icon: "white-balance-iridescent rotate-90",
-      iconColor: state => state.led_stahltraeger == "on" ? utils.rainbow : "#000000",
+      iconColor: ({led_stahltraeger}) => led_stahltraeger == "on" ? utils.rainbow : "#000000",
       ui: [
         {
           type: "toggle",
@@ -137,7 +137,7 @@ const config : Config = {
       name: "Snackbar",
       position: [510, 500],
       icon: "fridge",
-      iconColor: state => state.snackbar == "on" ? "#E20074" : "#000000",
+      iconColor: ({snackbar}) => snackbar == "on" ? "#E20074" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -151,7 +151,7 @@ const config : Config = {
       name: "Twinkle",
       position: [530, 560],
       icon: "led-off flip-v",
-      iconColor: state => state.twinkle == "on" ? utils.rainbow : "#000000",
+      iconColor: ({twinkle}) => twinkle == "on" ? utils.rainbow : "#000000",
       ui: [
         {
           type: "toggle",
@@ -165,7 +165,7 @@ const config : Config = {
       name: "Ventilator",
       position: [520, 450],
       icon: "fan",
-      iconColor: state => state.fan == "on" ? "#00FF00" : "#000000",
+      iconColor: ({fan}) => fan == "on" ? "#00FF00" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -191,7 +191,7 @@ const config : Config = {
       name: "Videospiele",
       position: [100, 100],
       icon: "gamepad-variant",
-      iconColor: state => state.videogames == "on" ? "#00FF00" : "#000000",
+      iconColor: ({videogames}) => videogames == "on" ? "#00FF00" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -205,7 +205,7 @@ const config : Config = {
       name: "Rechner und Drucker",
       position: [297, 90],
       icon: "desktop-classic",
-      iconColor: state => state.olymp_pc == "on" ? "#00FF00" : "#000000",
+      iconColor: ({olymp_pc}) => olymp_pc == "on" ? "#00FF00" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -219,7 +219,7 @@ const config : Config = {
       name: "Fliegenbratgerät",
       position: [450, 590],
       icon: "fire",
-      iconColor: state => state.flyfry == "on" ? "#6666FF" : "#000000",
+      iconColor: ({flyfry}) => flyfry == "on" ? "#6666FF" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -233,7 +233,7 @@ const config : Config = {
       name: "Artnet",
       position: [535,480],
       icon: "spotlight",
-      iconColor: state => 
+      iconColor: ({artnet}) => 
         ({
           off: "#000000",
           yellow: "#CCCC00",
@@ -241,7 +241,7 @@ const config : Config = {
           purple: "#FF00FF",
           green: "#00FF00",
           cycle: utils.rainbow
-        })[state.artnet],
+        })[artnet],
       ui: [
         {
           type: "toggle",
@@ -270,8 +270,8 @@ const config : Config = {
     onkyo: {
       name: "Onkyo",
       position: [350, 650],
-      iconColor: state =>
+      iconColor: ({onkyo_connection, onkyo_power}) =>
-        state.onkyo_connection != "connected" ? "#888888" : (state.onkyo_power == "on" ? "#00FF00" : "#000000"),
+        onkyo_connection != "connected" ? "#888888" : (onkyo_power == "on" ? "#00FF00" : "#000000"),
       icon: "volume-high",
       ui: [
         {
@@ -350,7 +350,7 @@ const config : Config = {
       name: "Rundumleuchte",
       position: [310,275],
       icon: "alarm-light",
-      iconColor: state => state.rundumleuchte == "on" ? "#CCCC00" : "#000000",
+      iconColor: ({runumleuchte}) => rundumleuchte == "on" ? "#CCCC00" : "#000000",
       ui: [
         {
           type: "toggle",
@@ -364,7 +364,7 @@ const config : Config = {
       name: "Tür",
       position: [455,350],
       icon: "swap-vertical",
-      iconColor: state => state.door_status == "on" ? "#00FF00" : "#FF0000",
+      iconColor: ({door_status}) => door_status == "on" ? "#00FF00" : "#FF0000",
       ui: [
         {
           type: "link",
@@ -377,7 +377,7 @@ const config : Config = {
       name: "Infoscreen",
       position: [255, 495],
       icon: "developer-board",
-      iconColor: state => state.infoscreen == "on" ? "#4444FF" : "#000000",
+      iconColor: ({infoscreen}) => infoscreen == "on" ? "#4444FF" : "#000000",
       ui: [
         {
           type: "toggle",

css/styles.css

@@ -16,9 +16,6 @@ body .leaflet-div-icon {
   border: 0;
   background: transparent;
 }
-.leaflet-marker-icon.mdi {
-  line-height: 1;
-}
 #drawer_uiComponents .mdi {
   width: auto;
   height: auto;

src/components/App.js

@@ -1,5 +1,6 @@
 // @flow
 import React from "react";
+import _ from "lodash";
 
 import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
 import createMuiTheme from "material-ui/styles/createMuiTheme";
@@ -16,7 +17,8 @@ export type AppProps = {
 
 export type AppState = {
   selectedControl: ?Control,
-  drawerOpened: boolean
+  drawerOpened: boolean,
+  mqttState: State
 };
 
 class App extends React.Component<AppProps & Classes, AppState> {
@@ -24,7 +26,8 @@ class App extends React.Component<AppProps & Classes, AppState> {
     super(props);
     this.state = {
       selectedControl: null,
-      drawerOpened: false
+      drawerOpened: false,
+      mqttState: _.map(props.topics, ({defaultValue}) => defaultValue)
     };
   }
 
@@ -68,6 +71,7 @@ class App extends React.Component<AppProps & Classes, AppState> {
           layers={this.props.config.layers}
           controls={this.props.config.controls}
           onChangeControl={this.changeControl.bind(this)}
+          state={this.state.mqttState}
         />
       </div>
     );

src/components/ControlMap.js

@@ -15,7 +15,8 @@ export type ControlMapProps = {
   zoom: number,
   layers: Array<Layer>,
   controls: Controls,
-  onChangeControl: (control: Control) => void
+  onChangeControl: (control: Control) => void,
+  state: State
 };
 
 export default class ControlMap extends React.Component<ControlMapProps> {
@@ -45,19 +46,28 @@ export default class ControlMap extends React.Component<ControlMapProps> {
     return _.map(this.props.controls, this.renderMarker.bind(this));
   }
 
-  createLeafletIcon(icon: string) {
+  createLeafletIcon(control: Control) {
+    const iconClass = parseIconName(`${control.icon} 36px`);
     return Leaflet.divIcon({
-      className: parseIconName(`${icon} 36px`),
       iconSize: Leaflet.point(36, 36),
-      iconAnchor: Leaflet.point(18, 18)
+      iconAnchor: Leaflet.point(18, 18),
+      html: `<i class="${iconClass}"
+          style="line-height: 1; color: ${this.iconColor(control)}"></i>`
     });
   }
 
+  iconColor(control: Control) {
+    if (control.iconColor == null) {
+      return "#000";
+    }
+    return control.iconColor(this.props.state);
+  }
+
   renderMarker(control: Control, key: string) {
     return (
       <Marker position={convertPoint(control.position)}
         key={key}
-        icon={this.createLeafletIcon(control.icon)}
+        icon={this.createLeafletIcon(control)}
         onClick={() => this.props.onChangeControl(control)}
       >
       </Marker>

types/types.js

@@ -19,7 +19,7 @@ declare type ControlUI = {
   topic?: string,
   icon?: string,
 
-  enableCondition?: (internal: string, actual: any) => boolean,
+  enableCondition?: (internal: string, actual: any, state: State) => boolean,
 
   // LINK optiona properties
   link?: string,
@@ -27,7 +27,7 @@ declare type ControlUI = {
   // TOGGLE optional properties
   on?: string, // on override for toggle
   off?: string, // off override for toggle
-  toggled?: (internal: string, actual: any, state: Map<string, any>) => boolean,
+  toggled?: (internal: string, actual: any, state: State) => boolean,
 
   // DROPDOWN optional properties
   options?: Map<string,any>, //options for dropDown
@@ -43,7 +43,7 @@ declare type Control = {
   name: string,
   position: Array<number>,
   icon: string,
-  iconColor?: (state: Map<string,any>) => string,
+  iconColor?: (state: State) => string,
   ui: Array<ControlUI>
 };
 declare type Controls = Map<string,Control>;
@@ -61,18 +61,20 @@ declare type Space = {
           "green"|"lightgreen"|"lime"|"yellow"|"amber"|"orange"|"deepOrange"|"brown"|"grey"|"blueGrey"
 };
 
-declare type State = {
+declare type State = Map<string,any>;
-  mqtt: ?any,
+
-  uiOpened: ?string,
+//declare type State = {
+//  mqtt: ?any,
+//  uiOpened: ?string,
   // A map of the actual state values for each topic.
   // internal is the internal term for the value,
   // that is equal to the key in the values section of that
   // topic, for example given by:
   // values: { off: "OFF", on: "ON" }
   // and actual is the value of that or whatever is given by mqtt.
-  values: Map<string, { internal: ?string, actual: any }>,
+//  values: Map<string, { internal: ?string, actual: any }>,
-  visibleLayers: Array<string>
+//  visibleLayers: Array<string>
-};
+//};
 
 declare type Point = [number, number];