Automation deletion added
This commit is contained in:
Christian Capeáns Pérez
parent
cc23824a37
commit
835ac99a8e
5 changed files with 137 additions and 44 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"}}>
|
||||
<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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ const actions = {
|
|||
type: "ROOM_DELETE",
|
||||
roomId,
|
||||
}),
|
||||
automationDelete: (id) => ({
|
||||
type: "AUTOMATION_DELETE",
|
||||
id,
|
||||
}),
|
||||
sceneDelete: (sceneId) => ({
|
||||
type: "SCENE_DELETE",
|
||||
sceneId,
|
||||
|
|
|
|||
Loading…
Reference in a new issue