fix
This commit is contained in:
Claudio Maggioni (maggicl)
parent
835ac99a8e
commit
b0b281263e
2 changed files with 534 additions and 558 deletions
|
|
@ -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);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue