From 82081e7c834efa410e5ed56ab427cd0329583dfa Mon Sep 17 00:00:00 2001 From: uwap Date: Tue, 7 Nov 2017 20:33:07 +0100 Subject: [PATCH] add icon colors --- config/rzl.js | 28 ++++++++++++++-------------- css/styles.css | 3 --- src/components/App.js | 8 ++++++-- src/components/ControlMap.js | 20 +++++++++++++++----- types/types.js | 20 +++++++++++--------- 5 files changed, 46 insertions(+), 33 deletions(-) diff --git a/config/rzl.js b/config/rzl.js index 840a383..6561b2c 100644 --- a/config/rzl.js +++ b/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 => - state.onkyo_connection != "connected" ? "#888888" : (state.onkyo_power == "on" ? "#00FF00" : "#000000"), + iconColor: ({onkyo_connection, onkyo_power}) => + 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", diff --git a/css/styles.css b/css/styles.css index fc5146b..c209e4e 100644 --- a/css/styles.css +++ b/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; diff --git a/src/components/App.js b/src/components/App.js index 836de6b..bd44a09 100644 --- a/src/components/App.js +++ b/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 { @@ -24,7 +26,8 @@ class App extends React.Component { 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 { layers={this.props.config.layers} controls={this.props.config.controls} onChangeControl={this.changeControl.bind(this)} + state={this.state.mqttState} /> ); diff --git a/src/components/ControlMap.js b/src/components/ControlMap.js index c74c5aa..1cf65a6 100644 --- a/src/components/ControlMap.js +++ b/src/components/ControlMap.js @@ -15,7 +15,8 @@ export type ControlMapProps = { zoom: number, layers: Array, controls: Controls, - onChangeControl: (control: Control) => void + onChangeControl: (control: Control) => void, + state: State }; export default class ControlMap extends React.Component { @@ -45,19 +46,28 @@ export default class ControlMap extends React.Component { 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: `` }); } + iconColor(control: Control) { + if (control.iconColor == null) { + return "#000"; + } + return control.iconColor(this.props.state); + } + renderMarker(control: Control, key: string) { return ( this.props.onChangeControl(control)} > diff --git a/types/types.js b/types/types.js index 4bb1414..4842319 100644 --- a/types/types.js +++ b/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) => boolean, + toggled?: (internal: string, actual: any, state: State) => boolean, // DROPDOWN optional properties options?: Map, //options for dropDown @@ -43,7 +43,7 @@ declare type Control = { name: string, position: Array, icon: string, - iconColor?: (state: Map) => string, + iconColor?: (state: State) => string, ui: Array }; declare type Controls = Map; @@ -61,18 +61,20 @@ declare type Space = { "green"|"lightgreen"|"lime"|"yellow"|"amber"|"orange"|"deepOrange"|"brown"|"grey"|"blueGrey" }; -declare type State = { - mqtt: ?any, - uiOpened: ?string, +declare type State = Map; + +//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, - visibleLayers: Array -}; +// values: Map, +// visibleLayers: Array +//}; declare type Point = [number, number];