smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Check values for different types of sensors when creating a trigger for an automation

Browse source
This commit is contained in:
Christian Capeáns Pérez 2020-05-06 21:36:32 +02:00
parent b61148b24a
commit 78f6e508ec
3 changed files with 1396 additions and 1255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
smart-hut/src/components/dashboard/AutomationCreationModal.js
View file

@ -1,4 +1,4 @@
import React, { Component, useState } from "react"; import React, { Component, useState, useRef } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { RemoteService } from "../../remote"; import { RemoteService } from "../../remote";
import update from "immutability-helper"; import update from "immutability-helper";
@ -51,6 +51,8 @@ const deviceStateOptions = [
const CreateTrigger = (props) => { const CreateTrigger = (props) => {
const [activeOperand, setActiveOperand] = useState(true); const [activeOperand, setActiveOperand] = useState(true);
const operandsRef = useRef(null);
const valuesRef = useRef(null);
const notAdmitedDevices = ["buttonDimmer"]; const notAdmitedDevices = ["buttonDimmer"];
const hasOperand = new Set([ const hasOperand = new Set([
"knobDimmer", "knobDimmer",
@ -72,6 +74,10 @@ const CreateTrigger = (props) => {
const onChange = (e, val) => { const onChange = (e, val) => {
props.inputChange(val); props.inputChange(val);
setActiveOperand(hasOperand.has(props.devices[val.value].kind)); setActiveOperand(hasOperand.has(props.devices[val.value].kind));
if (operandsRef.current) operandsRef.current.setValue("");
if (valuesRef.current)
valuesRef.current.inputRef.current.valueAsNumber = undefined;
}; };
return ( return (
@ -93,7 +99,10 @@ const CreateTrigger = (props) => {
<React.Fragment> <React.Fragment>
<Form.Field inline width={2}> <Form.Field inline width={2}>
<Dropdown <Dropdown
onChange={(e, val) => props.inputChange(val)} onChange={(e, val) =>
props.inputChange(val)
}
ref={operandsRef}
name="operand" name="operand"
compact compact
selection selection
@ -102,7 +111,10 @@ const CreateTrigger = (props) => {
</Form.Field> </Form.Field>
<Form.Field inline width={7}> <Form.Field inline width={7}>
<Input <Input
onChange={(e, val) => props.inputChange(val)} onChange={(e, val) => {
props.inputChange(val);
}}
ref={valuesRef}
name="value" name="value"
type="number" type="number"
placeholder="Value" placeholder="Value"
@ -112,7 +124,9 @@ const CreateTrigger = (props) => {
) : ( ) : (
<Form.Field inline width={7}> <Form.Field inline width={7}>
<Dropdown <Dropdown
onChange={(e, val) => props.inputChange(val)} onChange={(e, val) =>
props.inputChange(val)
}
placeholder="State" placeholder="State"
name="on" name="on"
compact compact
@ -139,7 +153,10 @@ const SceneItem = (props) => {
<Checkbox <Checkbox
toggle toggle
onChange={(e, val) => onChange={(e, val) =>
props.orderScenes(props.scene.id, val.checked) props.orderScenes(
props.scene.id,
val.checked
)
} }
checked={position + 1 > 0} checked={position + 1 > 0}
/> />
@ -148,7 +165,9 @@ const SceneItem = (props) => {
<h3>{props.scene.name}</h3> <h3>{props.scene.name}</h3>
</Grid.Column> </Grid.Column>
<Grid.Column width={4}> <Grid.Column width={4}>
<h3>{position !== -1 ? "# " + (position + 1) : ""}</h3> <h3>
{position !== -1 ? "# " + (position + 1) : ""}
</h3>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
@ -168,7 +187,9 @@ const Trigger = ({ deviceName, trigger, onRemove, index }) => {
<Menu compact> <Menu compact>
<Menu.Item as="span">{deviceName}</Menu.Item> <Menu.Item as="span">{deviceName}</Menu.Item>
{operand ? <Menu.Item as="span">{symbol}</Menu.Item> : ""} {operand ? <Menu.Item as="span">{symbol}</Menu.Item> : ""}
<Menu.Item as="span">{operand ? value : on ? "on" : "off"}</Menu.Item> <Menu.Item as="span">
{operand ? value : on ? "on" : "off"}
</Menu.Item>
</Menu> </Menu>
<Icon <Icon
as={"i"} as={"i"}
@ -196,7 +217,8 @@ class AutomationSaveModal extends Component {
if (this.props.automation) { if (this.props.automation) {
this.state.automationName = this.props.automation.name; this.state.automationName = this.props.automation.name;
for (const scenePriority of this.props.automation.scenes) { for (const scenePriority of this.props.automation.scenes) {
this.state.order[scenePriority.priority] = scenePriority.sceneId; this.state.order[scenePriority.priority] =
scenePriority.sceneId;
} }
for (const trigger of this.props.automation.triggers) { for (const trigger of this.props.automation.triggers) {
this.state.triggerList.push( this.state.triggerList.push(
@ -207,7 +229,10 @@ class AutomationSaveModal extends Component {
}, },
trigger.kind === "booleanTrigger" trigger.kind === "booleanTrigger"
? { on: trigger.on } ? { on: trigger.on }
: { operand: trigger.operator, value: trigger.value } : {
operand: trigger.operator,
value: trigger.value,
}
) )
); );
} }
@ -245,29 +270,72 @@ class AutomationSaveModal extends Component {
} }
triggerKind(trigger) { triggerKind(trigger) {
if ("on" in trigger) { if ("operand" in trigger && "value" in trigger) {
return "booleanTrigger";
} else if ("operand" in trigger && "value" in trigger) {
return "rangeTrigger"; return "rangeTrigger";
} else if ("on" in trigger) {
return "booleanTrigger";
} else { } else {
throw new Error("Trigger kind not handled"); return false;
//throw new Error("Trigger kind not handled");
} }
} }
_checkNewTrigger(trigger) { _checkNewTrigger(trigger) {
// Check for missing fields for creation
const error = { const error = {
result: false, result: false,
message: "There are missing fields!", message: "There are missing fields!",
}; };
let device = Object.values(this.props.devices).filter(
(d) => d.id === trigger.device
)[0];
switch (this.triggerKind(trigger)) { let triggerKind = this.triggerKind(trigger);
if (!device || !triggerKind) {
error.message = "There are missing fields";
return error;
}
let deviceKind = device.kind;
const devicesWithPercentage = [
"dimmableLight",
"curtains",
"knobDimmer",
];
switch (triggerKind) {
case "booleanTrigger": case "booleanTrigger":
if (!trigger.device || trigger.on === null || trigger.on === undefined) if (
!trigger.device ||
trigger.on === null ||
trigger.on === undefined
)
return error; return error;
break; break;
case "rangeTrigger": case "rangeTrigger":
if (!trigger.device || !trigger.operand || !trigger.value) return error; if (!trigger.device || !trigger.operand || !trigger.value) {
return error;
}
if (trigger.value < 0) {
error.message = "Values cannot be negative";
return error;
}
// If the device's range is a percentage, values cannot exceed 100
else if (
devicesWithPercentage.includes(deviceKind) &&
trigger.value > 100
) {
error.message =
"The value can't exceed 100, as it's a percentage";
return error;
} else if (
deviceKind === "sensor" &&
device.sensor === "HUMIDITY" &&
trigger.value > 100
) {
error.message =
"The value can't exceed 100, as it's a percentage";
return error;
}
break; break;
default: default:
throw new Error("theoretically unreachable statement"); throw new Error("theoretically unreachable statement");
@ -286,11 +354,15 @@ class AutomationSaveModal extends Component {
} }
addTrigger() { addTrigger() {
const { result, message } = this._checkNewTrigger(this.state.newTrigger); const { result, message } = this._checkNewTrigger(
this.state.newTrigger
);
if (result) { if (result) {
this.setState( this.setState(
update(this.state, { triggerList: { $push: [this.state.newTrigger] } }) update(this.state, {
triggerList: { $push: [this.state.newTrigger] },
})
); );
} else { } else {
alert(message); alert(message);
@ -305,7 +377,14 @@ class AutomationSaveModal extends Component {
// This gets triggered when the devices dropdown changes the value. // This gets triggered when the devices dropdown changes the value.
onInputChange(val) { onInputChange(val) {
this.setNewTrigger({ ...this.state.newTrigger, [val.name]: val.value }); if (val.name === "device") {
this.setNewTrigger({ [val.name]: val.value });
} else {
this.setNewTrigger({
...this.state.newTrigger,
[val.name]: val.value,
});
}
} }
onChangeName(_, val) { onChangeName(_, val) {
@ -394,12 +473,14 @@ class AutomationSaveModal extends Component {
}, },
kind kind
? { on: trigger.on } ? { on: trigger.on }
: { operator: trigger.operand, value: trigger.value } : {
operator: trigger.operand,
value: trigger.value,
}
) )
); );
} }
console.log(automation);
this.props this.props
.fastUpdateAutomation(automation) .fastUpdateAutomation(automation)
.then(this.closeModal) .then(this.closeModal)
@ -427,7 +508,12 @@ class AutomationSaveModal extends Component {
onClick={this.openModal} onClick={this.openModal}
/> />
) : ( ) : (
<Button icon labelPosition="left" color="green" onClick={this.openModal}> <Button
icon
labelPosition="left"
color="green"
onClick={this.openModal}
>
<Icon name="add"></Icon>Create new automation <Icon name="add"></Icon>Create new automation
</Button> </Button>
); );
@ -471,21 +557,32 @@ class AutomationSaveModal extends Component {
<Header>Create Triggers</Header> <Header>Create Triggers</Header>
<List divided relaxed> <List divided relaxed>
{this.state.triggerList.length > 0 && {this.state.triggerList.length > 0 &&
this.state.triggerList.map((trigger, i) => { this.state.triggerList.map(
(trigger, i) => {
const deviceName = this.deviceList.filter( const deviceName = this.deviceList.filter(
(d) => d.id === trigger.device (d) =>
d.id ===
trigger.device
)[0].name; )[0].name;
const key = this._generateKey(trigger); const key = this._generateKey(
trigger
);
return ( return (
<Trigger <Trigger
key={key} key={key}
index={i} index={i}
deviceName={deviceName} deviceName={
deviceName
}
trigger={trigger} trigger={trigger}
onRemove={this.removeTrigger} onRemove={
this
.removeTrigger
}
/> />
); );
})} }
)}
<CreateTrigger <CreateTrigger
devices={this.props.devices} devices={this.props.devices}
inputChange={this.onInputChange} inputChange={this.onInputChange}
@ -516,7 +613,9 @@ class AutomationSaveModal extends Component {
key={scene.id} key={scene.id}
scene={scene} scene={scene}
order={this.state.order} order={this.state.order}
orderScenes={this.orderScenes} orderScenes={
this.orderScenes
}
/> />
))} ))}
</List> </List>
@ -526,7 +625,9 @@ class AutomationSaveModal extends Component {
<Header icon> <Header icon>
<Icon name="world" /> <Icon name="world" />
</Header> </Header>
<Button primary>Create Scene</Button> <Button primary>
Create Scene
</Button>
</React.Fragment> </React.Fragment>
)} )}
</Grid.Column> </Grid.Column>
@ -536,7 +637,10 @@ class AutomationSaveModal extends Component {
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column style={{ marginRight: "1rem" }}> <Grid.Column style={{ marginRight: "1rem" }}>
<Button onClick={() => this.saveAutomation()} color="green"> <Button
onClick={() => this.saveAutomation()}
color="green"
>
{this.props.id ? "Save" : "Create"} {this.props.id ? "Save" : "Create"}
</Button> </Button>
</Grid.Column> </Grid.Column>

19
smart-hut/src/components/dashboard/AutomationsPanel.js
View file

@ -51,7 +51,9 @@ const Automation = ({ automation, devices, scenes, removeAutomation }) => {
<Menu.Item as="span"> <Menu.Item as="span">
{device.name}{" "} {device.name}{" "}
{trigger.operator {trigger.operator
? getOperator(trigger.operator) + ? getOperator(
trigger.operator
) +
" " + " " +
trigger.range trigger.range
: trigger.on : trigger.on
@ -74,7 +76,9 @@ const Automation = ({ automation, devices, scenes, removeAutomation }) => {
if (!sceneData) return ""; if (!sceneData) return "";
return ( return (
<Menu key={sceneData.id} compact> <Menu key={sceneData.id} compact>
<Menu.Item as="span">{sceneData.name}</Menu.Item> <Menu.Item as="span">
{sceneData.name}
</Menu.Item>
</Menu> </Menu>
); );
})} })}
@ -115,7 +119,9 @@ class AutomationsPanel extends Component {
removeAutomation = (id) => { removeAutomation = (id) => {
this.props this.props
.deleteAutomation(id) .deleteAutomation(id)
.catch((err) => console.error(`error removing automation ${id}:`, err)); .catch((err) =>
console.error(`error removing automation ${id}:`, err)
);
}; };
render() { render() {
@ -135,7 +141,11 @@ class AutomationsPanel extends Component {
<Grid.Row> <Grid.Row>
{this.props.automations.map((automation, i) => { {this.props.automations.map((automation, i) => {
return ( return (
<Grid.Column key={i} width={8} style={{ margin: "2rem 0" }}> <Grid.Column
key={i}
width={8}
style={{ margin: "2rem 0" }}
>
<Automation <Automation
removeAutomation={this.removeAutomation} removeAutomation={this.removeAutomation}
scenes={this.props.scenes} scenes={this.props.scenes}
@ -161,7 +171,6 @@ const mapStateToProps = (state, _) => ({
return Object.values(state.devices); return Object.values(state.devices);
}, },
get automations() { get automations() {
console.log(state.automations);
return Object.values(state.automations); return Object.values(state.automations);
}, },
}); });

60
smart-hut/src/store.js
View file

@ -41,7 +41,9 @@ function reducer(previousState, action) {
const createOrUpdateScene = (scene) => { const createOrUpdateScene = (scene) => {
if (!newState.scenes[scene.id]) { if (!newState.scenes[scene.id]) {
newState = update(newState, { newState = update(newState, {
scenes: { [scene.id]: { $set: { ...scene, sceneStates: new Set() } } }, scenes: {
[scene.id]: { $set: { ...scene, sceneStates: new Set() } },
},
}); });
} else { } else {
newState = update(newState, { newState = update(newState, {
@ -92,7 +94,9 @@ function reducer(previousState, action) {
newState = update(previousState, { login: { $set: action.login } }); newState = update(previousState, { login: { $set: action.login } });
break; break;
case "USER_INFO_UPDATE": case "USER_INFO_UPDATE":
newState = update(previousState, { userInfo: { $set: action.userInfo } }); newState = update(previousState, {
userInfo: { $set: action.userInfo },
});
break; break;
case "ROOMS_UPDATE": case "ROOMS_UPDATE":
newState = previousState; newState = previousState;
@ -137,7 +141,9 @@ function reducer(previousState, action) {
// and remove any join between that scene and deleted // and remove any join between that scene and deleted
// sceneStates // sceneStates
change = { change = {
scenes: { [action.sceneId]: { sceneStates: { $set: new Set() } } }, scenes: {
[action.sceneId]: { sceneStates: { $set: new Set() } },
},
sceneStates: { $unset: [] }, sceneStates: { $unset: [] },
}; };
@ -168,7 +174,8 @@ function reducer(previousState, action) {
change.scenes[sceneState.sceneId] || {}; change.scenes[sceneState.sceneId] || {};
change.scenes[sceneState.sceneId].sceneStates = change.scenes[sceneState.sceneId].sceneStates =
change.scenes[sceneState.sceneId].sceneStates || {}; change.scenes[sceneState.sceneId].sceneStates || {};
const sceneStates = change.scenes[sceneState.sceneId].sceneStates; const sceneStates =
change.scenes[sceneState.sceneId].sceneStates;
sceneStates.$add = sceneStates.$add || []; sceneStates.$add = sceneStates.$add || [];
sceneStates.$add.push(sceneState.id); sceneStates.$add.push(sceneState.id);
} else { } else {
@ -198,7 +205,9 @@ function reducer(previousState, action) {
// devices // devices
if (action.roomId) { if (action.roomId) {
change = { change = {
rooms: { [action.roomId]: { devices: { $set: new Set() } } }, rooms: {
[action.roomId]: { devices: { $set: new Set() } },
},
devices: { $unset: [] }, devices: { $unset: [] },
}; };
@ -257,7 +266,8 @@ function reducer(previousState, action) {
} }
if (device.roomId in newState.rooms) { if (device.roomId in newState.rooms) {
change.rooms[device.roomId] = change.rooms[device.roomId] || {}; change.rooms[device.roomId] =
change.rooms[device.roomId] || {};
change.rooms[device.roomId].devices = change.rooms[device.roomId].devices =
change.rooms[device.roomId].devices || {}; change.rooms[device.roomId].devices || {};
const devices = change.rooms[device.roomId].devices; const devices = change.rooms[device.roomId].devices;
@ -272,7 +282,9 @@ function reducer(previousState, action) {
$set: new Set([device.id]), $set: new Set([device.id]),
}; };
} else { } else {
change.pendingJoins.rooms[device.roomId].$set.add(device.id); change.pendingJoins.rooms[device.roomId].$set.add(
device.id
);
} }
} }
} }
@ -368,7 +380,9 @@ function reducer(previousState, action) {
case "AUTOMATION_SAVE": case "AUTOMATION_SAVE":
change = { change = {
automations: { [action.automation.id]: { $set: action.automation } }, automations: {
[action.automation.id]: { $set: action.automation },
},
}; };
newState = update(previousState, change); newState = update(previousState, change);
@ -377,7 +391,9 @@ function reducer(previousState, action) {
case "STATE_SAVE": case "STATE_SAVE":
change = { change = {
sceneStates: { [action.sceneState.id]: { $set: action.sceneState } }, sceneStates: {
[action.sceneState.id]: { $set: action.sceneState },
},
}; };
if (previousState.scenes[action.sceneState.sceneId]) { if (previousState.scenes[action.sceneState.sceneId]) {
@ -432,7 +448,9 @@ function reducer(previousState, action) {
break; break;
case "SCENE_DELETE": case "SCENE_DELETE":
if (!(action.sceneId in previousState.scenes)) { if (!(action.sceneId in previousState.scenes)) {
console.warn(`Scene to delete ${action.sceneId} does not exist`); console.warn(
`Scene to delete ${action.sceneId} does not exist`
);
break; break;
} }
@ -455,7 +473,9 @@ function reducer(previousState, action) {
break; break;
case "STATE_DELETE": case "STATE_DELETE":
if (!(action.stateId in previousState.sceneStates)) { if (!(action.stateId in previousState.sceneStates)) {
console.warn(`State to delete ${action.stateId} does not exist`); console.warn(
`State to delete ${action.stateId} does not exist`
);
break; break;
} }
@ -464,7 +484,9 @@ function reducer(previousState, action) {
}; };
if ( if (
previousState.scenes[previousState.sceneStates[action.stateId].sceneId] previousState.scenes[
previousState.sceneStates[action.stateId].sceneId
]
) { ) {
change.scenes = { change.scenes = {
[previousState.sceneStates[action.stateId].sceneId]: { [previousState.sceneStates[action.stateId].sceneId]: {
@ -478,7 +500,9 @@ function reducer(previousState, action) {
case "DEVICE_DELETE": case "DEVICE_DELETE":
if (!(action.deviceId in previousState.devices)) { if (!(action.deviceId in previousState.devices)) {
console.warn(`Device to delete ${action.deviceId} does not exist`); console.warn(
`Device to delete ${action.deviceId} does not exist`
);
break; break;
} }
@ -486,7 +510,11 @@ function reducer(previousState, action) {
devices: { $unset: [action.deviceId] }, devices: { $unset: [action.deviceId] },
}; };
if (previousState.rooms[previousState.devices[action.deviceId].roomId]) { if (
previousState.rooms[
previousState.devices[action.deviceId].roomId
]
) {
change.rooms = { change.rooms = {
[previousState.devices[action.deviceId].roomId]: { [previousState.devices[action.deviceId].roomId]: {
devices: { $remove: [action.deviceId] }, devices: { $remove: [action.deviceId] },
@ -512,7 +540,8 @@ function reducer(previousState, action) {
const allDevices = JSON.parse(action.payload.message); const allDevices = JSON.parse(action.payload.message);
const devices = allDevices.filter( const devices = allDevices.filter(
(d) => (d) =>
(d.fromHostId === null || d.fromHostId === undefined) && !d.deleted (d.fromHostId === null || d.fromHostId === undefined) &&
!d.deleted
); );
const hostDevicesMapByHostId = allDevices const hostDevicesMapByHostId = allDevices
.filter((d) => d.fromHostId) .filter((d) => d.fromHostId)
@ -527,7 +556,6 @@ function reducer(previousState, action) {
} }
return a; return a;
}, {}); }, {});
console.log(devices);
newState = reducer(previousState, { newState = reducer(previousState, {
type: "DEVICES_UPDATE", type: "DEVICES_UPDATE",
partial: true, partial: true,