Automation deletion added

smart-hut/src/components/AutomationModal.js

@@ -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>
     );
   }

smart-hut/src/components/dashboard/AutomationsPanel.js

@@ -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) => {
+    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.
@@ -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>
+                        <Button onClick={() => saveAutomation()} color="green">
-                    </Grid.Column>
+                            SAVE
-                    <Grid.Column>
+                        </Button>
-                        <Button color="red">CLEAN</Button>
                     </Grid.Column>
                 </Grid.Row>
             </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 (
         <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 => {
+                                {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 (
                                         <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>
-                                    )
+                                    );
                                 })}
                             </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}>
+                    <Grid.Column textAlign="center" width={16}>
-                        <List style={{marginTop: "3rem"}}>
+                        {!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"}}>
+                            <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>
                         );
                     })}
@@ -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,

smart-hut/src/remote.js

@@ -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

smart-hut/src/store.js

@@ -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)) {

smart-hut/src/storeActions.js

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