smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Conditions to automations done (not connected to backend). I followed the same structure as in triggers

Browse source
This commit is contained in:
Christian Capeáns Pérez 2020-05-15 20:57:42 +02:00
parent 364f58fa24
commit fa4bae7c10
2 changed files with 12775 additions and 549 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
smart-hut/src/components/dashboard/AutomationCreationModal.js
View file

@ -1,6 +1,6 @@
import React, { Component, useState, useRef } from 'react'; import React, {Component, useState, useRef} from 'react';
import { connect } from 'react-redux'; import {connect} from 'react-redux';
import { RemoteService } from '../../remote'; import {RemoteService} from '../../remote';
import update from 'immutability-helper'; import update from 'immutability-helper';
import './Automations.css'; import './Automations.css';
@ -21,7 +21,7 @@ import {
} from 'semantic-ui-react'; } from 'semantic-ui-react';
export const operands = [ export const operands = [
{ key: 'EQUAL', text: '=', value: 'EQUAL' }, {key: 'EQUAL', text: '=', value: 'EQUAL'},
{ {
key: 'GREATER_EQUAL', key: 'GREATER_EQUAL',
text: '\u2265', text: '\u2265',
@ -45,8 +45,8 @@ export const operands = [
]; ];
const deviceStateOptions = [ const deviceStateOptions = [
{ key: 'off', text: 'off', value: false }, {key: 'off', text: 'off', value: false},
{ key: 'on', text: 'on', value: true }, {key: 'on', text: 'on', value: true},
]; ];
const CreateTrigger = (props) => { const CreateTrigger = (props) => {
@ -164,8 +164,8 @@ const SceneItem = (props) => {
const Trigger = ({ const Trigger = ({
deviceName, trigger, onRemove, index, deviceName, trigger, onRemove, index,
}) => { }) => {
const { operand, value, on } = trigger; const {operand, value, on} = trigger;
let symbol; let symbol;
if (operand) { if (operand) {
symbol = operands.filter((opt) => opt.key === operand)[0].text; symbol = operands.filter((opt) => opt.key === operand)[0].text;
@ -192,10 +192,12 @@ class AutomationSaveModal extends Component {
super(props); super(props);
this.state = { this.state = {
triggerList: [], triggerList: [],
conditionsList: [],
order: [], order: [],
automationName: 'New Automation', automationName: 'New Automation',
editName: false, editName: false,
newTrigger: {}, newTrigger: {},
newCondition: {},
scenesFilter: null, scenesFilter: null,
openModal: false, openModal: false,
}; };
@ -211,7 +213,7 @@ class AutomationSaveModal extends Component {
device: trigger.deviceId, device: trigger.deviceId,
kind: trigger.kind, kind: trigger.kind,
...(trigger.kind === 'booleanTrigger' ...(trigger.kind === 'booleanTrigger'
? { on: trigger.on } ? {on: trigger.on}
: { : {
operand: trigger.operator, operand: trigger.operator,
value: trigger.value, value: trigger.value,
@ -226,21 +228,26 @@ class AutomationSaveModal extends Component {
this.setautomationName = this._setter('automationName'); this.setautomationName = this._setter('automationName');
this.setEditName = this._setter('editName'); this.setEditName = this._setter('editName');
this.setNewTrigger = this._setter('newTrigger'); this.setNewTrigger = this._setter('newTrigger');
this.addTrigger = this.addTrigger.bind(this); this.addTrigger = this.addTrigger.bind(this);
this.removeTrigger = this.removeTrigger.bind(this); this.removeTrigger = this.removeTrigger.bind(this);
this.onInputChange = this.onInputChange.bind(this); this.onInputChange = this.onInputChange.bind(this);
this.searchScenes = this.searchScenes.bind(this); this.searchScenes = this.searchScenes.bind(this);
this.orderScenes = this.orderScenes.bind(this); this.orderScenes = this.orderScenes.bind(this);
this.onChangeName = this.onChangeName.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) => { openModal = (e) => {
this.setState({ openModal: true }); this.setState({openModal: true});
}; };
closeModal = (e) => { closeModal = (e) => {
this.setState({ openModal: false }); this.setState({openModal: false});
}; };
get deviceList() { get deviceList() {
@ -248,20 +255,21 @@ class AutomationSaveModal extends Component {
} }
_setter(property) { _setter(property) {
return (value) => this.setState(update(this.state, { [property]: { $set: value } })); return (value) => this.setState(update(this.state, {[property]: {$set: value}}));
} }
triggerKind(trigger) { triggerKind(trigger) {
if ('operand' in trigger && 'value' in trigger) { if ('operand' in trigger && 'value' in trigger) {
return 'rangeTrigger'; return 'rangeTrigger';
} if ('on' in trigger) { }
if ('on' in trigger) {
return 'booleanTrigger'; return 'booleanTrigger';
} }
return false; return false;
// throw new Error("Trigger kind not handled"); // throw new Error("Trigger kind not handled");
} }
_checkNewTrigger(trigger) { _checkNewTrigger(trigger, isCondition = false) {
const error = { const error = {
result: false, result: false,
message: 'There are missing fields!', 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"; error.message = "The value can't exceed 100, as it's a percentage";
return error; return error;
} if ( }
if (
deviceKind === 'sensor' deviceKind === 'sensor'
&& device.sensor === 'HUMIDITY' && device.sensor === 'HUMIDITY'
&& trigger.value > 100 && trigger.value > 100
@ -311,25 +320,33 @@ class AutomationSaveModal extends Component {
throw new Error('theoretically unreachable statement'); 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, (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 { return {
result: isNotDuplicate, result: isNotDuplicate,
message: isNotDuplicate message: isNotDuplicate
? null ? null
: 'You have already created a trigger for this device with the same conditions', : duplicationMessage
}; };
} }
addTrigger() { addTrigger() {
const { result, message } = this._checkNewTrigger(this.state.newTrigger); const {result, message} = this._checkNewTrigger(this.state.newTrigger);
if (result) { if (result) {
this.setState( this.setState(
update(this.state, { update(this.state, {
triggerList: { $push: [this.state.newTrigger] }, triggerList: {$push: [this.state.newTrigger]},
}), }),
); );
} else { } else {
@ -339,14 +356,14 @@ class AutomationSaveModal extends Component {
removeTrigger(index) { removeTrigger(index) {
this.setState( 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. // This gets triggered when the devices dropdown changes the value.
onInputChange(val) { onInputChange(val) {
if (val.name === 'device') { if (val.name === 'device') {
this.setNewTrigger({ [val.name]: val.value }); this.setNewTrigger({[val.name]: val.value});
} else { } else {
this.setNewTrigger({ this.setNewTrigger({
...this.state.newTrigger, ...this.state.newTrigger,
@ -361,7 +378,7 @@ class AutomationSaveModal extends Component {
orderScenes = (id, checked) => { orderScenes = (id, checked) => {
if (checked) { if (checked) {
this.setState(update(this.state, { order: { $push: [id] } })); this.setState(update(this.state, {order: {$push: [id]}}));
} else { } else {
this.setState( this.setState(
update(this.state, { update(this.state, {
@ -371,8 +388,8 @@ class AutomationSaveModal extends Component {
} }
}; };
searchScenes(_, { value }) { searchScenes(_, {value}) {
this.setState(update(this.state, { scenesFilter: { $set: value } })); this.setState(update(this.state, {scenesFilter: {$set: value}}));
this.forceUpdate(); this.forceUpdate();
} }
@ -435,7 +452,7 @@ class AutomationSaveModal extends Component {
deviceId: trigger.device, deviceId: trigger.device,
kind, kind,
...(kind === 'booleanTrigger' ...(kind === 'booleanTrigger'
? { on: trigger.on } ? {on: trigger.on}
: { : {
operator: trigger.operand, operator: trigger.operand,
range: parseInt(trigger.value), range: parseInt(trigger.value),
@ -464,7 +481,7 @@ class AutomationSaveModal extends Component {
get trigger() { get trigger() {
return this.props.id ? ( return this.props.id ? (
<Button <Button
style={{ display: 'inline' }} style={{display: 'inline'}}
circular circular
size="small" size="small"
icon="edit" icon="edit"
@ -472,12 +489,45 @@ class AutomationSaveModal extends Component {
/> />
) : ( ) : (
<Button icon labelPosition="left" color="green" onClick={this.openModal}> <Button icon labelPosition="left" color="green" onClick={this.openModal}>
<Icon name="add" /> <Icon name="add"/>
Create new automation Create new automation
</Button> </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() { render() {
return ( return (
<Modal <Modal
@ -487,7 +537,7 @@ Create new automation
onClose={this.closeModal} onClose={this.closeModal}
> >
<Segment basic> <Segment basic>
<Header style={{ display: 'inline', marginRight: '1rem' }}> <Header style={{display: 'inline', marginRight: '1rem'}}>
{this.state.editName ? ( {this.state.editName ? (
<Input <Input
focus focus
@ -499,10 +549,9 @@ Create new automation
this.state.automationName this.state.automationName
)} )}
</Header> </Header>
<Button <Button
onClick={() => this.setEditName((prev) => !prev)} onClick={() => this.setEditName((prev) => !prev)}
style={{ display: 'inline' }} style={{display: 'inline'}}
circular circular
size="small" size="small"
icon={this.state.editName ? 'save' : 'edit'} icon={this.state.editName ? 'save' : 'edit'}
@ -510,7 +559,7 @@ Create new automation
<Segment placeholder className="segment-automations"> <Segment placeholder className="segment-automations">
<Grid columns={2} stackable textAlign="center"> <Grid columns={2} stackable textAlign="center">
<Divider vertical /> <Divider vertical/>
<Grid.Row verticalAlign="middle"> <Grid.Row verticalAlign="middle">
<Grid.Column> <Grid.Column>
<Header>Create Triggers</Header> <Header>Create Triggers</Header>
@ -554,7 +603,7 @@ Create new automation
fluid fluid
onChange={this.searchScenes} onChange={this.searchScenes}
/> />
<Divider horizontal /> <Divider horizontal/>
<List divided relaxed> <List divided relaxed>
{this.sceneList.map((scene) => ( {this.sceneList.map((scene) => (
<SceneItem <SceneItem
@ -569,7 +618,7 @@ Create new automation
) : ( ) : (
<> <>
<Header icon> <Header icon>
<Icon name="world" /> <Icon name="world"/>
</Header> </Header>
<Button primary>Create Scene</Button> <Button primary>Create Scene</Button>
</> </>
@ -578,9 +627,45 @@ Create new automation
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Segment> </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>
<Grid.Row> <Grid.Row>
<Grid.Column style={{ marginRight: '1rem' }}> <Grid.Column style={{marginRight: '1rem'}}>
<Button onClick={() => this.saveAutomation()} color="green"> <Button onClick={() => this.saveAutomation()} color="green">
{this.props.id ? 'Save' : 'Create'} {this.props.id ? 'Save' : 'Create'}
</Button> </Button>

12141
smart-hut/yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff