diff --git a/.eslintrc.js b/.eslintrc.js index 78a98d6..84615c5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,7 +7,8 @@ module.exports = { "extends": [ "eslint:recommended", "plugin:flowtype/recommended", - "plugin:react/recommended" + "plugin:react/recommended", + "plugin:react-hooks/recommended" ], "parserOptions": { "ecmaFeatures": { @@ -161,6 +162,6 @@ module.exports = { "fp/no-throw": "warn", "fp/no-unused-expression": "warn", "fp/no-valueof-field": "warn", - "no-var": "warn" + "no-var": "warn" } }; diff --git a/config/uwap-home/index.js b/config/uwap-home/index.js index a9e8da3..888f9da 100644 --- a/config/uwap-home/index.js +++ b/config/uwap-home/index.js @@ -132,7 +132,7 @@ const sliderSVXY = (bulb: string, argument: string) => ( const config: Config = { space: { name: "Home", - color: "orange", + color: "teal", mqtt: "ws://192.168.0.12:1884" }, topics: [ @@ -530,6 +530,11 @@ const config: Config = { min: 0, max: 255, text: "Helligkeit", + marks: [ + { value: 1, label: "Dunkel" }, + { value: 120, label: "Medium" }, + { value: 254, label: "Hell" } + ], icon: svg(icons.mdiBrightness7), topic: "livingroombrightness" }, @@ -644,7 +649,7 @@ const config: Config = { { image: require("./assets/layers/rooms.svg"), baseLayer: true, - name: "Uwap Home", + name: "Rooms", defaultVisibility: "visible", opacity: 0.7, bounds: { diff --git a/package.json b/package.json index 6403a40..ca45544 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-fp": "^2.3.0", "eslint-plugin-react": "^7.14.3", + "eslint-plugin-react-hooks": "^4.1.2", "file-loader": "^6.1.0", "flow": "^0.2.3", "flow-bin": "^0.135.0", diff --git a/src/components/App.js b/src/components/App.js index 818c481..d0dade5 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -124,8 +124,8 @@ class App extends React.PureComponent { for (let i in topics) { const topic = topics[i]; const stateTopic = this.topics[topic].state; - const parseVal = stateTopic ? stateTopic.type : null; - const val = parseVal == null ? message.toString() : parseVal(message); + const typeConversion = stateTopic?.type?.from ?? stateTopic?.type; + const val = (typeConversion ?? ((x: Buffer) => x.toString()))(message); this.setMqttStateDebounced( {mqttState: Object.assign({}, merge(this.state.mqttState, { [topic]: val}))}); @@ -145,16 +145,16 @@ class App extends React.PureComponent { this.setState({drawerOpened: false}); } - changeState = (topic: string, value: string) => { + changeState = (topic: string, val: string) => { try { - if (this.topics[topic].command == null) { + const commandTopic = this.topics[topic].command; + if (commandTopic == null) { return; } - const rawTopic = this.topics[topic].command.name; - const transformValue = this.topics[topic].command.type; - const val = - transformValue == null ? value : transformValue(Buffer.from(value)); - this.state.mqttSend(rawTopic, Buffer.from(val)); + const rawTopic = commandTopic.name; + const typeConversion = commandTopic?.type?.to ?? commandTopic.type; + const value = (typeConversion ?? Buffer.from)(val); + this.state.mqttSend(rawTopic, value); } catch (err) { this.setState({ error: err.toString() }); } diff --git a/src/components/ControlMap.js b/src/components/ControlMap.js index 231dd1b..b723831 100644 --- a/src/components/ControlMap.js +++ b/src/components/ControlMap.js @@ -6,7 +6,9 @@ import map from "lodash/map"; 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 type { + Controls, Control, UIControl, ControlUI, Layer +} from "config/flowtypes"; import { renderToString } from "react-dom/server"; export type Point = [number, number]; diff --git a/src/components/TopBar.js b/src/components/TopBar.js index cd935c6..b0d03d3 100644 --- a/src/components/TopBar.js +++ b/src/components/TopBar.js @@ -10,7 +10,7 @@ import { makeStyles } from "@material-ui/core/styles"; import Tooltip from "@material-ui/core/Tooltip"; import IconButton from "@material-ui/core/IconButton"; import ReactIcon from "@mdi/react"; -import { mdiMap, mdiGithub } from "@mdi/js"; +import { mdiMap, mdiGithub, mdiMagnify } from "@mdi/js"; export type TopBarProps = { connected: boolean, @@ -77,7 +77,9 @@ const Search = (props: SearchBarProps) => { const classes = useSearchStyles(); return (
- + + + props.onSearch(e.target.value)} classes={{ diff --git a/src/components/UiItems/Slider.js b/src/components/UiItems/Slider.js index 5c021da..6565d61 100644 --- a/src/components/UiItems/Slider.js +++ b/src/components/UiItems/Slider.js @@ -16,10 +16,12 @@ const BaseComponent = ({Icon, Label}, item, state, changeState) => (