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