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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue