diff --git a/config/rzl.js b/config/rzl.js index 0e11470..32f77f2 100644 --- a/config/rzl.js +++ b/config/rzl.js @@ -2,7 +2,7 @@ import type { Config } from "config/flowtypes"; import * as types from "config/types"; import { hex, rgb, rgba, rainbow } from "config/colors"; -import { mdi, raw_mdi, mdi_battery } from "config/icon"; +import { mdi, rawMdi, mdiBattery } from "config/icon"; import { esper_topics, esper_statistics, floalt, tradfri_remote } from "./utils"; const config : Config = { @@ -401,7 +401,7 @@ const config : Config = { name: "Twinkle", position: [530, 560], icon: ({twinkle}) => - twinkle == "on" ? raw_mdi("led-on flip-v") : raw_mdi("led-off flip-v"), + twinkle == "on" ? rawMdi("led-on flip-v") : rawMdi("led-off flip-v"), iconColor: ({twinkle}) => twinkle == "on" ? rainbow : hex("#000000"), ui: [ { @@ -434,7 +434,8 @@ const config : Config = { { type: "link", link: "http://cashdesk.rzl:8081/", - text: "Open Cashdesk" + text: "Open Cashdesk", + icon: mdi("open-in-new") } ] }, @@ -481,7 +482,8 @@ const config : Config = { { type: "link", link: "http://annette.rzl/", - text: "Open Annette" + text: "Open Annette", + icon: mdi("open-in-new") } ] }, @@ -599,7 +601,8 @@ const config : Config = { { type: "link", link: "http://mpd.rzl/mpd/player/index.php", - text: "Open MPD Interface" + text: "Open MPD Interface", + icon: mdi("open-in-new") } ] }, @@ -661,7 +664,8 @@ const config : Config = { { type: "link", link: "http://s.rzl.so", - text: "Open Status Page" + text: "Open Status Page", + icon: mdi("open-in-new") }, { type: "text", @@ -693,7 +697,8 @@ const config : Config = { { type: "link", link: "http://cashdesk.rzl:3030/rzl", - text: "Open Infoscreen" + text: "Open Infoscreen", + icon: mdi("open-in-new") } ] }, @@ -713,7 +718,8 @@ const config : Config = { { type: "link", link: "http://ultimaker.rzl/", - text: "Open Webinterface" + text: "Open Webinterface", + icon: mdi("open-in-new") }, { type: "section", @@ -737,7 +743,8 @@ const config : Config = { { type: "link", link: "http://partkeepr.rzl/", - text: "Open Partkeepr" + text: "Open Partkeepr", + icon: mdi("open-in-new") } ] }, @@ -934,7 +941,7 @@ const config : Config = { ui: [ { type: "progress", - icon: mdi_battery(tradfri_remote.level("65536")), + icon: mdiBattery(tradfri_remote.level("65536")), min: 0, max: 100, text: "Licht Tisch 1", @@ -942,7 +949,7 @@ const config : Config = { }, { type: "progress", - icon: mdi_battery(tradfri_remote.level("65547")), + icon: mdiBattery(tradfri_remote.level("65547")), min: 0, max: 100, text: "Licht Tisch 2", @@ -950,7 +957,7 @@ const config : Config = { }, { type: "progress", - icon: mdi_battery(tradfri_remote.level("65542")), + icon: mdiBattery(tradfri_remote.level("65542")), min: 0, max: 100, text: "Licht Theke 1", @@ -958,7 +965,7 @@ const config : Config = { }, { type: "progress", - icon: mdi_battery(tradfri_remote.level("65546")), + icon: mdiBattery(tradfri_remote.level("65546")), min: 0, max: 100, text: "Licht Theke 2", diff --git a/src/components/App.js b/src/components/App.js index d11a56b..5d1d94a 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -57,7 +57,7 @@ class App extends React.PureComponent { Object.assign({}, ...this.props.config.topics) : this.props.config.topics; } - static styles(_theme: Object) { + static styles() { return { drawerPaper: { width: 320 @@ -83,10 +83,9 @@ class App extends React.PureComponent { return; } for (let i in topics) { - // TODO: Remove FlowFixMe const topic = topics[i]; - // $FlowFixMe - const parseValue = this.topics[topic].state.type; + const stateTopic = this.topics[topic].state; + const parseValue = stateTopic ? stateTopic.type : null; const val = parseValue == null ? message.toString() : parseValue(message); this.setState({mqttState: Object.assign({}, merge(this.state.mqttState, { [topic]: val}))}); diff --git a/src/components/SideBar.js b/src/components/SideBar.js index eff2c34..869b55e 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -31,7 +31,7 @@ class SideBar extends React.PureComponent { super(props); } - static styles(_theme: Object): Object { + static styles(): Object { return { drawerPaper: { width: 340 diff --git a/src/components/UiItemList/UiItem.js b/src/components/UiItemList/UiItem.js index 6ba7a1e..0889440 100644 --- a/src/components/UiItemList/UiItem.js +++ b/src/components/UiItemList/UiItem.js @@ -3,6 +3,7 @@ import React from "react"; import keys from "lodash/keys"; import map from "lodash/map"; import debounce from "lodash/debounce"; +import { renderIcon } from "config/icon"; import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"; import ListItemText from "@material-ui/core/ListItemText"; import ListSubheader from "@material-ui/core/ListSubheader"; @@ -77,9 +78,9 @@ export class UiControl extends UiItem { debouncedChange = debounce((next: string) => this.props.onChangeState(this.props.item.topic, next), 50, { - leading: true, - trailing: true - }); + leading: true, + trailing: true + }); getValue() { const control = this.props.item; @@ -216,6 +217,8 @@ export class Link extends UiItem { color="primary" disabled={!this.isEnabled()} > + {this.props.item.icon == null ? "" + : renderIcon(this.props.item.icon(this.props.state), "mdi-24px")} {this.props.item.text} ); diff --git a/src/components/UiItemList/index.js b/src/components/UiItemList/index.js index a627377..3214361 100644 --- a/src/components/UiItemList/index.js +++ b/src/components/UiItemList/index.js @@ -32,7 +32,7 @@ export default class UiItemList extends React.PureComponent { } return ( - {control.icon == null || + {control.icon == null || control.type === "link" || {renderIcon(control.icon(this.props.state), "mdi-24px")} } diff --git a/src/config/flowtypes.js b/src/config/flowtypes.js index c6b43db..643af1a 100644 --- a/src/config/flowtypes.js +++ b/src/config/flowtypes.js @@ -68,8 +68,6 @@ export type UILink = $ReadOnly<{| text: string, link: string, enableCondition?: (s: State) => boolean, - - // TODO: check if both the following options are implemented icon?: Icon |}>; diff --git a/src/config/icon.js b/src/config/icon.js index e1ae9f8..95cb521 100644 --- a/src/config/icon.js +++ b/src/config/icon.js @@ -5,37 +5,37 @@ export opaque type RawIcon: string = string; export type Icon = (State) => RawIcon; -export const raw_mdi = (name: string): RawIcon => { +export const rawMdi = (name: string): RawIcon => { return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`; }; -export const mdi = (icon: string) => () => raw_mdi(icon); +export const mdi = (icon: string) => () => rawMdi(icon); -export const mdi_battery = (topic: string) => (state: State) => { +export const mdiBattery = (topic: string) => (state: State) => { const rawval = state[topic]; - const val = parseInt(rawval); + const val = parseInt(rawval, 10); if (isNaN(val)) { - return raw_mdi("battery-unknown"); + return rawMdi("battery-unknown"); } else if (val > 95) { - return raw_mdi("battery"); + return rawMdi("battery"); } else if (val > 85) { - return raw_mdi("battery-90"); + return rawMdi("battery-90"); } else if (val > 75) { - return raw_mdi("battery-80"); + return rawMdi("battery-80"); } else if (val > 65) { - return raw_mdi("battery-70"); + return rawMdi("battery-70"); } else if (val > 55) { - return raw_mdi("battery-60"); + return rawMdi("battery-60"); } else if (val > 45) { - return raw_mdi("battery-50"); + return rawMdi("battery-50"); } else if (val > 35) { - return raw_mdi("battery-40"); + return rawMdi("battery-40"); } else if (val > 25) { - return raw_mdi("battery-30"); + return rawMdi("battery-30"); } else if (val > 15) { - return raw_mdi("battery-20"); + return rawMdi("battery-20"); } else { - return raw_mdi("battery-10"); + return rawMdi("battery-10"); } };