More fixes on automations
This commit is contained in:
Claudio Maggioni (maggicl)
parent
96184c76c9
commit
ac1bcdbc29
|
|
@ -11,6 +11,7 @@ import {
|
|||
Header,
|
||||
Input,
|
||||
Button,
|
||||
Modal,
|
||||
List,
|
||||
Divider,
|
||||
Menu,
|
||||
|
|
@ -50,8 +51,14 @@ const deviceStateOptions = [
|
|||
|
||||
const CreateTrigger = (props) => {
|
||||
const [activeOperand, setActiveOperand] = useState(true);
|
||||
const admitedDevices = ["sensor", "regularLight", "dimmableLight"]; // TODO: Complete this list
|
||||
const deviceList = props.devices
|
||||
const notAdmitedDevices = ["buttonDimmer"];
|
||||
const hasOperand = new Set([
|
||||
"knobDimmer",
|
||||
"dimmableLight",
|
||||
"curtains",
|
||||
"sensor",
|
||||
]);
|
||||
const deviceList = Object.values(props.devices)
|
||||
.map((device) => {
|
||||
return {
|
||||
key: device.id,
|
||||
|
|
@ -60,17 +67,11 @@ const CreateTrigger = (props) => {
|
|||
kind: device.kind,
|
||||
};
|
||||
})
|
||||
.filter((e) => admitedDevices.includes(e.kind));
|
||||
.filter((e) => !notAdmitedDevices.includes(e.kind));
|
||||
|
||||
const onChange = (e, val) => {
|
||||
props.inputChange(val);
|
||||
if (
|
||||
props.devices.filter((d) => d.id === val.value)[0].hasOwnProperty("on")
|
||||
) {
|
||||
setActiveOperand(false);
|
||||
} else {
|
||||
setActiveOperand(true);
|
||||
}
|
||||
setActiveOperand(hasOperand.has(props.devices[val.value].kind));
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -182,7 +183,6 @@ const Trigger = ({ deviceName, trigger, onRemove, index }) => {
|
|||
class AutomationSaveModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
triggerList: [],
|
||||
order: [],
|
||||
|
|
@ -190,8 +190,29 @@ class AutomationSaveModal extends Component {
|
|||
editName: false,
|
||||
newTrigger: {},
|
||||
scenesFilter: null,
|
||||
openModal: false,
|
||||
};
|
||||
|
||||
if (this.props.automation) {
|
||||
this.state.automationName = this.props.automation.name;
|
||||
for (const scenePriority of this.props.automation.scenes) {
|
||||
this.state.order[scenePriority.priority] = scenePriority.sceneId;
|
||||
}
|
||||
for (const trigger of this.props.automation.triggers) {
|
||||
this.state.triggerList.push(
|
||||
Object.assign(
|
||||
{
|
||||
device: trigger.deviceId,
|
||||
kind: trigger.kind,
|
||||
},
|
||||
trigger.kind === "booleanTrigger"
|
||||
? { on: trigger.on }
|
||||
: { operand: trigger.operator, value: trigger.value }
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
this.setTrigger = this._setter("triggerList");
|
||||
this.setOrder = this._setter("order");
|
||||
this.setautomationName = this._setter("automationName");
|
||||
|
|
@ -203,8 +224,17 @@ class AutomationSaveModal extends Component {
|
|||
this.onInputChange = this.onInputChange.bind(this);
|
||||
this.searchScenes = this.searchScenes.bind(this);
|
||||
this.orderScenes = this.orderScenes.bind(this);
|
||||
this.onChangeName = this.onChangeName.bind(this);
|
||||
}
|
||||
|
||||
openModal = (e) => {
|
||||
this.setState({ openModal: true });
|
||||
};
|
||||
|
||||
closeModal = (e) => {
|
||||
this.setState({ openModal: false });
|
||||
};
|
||||
|
||||
get deviceList() {
|
||||
return Object.values(this.props.devices);
|
||||
}
|
||||
|
|
@ -216,9 +246,9 @@ class AutomationSaveModal extends Component {
|
|||
|
||||
triggerKind(trigger) {
|
||||
if ("on" in trigger) {
|
||||
return "BooleanTrigger";
|
||||
return "booleanTrigger";
|
||||
} else if ("operand" in trigger && "value" in trigger) {
|
||||
return "RangeTrigger";
|
||||
return "rangeTrigger";
|
||||
} else {
|
||||
throw new Error("Trigger kind not handled");
|
||||
}
|
||||
|
|
@ -234,10 +264,11 @@ class AutomationSaveModal extends Component {
|
|||
};
|
||||
|
||||
switch (this.triggerKind(trigger)) {
|
||||
case "BooleanTrigger":
|
||||
if (!trigger.device || !trigger.on) return error;
|
||||
case "booleanTrigger":
|
||||
if (!trigger.device || trigger.on === null || trigger.on === undefined)
|
||||
return error;
|
||||
break;
|
||||
case "RangeTrigger":
|
||||
case "rangeTrigger":
|
||||
if (!trigger.device || !trigger.operand || !trigger.value) return error;
|
||||
break;
|
||||
}
|
||||
|
|
@ -310,10 +341,10 @@ class AutomationSaveModal extends Component {
|
|||
|
||||
_generateKey = (trigger) => {
|
||||
switch (this.triggerKind(trigger)) {
|
||||
case "BooleanTrigger":
|
||||
return trigger.device + trigger.value;
|
||||
case "RangeTrigger":
|
||||
return trigger.device + trigger.operand + trigger.value;
|
||||
case "booleanTrigger":
|
||||
return "" + trigger.device + trigger.on;
|
||||
case "rangeTrigger":
|
||||
return "" + trigger.device + trigger.operand + trigger.value;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -338,132 +369,187 @@ class AutomationSaveModal extends Component {
|
|||
const automation = {
|
||||
name: this.state.automationName,
|
||||
};
|
||||
this.props.save({
|
||||
automation,
|
||||
triggerList: this.state.triggerList,
|
||||
order: this.state.order,
|
||||
});
|
||||
|
||||
if (this.props.id) {
|
||||
automation.id = this.props.id;
|
||||
automation.triggers = [];
|
||||
automation.scenes = [];
|
||||
|
||||
for (let i = 0; i < this.state.order.length; i++) {
|
||||
automation.scenes.push({
|
||||
priority: i,
|
||||
sceneId: this.state.order[i],
|
||||
});
|
||||
}
|
||||
|
||||
for (const trigger of this.state.triggerList) {
|
||||
const kind = trigger.kind || this.triggerKind(trigger);
|
||||
automation.triggers.push(
|
||||
Object.assign(
|
||||
{
|
||||
deviceId: trigger.device,
|
||||
kind,
|
||||
},
|
||||
kind
|
||||
? { on: trigger.on }
|
||||
: { operator: trigger.operand, value: trigger.value }
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
console.log(automation);
|
||||
this.props
|
||||
.fastUpdateAutomation(automation)
|
||||
.then(this.closeModal)
|
||||
.catch(console.error);
|
||||
} else {
|
||||
this.props
|
||||
.saveAutomation({
|
||||
automation,
|
||||
triggerList: this.state.triggerList,
|
||||
order: this.state.order,
|
||||
})
|
||||
.then(this.closeModal)
|
||||
.catch(console.error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
get trigger() {
|
||||
return this.props.id ? (
|
||||
<Button
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
size="small"
|
||||
icon="edit"
|
||||
onClick={this.openModal}
|
||||
/>
|
||||
) : (
|
||||
<Button icon labelPosition="left" color="green" onClick={this.openModal}>
|
||||
<Icon name="add"></Icon>Create new automation
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||
{this.state.editName ? (
|
||||
<Input
|
||||
focus
|
||||
transparent
|
||||
placeholder="New automation name..."
|
||||
onChange={this.onChangeName}
|
||||
/>
|
||||
) : (
|
||||
this.state.automationName
|
||||
)}
|
||||
</Header>
|
||||
<Modal
|
||||
closeIcon
|
||||
trigger={this.trigger}
|
||||
open={this.state.openModal}
|
||||
onClose={this.closeModal}
|
||||
>
|
||||
<Segment basic>
|
||||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||
{this.state.editName ? (
|
||||
<Input
|
||||
focus
|
||||
transparent
|
||||
placeholder="New automation name..."
|
||||
onChange={this.onChangeName}
|
||||
/>
|
||||
) : (
|
||||
this.state.automationName
|
||||
)}
|
||||
</Header>
|
||||
|
||||
<Button
|
||||
onClick={() => this.setEditName((prev) => !prev)}
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
size="small"
|
||||
icon={this.state.editName ? "save" : "edit"}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => this.setEditName((prev) => !prev)}
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
size="small"
|
||||
icon={this.state.editName ? "save" : "edit"}
|
||||
/>
|
||||
|
||||
<Segment placeholder className="segment-automations">
|
||||
<Grid columns={2} stackable textAlign="center">
|
||||
<Divider vertical />
|
||||
<Grid.Row verticalAlign="middle">
|
||||
<Grid.Column>
|
||||
<Header>Create Triggers</Header>
|
||||
<List divided relaxed>
|
||||
{this.state.triggerList.length > 0 &&
|
||||
this.state.triggerList.map((trigger, i) => {
|
||||
const deviceName = this.deviceList.filter(
|
||||
(d) => d.id === trigger.device
|
||||
)[0].name;
|
||||
const key = this._generateKey(trigger);
|
||||
return (
|
||||
<Trigger
|
||||
key={key}
|
||||
index={i}
|
||||
deviceName={deviceName}
|
||||
trigger={trigger}
|
||||
onRemove={this.removeTrigger}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<CreateTrigger
|
||||
devices={this.deviceList}
|
||||
inputChange={this.onInputChange}
|
||||
/>
|
||||
</List>
|
||||
<Button
|
||||
onClick={this.addTrigger}
|
||||
circular
|
||||
icon="add"
|
||||
color="blue"
|
||||
size="huge"
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
{this.props.scenes.length > 0 ? (
|
||||
<React.Fragment>
|
||||
<Header>Activate Scenes</Header>
|
||||
<Input
|
||||
icon="search"
|
||||
placeholder="Search..."
|
||||
fluid
|
||||
onChange={this.searchScenes}
|
||||
<Segment placeholder className="segment-automations">
|
||||
<Grid columns={2} stackable textAlign="center">
|
||||
<Divider vertical />
|
||||
<Grid.Row verticalAlign="middle">
|
||||
<Grid.Column>
|
||||
<Header>Create Triggers</Header>
|
||||
<List divided relaxed>
|
||||
{this.state.triggerList.length > 0 &&
|
||||
this.state.triggerList.map((trigger, i) => {
|
||||
const deviceName = this.deviceList.filter(
|
||||
(d) => d.id === trigger.device
|
||||
)[0].name;
|
||||
const key = this._generateKey(trigger);
|
||||
return (
|
||||
<Trigger
|
||||
key={key}
|
||||
index={i}
|
||||
deviceName={deviceName}
|
||||
trigger={trigger}
|
||||
onRemove={this.removeTrigger}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<CreateTrigger
|
||||
devices={this.props.devices}
|
||||
inputChange={this.onInputChange}
|
||||
/>
|
||||
<Divider horizontal />
|
||||
<List divided relaxed>
|
||||
{this.sceneList.map((scene) => (
|
||||
<SceneItem
|
||||
key={scene.id}
|
||||
scene={scene}
|
||||
order={this.state.order}
|
||||
orderScenes={this.orderScenes}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Header icon>
|
||||
<Icon name="world" />
|
||||
</Header>
|
||||
<Button primary>Create Scene</Button>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</List>
|
||||
<Button
|
||||
onClick={this.addTrigger}
|
||||
circular
|
||||
icon="add"
|
||||
color="blue"
|
||||
size="huge"
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
{this.props.scenes.length > 0 ? (
|
||||
<React.Fragment>
|
||||
<Header>Activate Scenes</Header>
|
||||
<Input
|
||||
icon="search"
|
||||
placeholder="Search..."
|
||||
fluid
|
||||
onChange={this.searchScenes}
|
||||
/>
|
||||
<Divider horizontal />
|
||||
<List divided relaxed>
|
||||
{this.sceneList.map((scene) => (
|
||||
<SceneItem
|
||||
key={scene.id}
|
||||
scene={scene}
|
||||
order={this.state.order}
|
||||
orderScenes={this.orderScenes}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Header icon>
|
||||
<Icon name="world" />
|
||||
</Header>
|
||||
<Button primary>Create Scene</Button>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column style={{ marginRight: "1rem" }}>
|
||||
<Button onClick={() => this.saveAutomation()} color="green">
|
||||
{this.props.id ? "Save" : "Create"}
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column style={{ marginRight: "1rem" }}>
|
||||
<Button onClick={() => this.saveAutomation()} color="green">
|
||||
SAVE
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
activeRoom: state.active.activeRoom,
|
||||
activeTab: state.active.activeTab,
|
||||
get scenes() {
|
||||
return Object.values(state.scenes);
|
||||
},
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
scenes: Object.values(state.scenes),
|
||||
devices: state.devices,
|
||||
get automations() {
|
||||
return Object.values(state.automations);
|
||||
},
|
||||
automation: ownProps.id ? state.automations[ownProps.id] : null,
|
||||
});
|
||||
const AutomationSaveModalContainer = connect(
|
||||
mapStateToProps,
|
||||
|
|
|
|||
|
|
@ -25,12 +25,7 @@ const Automation = ({ automation, devices, scenes, removeAutomation }) => {
|
|||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||
{automation.name}
|
||||
</Header>
|
||||
<Button
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
size="small"
|
||||
icon={"edit"}
|
||||
/>
|
||||
<CreateAutomation id={automation.id} />
|
||||
<Button
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
|
|
@ -59,7 +54,7 @@ const Automation = ({ automation, devices, scenes, removeAutomation }) => {
|
|||
? getOperator(trigger.operator) +
|
||||
" " +
|
||||
trigger.range
|
||||
: trigger.value
|
||||
: trigger.on
|
||||
? " - on"
|
||||
: " - off"}
|
||||
</Menu.Item>
|
||||
|
|
@ -129,7 +124,7 @@ class AutomationsPanel extends Component {
|
|||
<Grid.Column textAlign="center" width={16}>
|
||||
{!this.state.openModal ? (
|
||||
<List>
|
||||
<CreateAutomation save={this.props.saveAutomation} />
|
||||
<CreateAutomation />
|
||||
</List>
|
||||
) : (
|
||||
<Button color="green">CREATE AUTOMATION</Button>
|
||||
|
|
@ -138,7 +133,6 @@ class AutomationsPanel extends Component {
|
|||
</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" }}>
|
||||
<Automation
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// vim: set ts=2 sw=2 et tw=80:
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { Grid, Card } from "semantic-ui-react";
|
||||
import { Segment, Card } from "semantic-ui-react";
|
||||
import Device from "./devices/Device";
|
||||
import NewDevice from "./devices/NewDevice";
|
||||
import { connect } from "react-redux";
|
||||
|
|
@ -24,18 +24,16 @@ class DevicePanel extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Card.Group style={{ paddingTop: "3rem" }}>
|
||||
<Card.Group centered style={{ paddingTop: "3rem" }}>
|
||||
{this.props.devices.map((e, i) => {
|
||||
return (
|
||||
<Grid.Column key={i}>
|
||||
<Device tab={this.props.tab} id={e.id} />
|
||||
</Grid.Column>
|
||||
);
|
||||
return <Device tab={this.props.tab} id={e.id} />;
|
||||
})}
|
||||
{!this.props.isActiveRoomHome ? (
|
||||
<Grid.Column>
|
||||
<NewDevice />
|
||||
</Grid.Column>
|
||||
<Card style={{ height: "23em" }}>
|
||||
<Segment basic style={{ width: "100%", height: "100%" }}>
|
||||
<NewDevice />
|
||||
</Segment>
|
||||
</Card>
|
||||
) : null}
|
||||
</Card.Group>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -341,7 +341,14 @@ class NewDevice extends Component {
|
|||
open={this.state.openModal}
|
||||
onClose={this.resetState}
|
||||
trigger={
|
||||
<StyledDiv onClick={this.handleOpen}>
|
||||
<StyledDiv
|
||||
onClick={this.handleOpen}
|
||||
style={{
|
||||
position: "relative",
|
||||
top: "calc(50% - 5rem)",
|
||||
left: "calc(50% - 5rem)",
|
||||
}}
|
||||
>
|
||||
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
|
||||
</StyledDiv>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -315,36 +315,7 @@ export const RemoteService = {
|
|||
fetchAutomations: () => {
|
||||
return (dispatch) => {
|
||||
return Endpoint.get("/automation/")
|
||||
.then((res) => {
|
||||
const length = res.data.length;
|
||||
const automations = [];
|
||||
|
||||
res.data.forEach((a, index) => {
|
||||
const { id, name } = a;
|
||||
const automation = {
|
||||
name,
|
||||
id,
|
||||
triggers: [],
|
||||
scenes: [],
|
||||
};
|
||||
|
||||
return Endpoint.get(`/booleanTrigger/${id}`).then((res) => {
|
||||
automation.triggers.push(...res.data);
|
||||
return Endpoint.get(`/rangeTrigger/${id}`).then((res) => {
|
||||
automation.triggers.push(...res.data);
|
||||
return Endpoint.get(`/scenePriority/${id}`).then((res) => {
|
||||
automation.scenes.push(...res.data);
|
||||
automations.push(automation);
|
||||
if (index + 1 === length) {
|
||||
return void dispatch(
|
||||
actions.automationsUpdate(automations)
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
})
|
||||
.then((res) => void dispatch(actions.automationsUpdate(res.data)))
|
||||
.catch((err) => {
|
||||
console.error(`Fetch automations error`, err);
|
||||
throw new RemoteError(["Network error"]);
|
||||
|
|
@ -502,11 +473,22 @@ export const RemoteService = {
|
|||
};
|
||||
},
|
||||
|
||||
fastUpdateAutomation: (automation) => {
|
||||
return (dispatch) => {
|
||||
return Endpoint.put("/automation/fast", {}, automation)
|
||||
.then((res) => dispatch(actions.automationSave(res.data)))
|
||||
.catch((err) => {
|
||||
console.warn("Update automation: ", automation, "error: ", err);
|
||||
throw new RemoteError(["Network error"]);
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates/Updates an automation with the given data. If
|
||||
* data.id is truthy, then a update call is performed,
|
||||
* otherwise a create call is performed.
|
||||
* @param {Automation} data the device to update.
|
||||
* @param {Automation} data the automation to update.
|
||||
* @returns {Promise<Device, RemoteError>} promise that resolves to the saved device and rejects
|
||||
* with user-fiendly errors as a RemoteError
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -257,7 +257,6 @@ function reducer(previousState, action) {
|
|||
break;
|
||||
|
||||
case "AUTOMATION_UPDATE":
|
||||
newState = previousState;
|
||||
const automations = {};
|
||||
for (const automation of action.automations) {
|
||||
automations[automation.id] = automation;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user