diff --git a/config/entropia/index.js b/config/entropia/index.js index e28e63e..593bd97 100644 --- a/config/entropia/index.js +++ b/config/entropia/index.js @@ -1,6 +1,5 @@ // @flow import type { Config } from "config/flowtypes"; -import { hex } from "config/colors"; import * as types from "config/types"; import * as icons from "@mdi/js"; import { svg } from "config/icon"; diff --git a/config/rzl/index.js b/config/rzl/index.js index dd5bebf..9c2ef78 100644 --- a/config/rzl/index.js +++ b/config/rzl/index.js @@ -4,7 +4,7 @@ import * as types from "config/types"; import { hex, rainbow } from "config/colors"; import { svg, withState } from "config/icon"; import { esper, tasmota } from "./utils"; -import * as icons from "@mdi/js" +import * as icons from "@mdi/js"; import * as onkyo from "./onkyo"; import * as olymp from "./olymp"; @@ -277,7 +277,7 @@ const config: Config = { name: "LED Stahlträger", position: [340, 590], icon: svg(icons.mdiWhiteBalanceIridescent).color(({ledStahltraeger}) => - ledStahltraeger === "on" ? rainbow : hex("#000000")), + (ledStahltraeger === "on" ? rainbow : hex("#000000"))), ui: [ { type: "toggle", @@ -353,8 +353,8 @@ const config: Config = { name: "Twinkle", position: [530, 560], icon: withState(({twinkle}) => - twinkle === "on" ? svg(icons.mdiLedOn).flipV().color(rainbow) - : svg(icons.mdiLedOff).flipV() + (twinkle === "on" ? svg(icons.mdiLedOn).flipV().color(rainbow) + : svg(icons.mdiLedOff).flipV()) ), ui: [ { @@ -369,7 +369,7 @@ const config: Config = { name: "Ventilator", position: [530, 440], icon: svg(icons.mdiFan).color(({fan}) => - fan === "on" ? hex("#00FF00") : hex("#000000")), + (fan === "on" ? hex("#00FF00") : hex("#000000"))), ui: [ { type: "toggle", @@ -396,7 +396,7 @@ const config: Config = { name: "Fliegenbratgerät", position: [450, 570], icon: svg(icons.mdiFire).color(({flyfry}) => - flyfry === "on" ? hex("#6666FF") : hex("#000000")), + (flyfry === "on" ? hex("#6666FF") : hex("#000000"))), ui: esper.statistics("flyfry", [ { type: "toggle", @@ -431,7 +431,7 @@ const config: Config = { name: "Lötarbeitsplatz", position: [205, 455], icon: svg(icons.mdiEyedropperVariant).color(({loetarbeitsplatz4}) => - loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")), + (loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000"))), ui: [ { type: "text", @@ -445,7 +445,7 @@ const config: Config = { name: "Lötarbeitsplatz", position: [205, 405], icon: svg(icons.mdiEyedropperVariant).color(({loetarbeitsplatz4}) => - loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")), + (loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000"))), ui: [ { type: "text", @@ -459,7 +459,7 @@ const config: Config = { name: "Tür", position: [455, 350], icon: svg(icons.mdiSwapVertical).color(({doorStatus}) => - doorStatus === "on" ? hex("#00FF00") : hex("#FF0000")), + (doorStatus === "on" ? hex("#00FF00") : hex("#FF0000"))), ui: [ { type: "link", @@ -526,8 +526,8 @@ const config: Config = { name: "Pilze", position: [48, 499], icon: withState(({pilze}) => - pilze === "on" ? svg(icons.mdiLedOn) : svg(icons.mdiLedOff)).color( - tasmota.iconColor("pilze", rainbow)), + (pilze === "on" ? svg(icons.mdiLedOn) : svg(icons.mdiLedOff))).color( + tasmota.iconColor("pilze", rainbow)), ui: [ { type: "toggle", @@ -611,8 +611,8 @@ const config: Config = { name: "Strom Fablab", position: [613, 537], icon: withState(({nebenraumPowerStatus}) => - nebenraumPowerStatus === "on" ? svg(icons.mdiFlash).color(hex("#00FF00")) - : svg(icons.mdiFlashOff)), + (nebenraumPowerStatus === "on" ? + svg(icons.mdiFlash).color(hex("#00FF00")) : svg(icons.mdiFlashOff))), ui: [ { type: "text", @@ -627,7 +627,8 @@ const config: Config = { position: [1413, 500], icon: svg(icons.mdiPool).color( ({whirlpoolBubbles}) => - parseInt(whirlpoolBubbles, 10) > 0 ? hex("#00ff00") : hex("#000000")), + (parseInt(whirlpoolBubbles, 10) > 0 ? hex("#00ff00") + : hex("#000000"))), ui: [ { type: "text", diff --git a/config/rzl/kitchen.js b/config/rzl/kitchen.js index 86c9558..89fd23a 100644 --- a/config/rzl/kitchen.js +++ b/config/rzl/kitchen.js @@ -4,7 +4,7 @@ import { svg, mdiBattery } from "config/icon"; import { hex } from "config/colors"; import * as types from "config/types"; import { floalt, tradfri, tasmota } from "./utils"; -import * as icons from "@mdi/js" +import * as icons from "@mdi/js"; export const topics: Topics = { //Kuechen-Floalts diff --git a/config/rzl/olymp.js b/config/rzl/olymp.js index 40a158f..8b8e989 100644 --- a/config/rzl/olymp.js +++ b/config/rzl/olymp.js @@ -4,7 +4,7 @@ import { svg } from "config/icon"; import { hex, rainbow } from "config/colors"; import * as types from "config/types"; import { tasmota, esper } from "./utils"; -import * as icons from "@mdi/js" +import * as icons from "@mdi/js"; export const topics: Topics = { ...tasmota.topics("8", "ledOlymp"), @@ -63,7 +63,7 @@ export const controls: Controls = { name: "Videospiele", position: [100, 100], icon: svg(icons.mdiGamepadVariant).color(({videogames}) => - videogames === "on" ? hex("#00FF00") : hex("#000000")), + (videogames === "on" ? hex("#00FF00") : hex("#000000"))), ui: [ { type: "toggle", @@ -77,7 +77,7 @@ export const controls: Controls = { name: "Rechner", position: [297, 90], icon: svg(icons.mdiDesktopClassic).color(({olympPC}) => - olympPC === "on" ? hex("#00FF00") : hex("#000000")), + (olympPC === "on" ? hex("#00FF00") : hex("#000000"))), ui: [ { type: "toggle", @@ -91,7 +91,7 @@ export const controls: Controls = { name: "Rundumleuchte", position: [310, 275], icon: svg(icons.mdiAlarmLight).color(({rundumleuchte}) => - rundumleuchte === "on" ? hex("#F0DF10") : hex("#000000")), + (rundumleuchte === "on" ? hex("#F0DF10") : hex("#000000"))), ui: [ { type: "toggle", diff --git a/config/rzl/utils.js b/config/rzl/utils.js index 5c5b195..5daf02f 100644 --- a/config/rzl/utils.js +++ b/config/rzl/utils.js @@ -3,7 +3,7 @@ import type { ControlUI, Topics } from "config/flowtypes"; import { svg } from "config/icon"; import { hex, type Color } from "config/colors"; import * as types from "config/types"; -import * as icons from "@mdi/js" +import * as icons from "@mdi/js"; export const tasmota = { topics: (id: string, name: string): Topics => ({ diff --git a/config/uwap-home/index.js b/config/uwap-home/index.js index 2cad6f3..18b6dd3 100644 --- a/config/uwap-home/index.js +++ b/config/uwap-home/index.js @@ -3,7 +3,7 @@ import type { Config } from "config/flowtypes"; import * as types from "config/types"; import { svg, withState } from "config/icon"; import { hex } from "config/colors"; -import * as icons from "@mdi/js" +import * as icons from "@mdi/js"; const topicBulbHomeRust = (bulb: string, argument: string) => ({ [`${bulb}${argument}`]: { @@ -207,7 +207,7 @@ const config: Config = { name: "Schlafzimmer", position: [180, 130], icon: svg(icons.mdiCeilingLight).color(({bedroomState}) => - bedroomState === "on" ? hex("#00FF00") : hex("#000000")), + (bedroomState === "on" ? hex("#00FF00") : hex("#000000"))), ui: [ { type: "toggle", @@ -243,7 +243,7 @@ const config: Config = { name: "Lüftung Schlafzimmer", position: [140, 25], icon: svg(icons.mdiFan).color(({fanBedroomState}) => - fanBedroomState === "on" ? hex("#00FF00") : hex("#000000")), + (fanBedroomState === "on" ? hex("#00FF00") : hex("#000000"))), ui: [ { type: "toggle", @@ -278,9 +278,9 @@ const config: Config = { name: "Lautsprecher", position: [245, 658], icon: withState(({speakerOfficeState}) => - speakerOfficeState !== "on" ? svg(icons.mdiVolumeOff) - : svg(icons.mdiVolumeHigh).color(hex("#00FF00")) - ), + (speakerOfficeState !== "on" ? svg(icons.mdiVolumeOff) + : svg(icons.mdiVolumeHigh).color(hex("#00FF00"))) + ), ui: [ { type: "toggle", @@ -375,7 +375,7 @@ const config: Config = { name: "Büro", position: [210, 570], icon: svg(icons.mdiCeilingLight).color(({officeState}) => - officeState === "on" ? hex("#00FF00") : hex("#000000")), + (officeState === "on" ? hex("#00FF00") : hex("#000000"))), ui: [ { type: "toggle", @@ -397,7 +397,7 @@ const config: Config = { name: "Flur", position: [520, 370], icon: svg(icons.mdiCeilingLight).color(({hallwayState}) => - hallwayState === "on" ? hex("#00FF00") : hex("#000000")), + (hallwayState === "on" ? hex("#00FF00") : hex("#000000"))), ui: [ { type: "toggle", @@ -419,7 +419,7 @@ const config: Config = { name: "Flur", position: [250, 370], icon: svg(icons.mdiCeilingLight).color(({hallway2State}) => - hallway2State === "on" ? hex("#00FF00") : hex("#000000")), + (hallway2State === "on" ? hex("#00FF00") : hex("#000000"))), ui: [ { type: "toggle", @@ -460,7 +460,7 @@ const config: Config = { name: "NAS", position: [550, 100], icon: svg(icons.mdiNas).color(({nasPower}) => - nasPower === "on" ? hex("#00FF00") : hex("#000000")), + (nasPower === "on" ? hex("#00FF00") : hex("#000000"))), ui: [ { type: "toggle", @@ -474,7 +474,7 @@ const config: Config = { name: "Wohnzimmer", position: [450, 200], icon: svg(icons.mdiCeilingLight).color(({livingroomState}) => - livingroomState === "on" ? hex("#00FF00") : hex("#000000")), + (livingroomState === "on" ? hex("#00FF00") : hex("#000000"))), ui: ([ { type: "toggle", diff --git a/src/components/App.js b/src/components/App.js index f2e0d84..818c481 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -40,12 +40,12 @@ export type AppState = { }; /* -const App = (props: AppProps) => { - const topics = Array.isArray(props.config.topics) ? - Object.assign({}, ...props.config.topics) : props.config.topics; - const [mqttConnected, setMqttConnected] = useState(false); -}; -*/ + *const App = (props: AppProps) => { + * const topics = Array.isArray(props.config.topics) ? + * Object.assign({}, ...props.config.topics) : props.config.topics; + * const [mqttConnected, setMqttConnected] = useState(false); + *}; + */ class App extends React.PureComponent { controlMap: React.Node diff --git a/src/components/ControlMap.js b/src/components/ControlMap.js index 1fb8ebb..231dd1b 100644 --- a/src/components/ControlMap.js +++ b/src/components/ControlMap.js @@ -7,7 +7,7 @@ import filter from "lodash/filter"; import reduce from "lodash/reduce"; import MqttContext from "mqtt/context"; import type { Controls, Control, UIControl, ControlUI } from "config/flowtypes"; -import { renderToString } from 'react-dom/server' +import { renderToString } from "react-dom/server"; export type Point = [number, number]; diff --git a/src/config/flowtypes.js b/src/config/flowtypes.js index b91eb02..be2091e 100644 --- a/src/config/flowtypes.js +++ b/src/config/flowtypes.js @@ -1,5 +1,4 @@ // @flow -import type { Color } from "config/colors"; import type { Icon } from "config/icon"; export type TopicType = (msg: Buffer) => string; diff --git a/src/config/icon.js b/src/config/icon.js index 55bdd4c..31939fb 100644 --- a/src/config/icon.js +++ b/src/config/icon.js @@ -1,9 +1,8 @@ // @flow import React from "react"; import ReactIcon from "@mdi/react"; -import ReactContext from "mqtt/context"; -import { hex, type Color } from "./colors" -import * as mdiIcons from "@mdi/js" +import { type Color } from "./colors"; +import * as mdiIcons from "@mdi/js"; export type Icon = { render: (s: State) => React.Node, @@ -36,7 +35,7 @@ export const svg = (data: string, props?: IconPropHelper): Icon => { horizontal={props?.horizontal ?? false} vertical={props?.vertical ?? false} color={propColor(state)} - /> + /> ), size: (n: number) => svg(data, {...props, size: n}), rotate: (n: number) => svg(data, {...props, rotate: n}), @@ -44,7 +43,7 @@ export const svg = (data: string, props?: IconPropHelper): Icon => { flipV: () => svg(data, {...props, vertical: !props?.vertical ?? true}), color: (c: Color | (State) => Color) => svg(data, {...props, color: c}) }; -} +}; export const withState = (f: (s: State) => Icon): Icon => { return { @@ -55,7 +54,7 @@ export const withState = (f: (s: State) => Icon): Icon => { flipV: () => withState(f), color: () => withState(f) }; -} +}; export const mdiBattery = (topic: string): Icon => withState((state) => { const rawval = state[topic];