More fixes on automations

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

@@ -11,6 +11,7 @@ import {
   Header,
   Input,
   Button,
+  Modal,
   List,
   Divider,
   Menu,
@@ -50,8 +51,14 @@ const deviceStateOptions = [
 
 const CreateTrigger = (props) => {
   const [activeOperand, setActiveOperand] = useState(true);
-  const admitedDevices = ["sensor", "regularLight", "dimmableLight"]; // TODO: Complete this list
-  const deviceList = props.devices
+  const notAdmitedDevices = ["buttonDimmer"];
+  const hasOperand = new Set([
+    "knobDimmer",
+    "dimmableLight",
+    "curtains",
+    "sensor",
+  ]);
+  const deviceList = Object.values(props.devices)
     .map((device) => {
       return {
         key: device.id,
@@ -60,17 +67,11 @@ const CreateTrigger = (props) => {
         kind: device.kind,
       };
     })
-    .filter((e) => admitedDevices.includes(e.kind));
+    .filter((e) => !notAdmitedDevices.includes(e.kind));
 
   const onChange = (e, val) => {
     props.inputChange(val);
-    if (
-      props.devices.filter((d) => d.id === val.value)[0].hasOwnProperty("on")
-    ) {
-      setActiveOperand(false);
-    } else {
-      setActiveOperand(true);
-    }
+    setActiveOperand(hasOperand.has(props.devices[val.value].kind));
   };
 
   return (
@@ -182,7 +183,6 @@ const Trigger = ({ deviceName, trigger, onRemove, index }) => {
 class AutomationSaveModal extends Component {
   constructor(props) {
     super(props);
-    this.props = props;
     this.state = {
       triggerList: [],
       order: [],
@@ -190,8 +190,29 @@ class AutomationSaveModal extends Component {
       editName: false,
       newTrigger: {},
       scenesFilter: null,
+      openModal: false,
     };
 
+    if (this.props.automation) {
+      this.state.automationName = this.props.automation.name;
+      for (const scenePriority of this.props.automation.scenes) {
+        this.state.order[scenePriority.priority] = scenePriority.sceneId;
+      }
+      for (const trigger of this.props.automation.triggers) {
+        this.state.triggerList.push(
+          Object.assign(
+            {
+              device: trigger.deviceId,
+              kind: trigger.kind,
+            },
+            trigger.kind === "booleanTrigger"
+              ? { on: trigger.on }
+              : { operand: trigger.operator, value: trigger.value }
+          )
+        );
+      }
+    }
+
     this.setTrigger = this._setter("triggerList");
     this.setOrder = this._setter("order");
     this.setautomationName = this._setter("automationName");
@@ -203,8 +224,17 @@ class AutomationSaveModal extends Component {
     this.onInputChange = this.onInputChange.bind(this);
     this.searchScenes = this.searchScenes.bind(this);
     this.orderScenes = this.orderScenes.bind(this);
+    this.onChangeName = this.onChangeName.bind(this);
   }
 
+  openModal = (e) => {
+    this.setState({ openModal: true });
+  };
+
+  closeModal = (e) => {
+    this.setState({ openModal: false });
+  };
+
   get deviceList() {
     return Object.values(this.props.devices);
   }
@@ -216,9 +246,9 @@ class AutomationSaveModal extends Component {
 
   triggerKind(trigger) {
     if ("on" in trigger) {
-      return "BooleanTrigger";
+      return "booleanTrigger";
     } else if ("operand" in trigger && "value" in trigger) {
-      return "RangeTrigger";
+      return "rangeTrigger";
     } else {
       throw new Error("Trigger kind not handled");
     }
@@ -234,10 +264,11 @@ class AutomationSaveModal extends Component {
     };
 
     switch (this.triggerKind(trigger)) {
-      case "BooleanTrigger":
-        if (!trigger.device || !trigger.on) return error;
+      case "booleanTrigger":
+        if (!trigger.device || trigger.on === null || trigger.on === undefined)
+          return error;
         break;
-      case "RangeTrigger":
+      case "rangeTrigger":
         if (!trigger.device || !trigger.operand || !trigger.value) return error;
         break;
     }
@@ -310,10 +341,10 @@ class AutomationSaveModal extends Component {
 
   _generateKey = (trigger) => {
     switch (this.triggerKind(trigger)) {
-      case "BooleanTrigger":
-        return trigger.device + trigger.value;
-      case "RangeTrigger":
-        return trigger.device + trigger.operand + trigger.value;
+      case "booleanTrigger":
+        return "" + trigger.device + trigger.on;
+      case "rangeTrigger":
+        return "" + trigger.device + trigger.operand + trigger.value;
     }
   };
 
@@ -338,132 +369,187 @@ class AutomationSaveModal extends Component {
       const automation = {
         name: this.state.automationName,
       };
-      this.props.save({
-        automation,
-        triggerList: this.state.triggerList,
-        order: this.state.order,
-      });
+
+      if (this.props.id) {
+        automation.id = this.props.id;
+        automation.triggers = [];
+        automation.scenes = [];
+
+        for (let i = 0; i < this.state.order.length; i++) {
+          automation.scenes.push({
+            priority: i,
+            sceneId: this.state.order[i],
+          });
+        }
+
+        for (const trigger of this.state.triggerList) {
+          const kind = trigger.kind || this.triggerKind(trigger);
+          automation.triggers.push(
+            Object.assign(
+              {
+                deviceId: trigger.device,
+                kind,
+              },
+              kind
+                ? { on: trigger.on }
+                : { operator: trigger.operand, value: trigger.value }
+            )
+          );
+        }
+
+        console.log(automation);
+        this.props
+          .fastUpdateAutomation(automation)
+          .then(this.closeModal)
+          .catch(console.error);
+      } else {
+        this.props
+          .saveAutomation({
+            automation,
+            triggerList: this.state.triggerList,
+            order: this.state.order,
+          })
+          .then(this.closeModal)
+          .catch(console.error);
+      }
     }
   };
 
+  get trigger() {
+    return this.props.id ? (
+      <Button
+        style={{ display: "inline" }}
+        circular
+        size="small"
+        icon="edit"
+        onClick={this.openModal}
+      />
+    ) : (
+      <Button icon labelPosition="left" color="green" onClick={this.openModal}>
+        <Icon name="add"></Icon>Create new automation
+      </Button>
+    );
+  }
+
   render() {
     return (
-      <React.Fragment>
-        <Header style={{ display: "inline", marginRight: "1rem" }}>
-          {this.state.editName ? (
-            <Input
-              focus
-              transparent
-              placeholder="New automation name..."
-              onChange={this.onChangeName}
-            />
-          ) : (
-            this.state.automationName
-          )}
-        </Header>
+      <Modal
+        closeIcon
+        trigger={this.trigger}
+        open={this.state.openModal}
+        onClose={this.closeModal}
+      >
+        <Segment basic>
+          <Header style={{ display: "inline", marginRight: "1rem" }}>
+            {this.state.editName ? (
+              <Input
+                focus
+                transparent
+                placeholder="New automation name..."
+                onChange={this.onChangeName}
+              />
+            ) : (
+              this.state.automationName
+            )}
+          </Header>
 
-        <Button
-          onClick={() => this.setEditName((prev) => !prev)}
-          style={{ display: "inline" }}
-          circular
-          size="small"
-          icon={this.state.editName ? "save" : "edit"}
-        />
+          <Button
+            onClick={() => this.setEditName((prev) => !prev)}
+            style={{ display: "inline" }}
+            circular
+            size="small"
+            icon={this.state.editName ? "save" : "edit"}
+          />
 
-        <Segment placeholder className="segment-automations">
-          <Grid columns={2} stackable textAlign="center">
-            <Divider vertical />
-            <Grid.Row verticalAlign="middle">
-              <Grid.Column>
-                <Header>Create Triggers</Header>
-                <List divided relaxed>
-                  {this.state.triggerList.length > 0 &&
-                    this.state.triggerList.map((trigger, i) => {
-                      const deviceName = this.deviceList.filter(
-                        (d) => d.id === trigger.device
-                      )[0].name;
-                      const key = this._generateKey(trigger);
-                      return (
-                        <Trigger
-                          key={key}
-                          index={i}
-                          deviceName={deviceName}
-                          trigger={trigger}
-                          onRemove={this.removeTrigger}
-                        />
-                      );
-                    })}
-                  <CreateTrigger
-                    devices={this.deviceList}
-                    inputChange={this.onInputChange}
-                  />
-                </List>
-                <Button
-                  onClick={this.addTrigger}
-                  circular
-                  icon="add"
-                  color="blue"
-                  size="huge"
-                />
-              </Grid.Column>
-              <Grid.Column>
-                {this.props.scenes.length > 0 ? (
-                  <React.Fragment>
-                    <Header>Activate Scenes</Header>
-                    <Input
-                      icon="search"
-                      placeholder="Search..."
-                      fluid
-                      onChange={this.searchScenes}
+          <Segment placeholder className="segment-automations">
+            <Grid columns={2} stackable textAlign="center">
+              <Divider vertical />
+              <Grid.Row verticalAlign="middle">
+                <Grid.Column>
+                  <Header>Create Triggers</Header>
+                  <List divided relaxed>
+                    {this.state.triggerList.length > 0 &&
+                      this.state.triggerList.map((trigger, i) => {
+                        const deviceName = this.deviceList.filter(
+                          (d) => d.id === trigger.device
+                        )[0].name;
+                        const key = this._generateKey(trigger);
+                        return (
+                          <Trigger
+                            key={key}
+                            index={i}
+                            deviceName={deviceName}
+                            trigger={trigger}
+                            onRemove={this.removeTrigger}
+                          />
+                        );
+                      })}
+                    <CreateTrigger
+                      devices={this.props.devices}
+                      inputChange={this.onInputChange}
                     />
-                    <Divider horizontal />
-                    <List divided relaxed>
-                      {this.sceneList.map((scene) => (
-                        <SceneItem
-                          key={scene.id}
-                          scene={scene}
-                          order={this.state.order}
-                          orderScenes={this.orderScenes}
-                        />
-                      ))}
-                    </List>
-                  </React.Fragment>
-                ) : (
-                  <React.Fragment>
-                    <Header icon>
-                      <Icon name="world" />
-                    </Header>
-                    <Button primary>Create Scene</Button>
-                  </React.Fragment>
-                )}
+                  </List>
+                  <Button
+                    onClick={this.addTrigger}
+                    circular
+                    icon="add"
+                    color="blue"
+                    size="huge"
+                  />
+                </Grid.Column>
+                <Grid.Column>
+                  {this.props.scenes.length > 0 ? (
+                    <React.Fragment>
+                      <Header>Activate Scenes</Header>
+                      <Input
+                        icon="search"
+                        placeholder="Search..."
+                        fluid
+                        onChange={this.searchScenes}
+                      />
+                      <Divider horizontal />
+                      <List divided relaxed>
+                        {this.sceneList.map((scene) => (
+                          <SceneItem
+                            key={scene.id}
+                            scene={scene}
+                            order={this.state.order}
+                            orderScenes={this.orderScenes}
+                          />
+                        ))}
+                      </List>
+                    </React.Fragment>
+                  ) : (
+                    <React.Fragment>
+                      <Header icon>
+                        <Icon name="world" />
+                      </Header>
+                      <Button primary>Create Scene</Button>
+                    </React.Fragment>
+                  )}
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Segment>
+          <Grid>
+            <Grid.Row>
+              <Grid.Column style={{ marginRight: "1rem" }}>
+                <Button onClick={() => this.saveAutomation()} color="green">
+                  {this.props.id ? "Save" : "Create"}
+                </Button>
               </Grid.Column>
             </Grid.Row>
           </Grid>
         </Segment>
-        <Grid>
-          <Grid.Row>
-            <Grid.Column style={{ marginRight: "1rem" }}>
-              <Button onClick={() => this.saveAutomation()} color="green">
-                SAVE
-              </Button>
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </React.Fragment>
+      </Modal>
     );
   }
 }
 
-const mapStateToProps = (state, _) => ({
-  activeRoom: state.active.activeRoom,
-  activeTab: state.active.activeTab,
-  get scenes() {
-    return Object.values(state.scenes);
-  },
+const mapStateToProps = (state, ownProps) => ({
+  scenes: Object.values(state.scenes),
   devices: state.devices,
-  get automations() {
-    return Object.values(state.automations);
-  },
+  automation: ownProps.id ? state.automations[ownProps.id] : null,
 });
 const AutomationSaveModalContainer = connect(
   mapStateToProps,

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

@@ -25,12 +25,7 @@ const Automation = ({ automation, devices, scenes, removeAutomation }) => {
       <Header style={{ display: "inline", marginRight: "1rem" }}>
         {automation.name}
       </Header>
-      <Button
-        style={{ display: "inline" }}
-        circular
-        size="small"
-        icon={"edit"}
-      />
+      <CreateAutomation id={automation.id} />
       <Button
         style={{ display: "inline" }}
         circular
@@ -59,7 +54,7 @@ const Automation = ({ automation, devices, scenes, removeAutomation }) => {
                             ? getOperator(trigger.operator) +
                               " " +
                               trigger.range
-                            : trigger.value
+                            : trigger.on
                             ? " - on"
                             : " - off"}
                         </Menu.Item>
@@ -129,7 +124,7 @@ class AutomationsPanel extends Component {
           <Grid.Column textAlign="center" width={16}>
             {!this.state.openModal ? (
               <List>
-                <CreateAutomation save={this.props.saveAutomation} />
+                <CreateAutomation />
               </List>
             ) : (
               <Button color="green">CREATE AUTOMATION</Button>
@@ -138,7 +133,6 @@ class AutomationsPanel extends Component {
         </Grid.Row>
         <Grid.Row>
           {this.props.automations.map((automation, i) => {
-            console.log(23, automation, i, this.props.automations);
             return (
               <Grid.Column key={i} width={8} style={{ margin: "2rem 0" }}>
                 <Automation

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

@@ -1,7 +1,7 @@
 // vim: set ts=2 sw=2 et tw=80:
 
 import React, { Component } from "react";
-import { Grid, Card } from "semantic-ui-react";
+import { Segment, Card } from "semantic-ui-react";
 import Device from "./devices/Device";
 import NewDevice from "./devices/NewDevice";
 import { connect } from "react-redux";
@@ -24,18 +24,16 @@ class DevicePanel extends Component {
 
   render() {
     return (
-      <Card.Group style={{ paddingTop: "3rem" }}>
+      <Card.Group centered style={{ paddingTop: "3rem" }}>
         {this.props.devices.map((e, i) => {
-          return (
-            <Grid.Column key={i}>
-              <Device tab={this.props.tab} id={e.id} />
-            </Grid.Column>
-          );
+          return <Device tab={this.props.tab} id={e.id} />;
         })}
         {!this.props.isActiveRoomHome ? (
-          <Grid.Column>
-            <NewDevice />
-          </Grid.Column>
+          <Card style={{ height: "23em" }}>
+            <Segment basic style={{ width: "100%", height: "100%" }}>
+              <NewDevice />
+            </Segment>
+          </Card>
         ) : null}
       </Card.Group>
     );

smart-hut/src/components/dashboard/devices/NewDevice.js

@@ -341,7 +341,14 @@ class NewDevice extends Component {
         open={this.state.openModal}
         onClose={this.resetState}
         trigger={
-          <StyledDiv onClick={this.handleOpen}>
+          <StyledDiv
+            onClick={this.handleOpen}
+            style={{
+              position: "relative",
+              top: "calc(50% - 5rem)",
+              left: "calc(50% - 5rem)",
+            }}
+          >
             <Image src="/img/add.svg" style={{ filter: "invert()" }} />
           </StyledDiv>
         }

smart-hut/src/remote.js

@@ -315,36 +315,7 @@ export const RemoteService = {
   fetchAutomations: () => {
     return (dispatch) => {
       return Endpoint.get("/automation/")
-        .then((res) => {
-          const length = res.data.length;
-          const automations = [];
-
-          res.data.forEach((a, index) => {
-            const { id, name } = a;
-            const automation = {
-              name,
-              id,
-              triggers: [],
-              scenes: [],
-            };
-
-            return Endpoint.get(`/booleanTrigger/${id}`).then((res) => {
-              automation.triggers.push(...res.data);
-              return Endpoint.get(`/rangeTrigger/${id}`).then((res) => {
-                automation.triggers.push(...res.data);
-                return Endpoint.get(`/scenePriority/${id}`).then((res) => {
-                  automation.scenes.push(...res.data);
-                  automations.push(automation);
-                  if (index + 1 === length) {
-                    return void dispatch(
-                      actions.automationsUpdate(automations)
-                    );
-                  }
-                });
-              });
-            });
-          });
-        })
+        .then((res) => void dispatch(actions.automationsUpdate(res.data)))
         .catch((err) => {
           console.error(`Fetch automations error`, err);
           throw new RemoteError(["Network error"]);
@@ -502,11 +473,22 @@ export const RemoteService = {
     };
   },
 
+  fastUpdateAutomation: (automation) => {
+    return (dispatch) => {
+      return Endpoint.put("/automation/fast", {}, automation)
+        .then((res) => dispatch(actions.automationSave(res.data)))
+        .catch((err) => {
+          console.warn("Update automation: ", automation, "error: ", err);
+          throw new RemoteError(["Network error"]);
+        });
+    };
+  },
+
   /**
    * Creates/Updates an automation with the given data. If
    * data.id is truthy, then a update call is performed,
    * otherwise a create call is performed.
-   * @param {Automation} data the device to update.
+   * @param {Automation} data the automation to update.
    * @returns {Promise<Device, RemoteError>} promise that resolves to the saved device and rejects
    *  with user-fiendly errors as a RemoteError
    */

smart-hut/src/store.js

@@ -257,7 +257,6 @@ function reducer(previousState, action) {
       break;
 
     case "AUTOMATION_UPDATE":
-      newState = previousState;
       const automations = {};
       for (const automation of action.automations) {
         automations[automation.id] = automation;