Conditions to automations done (not connected to backend). I followed the same structure as in triggers
This commit is contained in:
Christian Capeáns Pérez
parent
364f58fa24
commit
fa4bae7c10
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component, useState, useRef } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../../remote';
|
||||
import React, {Component, useState, useRef} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {RemoteService} from '../../remote';
|
||||
import update from 'immutability-helper';
|
||||
import './Automations.css';
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ import {
|
|||
} from 'semantic-ui-react';
|
||||
|
||||
export const operands = [
|
||||
{ key: 'EQUAL', text: '=', value: 'EQUAL' },
|
||||
{key: 'EQUAL', text: '=', value: 'EQUAL'},
|
||||
{
|
||||
key: 'GREATER_EQUAL',
|
||||
text: '\u2265',
|
||||
|
|
@ -45,8 +45,8 @@ export 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) => {
|
||||
|
|
@ -164,8 +164,8 @@ const SceneItem = (props) => {
|
|||
|
||||
const Trigger = ({
|
||||
deviceName, trigger, onRemove, index,
|
||||
}) => {
|
||||
const { operand, value, on } = trigger;
|
||||
}) => {
|
||||
const {operand, value, on} = trigger;
|
||||
let symbol;
|
||||
if (operand) {
|
||||
symbol = operands.filter((opt) => opt.key === operand)[0].text;
|
||||
|
|
@ -192,10 +192,12 @@ class AutomationSaveModal extends Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
triggerList: [],
|
||||
conditionsList: [],
|
||||
order: [],
|
||||
automationName: 'New Automation',
|
||||
editName: false,
|
||||
newTrigger: {},
|
||||
newCondition: {},
|
||||
scenesFilter: null,
|
||||
openModal: false,
|
||||
};
|
||||
|
|
@ -211,7 +213,7 @@ class AutomationSaveModal extends Component {
|
|||
device: trigger.deviceId,
|
||||
kind: trigger.kind,
|
||||
...(trigger.kind === 'booleanTrigger'
|
||||
? { on: trigger.on }
|
||||
? {on: trigger.on}
|
||||
: {
|
||||
operand: trigger.operator,
|
||||
value: trigger.value,
|
||||
|
|
@ -226,21 +228,26 @@ class AutomationSaveModal extends Component {
|
|||
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 });
|
||||
this.setState({openModal: true});
|
||||
};
|
||||
|
||||
closeModal = (e) => {
|
||||
this.setState({ openModal: false });
|
||||
this.setState({openModal: false});
|
||||
};
|
||||
|
||||
get deviceList() {
|
||||
|
|
@ -248,20 +255,21 @@ class AutomationSaveModal extends Component {
|
|||
}
|
||||
|
||||
_setter(property) {
|
||||
return (value) => this.setState(update(this.state, { [property]: { $set: value } }));
|
||||
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) {
|
||||
}
|
||||
if ('on' in trigger) {
|
||||
return 'booleanTrigger';
|
||||
}
|
||||
return false;
|
||||
// throw new Error("Trigger kind not handled");
|
||||
}
|
||||
|
||||
_checkNewTrigger(trigger) {
|
||||
_checkNewTrigger(trigger, isCondition = false) {
|
||||
const error = {
|
||||
result: false,
|
||||
message: 'There are missing fields!',
|
||||
|
|
@ -298,7 +306,8 @@ class AutomationSaveModal extends Component {
|
|||
) {
|
||||
error.message = "The value can't exceed 100, as it's a percentage";
|
||||
return error;
|
||||
} if (
|
||||
}
|
||||
if (
|
||||
deviceKind === 'sensor'
|
||||
&& device.sensor === 'HUMIDITY'
|
||||
&& trigger.value > 100
|
||||
|
|
@ -311,25 +320,33 @@ class AutomationSaveModal extends Component {
|
|||
throw new Error('theoretically unreachable statement');
|
||||
}
|
||||
|
||||
const isNotDuplicate = !this.state.triggerList.some(
|
||||
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
|
||||
: 'You have already created a trigger for this device with the same conditions',
|
||||
: duplicationMessage
|
||||
};
|
||||
}
|
||||
|
||||
addTrigger() {
|
||||
const { result, message } = this._checkNewTrigger(this.state.newTrigger);
|
||||
|
||||
const {result, message} = this._checkNewTrigger(this.state.newTrigger);
|
||||
if (result) {
|
||||
this.setState(
|
||||
update(this.state, {
|
||||
triggerList: { $push: [this.state.newTrigger] },
|
||||
triggerList: {$push: [this.state.newTrigger]},
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
|
|
@ -339,14 +356,14 @@ class AutomationSaveModal extends Component {
|
|||
|
||||
removeTrigger(index) {
|
||||
this.setState(
|
||||
update(this.state, { triggerList: { $splice: [[index, 1]] } }),
|
||||
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 });
|
||||
this.setNewTrigger({[val.name]: val.value});
|
||||
} else {
|
||||
this.setNewTrigger({
|
||||
...this.state.newTrigger,
|
||||
|
|
@ -361,7 +378,7 @@ class AutomationSaveModal extends Component {
|
|||
|
||||
orderScenes = (id, checked) => {
|
||||
if (checked) {
|
||||
this.setState(update(this.state, { order: { $push: [id] } }));
|
||||
this.setState(update(this.state, {order: {$push: [id]}}));
|
||||
} else {
|
||||
this.setState(
|
||||
update(this.state, {
|
||||
|
|
@ -371,8 +388,8 @@ class AutomationSaveModal extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
searchScenes(_, { value }) {
|
||||
this.setState(update(this.state, { scenesFilter: { $set: value } }));
|
||||
searchScenes(_, {value}) {
|
||||
this.setState(update(this.state, {scenesFilter: {$set: value}}));
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
|
|
@ -435,7 +452,7 @@ class AutomationSaveModal extends Component {
|
|||
deviceId: trigger.device,
|
||||
kind,
|
||||
...(kind === 'booleanTrigger'
|
||||
? { on: trigger.on }
|
||||
? {on: trigger.on}
|
||||
: {
|
||||
operator: trigger.operand,
|
||||
range: parseInt(trigger.value),
|
||||
|
|
@ -464,7 +481,7 @@ class AutomationSaveModal extends Component {
|
|||
get trigger() {
|
||||
return this.props.id ? (
|
||||
<Button
|
||||
style={{ display: 'inline' }}
|
||||
style={{display: 'inline'}}
|
||||
circular
|
||||
size="small"
|
||||
icon="edit"
|
||||
|
|
@ -472,12 +489,45 @@ class AutomationSaveModal extends Component {
|
|||
/>
|
||||
) : (
|
||||
<Button icon labelPosition="left" color="green" onClick={this.openModal}>
|
||||
<Icon name="add" />
|
||||
Create new automation
|
||||
<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() {
|
||||
return (
|
||||
<Modal
|
||||
|
|
@ -487,7 +537,7 @@ Create new automation
|
|||
onClose={this.closeModal}
|
||||
>
|
||||
<Segment basic>
|
||||
<Header style={{ display: 'inline', marginRight: '1rem' }}>
|
||||
<Header style={{display: 'inline', marginRight: '1rem'}}>
|
||||
{this.state.editName ? (
|
||||
<Input
|
||||
focus
|
||||
|
|
@ -499,10 +549,9 @@ Create new automation
|
|||
this.state.automationName
|
||||
)}
|
||||
</Header>
|
||||
|
||||
<Button
|
||||
onClick={() => this.setEditName((prev) => !prev)}
|
||||
style={{ display: 'inline' }}
|
||||
style={{display: 'inline'}}
|
||||
circular
|
||||
size="small"
|
||||
icon={this.state.editName ? 'save' : 'edit'}
|
||||
|
|
@ -510,7 +559,7 @@ Create new automation
|
|||
|
||||
<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>
|
||||
|
|
@ -554,7 +603,7 @@ Create new automation
|
|||
fluid
|
||||
onChange={this.searchScenes}
|
||||
/>
|
||||
<Divider horizontal />
|
||||
<Divider horizontal/>
|
||||
<List divided relaxed>
|
||||
{this.sceneList.map((scene) => (
|
||||
<SceneItem
|
||||
|
|
@ -569,7 +618,7 @@ Create new automation
|
|||
) : (
|
||||
<>
|
||||
<Header icon>
|
||||
<Icon name="world" />
|
||||
<Icon name="world"/>
|
||||
</Header>
|
||||
<Button primary>Create Scene</Button>
|
||||
</>
|
||||
|
|
@ -578,9 +627,45 @@ Create new automation
|
|||
</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);
|
||||
return (
|
||||
<Trigger
|
||||
key={key}
|
||||
index={i}
|
||||
deviceName={deviceName}
|
||||
trigger={condition}
|
||||
onRemove={this.removeCondition}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<CreateTrigger
|
||||
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' }}>
|
||||
<Grid.Column style={{marginRight: '1rem'}}>
|
||||
<Button onClick={() => this.saveAutomation()} color="green">
|
||||
{this.props.id ? 'Save' : 'Create'}
|
||||
</Button>
|
||||
|
|
|
|||
12141
smart-hut/yarn.lock
Normal file
12141
smart-hut/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user