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

fix

Browse source
This commit is contained in:
Claudio Maggioni (maggicl) 2020-04-28 11:56:34 +02:00
parent 835ac99a8e
commit b0b281263e
2 changed files with 534 additions and 558 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import React, {Component, useState, useEffect} from "react"; import React, { Component, useState, useEffect } from "react";
import {connect} from "react-redux"; import { connect } from "react-redux";
import {RemoteService} from "../../remote"; import { RemoteService } from "../../remote";
import "./Automations.css"; import "./Automations.css";
import { import {
@ -20,7 +20,7 @@ import {
} from "semantic-ui-react"; } from "semantic-ui-react";
const operands = [ const operands = [
{key: "EQUAL", text: "=", value: "EQUAL"}, { key: "EQUAL", text: "=", value: "EQUAL" },
{ {
key: "GREATER_EQUAL", key: "GREATER_EQUAL",
text: "\u2265", text: "\u2265",
@ -44,8 +44,8 @@ const operands = [
]; ];
const deviceStateOptions = [ const deviceStateOptions = [
{key: "off", text: "off", value: false}, { key: "off", text: "off", value: false },
{key: "on", text: "on", value: true}, { key: "on", text: "on", value: true },
]; ];
const CreateTrigger = (props) => { const CreateTrigger = (props) => {
@ -65,9 +65,7 @@ const CreateTrigger = (props) => {
const onChange = (e, val) => { const onChange = (e, val) => {
props.inputChange(val); props.inputChange(val);
if ( if (
props.devices props.devices.filter((d) => d.id === val.value)[0].hasOwnProperty("on")
.filter((d) => d.id === val.value)[0]
.hasOwnProperty("on")
) { ) {
setActiveOperand(false); setActiveOperand(false);
} else { } else {
@ -94,9 +92,7 @@ const CreateTrigger = (props) => {
<React.Fragment> <React.Fragment>
<Form.Field inline width={2}> <Form.Field inline width={2}>
<Dropdown <Dropdown
onChange={(e, val) => onChange={(e, val) => props.inputChange(val)}
props.inputChange(val)
}
name="operand" name="operand"
compact compact
selection selection
@ -105,9 +101,7 @@ const CreateTrigger = (props) => {
</Form.Field> </Form.Field>
<Form.Field inline width={7}> <Form.Field inline width={7}>
<Input <Input
onChange={(e, val) => onChange={(e, val) => props.inputChange(val)}
props.inputChange(val)
}
name="value" name="value"
type="number" type="number"
placeholder="Value" placeholder="Value"
@ -117,9 +111,7 @@ const CreateTrigger = (props) => {
) : ( ) : (
<Form.Field inline width={7}> <Form.Field inline width={7}>
<Dropdown <Dropdown
onChange={(e, val) => onChange={(e, val) => props.inputChange(val)}
props.inputChange(val)
}
placeholder="State" placeholder="State"
name="value" name="value"
compact compact
@ -146,10 +138,7 @@ const SceneItem = (props) => {
<Checkbox <Checkbox
toggle toggle
onChange={(e, val) => onChange={(e, val) =>
props.orderScenes( props.orderScenes(props.scene.id, val.checked)
props.scene.id,
val.checked
)
} }
checked={position + 1 > 0} checked={position + 1 > 0}
/> />
@ -158,9 +147,7 @@ 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> <h3>{position !== -1 ? "# " + (position + 1) : ""}</h3>
{position !== -1 ? "# " + (position + 1) : ""}
</h3>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
@ -169,8 +156,8 @@ const SceneItem = (props) => {
); );
}; };
const Trigger = ({deviceName, trigger, onRemove, index}) => { const Trigger = ({ deviceName, trigger, onRemove, index }) => {
const {device, operand, value} = trigger; const { device, operand, value } = trigger;
let symbol; let symbol;
if (operand) { if (operand) {
symbol = operands.filter((opt) => opt.key === operand)[0].text; symbol = operands.filter((opt) => opt.key === operand)[0].text;
@ -207,9 +194,7 @@ export const CreateAutomation = (props) => {
}, [props]); }, [props]);
const _checkNewTrigger = (trigger) => { const _checkNewTrigger = (trigger) => {
const auxDevice = props.devices.filter( const auxDevice = props.devices.filter((d) => d.id === trigger.device)[0];
(d) => d.id === trigger.device
)[0];
if (auxDevice && auxDevice.hasOwnProperty("on")) { if (auxDevice && auxDevice.hasOwnProperty("on")) {
if (!trigger.device || !trigger.value == null) { if (!trigger.device || !trigger.value == null) {
return { return {
@ -236,7 +221,7 @@ export const CreateAutomation = (props) => {
}; };
}; };
const addTrigger = () => { const addTrigger = () => {
const {result, message} = _checkNewTrigger(newTrigger); const { result, message } = _checkNewTrigger(newTrigger);
const auxTrigger = newTrigger; const auxTrigger = newTrigger;
if (result) { if (result) {
if ( if (
@ -258,7 +243,7 @@ export const CreateAutomation = (props) => {
// This gets triggered when the devices dropdown changes the value. // This gets triggered when the devices dropdown changes the value.
const onInputChange = (val) => { const onInputChange = (val) => {
setNewTrigger({...newTrigger, [val.name]: val.value}); setNewTrigger({ ...newTrigger, [val.name]: val.value });
}; };
const onChangeName = (e, val) => setautomationName(val.value); const onChangeName = (e, val) => setautomationName(val.value);
@ -269,7 +254,7 @@ export const CreateAutomation = (props) => {
setOrder((prevList) => prevList.filter((e) => e !== id)); setOrder((prevList) => prevList.filter((e) => e !== id));
} }
}; };
const searchScenes = (e, {value}) => { const searchScenes = (e, { value }) => {
if (value.length > 0) { if (value.length > 0) {
setScenes((prevScenes) => { setScenes((prevScenes) => {
return stateScenes.filter((e) => { return stateScenes.filter((e) => {
@ -309,13 +294,13 @@ export const CreateAutomation = (props) => {
const automation = { const automation = {
name: automationName, name: automationName,
}; };
props.save({automation, triggerList, order}); props.save({ automation, triggerList, order });
//} //}
}; };
return ( return (
<React.Fragment> <React.Fragment>
<Header style={{display: "inline", marginRight: "1rem"}}> <Header style={{ display: "inline", marginRight: "1rem" }}>
{editName ? ( {editName ? (
<Input <Input
focus focus
@ -330,7 +315,7 @@ export const CreateAutomation = (props) => {
<Button <Button
onClick={() => setEditName((prev) => !prev)} onClick={() => setEditName((prev) => !prev)}
style={{display: "inline"}} style={{ display: "inline" }}
circular circular
size="small" size="small"
icon={editName ? "save" : "edit"} icon={editName ? "save" : "edit"}
@ -338,7 +323,7 @@ export const CreateAutomation = (props) => {
<Segment placeholder className="segment-automations"> <Segment placeholder className="segment-automations">
<Grid columns={2} stackable textAlign="center"> <Grid columns={2} stackable textAlign="center">
<Divider vertical/> <Divider vertical />
<Grid.Row verticalAlign="middle"> <Grid.Row verticalAlign="middle">
<Grid.Column> <Grid.Column>
<Header>Create Triggers</Header> <Header>Create Triggers</Header>
@ -382,7 +367,7 @@ export const CreateAutomation = (props) => {
fluid fluid
onChange={searchScenes} onChange={searchScenes}
/> />
<Divider horizontal/> <Divider horizontal />
<List divided relaxed> <List divided relaxed>
{stateScenes.map((scene) => ( {stateScenes.map((scene) => (
<SceneItem <SceneItem
@ -397,7 +382,7 @@ export const CreateAutomation = (props) => {
) : ( ) : (
<React.Fragment> <React.Fragment>
<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>
@ -408,7 +393,7 @@ export const CreateAutomation = (props) => {
</Segment> </Segment>
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column style={{marginRight: "1rem"}}> <Grid.Column style={{ marginRight: "1rem" }}>
<Button onClick={() => saveAutomation()} color="green"> <Button onClick={() => saveAutomation()} color="green">
SAVE SAVE
</Button> </Button>
@ -419,26 +404,25 @@ export const CreateAutomation = (props) => {
); );
}; };
const Automation = ({automation, devices, scenes, removeAutomation}) => { const Automation = ({ automation, devices, scenes, removeAutomation }) => {
const {triggers} = automation; const { triggers } = automation;
const scenePriorities = automation.scenes; const scenePriorities = automation.scenes;
const getOperator = (operand) => const getOperator = (operand) =>
operands.filter((o) => o.key == operand)[0].text; operands.filter((o) => o.key == operand)[0].text;
return ( return (
<React.Fragment> <React.Fragment>
<Header style={{display: "inline", marginRight: "1rem"}}> <Header style={{ display: "inline", marginRight: "1rem" }}>
{automation.name} {automation.name}
</Header> </Header>
<Button <Button
style={{display: "inline"}} style={{ display: "inline" }}
circular circular
size="small" size="small"
icon={"edit"} icon={"edit"}
/> />
<Button <Button
style={{display: "inline"}} style={{ display: "inline" }}
circular circular
onClick={() => removeAutomation(automation.id)} onClick={() => removeAutomation(automation.id)}
color="red" color="red"
@ -462,9 +446,7 @@ const Automation = ({automation, devices, scenes, removeAutomation}) => {
<Menu.Item as="span"> <Menu.Item as="span">
{device.name}{" "} {device.name}{" "}
{trigger.operator {trigger.operator
? getOperator( ? getOperator(trigger.operator) +
trigger.operator
) +
" " + " " +
trigger.range trigger.range
: trigger.value : trigger.value
@ -486,9 +468,7 @@ const Automation = ({automation, devices, scenes, removeAutomation}) => {
)[0]; )[0];
return ( return (
<Menu key={sceneData.id} compact> <Menu key={sceneData.id} compact>
<Menu.Item as="span"> <Menu.Item as="span">{sceneData.name}</Menu.Item>
{sceneData.name}
</Menu.Item>
</Menu> </Menu>
); );
})} })}
@ -504,7 +484,7 @@ const Automation = ({automation, devices, scenes, removeAutomation}) => {
class AutomationsPanel extends Component { class AutomationsPanel extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {openModal: false} this.state = { openModal: false };
this.getDevices(); this.getDevices();
this.getScenes(); this.getScenes();
this.getAutomations(); this.getAutomations();
@ -526,20 +506,18 @@ class AutomationsPanel extends Component {
.catch((err) => console.error(`error fetching automations:`, err)); .catch((err) => console.error(`error fetching automations:`, err));
} }
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() {
return ( return (
<Grid style={{marginTop: "3rem"}}> <Grid style={{ marginTop: "3rem" }}>
<Grid.Row> <Grid.Row>
<Grid.Column textAlign="center" width={16}> <Grid.Column textAlign="center" width={16}>
{!this.state.openModal ? {!this.state.openModal ? (
(
<List> <List>
<CreateAutomation <CreateAutomation
save={this.props.saveAutomation} save={this.props.saveAutomation}
@ -547,21 +525,16 @@ class AutomationsPanel extends Component {
devices={this.props.devices} devices={this.props.devices}
/> />
</List> </List>
) : ) : (
(
<Button color="green">CREATE AUTOMATION</Button> <Button color="green">CREATE AUTOMATION</Button>
)} )}
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
<Grid.Row> <Grid.Row>
{this.props.automations.map((automation, i) => { {this.props.automations.map((automation, i) => {
console.log(23, automation, i, this.props.automations);
return ( return (
<Grid.Column <Grid.Column key={i} width={8} style={{ margin: "2rem 0" }}>
key={i}
width={8}
style={{margin: "2rem 0"}}
>
<Automation <Automation
removeAutomation={this.removeAutomation} removeAutomation={this.removeAutomation}
scenes={this.props.scenes} scenes={this.props.scenes}
@ -587,6 +560,7 @@ 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);
}, },
}); });

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

@ -256,8 +256,13 @@ function reducer(previousState, action) {
case "AUTOMATION_UPDATE": case "AUTOMATION_UPDATE":
newState = previousState; newState = previousState;
const automations = {};
for (const automation of action.automations) {
automations[automation.id] = automation;
}
change = { change = {
automations : {$set: action.automations} automations: { $set: automations },
}; };
newState = update(previousState, change); newState = update(previousState, change);
break; break;
@ -297,15 +302,13 @@ function reducer(previousState, action) {
case "AUTOMATION_SAVE": case "AUTOMATION_SAVE":
console.log("ID: ", action.automation.id); console.log("ID: ", action.automation.id);
change = { change = {
automations : {[action.automation.id] : {$set : action.automation}} automations: { [action.automation.id]: { $set: action.automation } },
}; };
newState = update(previousState, change); newState = update(previousState, change);
break; break;
case "STATE_SAVE": case "STATE_SAVE":
change = { change = {
sceneStates: { [action.sceneState.id]: { $set: action.sceneState } }, sceneStates: { [action.sceneState.id]: { $set: action.sceneState } },
@ -355,15 +358,14 @@ function reducer(previousState, action) {
break; break;
case "AUTOMATION_DELETE": case "AUTOMATION_DELETE":
change = { change = {
automations: { $unset: [action.id] }, automations: { $unset: [action.id] },
}; };
console.log("CHANGE ", change) console.log("CHANGE ", change);
console.log("Action id: ", action.id); console.log("Action id: ", action.id);
newState = update(previousState, change); newState = update(previousState, change);
console.log("NEW STATE ", newState) console.log("NEW STATE ", newState);
break; break;
case "SCENE_DELETE": case "SCENE_DELETE":
console.log("SCENE", action.sceneId); console.log("SCENE", action.sceneId);