2020-05-06 19:36:32 +00:00
|
|
|
import React, { Component, useState, useRef } from "react";
|
2020-05-01 14:42:42 +00:00
|
|
|
import { connect } from "react-redux";
|
|
|
|
import { RemoteService } from "../../remote";
|
|
|
|
import update from "immutability-helper";
|
|
|
|
import "./Automations.css";
|
|
|
|
|
|
|
|
import {
|
2020-05-08 13:45:08 +00:00
|
|
|
Segment,
|
|
|
|
Grid,
|
|
|
|
Icon,
|
|
|
|
Header,
|
|
|
|
Input,
|
|
|
|
Button,
|
|
|
|
Modal,
|
|
|
|
List,
|
|
|
|
Divider,
|
|
|
|
Menu,
|
|
|
|
Form,
|
|
|
|
Dropdown,
|
|
|
|
Checkbox,
|
2020-05-01 14:42:42 +00:00
|
|
|
} from "semantic-ui-react";
|
|
|
|
|
|
|
|
export const operands = [
|
2020-05-08 13:45:08 +00:00
|
|
|
{ key: "EQUAL", text: "=", value: "EQUAL" },
|
|
|
|
{
|
|
|
|
key: "GREATER_EQUAL",
|
|
|
|
text: "\u2265",
|
|
|
|
value: "GREATER_EQUAL",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "GREATER",
|
|
|
|
text: ">",
|
|
|
|
value: "GREATER",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "LESS_EQUAL",
|
|
|
|
text: "\u2264",
|
|
|
|
value: "LESS_EQUAL",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "LESS",
|
|
|
|
text: "<",
|
|
|
|
value: "LESS",
|
|
|
|
},
|
2020-05-01 14:42:42 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
const deviceStateOptions = [
|
2020-05-08 13:45:08 +00:00
|
|
|
{ key: "off", text: "off", value: false },
|
|
|
|
{ key: "on", text: "on", value: true },
|
2020-05-01 14:42:42 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
const CreateTrigger = (props) => {
|
2020-05-08 13:45:08 +00:00
|
|
|
const [activeOperand, setActiveOperand] = useState(true);
|
|
|
|
const operandsRef = useRef(null);
|
|
|
|
const valuesRef = useRef(null);
|
|
|
|
const notAdmitedDevices = ["buttonDimmer"];
|
|
|
|
const hasOperand = new Set([
|
|
|
|
"knobDimmer",
|
|
|
|
"dimmableLight",
|
|
|
|
"curtains",
|
|
|
|
"sensor",
|
|
|
|
]);
|
|
|
|
const deviceList = Object.values(props.devices)
|
|
|
|
.map((device) => {
|
|
|
|
return {
|
|
|
|
key: device.id,
|
|
|
|
text: device.name,
|
|
|
|
value: device.id,
|
|
|
|
kind: device.kind,
|
|
|
|
};
|
|
|
|
})
|
|
|
|
.filter((e) => !notAdmitedDevices.includes(e.kind));
|
|
|
|
|
|
|
|
const onChange = (e, val) => {
|
|
|
|
props.inputChange(val);
|
|
|
|
setActiveOperand(hasOperand.has(props.devices[val.value].kind));
|
|
|
|
|
|
|
|
if (operandsRef.current) operandsRef.current.setValue("");
|
|
|
|
if (valuesRef.current)
|
|
|
|
valuesRef.current.inputRef.current.valueAsNumber = undefined;
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<List.Item>
|
|
|
|
<List.Content>
|
|
|
|
<Form>
|
|
|
|
<Form.Group>
|
|
|
|
<Form.Field inline width={7}>
|
|
|
|
<Dropdown
|
|
|
|
onChange={onChange}
|
|
|
|
name="device"
|
|
|
|
search
|
|
|
|
selection
|
|
|
|
options={deviceList}
|
|
|
|
placeholder="Device"
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
|
|
|
{activeOperand ? (
|
|
|
|
<React.Fragment>
|
|
|
|
<Form.Field inline width={2}>
|
|
|
|
<Dropdown
|
|
|
|
onChange={(e, val) => props.inputChange(val)}
|
|
|
|
ref={operandsRef}
|
|
|
|
name="operand"
|
|
|
|
compact
|
|
|
|
selection
|
|
|
|
options={operands}
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
|
|
|
<Form.Field inline width={7}>
|
|
|
|
<Input
|
|
|
|
onChange={(e, val) => {
|
|
|
|
props.inputChange(val);
|
|
|
|
}}
|
|
|
|
ref={valuesRef}
|
|
|
|
name="value"
|
|
|
|
type="number"
|
|
|
|
placeholder="Value"
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
|
|
|
</React.Fragment>
|
|
|
|
) : (
|
|
|
|
<Form.Field inline width={7}>
|
|
|
|
<Dropdown
|
|
|
|
onChange={(e, val) => props.inputChange(val)}
|
|
|
|
placeholder="State"
|
|
|
|
name="on"
|
|
|
|
compact
|
|
|
|
selection
|
|
|
|
options={deviceStateOptions}
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
|
|
|
)}
|
|
|
|
</Form.Group>
|
|
|
|
</Form>
|
|
|
|
</List.Content>
|
|
|
|
</List.Item>
|
|
|
|
);
|
2020-05-01 14:42:42 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const SceneItem = (props) => {
|
2020-05-08 13:45:08 +00:00
|
|
|
let position = props.order.indexOf(props.scene.id);
|
|
|
|
return (
|
|
|
|
<List.Item>
|
|
|
|
<List.Header>
|
|
|
|
<Grid textAlign="center">
|
|
|
|
<Grid.Row>
|
|
|
|
<Grid.Column width={4}>
|
|
|
|
<Checkbox
|
|
|
|
toggle
|
|
|
|
onChange={(e, val) =>
|
|
|
|
props.orderScenes(props.scene.id, val.checked)
|
|
|
|
}
|
|
|
|
checked={position + 1 > 0}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
<Grid.Column width={8}>
|
|
|
|
<h3>{props.scene.name}</h3>
|
|
|
|
</Grid.Column>
|
|
|
|
<Grid.Column width={4}>
|
|
|
|
<h3>{position !== -1 ? "# " + (position + 1) : ""}</h3>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</List.Header>
|
|
|
|
</List.Item>
|
|
|
|
);
|
2020-05-01 14:42:42 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const Trigger = ({ deviceName, trigger, onRemove, index }) => {
|
2020-05-08 13:45:08 +00:00
|
|
|
const { operand, value, on } = trigger;
|
|
|
|
let symbol;
|
|
|
|
if (operand) {
|
|
|
|
symbol = operands.filter((opt) => opt.key === operand)[0].text;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<List.Item className="trigger-item">
|
|
|
|
<Menu compact>
|
|
|
|
<Menu.Item as="span">{deviceName}</Menu.Item>
|
|
|
|
{operand ? <Menu.Item as="span">{symbol}</Menu.Item> : ""}
|
|
|
|
<Menu.Item as="span">{operand ? value : on ? "on" : "off"}</Menu.Item>
|
|
|
|
</Menu>
|
|
|
|
<Icon
|
|
|
|
as={"i"}
|
|
|
|
onClick={() => onRemove(index)}
|
|
|
|
className="remove-icon"
|
|
|
|
name="remove"
|
|
|
|
/>
|
|
|
|
</List.Item>
|
|
|
|
);
|
2020-05-01 14:42:42 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
class AutomationSaveModal extends Component {
|
2020-05-08 13:45:08 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
triggerList: [],
|
|
|
|
order: [],
|
|
|
|
automationName: "New Automation",
|
|
|
|
editName: false,
|
|
|
|
newTrigger: {},
|
|
|
|
scenesFilter: null,
|
|
|
|
openModal: false,
|
|
|
|
};
|
2020-05-01 14:42:42 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
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,
|
|
|
|
}
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
2020-05-01 18:05:39 +00:00
|
|
|
}
|
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
this.setTrigger = this._setter("triggerList");
|
|
|
|
this.setOrder = this._setter("order");
|
|
|
|
this.setautomationName = this._setter("automationName");
|
|
|
|
this.setEditName = this._setter("editName");
|
|
|
|
this.setNewTrigger = this._setter("newTrigger");
|
|
|
|
|
|
|
|
this.addTrigger = this.addTrigger.bind(this);
|
|
|
|
this.removeTrigger = this.removeTrigger.bind(this);
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
|
|
|
_setter(property) {
|
|
|
|
return (value) =>
|
|
|
|
this.setState(update(this.state, { [property]: { $set: value } }));
|
|
|
|
}
|
|
|
|
|
|
|
|
triggerKind(trigger) {
|
|
|
|
if ("operand" in trigger && "value" in trigger) {
|
|
|
|
return "rangeTrigger";
|
|
|
|
} else if ("on" in trigger) {
|
|
|
|
return "booleanTrigger";
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
//throw new Error("Trigger kind not handled");
|
|
|
|
}
|
|
|
|
}
|
2020-05-01 14:42:42 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
_checkNewTrigger(trigger) {
|
|
|
|
const error = {
|
|
|
|
result: false,
|
|
|
|
message: "There are missing fields!",
|
2020-05-01 14:42:42 +00:00
|
|
|
};
|
2020-05-08 13:45:08 +00:00
|
|
|
let device = Object.values(this.props.devices).filter(
|
|
|
|
(d) => d.id === trigger.device
|
|
|
|
)[0];
|
2020-05-01 14:42:42 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
let triggerKind = this.triggerKind(trigger);
|
2020-05-01 14:42:42 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
if (!device || !triggerKind) {
|
|
|
|
error.message = "There are missing fields";
|
|
|
|
return error;
|
2020-05-06 19:36:32 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
let deviceKind = device.kind;
|
|
|
|
const devicesWithPercentage = ["dimmableLight", "curtains", "knobDimmer"];
|
|
|
|
|
|
|
|
switch (triggerKind) {
|
|
|
|
case "booleanTrigger":
|
|
|
|
if (!trigger.device || trigger.on === null || trigger.on === undefined)
|
|
|
|
return error;
|
|
|
|
break;
|
|
|
|
case "rangeTrigger":
|
|
|
|
if (!trigger.device || !trigger.operand || !trigger.value) {
|
|
|
|
return error;
|
2020-05-06 19:36:32 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
if (trigger.value < 0) {
|
|
|
|
error.message = "Values cannot be negative";
|
|
|
|
return error;
|
2020-05-06 19:36:32 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
// 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;
|
2020-05-06 19:36:32 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
break;
|
|
|
|
default:
|
|
|
|
throw new Error("theoretically unreachable statement");
|
|
|
|
}
|
2020-05-06 19:36:32 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
const isNotDuplicate = !this.state.triggerList.some(
|
|
|
|
(t) => t.device === trigger.device && t.operand === trigger.operand
|
|
|
|
);
|
2020-05-01 14:42:42 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
return {
|
|
|
|
result: isNotDuplicate,
|
|
|
|
message: isNotDuplicate
|
|
|
|
? null
|
|
|
|
: "You have already created a trigger for this device with the same conditions",
|
|
|
|
};
|
|
|
|
}
|
2020-05-01 14:42:42 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
addTrigger() {
|
|
|
|
const { result, message } = this._checkNewTrigger(this.state.newTrigger);
|
2020-05-06 19:36:32 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
if (result) {
|
|
|
|
this.setState(
|
|
|
|
update(this.state, {
|
|
|
|
triggerList: { $push: [this.state.newTrigger] },
|
|
|
|
})
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
alert(message);
|
2020-05-01 14:42:42 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
}
|
2020-05-06 19:36:32 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
removeTrigger(index) {
|
|
|
|
this.setState(
|
|
|
|
update(this.state, { triggerList: { $splice: [[index, 1]] } })
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// This gets triggered when the devices dropdown changes the value.
|
|
|
|
onInputChange(val) {
|
|
|
|
if (val.name === "device") {
|
|
|
|
this.setNewTrigger({ [val.name]: val.value });
|
|
|
|
} else {
|
|
|
|
this.setNewTrigger({
|
|
|
|
...this.state.newTrigger,
|
|
|
|
[val.name]: val.value,
|
|
|
|
});
|
2020-05-01 14:42:42 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
onChangeName(_, val) {
|
|
|
|
this.setautomationName(val.value);
|
|
|
|
}
|
|
|
|
|
|
|
|
orderScenes = (id, checked) => {
|
|
|
|
if (checked) {
|
|
|
|
this.setState(update(this.state, { order: { $push: [id] } }));
|
|
|
|
} else {
|
|
|
|
this.setState(
|
|
|
|
update(this.state, {
|
|
|
|
order: (prevList) => prevList.filter((e) => e !== id),
|
|
|
|
})
|
|
|
|
);
|
2020-05-01 14:42:42 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
searchScenes(_, { value }) {
|
|
|
|
this.setState(update(this.state, { scenesFilter: { $set: value } }));
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
|
|
|
|
|
|
|
get sceneList() {
|
|
|
|
if (!this.scenesFilter) {
|
|
|
|
return this.props.scenes;
|
|
|
|
} else {
|
|
|
|
return this.props.scenes.filter((e) =>
|
|
|
|
e.name.includes(this.scenesFilter)
|
|
|
|
);
|
2020-05-01 14:42:42 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
_generateKey = (trigger) => {
|
|
|
|
switch (this.triggerKind(trigger)) {
|
|
|
|
case "booleanTrigger":
|
|
|
|
return "" + trigger.device + trigger.on;
|
|
|
|
case "rangeTrigger":
|
|
|
|
return "" + trigger.device + trigger.operand + trigger.value;
|
|
|
|
default:
|
|
|
|
throw new Error("theoretically unreachable statement");
|
2020-05-01 14:42:42 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
};
|
2020-05-06 19:36:32 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
checkBeforeSave = () => {
|
|
|
|
if (!this.state.automationName) {
|
|
|
|
alert("Give a name to the automation");
|
|
|
|
return false;
|
2020-05-01 14:42:42 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
if (this.state.triggerList.length <= 0) {
|
|
|
|
alert("You have to create a trigger");
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (this.state.order.length <= 0) {
|
|
|
|
alert("You need at least one active scene");
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
|
|
|
|
saveAutomation = () => {
|
|
|
|
if (this.checkBeforeSave()) {
|
|
|
|
const automation = {
|
|
|
|
name: this.state.automationName,
|
|
|
|
};
|
|
|
|
|
|
|
|
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],
|
|
|
|
});
|
2020-05-06 19:36:32 +00:00
|
|
|
}
|
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
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,
|
|
|
|
}
|
|
|
|
)
|
|
|
|
);
|
2020-05-06 19:36:32 +00:00
|
|
|
}
|
2020-05-01 18:05:39 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
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);
|
|
|
|
}
|
2020-05-01 14:42:42 +00:00
|
|
|
}
|
2020-05-08 13:45:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
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>
|
|
|
|
);
|
|
|
|
}
|
2020-05-01 18:05:39 +00:00
|
|
|
|
2020-05-08 13:45:08 +00:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<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"}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<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}
|
2020-05-01 14:42:42 +00:00
|
|
|
/>
|
2020-05-08 13:45:08 +00:00
|
|
|
</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>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|
2020-05-01 14:42:42 +00:00
|
|
|
}
|
|
|
|
|
2020-05-01 18:05:39 +00:00
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
2020-05-08 13:45:08 +00:00
|
|
|
scenes: Object.values(state.scenes),
|
|
|
|
devices: state.devices,
|
|
|
|
automation: ownProps.id ? state.automations[ownProps.id] : null,
|
2020-05-01 14:42:42 +00:00
|
|
|
});
|
|
|
|
const AutomationSaveModalContainer = connect(
|
2020-05-08 13:45:08 +00:00
|
|
|
mapStateToProps,
|
|
|
|
RemoteService
|
2020-05-01 14:42:42 +00:00
|
|
|
)(AutomationSaveModal);
|
|
|
|
export default AutomationSaveModalContainer;
|