Do not use internal and actual values anymore (Fixes #42)
This commit is contained in:
parent
b40f4a774e
commit
c0117fa7d6
13 changed files with 421 additions and 393 deletions
|
|
@ -18,9 +18,6 @@ import ControlMap from "components/ControlMap";
|
|||
import TopBar from "components/TopBar";
|
||||
import UiItemList from "components/UiItemList";
|
||||
|
||||
import keyOf from "utils/keyOf";
|
||||
import { toRawIcon } from "config/icon";
|
||||
|
||||
import connectMqtt from "../connectMqtt";
|
||||
|
||||
export type AppProps = {
|
||||
|
|
@ -31,7 +28,7 @@ export type AppState = {
|
|||
selectedControl: ?Control,
|
||||
drawerOpened: boolean,
|
||||
mqttState: State,
|
||||
mqttSend: (topic: string, value: Actual) => void,
|
||||
mqttSend: (topic: string, value: Buffer) => void,
|
||||
mqttConnected: boolean,
|
||||
};
|
||||
|
||||
|
|
@ -41,16 +38,15 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
|
|||
this.state = {
|
||||
selectedControl: null,
|
||||
drawerOpened: false,
|
||||
mqttState: mapValues(this.topics, (topic) => ({
|
||||
actual: topic.defaultValue,
|
||||
internal: keyOf(topic.values, topic.defaultValue)
|
||||
})),
|
||||
mqttState: mapValues(this.topics, (topic) => topic.defaultValue),
|
||||
mqttSend: connectMqtt(props.config.space.mqtt, {
|
||||
onMessage: this.receiveMessage.bind(this),
|
||||
onConnect: () => this.setState({ mqttConnected: true }),
|
||||
onReconnect: () => this.setState({ mqttConnected: false }),
|
||||
onDisconnect: () => this.setState({ mqttConnected: false }),
|
||||
subscribe: map(this.topics, (x) => x.state)
|
||||
subscribe: map(
|
||||
filter(keys(this.topics), (x) => this.topics[x].state != null),
|
||||
(x) => this.topics[x].state.name)
|
||||
}),
|
||||
mqttConnected: false
|
||||
};
|
||||
|
|
@ -77,23 +73,23 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
|
|||
});
|
||||
}
|
||||
|
||||
receiveMessage(rawTopic: string, message: Object) {
|
||||
receiveMessage(rawTopic: string, message: Buffer) {
|
||||
const topics = filter(
|
||||
keys(this.topics),
|
||||
(k) => this.topics[k].state === rawTopic
|
||||
(k) => this.topics[k].state != null &&
|
||||
this.topics[k].state.name === rawTopic
|
||||
);
|
||||
if (topics.length === 0) {
|
||||
return;
|
||||
}
|
||||
for (let i in topics) {
|
||||
// TODO: Remove FlowFixMe
|
||||
const topic = topics[i];
|
||||
const parseValue = this.topics[topic].type;
|
||||
// $FlowFixMe
|
||||
const parseValue = this.topics[topic].state.type;
|
||||
const val = parseValue == null ? message.toString() : parseValue(message);
|
||||
this.setState({mqttState: Object.assign({}, merge(this.state.mqttState,
|
||||
{ [topic]: {
|
||||
actual: val,
|
||||
internal: keyOf(this.topics[topic].values, val) || val
|
||||
}}))});
|
||||
{ [topic]: val}))});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -105,15 +101,15 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
|
|||
this.setState({drawerOpened: false});
|
||||
}
|
||||
|
||||
changeState(topic: string, value: Actual) {
|
||||
const rawTopic = this.topics[topic].command;
|
||||
if (rawTopic == null) {
|
||||
changeState(topic: string, value: string) {
|
||||
if (this.topics[topic].command == null) {
|
||||
return;
|
||||
}
|
||||
this.state.mqttSend(
|
||||
rawTopic,
|
||||
String(this.topics[topic].values[value] || value)
|
||||
);
|
||||
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));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -127,8 +123,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
|
|||
control={this.state.selectedControl}
|
||||
onCloseRequest={this.closeDrawer.bind(this)}
|
||||
icon={this.state.selectedControl == null ? null :
|
||||
toRawIcon(this.state.selectedControl.icon,
|
||||
this.state.mqttState)}
|
||||
this.state.selectedControl.icon(this.state.mqttState)}
|
||||
>
|
||||
{this.state.selectedControl == null
|
||||
|| <UiItemList state={this.state.mqttState}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ import React from "react";
|
|||
import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
|
||||
import { CRS, point, divIcon } from "leaflet";
|
||||
import map from "lodash/map";
|
||||
import mapValues from "lodash/mapValues";
|
||||
import { toRawIcon } from "config/icon";
|
||||
|
||||
import type { Controls, Control } from "config/flowtypes";
|
||||
|
||||
|
|
@ -50,7 +48,7 @@ export default class ControlMap extends React.PureComponent<ControlMapProps> {
|
|||
}
|
||||
|
||||
createLeafletIcon(control: Control) {
|
||||
const icon = toRawIcon(control.icon, this.props.state);
|
||||
const icon = control.icon(this.props.state);
|
||||
const iconClass = `${icon} mdi-36px`;
|
||||
return divIcon({
|
||||
iconSize: point(36, 36),
|
||||
|
|
@ -61,10 +59,8 @@ export default class ControlMap extends React.PureComponent<ControlMapProps> {
|
|||
}
|
||||
|
||||
iconColor(control: Control): string {
|
||||
const ints = mapValues(this.props.state, (x) => x.internal || x.actual);
|
||||
const acts = mapValues(this.props.state, (x) => x.actual);
|
||||
if (control.iconColor != null) {
|
||||
return control.iconColor(ints, acts, this.props.state);
|
||||
return control.iconColor(this.props.state);
|
||||
}
|
||||
return "#000";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import IconButton from "@material-ui/core/IconButton";
|
|||
import AppBar from "@material-ui/core/AppBar";
|
||||
import Toolbar from "@material-ui/core/Toolbar";
|
||||
import List from "@material-ui/core/List";
|
||||
import { renderRawIcon } from "config/icon";
|
||||
import { renderIcon } from "config/icon";
|
||||
|
||||
import type { RawIcon } from "config/icon";
|
||||
import type { Control } from "config/flowtypes";
|
||||
|
|
@ -57,7 +57,7 @@ class SideBar extends React.PureComponent<Props, SideBarState> {
|
|||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
{this.props.icon == null
|
||||
|| renderRawIcon(this.props.icon, "mdi-36px")}
|
||||
|| renderIcon(this.props.icon, "mdi-36px")}
|
||||
<Typography variant="title" className={this.props.classes.flex}>
|
||||
{this.props.control == null || this.props.control.name}
|
||||
</Typography>
|
||||
|
|
|
|||
|
|
@ -21,12 +21,11 @@ import type {
|
|||
} from "config/flowtypes";
|
||||
|
||||
import keyOf from "utils/keyOf";
|
||||
import { getInternals, getActuals } from "utils/state";
|
||||
|
||||
type UiItemProps<I> = {
|
||||
item: I,
|
||||
state: State,
|
||||
onChangeState: (topic: string, nextState: Actual) => void
|
||||
onChangeState: (topic: string, nextState: string) => void
|
||||
};
|
||||
|
||||
// eslint-disable-next-line flowtype/no-weak-types
|
||||
|
|
@ -54,9 +53,7 @@ export default class UiItem<I:Object>
|
|||
typeof this.props.item.enableCondition == "function") {
|
||||
const enableCondition = this.props.item.enableCondition;
|
||||
const state = this.props.state;
|
||||
const internals = getInternals(state);
|
||||
const actuals = getActuals(state);
|
||||
return enableCondition(internals, actuals, state);
|
||||
return enableCondition(state);
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -68,7 +65,7 @@ export class UiControl<I: UIControl> extends UiItem<I> {
|
|||
super(props);
|
||||
}
|
||||
|
||||
changeState(next: Actual) {
|
||||
changeState(next: string) {
|
||||
if (this.props.item.topic == null) {
|
||||
throw new Error(
|
||||
`Missing topic in ${this.props.item.type} "${this.props.item.text}"`
|
||||
|
|
@ -93,19 +90,6 @@ export class UiControl<I: UIControl> extends UiItem<I> {
|
|||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
isEnabled() {
|
||||
if (Object.keys(this.props.item).includes("enableCondition") &&
|
||||
// $FlowFixMe
|
||||
typeof this.props.item.enableCondition == "function") {
|
||||
const enableCondition = this.props.item.enableCondition;
|
||||
const value = this.getValue();
|
||||
return enableCondition(
|
||||
value.internal || value.actual, value.actual, this.props.state);
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class Toggle extends UiControl<UIToggle> {
|
||||
|
|
@ -113,9 +97,8 @@ export class Toggle extends UiControl<UIToggle> {
|
|||
const value = this.getValue();
|
||||
const control = this.props.item;
|
||||
const isChecked = control.toggled ||
|
||||
((i, _a, _s) => i === (control.on || "on"));
|
||||
const checked = isChecked(
|
||||
value.internal || value.actual, value.actual, this.props.state);
|
||||
((i, _s) => i === (control.on || "on"));
|
||||
const checked = isChecked(value, this.props.state);
|
||||
return checked;
|
||||
}
|
||||
|
||||
|
|
@ -145,7 +128,7 @@ export class Toggle extends UiControl<UIToggle> {
|
|||
}
|
||||
|
||||
export class DropDown extends UiControl<UIDropDown> {
|
||||
runPrimaryAction = (next?: Actual) => {
|
||||
runPrimaryAction = (next?: string) => {
|
||||
if (this.isEnabled()) {
|
||||
const control = this.props.item;
|
||||
const optionKeys = keys(control.options);
|
||||
|
|
@ -172,7 +155,7 @@ export class DropDown extends UiControl<UIDropDown> {
|
|||
return (
|
||||
<FormControl>
|
||||
<InputLabel htmlFor={id}>{control.text}</InputLabel>
|
||||
<Select value={value.internal || value.actual}
|
||||
<Select value={value}
|
||||
onChange={(event) => this.runPrimaryAction(event.target.value)}
|
||||
disabled={!this.isEnabled()}
|
||||
input={<Input id={id} />}
|
||||
|
|
@ -187,7 +170,7 @@ export class DropDown extends UiControl<UIDropDown> {
|
|||
export class Slider extends UiControl<UISlider> {
|
||||
runPrimaryAction = (e: ?Event, v: ?number) => {
|
||||
if (v != null) {
|
||||
this.changeState(v);
|
||||
this.changeState(v.toString());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -195,7 +178,7 @@ export class Slider extends UiControl<UISlider> {
|
|||
return [
|
||||
<ListItemText key="label" primary={this.props.item.text} />,
|
||||
<SliderComponent key="slidercomponent"
|
||||
value={this.getValue().internal || this.getValue().actual}
|
||||
value={parseFloat(this.getValue())}
|
||||
min={this.props.item.min || 0} max={this.props.item.max || 0}
|
||||
step={this.props.item.step || 1}
|
||||
onChange={(e, v) =>
|
||||
|
|
@ -245,7 +228,7 @@ export class Text extends UiControl<UIText> {
|
|||
render() {
|
||||
return [
|
||||
<ListItemText key="label" secondary={this.props.item.text} />,
|
||||
<ListItemText key="vr" primary={this.getValue().internal} align="right" />
|
||||
<ListItemText key="vr" primary={this.getValue()} align="right" />
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
@ -254,7 +237,7 @@ export class Progress extends UiControl<UIProgress> {
|
|||
render() {
|
||||
const min = this.props.item.min || 0;
|
||||
const max = this.props.item.max || 100;
|
||||
const val = parseFloat(this.getValue().internal || this.getValue().actual);
|
||||
const val = parseFloat(this.getValue());
|
||||
const value = val * 100 / max - min;
|
||||
return [
|
||||
<ListItemText key="label" secondary={this.props.item.text} />,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import { Toggle, DropDown, Link,
|
|||
export type UiItemListProps = {
|
||||
controls: Array<ControlUI>,
|
||||
state: State,
|
||||
onChangeState: (topic: string, nextState: Actual) => void
|
||||
onChangeState: (topic: string, nextState: string) => void
|
||||
};
|
||||
|
||||
export default class UiItemList extends React.PureComponent<UiItemListProps> {
|
||||
|
|
@ -34,7 +34,7 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
|
|||
<ListItem key={key}>
|
||||
{control.icon == null ||
|
||||
<ListItemIcon>
|
||||
{renderIcon(control.icon, this.props.state, "mdi-24px")}
|
||||
{renderIcon(control.icon(this.props.state), "mdi-24px")}
|
||||
</ListItemIcon>}
|
||||
{this.renderControl(control)}
|
||||
</ListItem>
|
||||
|
|
|
|||
|
|
@ -2,24 +2,20 @@
|
|||
import type { Color } from "config/colors";
|
||||
import type { Icon } from "config/icon";
|
||||
|
||||
export type TopicType = (msg: Buffer) => any;
|
||||
export type TopicType = (msg: Buffer) => string;
|
||||
|
||||
export type StateCommand = {
|
||||
name: string,
|
||||
type: TopicType
|
||||
}
|
||||
|
||||
export type Topic = {
|
||||
state: string,
|
||||
command: string,
|
||||
defaultValue: Actual,
|
||||
values: Map<Internal, Actual>,
|
||||
type?: TopicType
|
||||
state?: StateCommand,
|
||||
command?: StateCommand,
|
||||
defaultValue: string
|
||||
};
|
||||
export type Topics = Map<string, Topic>;
|
||||
|
||||
export type TopicDependentOption<T> = (
|
||||
internal: Internal, actual: Actual, state: State
|
||||
) => T;
|
||||
export type StateDependentOption<T> = (
|
||||
internals: Map<string, Internal>, actuals: Map<string, Actual>, state: State
|
||||
) => T;
|
||||
|
||||
export interface UIControl {
|
||||
+type: string,
|
||||
+text: string,
|
||||
|
|
@ -27,7 +23,7 @@ export interface UIControl {
|
|||
}
|
||||
|
||||
export interface Enableable {
|
||||
enableCondition?: TopicDependentOption<boolean>
|
||||
enableCondition?: (s: State) => boolean
|
||||
}
|
||||
|
||||
export type UIToggle = $ReadOnly<{|
|
||||
|
|
@ -35,10 +31,10 @@ export type UIToggle = $ReadOnly<{|
|
|||
text: string,
|
||||
topic: string,
|
||||
icon?: Icon,
|
||||
enableCondition?: TopicDependentOption<boolean>,
|
||||
on?: Actual,
|
||||
off?: Actual,
|
||||
toggled?: TopicDependentOption<boolean>
|
||||
enableCondition?: (s: State) => boolean,
|
||||
on?: string,
|
||||
off?: string,
|
||||
toggled?: (v: string, s: State) => boolean
|
||||
|}>;
|
||||
|
||||
export type UIDropDown = $ReadOnly<{|
|
||||
|
|
@ -46,8 +42,8 @@ export type UIDropDown = $ReadOnly<{|
|
|||
text: string,
|
||||
topic: string,
|
||||
icon?: Icon,
|
||||
enableCondition?: TopicDependentOption<boolean>,
|
||||
options: Map<string, any>,
|
||||
enableCondition?: (s: State) => boolean,
|
||||
options: Map<string, string>,
|
||||
renderValue?: (value: string) => string
|
||||
|}>;
|
||||
|
||||
|
|
@ -56,7 +52,7 @@ export type UISlider = $ReadOnly<{|
|
|||
text: string,
|
||||
topic: string,
|
||||
icon?: Icon,
|
||||
enableCondition?: TopicDependentOption<boolean>,
|
||||
enableCondition?: (s: State) => boolean,
|
||||
min?: number,
|
||||
max?: number,
|
||||
step?: number,
|
||||
|
|
@ -72,7 +68,7 @@ export type UILink = $ReadOnly<{|
|
|||
type: "link",
|
||||
text: string,
|
||||
link: string,
|
||||
enableCondition?: StateDependentOption<boolean>,
|
||||
enableCondition?: (s: State) => boolean,
|
||||
|
||||
// TODO: check if both the following options are implemented
|
||||
icon?: Icon
|
||||
|
|
@ -107,11 +103,7 @@ export type Control = {
|
|||
name: string,
|
||||
position: [number, number],
|
||||
icon: Icon,
|
||||
iconColor?: (
|
||||
internals: Map<string, Internal>,
|
||||
actuals: Map<string, Actual>,
|
||||
state: State
|
||||
) => Color,
|
||||
iconColor?: (state: State) => Color,
|
||||
ui: Array<ControlUI>
|
||||
};
|
||||
export type Controls = Map<string, Control>;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
// @flow
|
||||
import * as React from "react";
|
||||
import { getInternals, getActuals } from "utils/state";
|
||||
|
||||
export opaque type RawIcon: string = string;
|
||||
|
||||
export type Icon = (Map<string, Internal>, Map<string, Actual>, State) =>
|
||||
RawIcon;
|
||||
export type Icon = (State) => RawIcon;
|
||||
|
||||
export const raw_mdi = (name: string): RawIcon => {
|
||||
return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;
|
||||
|
|
@ -13,47 +11,35 @@ export const raw_mdi = (name: string): RawIcon => {
|
|||
|
||||
export const mdi = (icon: string) => () => raw_mdi(icon);
|
||||
|
||||
export const mdi_battery = (topic: string) =>
|
||||
(state: Map<string, Internal>) => {
|
||||
const rawval = state[topic];
|
||||
const val = parseInt(rawval);
|
||||
if (isNaN(val)) {
|
||||
return raw_mdi("battery-unknown");
|
||||
} else if (val > 95) {
|
||||
return raw_mdi("battery");
|
||||
} else if (val > 85) {
|
||||
return raw_mdi("battery-90");
|
||||
} else if (val > 75) {
|
||||
return raw_mdi("battery-80");
|
||||
} else if (val > 65) {
|
||||
return raw_mdi("battery-70");
|
||||
} else if (val > 55) {
|
||||
return raw_mdi("battery-60");
|
||||
} else if (val > 45) {
|
||||
return raw_mdi("battery-50");
|
||||
} else if (val > 35) {
|
||||
return raw_mdi("battery-40");
|
||||
} else if (val > 25) {
|
||||
return raw_mdi("battery-30");
|
||||
} else if (val > 15) {
|
||||
return raw_mdi("battery-20");
|
||||
} else {
|
||||
return raw_mdi("battery-10");
|
||||
}
|
||||
};
|
||||
|
||||
export const toRawIcon = (icon: Icon, state: State): RawIcon => {
|
||||
const internals: Map<string, Internal> = getInternals(state);
|
||||
const actuals: Map<string, Actual> = getActuals(state);
|
||||
return icon(internals, actuals, state);
|
||||
export const mdi_battery = (topic: string) => (state: State) => {
|
||||
const rawval = state[topic];
|
||||
const val = parseInt(rawval);
|
||||
if (isNaN(val)) {
|
||||
return raw_mdi("battery-unknown");
|
||||
} else if (val > 95) {
|
||||
return raw_mdi("battery");
|
||||
} else if (val > 85) {
|
||||
return raw_mdi("battery-90");
|
||||
} else if (val > 75) {
|
||||
return raw_mdi("battery-80");
|
||||
} else if (val > 65) {
|
||||
return raw_mdi("battery-70");
|
||||
} else if (val > 55) {
|
||||
return raw_mdi("battery-60");
|
||||
} else if (val > 45) {
|
||||
return raw_mdi("battery-50");
|
||||
} else if (val > 35) {
|
||||
return raw_mdi("battery-40");
|
||||
} else if (val > 25) {
|
||||
return raw_mdi("battery-30");
|
||||
} else if (val > 15) {
|
||||
return raw_mdi("battery-20");
|
||||
} else {
|
||||
return raw_mdi("battery-10");
|
||||
}
|
||||
};
|
||||
|
||||
export const renderRawIcon =
|
||||
export const renderIcon =
|
||||
(icon: RawIcon, extraClass?: string): React.Node => {
|
||||
return <i className={`${extraClass || ""} ${icon}`}></i>;
|
||||
};
|
||||
|
||||
export const renderIcon =
|
||||
(icon: Icon, state: State, extraClass?: string): React.Node => {
|
||||
return renderRawIcon(toRawIcon(icon, state), extraClass);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,21 @@
|
|||
// @flow
|
||||
import type { TopicType } from "config/flowtypes";
|
||||
import at from "lodash/at";
|
||||
|
||||
export const string: TopicType = (msg: Buffer) => msg.toString();
|
||||
|
||||
export const string: TopicType = (msg) => msg.toString();
|
||||
export const json = (path: string, innerType?: TopicType): TopicType => {
|
||||
const parseAgain = innerType == null ? (x) => x : innerType;
|
||||
return (msg) => parseAgain(JSON.parse(msg.toString())[path]);
|
||||
const parseAgain = innerType == null ? (x) => x.toString() : innerType;
|
||||
return (msg) => parseAgain(Buffer.from(
|
||||
at(JSON.parse(msg.toString()), path)[0].toString()));
|
||||
};
|
||||
|
||||
export type TypeOptionParam = { otherwise?: string, [string]: string };
|
||||
export const option = (values: TypeOptionParam): TopicType => {
|
||||
// TODO: error
|
||||
const defaultValue = values.otherwise != null ? values.otherwise : "";
|
||||
const mapVal = (x) => (values[x] != null ? values[x] : defaultValue);
|
||||
return (x) => mapVal(x.toString());
|
||||
};
|
||||
|
||||
export const jsonArray = (msg: Buffer) => JSON.parse(msg.toString()).join(", ");
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
// @flow
|
||||
import mapValues from "lodash/mapValues";
|
||||
|
||||
export const getInternals = (state: State): Map<string, Internal> =>
|
||||
mapValues(state, (x) => x.internal || x.actual);
|
||||
|
||||
export const getActuals = (state: State): Map<string, Actual> =>
|
||||
mapValues(state, (x) => x.actual);
|
||||
Loading…
Add table
Add a link
Reference in a new issue