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

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

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

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

@ -348,7 +348,6 @@ export const RemoteService = {
if ((index + 1) === length) { if ((index + 1) === length) {
return void dispatch(actions.automationsUpdate(automations)); return void dispatch(actions.automationsUpdate(automations));
} }
console.log("automation after trigger: ", automation);
}) })
}) })
@ -479,6 +478,7 @@ export const RemoteService = {
*/ */
saveAutomation: (data) => { saveAutomation: (data) => {
const {automation, triggerList, order} = data; const {automation, triggerList, order} = data;
console.log("automation: ", automation, triggerList, order);
automation.triggers = []; automation.triggers = [];
automation.scenes = []; automation.scenes = [];
return (dispatch) => { return (dispatch) => {
@ -525,8 +525,9 @@ export const RemoteService = {
let resScenes = await Endpoint["post"](urlScenePriority, {}, scenePriority) let resScenes = await Endpoint["post"](urlScenePriority, {}, scenePriority)
automation.scenes.push(resScenes.data); automation.scenes.push(resScenes.data);
} }
console.log("This is an automtion: ", automation); automation.id = id;
dispatch(actions.automationSave(automation)); 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 * Deletes a scene
* @param {Number} sceneId the id of the scene to delete * @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; break;
case "AUTOMATION_SAVE": case "AUTOMATION_SAVE":
console.log("ID: ", action.automation.id);
change = { change = {
automations : {[action.automation.id] : {$set : action.automation}} automations : {[action.automation.id] : {$set : action.automation}}
}; };
newState = update(previousState, change); newState = update(previousState, change);
break; break;
case "STATE_SAVE": case "STATE_SAVE":
console.log("Store", action.sceneState);
change = { change = {
sceneStates: { [action.sceneState.id]: { $set: action.sceneState } }, sceneStates: { [action.sceneState.id]: { $set: action.sceneState } },
}; };
@ -350,6 +353,18 @@ function reducer(previousState, action) {
newState = update(previousState, change); newState = update(previousState, change);
break; 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": case "SCENE_DELETE":
console.log("SCENE", action.sceneId); console.log("SCENE", action.sceneId);
if (!(action.sceneId in previousState.scenes)) { if (!(action.sceneId in previousState.scenes)) {

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

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