817 lines
28 KiB
JavaScript
817 lines
28 KiB
JavaScript
import React, { Component, useState, useRef } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { RemoteService } from '../../remote';
|
|
import update from 'immutability-helper';
|
|
import './Automations.css';
|
|
|
|
import {
|
|
Segment,
|
|
Grid,
|
|
Icon,
|
|
Header,
|
|
Input,
|
|
Button,
|
|
Modal,
|
|
List,
|
|
Divider,
|
|
Menu,
|
|
Form,
|
|
Dropdown,
|
|
Checkbox,
|
|
} from 'semantic-ui-react';
|
|
|
|
export const operands = [
|
|
{ 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',
|
|
},
|
|
];
|
|
|
|
const deviceStateOptions = [
|
|
{ key: 'off', text: 'off', value: false },
|
|
{ key: 'on', text: 'on', value: true },
|
|
];
|
|
|
|
const thermostatOptions = [
|
|
{ key: 'HEATING', text: 'HEATING', value: 'HEATING' },
|
|
{ key: 'COOLING', text: 'COOLING', value: 'COOLING' },
|
|
{ key: 'IDLE', text: 'IDLE', value: 'IDLE' },
|
|
{ key: 'OFF', text: 'OFF', value: 'OFF' },
|
|
];
|
|
|
|
const thermostatOperands = [
|
|
{ key: 'EQUAL', text: '=', value: 'EQUAL' },
|
|
{ key: 'NOTEQUAL', text: '\u2260', value: 'NOTEQUAL' },
|
|
];
|
|
|
|
const CreateTrigger = (props) => {
|
|
const [activeOperand, setActiveOperand] = useState(true);
|
|
const [activeThermostat, setActiveThermostat] = useState(false);
|
|
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) => ({
|
|
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));
|
|
setActiveThermostat(props.devices[val.value].kind === 'thermostat' && props.condition);
|
|
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>
|
|
{
|
|
activeThermostat ? (
|
|
<>
|
|
<Form.Field inline width={2}>
|
|
<Dropdown
|
|
onChange={(e, val) => props.inputChange(val)}
|
|
ref={operandsRef}
|
|
name="operand"
|
|
compact
|
|
selection
|
|
options={thermostatOperands}
|
|
/>
|
|
</Form.Field>
|
|
<Form.Field inline width={7}>
|
|
<Dropdown
|
|
onChange={(e, val) => props.inputChange(val)}
|
|
placeholder="State"
|
|
name="mode"
|
|
compact
|
|
selection
|
|
options={thermostatOptions}
|
|
/>
|
|
</Form.Field>
|
|
</>
|
|
)
|
|
: activeOperand ? (
|
|
<>
|
|
<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>
|
|
</>
|
|
) : (
|
|
<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>
|
|
);
|
|
};
|
|
|
|
const SceneItem = (props) => {
|
|
const 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>
|
|
);
|
|
};
|
|
|
|
const Trigger = ({
|
|
deviceName, trigger, onRemove, index,
|
|
}) => {
|
|
const {
|
|
operand, value, on, mode,
|
|
} = 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">{mode || (operand ? value : on ? 'on' : 'off')}</Menu.Item>
|
|
</Menu>
|
|
<Icon
|
|
as="i"
|
|
onClick={() => onRemove(index)}
|
|
className="remove-icon"
|
|
name="remove"
|
|
/>
|
|
</List.Item>
|
|
);
|
|
};
|
|
|
|
class AutomationSaveModal extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
triggerList: [],
|
|
conditionsList: [],
|
|
order: [],
|
|
automationName: 'New Automation',
|
|
editName: false,
|
|
newTrigger: {},
|
|
newCondition: {},
|
|
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(
|
|
{
|
|
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');
|
|
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);
|
|
|
|
// Conditions
|
|
this.setNewCondition = this._setter('newCondition');
|
|
this.addCondition = this.addCondition.bind(this);
|
|
this.removeCondition = this.removeCondition.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';
|
|
}
|
|
if ('on' in trigger) {
|
|
return 'booleanTrigger';
|
|
}
|
|
return false;
|
|
// throw new Error("Trigger kind not handled");
|
|
}
|
|
|
|
conditionKind(condition) {
|
|
if ('operand' in condition && 'value' in condition) {
|
|
return 'rangeTrigger';
|
|
}
|
|
if ('on' in condition) {
|
|
return 'booleanTrigger';
|
|
}
|
|
|
|
if ('operand' in condition && 'mode' in condition) {
|
|
return 'thermostatCondition';
|
|
}
|
|
return false;
|
|
}
|
|
|
|
checkRange(deviceKind, devicesWithPercentage, trigger, error, device) {
|
|
if (!trigger.device || !trigger.operand || !trigger.value) {
|
|
return error;
|
|
}
|
|
if (trigger.value < 0) {
|
|
error.message = 'Values cannot be negative';
|
|
return error;
|
|
}
|
|
// If the device's range is a percentage, values cannot exceed 100
|
|
if (
|
|
devicesWithPercentage.includes(deviceKind)
|
|
&& trigger.value > 100
|
|
) {
|
|
error.message = "The value can't exceed 100, as it's a percentage";
|
|
return error;
|
|
}
|
|
if (
|
|
deviceKind === 'sensor'
|
|
&& device.sensor === 'HUMIDITY'
|
|
&& trigger.value > 100
|
|
) {
|
|
error.message = "The value can't exceed 100, as it's a percentage";
|
|
return error;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
checkBool(trigger, error) {
|
|
if (!trigger.device || trigger.on === null || trigger.on === undefined) return error;
|
|
return false;
|
|
}
|
|
|
|
_checkNewTrigger(trigger, isCondition = false) {
|
|
const error = {
|
|
result: false,
|
|
message: 'There are missing fields!',
|
|
};
|
|
const device = Object.values(this.props.devices).filter(
|
|
(d) => d.id === trigger.device,
|
|
)[0];
|
|
|
|
const triggerKind = this.triggerKind(trigger);
|
|
const conditionKind = this.conditionKind(trigger);
|
|
if (!isCondition && (!device || !triggerKind)) {
|
|
error.message = 'There are missing fields';
|
|
return error;
|
|
}
|
|
|
|
if (isCondition && !conditionKind) {
|
|
error.message = 'There are missing fields';
|
|
return error;
|
|
}
|
|
const deviceKind = device.kind;
|
|
const devicesWithPercentage = ['dimmableLight', 'curtains', 'knobDimmer'];
|
|
|
|
switch (isCondition ? conditionKind : triggerKind) {
|
|
case 'booleanTrigger':
|
|
const checkBoolTrigger = this.checkBool(trigger, error);
|
|
if (checkBoolTrigger) {
|
|
return checkBoolTrigger;
|
|
}
|
|
break;
|
|
case 'booleanCondition':
|
|
const checkBoolCond = this.checkBool(trigger, error);
|
|
if (checkBoolCond) {
|
|
return checkBoolCond;
|
|
}
|
|
break;
|
|
case 'rangeTrigger':
|
|
const checkRangeTrigger = this.checkRange(deviceKind, devicesWithPercentage, trigger, error, device);
|
|
if (checkRangeTrigger) {
|
|
return checkRangeTrigger;
|
|
}
|
|
break;
|
|
case 'rangeCondition':
|
|
const checkRangeCond = this.checkRange(deviceKind, devicesWithPercentage, trigger, error, device);
|
|
if (checkRangeCond) {
|
|
return checkRangeCond;
|
|
}
|
|
break;
|
|
case 'thermostatCondition':
|
|
if (!trigger.device || trigger.mode === null || trigger.mode === undefined || !trigger.operand) return error;
|
|
break;
|
|
default:
|
|
throw new Error('theoretically unreachable statement');
|
|
}
|
|
|
|
let isNotDuplicate = null;
|
|
|
|
if (isCondition === true) {
|
|
isNotDuplicate = !this.state.conditionsList.some(
|
|
(t) => t.device === trigger.device && t.operand === trigger.operand,
|
|
);
|
|
} else {
|
|
isNotDuplicate = !this.state.triggerList.some(
|
|
(t) => t.device === trigger.device && t.operand === trigger.operand,
|
|
);
|
|
}
|
|
const type = isCondition ? 'condition' : 'trigger';
|
|
const duplicationMessage = `You have already created a ${type} for this device with the same conditions`;
|
|
return {
|
|
result: isNotDuplicate,
|
|
message: isNotDuplicate
|
|
? null
|
|
: duplicationMessage,
|
|
};
|
|
}
|
|
|
|
addTrigger() {
|
|
const { result, message } = this._checkNewTrigger(this.state.newTrigger);
|
|
if (result) {
|
|
this.setState(
|
|
update(this.state, {
|
|
triggerList: { $push: [this.state.newTrigger] },
|
|
}),
|
|
);
|
|
} else {
|
|
alert(message);
|
|
}
|
|
}
|
|
|
|
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,
|
|
});
|
|
}
|
|
}
|
|
|
|
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),
|
|
}),
|
|
);
|
|
}
|
|
};
|
|
|
|
searchScenes(_, { value }) {
|
|
this.setState(update(this.state, { scenesFilter: { $set: value } }));
|
|
this.forceUpdate();
|
|
}
|
|
|
|
get sceneList() {
|
|
if (!this.scenesFilter) {
|
|
return this.props.scenes;
|
|
}
|
|
return this.props.scenes.filter((e) => e.name.includes(this.scenesFilter));
|
|
}
|
|
|
|
generateBoolKey(trigger) {
|
|
return `${trigger.device}${trigger.on}`;
|
|
}
|
|
|
|
generateRangeKey(trigger) {
|
|
return `${trigger.device}${trigger.operand}${trigger.value}`;
|
|
}
|
|
|
|
_generateKey = (trigger, isCondition = false) => {
|
|
switch (isCondition ? this.conditionKind(trigger) : this.triggerKind(trigger)) {
|
|
case 'booleanTrigger':
|
|
return this.generateBoolKey(trigger);
|
|
case 'booleanCondition':
|
|
return this.generateBoolKey(trigger);
|
|
case 'rangeTrigger':
|
|
return this.generateRangeKey(trigger);
|
|
case 'rangeCondition':
|
|
return this.generateRangeKey(trigger);
|
|
case 'thermostatCondition':
|
|
return `${trigger.device}${trigger.operand}${trigger.mode}`;
|
|
default:
|
|
throw new Error('theoretically unreachable statement');
|
|
}
|
|
};
|
|
|
|
checkBeforeSave = () => {
|
|
if (!this.state.automationName) {
|
|
alert('Give a name to the automation');
|
|
return false;
|
|
}
|
|
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 = [];
|
|
automation.conditions = [];
|
|
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(
|
|
{
|
|
deviceId: trigger.device,
|
|
kind,
|
|
...(kind === 'booleanTrigger'
|
|
? { on: trigger.on }
|
|
: {
|
|
operator: trigger.operand,
|
|
range: parseInt(trigger.value),
|
|
}),
|
|
},
|
|
);
|
|
}
|
|
|
|
for (const condition of this.state.conditionsList) {
|
|
const kind = condition.kind || this.conditionKind(condition);
|
|
const loSpagnolo = (kind === 'thermostatCondition' ? { operator: condition.operand, mode: condition.mode }
|
|
: {
|
|
operator: condition.operand,
|
|
range: parseInt(condition.value),
|
|
});
|
|
automation.conditions.push(
|
|
{
|
|
deviceId: condition.device,
|
|
kind,
|
|
...(kind === 'booleanTrigger'
|
|
? { on: condition.on }
|
|
: loSpagnolo
|
|
),
|
|
},
|
|
);
|
|
}
|
|
|
|
this.props
|
|
.fastUpdateAutomation(automation)
|
|
.then(this.closeModal)
|
|
.catch(console.error);
|
|
} else {
|
|
this.props
|
|
.saveAutomation({
|
|
automation,
|
|
triggerList: this.state.triggerList,
|
|
order: this.state.order,
|
|
conditionList: this.state.conditionsList,
|
|
})
|
|
.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" />
|
|
Create new automation
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
// CONDITIONS
|
|
|
|
addCondition() {
|
|
// Same method used to check triggers and conditions, not a mistake
|
|
const { result, message } = this._checkNewTrigger(this.state.newCondition, true);
|
|
if (result) {
|
|
this.setState(
|
|
update(this.state, {
|
|
conditionsList: { $push: [this.state.newCondition] },
|
|
}),
|
|
);
|
|
} else {
|
|
alert(message);
|
|
}
|
|
}
|
|
|
|
removeCondition(index) {
|
|
this.setState(
|
|
update(this.state, { conditionsList: { $splice: [[index, 1]] } }),
|
|
);
|
|
}
|
|
|
|
onInputChangeCondition = (val) => {
|
|
if (val.name === 'device') {
|
|
this.setNewCondition({ [val.name]: val.value });
|
|
} else {
|
|
this.setNewCondition({
|
|
...this.state.newCondition,
|
|
[val.name]: val.value,
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
console.log(this.state.conditionsList);
|
|
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}
|
|
/>
|
|
</List>
|
|
<Button
|
|
onClick={this.addTrigger}
|
|
circular
|
|
icon="add"
|
|
color="blue"
|
|
size="huge"
|
|
/>
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
{this.props.scenes.length > 0 ? (
|
|
<>
|
|
<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>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Header icon>
|
|
<Icon name="world" />
|
|
</Header>
|
|
<Button primary>Create Scene</Button>
|
|
</>
|
|
)}
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Segment>
|
|
<Grid columns={1} stackable textAlign="center">
|
|
<Grid.Row verticalAlign="middle">
|
|
<Grid.Column>
|
|
<Header>Add Conditions</Header>
|
|
<List divided relaxed>
|
|
{this.state.conditionsList.length > 0
|
|
&& this.state.conditionsList.map((condition, i) => {
|
|
const deviceName = this.deviceList.filter(
|
|
(d) => d.id === condition.device,
|
|
)[0].name;
|
|
const key = this._generateKey(condition, true);
|
|
return (
|
|
<Trigger
|
|
key={key}
|
|
index={i}
|
|
deviceName={deviceName}
|
|
trigger={condition}
|
|
onRemove={this.removeCondition}
|
|
/>
|
|
);
|
|
})}
|
|
<CreateTrigger
|
|
condition
|
|
devices={this.props.devices}
|
|
inputChange={this.onInputChangeCondition}
|
|
/>
|
|
</List>
|
|
<Button
|
|
onClick={this.addCondition}
|
|
circular
|
|
icon="add"
|
|
color="blue"
|
|
size="huge"
|
|
/>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
<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>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
scenes: Object.values(state.scenes),
|
|
devices: state.devices,
|
|
automation: ownProps.id ? state.automations[ownProps.id] : null,
|
|
});
|
|
const AutomationSaveModalContainer = connect(
|
|
mapStateToProps,
|
|
RemoteService,
|
|
)(AutomationSaveModal);
|
|
export default AutomationSaveModalContainer;
|