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

Automation deletion added

Browse source
This commit is contained in:
Christian Capeáns Pérez 2020-04-28 11:39:38 +02:00
parent cc23824a37
commit 835ac99a8e
5 changed files with 137 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
smart-hut/src/components/AutomationModal.js
View file

@ -84,6 +84,7 @@ class AutomationModal extends Component {
render() {
return (
<div>
{/*
{!this.props.nicolaStop ? (
<div>
<Responsive minWidth={768}>
@ -167,7 +168,7 @@ class AutomationModal extends Component {
{this.type === "new" ? "Add automation" : "Save changes"}
</Button>
</Modal.Actions>
</Modal>
</Modal>*/}
</div>
);
}

139
smart-hut/src/components/dashboard/AutomationsPanel.js
View file

@ -16,7 +16,7 @@ import {
Divider,
Checkbox,
Menu,
Label
Label,
} from "semantic-ui-react";
const operands = [
@ -154,7 +154,7 @@ const SceneItem = (props) => {
checked={position + 1 > 0}
/>
</Grid.Column>
<Grid.Column width={4}>
<Grid.Column width={8}>
<h3>{props.scene.name}</h3>
</Grid.Column>
<Grid.Column width={4}>
@ -180,11 +180,13 @@ const Trigger = ({deviceName, trigger, onRemove, index}) => {
<Menu compact>
<Menu.Item as="span">{deviceName}</Menu.Item>
{operand ? <Menu.Item as="span">{symbol}</Menu.Item> : ""}
<Menu.Item as="span">{value ? "on" : "off"}</Menu.Item>
<Menu.Item as="span">
{operand ? value : value ? "on" : "off"}
</Menu.Item>
</Menu>
<Icon
as={"i"}
onClick={() => onRemove(device, index)}
onClick={() => onRemove(index)}
className="remove-icon"
name="remove"
/>
@ -192,7 +194,7 @@ const Trigger = ({deviceName, trigger, onRemove, index}) => {
);
};
const CreateAutomation = (props) => {
export const CreateAutomation = (props) => {
const [triggerList, setTrigger] = useState([]);
const [order, setOrder] = useState([]);
const [stateScenes, setScenes] = useState(props.scenes);
@ -250,8 +252,8 @@ const CreateAutomation = (props) => {
}
};
const removeTrigger = (trigger) => {
// TODO When this is connected to the backend each trigger will have an id which can be used to remove it
const removeTrigger = (index) => {
setTrigger((prevList) => prevList.filter((t, i) => i !== index));
};
// This gets triggered when the devices dropdown changes the value.
@ -271,7 +273,6 @@ const CreateAutomation = (props) => {
if (value.length > 0) {
setScenes((prevScenes) => {
return stateScenes.filter((e) => {
console.log(e.name.includes(value));
return e.name.includes(value);
});
});
@ -301,17 +302,16 @@ const CreateAutomation = (props) => {
return false;
}
return true;
}
};
const saveAutomation = () => {
console.log("trigger list: ", triggerList);
//if(checkBeforeSave()){
const automation = {
name: automationName
}
name: automationName,
};
props.save({automation, triggerList, order});
//}
}
};
return (
<React.Fragment>
@ -409,10 +409,9 @@ const CreateAutomation = (props) => {
<Grid>
<Grid.Row>
<Grid.Column style={{marginRight: "1rem"}}>
<Button onClick={() => saveAutomation()} color="green">SAVE</Button>
</Grid.Column>
<Grid.Column>
<Button color="red">CLEAN</Button>
<Button onClick={() => saveAutomation()} color="green">
SAVE
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
@ -420,9 +419,12 @@ const CreateAutomation = (props) => {
);
};
const Automation = ({automation, devices}) => {
const {triggers, scenes} = automation;
const getOperator = (operand) => operands.filter(o => o.key == operand)[0].text;
const Automation = ({automation, devices, scenes, removeAutomation}) => {
const {triggers} = automation;
const scenePriorities = automation.scenes;
const getOperator = (operand) =>
operands.filter((o) => o.key == operand)[0].text;
return (
<React.Fragment>
@ -435,6 +437,14 @@ const Automation = ({automation, devices}) => {
size="small"
icon={"edit"}
/>
<Button
style={{display: "inline"}}
circular
onClick={() => removeAutomation(automation.id)}
color="red"
size="small"
icon={"trash alternate outline"}
/>
<Segment placeholder>
<Grid columns={2} stackable textAlign="center">
<Divider vertical></Divider>
@ -442,21 +452,47 @@ const Automation = ({automation, devices}) => {
<Grid.Column>
<Header>Triggers</Header>
<List divided relaxed>
{triggers !== undefined && triggers.map(trigger => {
const device = devices.filter(d => d.id === trigger.deviceId)[0];
{triggers !== undefined &&
triggers.map((trigger) => {
const device = devices.filter(
(d) => d.id === trigger.deviceId
)[0];
return (
<Menu key={trigger.id} compact>
<Menu.Item as='span'>
{device.name} {trigger.operator ? getOperator(trigger.operator) + " " + trigger.range : (trigger.value ? " - on" : " - off")}
<Menu.Item as="span">
{device.name}{" "}
{trigger.operator
? getOperator(
trigger.operator
) +
" " +
trigger.range
: trigger.value
? " - on"
: " - off"}
</Menu.Item>
</Menu>
)
);
})}
</List>
</Grid.Column>
<Grid.Column>
<Header>Scenes</Header>
<List divided relaxed>
{scenePriorities !== undefined &&
scenePriorities.map((sp) => {
const sceneData = scenes.filter(
(s) => s.id === sp.sceneId
)[0];
return (
<Menu key={sceneData.id} compact>
<Menu.Item as="span">
{sceneData.name}
</Menu.Item>
</Menu>
);
})}
</List>
</Grid.Column>
</Grid.Row>
</Grid>
@ -468,6 +504,7 @@ const Automation = ({automation, devices}) => {
class AutomationsPanel extends Component {
constructor(props) {
super(props);
this.state = {openModal: false}
this.getDevices();
this.getScenes();
this.getAutomations();
@ -489,25 +526,48 @@ class AutomationsPanel extends Component {
.catch((err) => console.error(`error fetching automations:`, err));
}
removeAutomation = (id) => {
this.props
.deleteAutomation(id)
.catch((err) => console.error(`error removing automation ${id}:`, err));
}
render() {
return (
<Grid>
<Grid style={{marginTop: "3rem"}}>
<Grid.Row>
<Grid.Column width={16}>
<List style={{marginTop: "3rem"}}>
<CreateAutomation
save={this.props.saveAutomation}
scenes={this.props.scenes}
devices={this.props.devices}
/>
</List>
<Grid.Column textAlign="center" width={16}>
{!this.state.openModal ?
(
<List>
<CreateAutomation
save={this.props.saveAutomation}
scenes={this.props.scenes}
devices={this.props.devices}
/>
</List>
) :
(
<Button color="green">CREATE AUTOMATION</Button>
)}
</Grid.Column>
</Grid.Row>
<Grid.Row>
{this.props.automations.map((automation) => {
{this.props.automations.map((automation, i) => {
return (
<Grid.Column key={automation.id} width={8} style={{margin: "2rem 0"}}>
<Automation devices={this.props.devices} automation={automation}/>
<Grid.Column
key={i}
width={8}
style={{margin: "2rem 0"}}
>
<Automation
removeAutomation={this.removeAutomation}
scenes={this.props.scenes}
devices={this.props.devices}
automation={automation}
/>
</Grid.Column>
);
})}
@ -527,9 +587,8 @@ const mapStateToProps = (state, _) => ({
return Object.values(state.devices);
},
get automations() {
console.log(Object.values(state.automations));
return Object.values(state.automations);
}
},
});
const AutomationsPanelContainer = connect(
mapStateToProps,

18
smart-hut/src/remote.js
View file

@ -348,7 +348,6 @@ export const RemoteService = {
if ((index + 1) === length) {
return void dispatch(actions.automationsUpdate(automations));
}
console.log("automation after trigger: ", automation);
})
})
@ -479,6 +478,7 @@ export const RemoteService = {
*/
saveAutomation: (data) => {
const {automation, triggerList, order} = data;
console.log("automation: ", automation, triggerList, order);
automation.triggers = [];
automation.scenes = [];
return (dispatch) => {
@ -525,8 +525,9 @@ export const RemoteService = {
let resScenes = await Endpoint["post"](urlScenePriority, {}, scenePriority)
automation.scenes.push(resScenes.data);
}
console.log("This is an automtion: ", automation);
automation.id = id;
dispatch(actions.automationSave(automation));
});
}
@ -721,6 +722,19 @@ export const RemoteService = {
};
},
deleteAutomation: (id) => {
console.log("ID OF AUTO ", id);
return (dispatch) => {
return Endpoint.delete(`/automation/${id}`)
.then((_) => dispatch(actions.automationDelete(id)))
.catch((err) => {
console.warn("Automation deletion error", err);
throw new RemoteError(["Network error"]);
});
};
},
/**
* Deletes a scene
* @param {Number} sceneId the id of the scene to delete

17
smart-hut/src/store.js
View file

@ -295,15 +295,18 @@ function reducer(previousState, action) {
break;
case "AUTOMATION_SAVE":
console.log("ID: ", action.automation.id);
change = {
automations : {[action.automation.id] : {$set : action.automation}}
};
newState = update(previousState, change);
break;
case "STATE_SAVE":
console.log("Store", action.sceneState);
change = {
sceneStates: { [action.sceneState.id]: { $set: action.sceneState } },
};
@ -350,6 +353,18 @@ function reducer(previousState, action) {
newState = update(previousState, change);
break;
case "AUTOMATION_DELETE":
change = {
automations: { $unset: [action.id] },
};
console.log("CHANGE ", change)
console.log("Action id: ", action.id);
newState = update(previousState, change);
console.log("NEW STATE ", newState)
break;
case "SCENE_DELETE":
console.log("SCENE", action.sceneId);
if (!(action.sceneId in previousState.scenes)) {

4
smart-hut/src/storeActions.js
View file

@ -71,6 +71,10 @@ const actions = {
type: "ROOM_DELETE",
roomId,
}),
automationDelete: (id) => ({
type: "AUTOMATION_DELETE",
id,
}),
sceneDelete: (sceneId) => ({
type: "SCENE_DELETE",
sceneId,