Merge branch 'dev' of https://lab.si.usi.ch/sa4-2020/the-sanmarinoes/frontend into dev

smart-hut/src/components/HeaderController.js

@@ -77,10 +77,16 @@ export class MyHeader extends React.Component {
                 <Button basic inverted onClick={this.logout}>
                   Logout
                 </Button>
-                <Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}>
+                <Segment
+                  compact
+                  style={{
+                    margin: "auto",
+                    marginTop: "1em",
+                    textAlign: "center",
+                  }}
+                >
                   <Checkbox
-                  label={<label 
+                    label={<label>Share cameras</label>}
-                  >Share cameras</label>}
                     checked={this.props.cameraEnabled}
                     toggle
                     onChange={(e, val) => this.setCameraEnabled(val.checked)}
@@ -108,10 +114,16 @@ export class MyHeader extends React.Component {
                 </Label>
                 <Divider />
                 <Button onClick={this.logout}>Logout</Button>
-                <Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}>
+                <Segment
+                  compact
+                  style={{
+                    margin: "auto",
+                    marginTop: "1em",
+                    textAlign: "center",
+                  }}
+                >
                   <Checkbox
-                  label={<label 
+                    label={<label>Share cameras</label>}
-                  >Share cameras</label>}
                     checked={this.props.cameraEnabled}
                     toggle
                     onChange={(e, val) => this.setCameraEnabled(val.checked)}

smart-hut/src/components/RoomModal.js

@@ -94,12 +94,12 @@ class RoomModal extends Component {
   };
 
   setSureTrue = () => {
-    this.setState({sure: true})
+    this.setState({ sure: true });
-  }
+  };
 
   setSureFalse = () => {
-    this.setState({sure: false})
+    this.setState({ sure: false });
-  }
+  };
 
   changeSomething = (event) => {
     let nam = event.target.name;
@@ -239,13 +239,14 @@ class RoomModal extends Component {
                   onClick={this.setSureTrue}
                 >
                   <Icon name="trash alternate" />
-                Delete Room </Button>
+                  Delete Room{" "}
+                </Button>
                 <Confirm
                   open={this.state.sure}
                   onCancel={this.setSureFalse}
-                onConfirm={this.deleteRoom}/>
+                  onConfirm={this.deleteRoom}
+                />
               </div>
-
             ) : null}
           </Modal.Content>
           <Modal.Actions>

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

@@ -1,4 +1,4 @@
-import React, { Component, useState } from "react";
+import React, { Component, useState, useRef } from "react";
 import { connect } from "react-redux";
 import { RemoteService } from "../../remote";
 import update from "immutability-helper";
@@ -51,6 +51,8 @@ const deviceStateOptions = [
 
 const CreateTrigger = (props) => {
   const [activeOperand, setActiveOperand] = useState(true);
+  const operandsRef = useRef(null);
+  const valuesRef = useRef(null);
   const notAdmitedDevices = ["buttonDimmer"];
   const hasOperand = new Set([
     "knobDimmer",
@@ -72,6 +74,10 @@ const CreateTrigger = (props) => {
   const onChange = (e, val) => {
     props.inputChange(val);
     setActiveOperand(hasOperand.has(props.devices[val.value].kind));
+
+    if (operandsRef.current) operandsRef.current.setValue("");
+    if (valuesRef.current)
+      valuesRef.current.inputRef.current.valueAsNumber = undefined;
   };
 
   return (
@@ -94,6 +100,7 @@ const CreateTrigger = (props) => {
                 <Form.Field inline width={2}>
                   <Dropdown
                     onChange={(e, val) => props.inputChange(val)}
+                    ref={operandsRef}
                     name="operand"
                     compact
                     selection
@@ -102,7 +109,10 @@ const CreateTrigger = (props) => {
                 </Form.Field>
                 <Form.Field inline width={7}>
                   <Input
-                    onChange={(e, val) => props.inputChange(val)}
+                    onChange={(e, val) => {
+                      props.inputChange(val);
+                    }}
+                    ref={valuesRef}
                     name="value"
                     type="number"
                     placeholder="Value"
@@ -207,7 +217,10 @@ class AutomationSaveModal extends Component {
             },
             trigger.kind === "booleanTrigger"
               ? { on: trigger.on }
-              : { operand: trigger.operator, value: trigger.value }
+              : {
+                  operand: trigger.operator,
+                  value: trigger.value,
+                }
           )
         );
       }
@@ -245,29 +258,62 @@ class AutomationSaveModal extends Component {
   }
 
   triggerKind(trigger) {
-    if ("on" in trigger) {
+    if ("operand" in trigger && "value" in trigger) {
-      return "booleanTrigger";
-    } else if ("operand" in trigger && "value" in trigger) {
       return "rangeTrigger";
+    } else if ("on" in trigger) {
+      return "booleanTrigger";
     } else {
-      throw new Error("Trigger kind not handled");
+      return false;
+      //throw new Error("Trigger kind not handled");
     }
   }
 
   _checkNewTrigger(trigger) {
-    // Check for missing fields for creation
     const error = {
       result: false,
       message: "There are missing fields!",
     };
+    let device = Object.values(this.props.devices).filter(
+      (d) => d.id === trigger.device
+    )[0];
 
-    switch (this.triggerKind(trigger)) {
+    let triggerKind = this.triggerKind(trigger);
+
+    if (!device || !triggerKind) {
+      error.message = "There are missing fields";
+      return error;
+    }
+    let deviceKind = device.kind;
+    const devicesWithPercentage = ["dimmableLight", "curtains", "knobDimmer"];
+
+    switch (triggerKind) {
       case "booleanTrigger":
         if (!trigger.device || trigger.on === null || trigger.on === undefined)
           return error;
         break;
       case "rangeTrigger":
-        if (!trigger.device || !trigger.operand || !trigger.value) return error;
+        if (!trigger.device || !trigger.operand || !trigger.value) {
+          return error;
+        }
+        if (trigger.value < 0) {
+          error.message = "Values cannot be negative";
+          return error;
+        }
+        // If the device's range is a percentage, values cannot exceed 100
+        else if (
+          devicesWithPercentage.includes(deviceKind) &&
+          trigger.value > 100
+        ) {
+          error.message = "The value can't exceed 100, as it's a percentage";
+          return error;
+        } else if (
+          deviceKind === "sensor" &&
+          device.sensor === "HUMIDITY" &&
+          trigger.value > 100
+        ) {
+          error.message = "The value can't exceed 100, as it's a percentage";
+          return error;
+        }
         break;
       default:
         throw new Error("theoretically unreachable statement");
@@ -290,7 +336,9 @@ class AutomationSaveModal extends Component {
 
     if (result) {
       this.setState(
-        update(this.state, { triggerList: { $push: [this.state.newTrigger] } })
+        update(this.state, {
+          triggerList: { $push: [this.state.newTrigger] },
+        })
       );
     } else {
       alert(message);
@@ -305,7 +353,14 @@ class AutomationSaveModal extends Component {
 
   // This gets triggered when the devices dropdown changes the value.
   onInputChange(val) {
-    this.setNewTrigger({ ...this.state.newTrigger, [val.name]: val.value });
+    if (val.name === "device") {
+      this.setNewTrigger({ [val.name]: val.value });
+    } else {
+      this.setNewTrigger({
+        ...this.state.newTrigger,
+        [val.name]: val.value,
+      });
+    }
   }
 
   onChangeName(_, val) {
@@ -392,14 +447,16 @@ class AutomationSaveModal extends Component {
                 deviceId: trigger.device,
                 kind,
               },
-              kind
+              kind === "booleanTrigger"
                 ? { on: trigger.on }
-                : { operator: trigger.operand, value: trigger.value }
+                : {
+                    operator: trigger.operand,
+                    range: parseInt(trigger.value),
+                  }
             )
           );
         }
 
-        console.log(automation);
         this.props
           .fastUpdateAutomation(automation)
           .then(this.closeModal)

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

@@ -161,7 +161,6 @@ const mapStateToProps = (state, _) => ({
     return Object.values(state.devices);
   },
   get automations() {
-    console.log(state.automations);
     return Object.values(state.automations);
   },
 });

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

@@ -16,6 +16,13 @@ class HostsPanel extends Component {
     }
   }
 
+  applyHostScene(id) {
+    this.props
+      .sceneApply(id, this.props.activeHost)
+      .then(() => console.log("SCCUESS"))
+      .catch((err) => console.error("sceneApply update error", err));
+  }
+
   render() {
     if (this.props.isActiveDefaultHost) {
       return (
@@ -46,9 +53,11 @@ class HostsPanel extends Component {
                   {scene.name} <Icon name={scene.icon} />
                 </Header>
               </Card.Header>
-              <Card.Content extras>
+              <Card.Content extras={true}>
                 <div className="ui two buttons">
-                  <Button>Apply</Button>
+                  <Button onClick={() => this.applyHostScene(scene.id)}>
+                    Apply
+                  </Button>
                 </div>
               </Card.Content>
             </Card>

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

@@ -141,9 +141,13 @@ class NewDevice extends Component {
       case "buttonDimmer":
       case "knobDimmer":
         outputs = this.state.lightsAttached;
-        if (this.state.lightsAttached === undefined ||
+        if (
-            this.state.lightsAttached.length === 0) {
+          this.state.lightsAttached === undefined ||
-            alert("No lights attached to this switch! Please, add a light a first.");
+          this.state.lightsAttached.length === 0
+        ) {
+          alert(
+            "No lights attached to this switch! Please, add a light a first."
+          );
           return;
         }
         break;
@@ -165,11 +169,17 @@ class NewDevice extends Component {
   render() {
     const deviceOptions = [
       //stuff
-      { key: "thermostat", text: "Thermostat", value: "thermostat", 
+      {
-        image: {avatar: true, src: "/img/thermostat-icon.png"} 
+        key: "thermostat",
+        text: "Thermostat",
+        value: "thermostat",
+        image: { avatar: true, src: "/img/thermostat-icon.png" },
       },
-      { key: "curtains", text: "Curtain", value: "curtains", 
+      {
-        image: {avatar: true, src: "/img/curtains-icon.png"} 
+        key: "curtains",
+        text: "Curtain",
+        value: "curtains",
+        image: { avatar: true, src: "/img/curtains-icon.png" },
       },
       //stuff ends
       {

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

@@ -57,13 +57,6 @@ class Sensor extends Component {
     this.name = "Sensor";
   }
 
-  // setName = () => {
-  //   if (this.props.device.name.length > 15) {
-  //     return this.props.device.name.slice(0, 12) + "...";
-  //   }
-  //   return this.props.device.name;
-  // };
-
   componentDidUpdate(prevProps) {
     if (
       this.props.stateOrDevice.kind === "sensor" &&
@@ -123,6 +116,18 @@ class Sensor extends Component {
     return this.iconOff;
   };
 
+  temperatureColor = (value) => {
+    let hue = 100;
+    const min = 16;
+    const max = 20;
+    if (value >= min && value < max) {
+      hue = 100 - ((value - min) * 100) / (max - min);
+    } else if (value >= max) {
+      hue = 0;
+    }
+    return `hsl(${hue}, 100%, 50%)`;
+  };
+
   render() {
     const MotionSensor = (props) => {
       return (
@@ -161,11 +166,18 @@ class Sensor extends Component {
             >
               <CircularProgress
                 strokeWidth="2rem"
-                stroke={this.colors.progress}
+                stroke={
+                  this.props.stateOrDevice.sensor === "TEMPERATURE"
+                    ? this.temperatureColor(this.state.value)
+                    : this.colors.progress
+                }
                 fill={this.colors.circle}
               />
               <text
-                style={{ ...valueStyle, fill: this.colors.text }}
+                style={{
+                  ...valueStyle,
+                  fill: this.colors.text,
+                }}
                 x={100}
                 y={110}
                 textAnchor="middle"
@@ -177,7 +189,10 @@ class Sensor extends Component {
                 {this.units}
               </text>
               <text
-                style={{ ...sensorText, fill: this.colors.text }}
+                style={{
+                  ...sensorText,
+                  fill: this.colors.text,
+                }}
                 x={100}
                 y={150}
                 textAnchor="middle"

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

@@ -70,11 +70,12 @@ class Videocam extends Component {
               />
             </Grid.Column>
           </Grid.Row>
-          <Grid.Row textAlign="center">
+          <Grid.Row>
             <Grid.Column>
               <Checkbox
                 checked={this.props.stateOrDevice.on}
                 toggle
+                label="Turn on/off"
                 onChange={(e, val) => this.setOnOff(val.checked)}
               />
             </Grid.Column>

smart-hut/src/remote.js

@@ -549,12 +549,21 @@ export const RemoteService = {
     };
   },
 
-  sceneApply: (id) => {
+  sceneApply: (id, hostId = null) => {
     return (dispatch) => {
       let url = `/scene/${id}/apply`;
+      if (hostId) {
+        url = url + "?hostId=" + hostId;
+      }
 
       return Endpoint.post(url)
-        .then((res) => dispatch(actions.deviceOperationUpdate(res.data)))
+        .then((res) =>
+          dispatch(
+            hostId
+              ? actions.hostDevicesUpdate(hostId, res.data, true)
+              : actions.deviceOperationUpdate(res.data)
+          )
+        )
         .catch((err) => {
           console.warn("scene apply error", err);
           throw new RemoteError(["Network error"]);

smart-hut/src/store.js

@@ -49,6 +49,7 @@ function reducer(previousState, action) {
           [scene.id]: {
             name: { $set: scene.name },
             icon: { $set: scene.icon },
+            guestAccessEnabled: { $set: scene.guestAccessEnabled },
           },
         },
       });
@@ -92,7 +93,9 @@ function reducer(previousState, action) {
       newState = update(previousState, { login: { $set: action.login } });
       break;
     case "USER_INFO_UPDATE":
-      newState = update(previousState, { userInfo: { $set: action.userInfo } });
+      newState = update(previousState, {
+        userInfo: { $set: action.userInfo },
+      });
       break;
     case "ROOMS_UPDATE":
       newState = previousState;
@@ -137,7 +140,9 @@ function reducer(previousState, action) {
       // and remove any join between that scene and deleted
       // sceneStates
       change = {
-        scenes: { [action.sceneId]: { sceneStates: { $set: new Set() } } },
+        scenes: {
+          [action.sceneId]: { sceneStates: { $set: new Set() } },
+        },
         sceneStates: { $unset: [] },
       };
 
@@ -198,7 +203,9 @@ function reducer(previousState, action) {
       // devices
       if (action.roomId) {
         change = {
-          rooms: { [action.roomId]: { devices: { $set: new Set() } } },
+          rooms: {
+            [action.roomId]: { devices: { $set: new Set() } },
+          },
           devices: { $unset: [] },
         };
 
@@ -368,7 +375,9 @@ function reducer(previousState, action) {
 
     case "AUTOMATION_SAVE":
       change = {
-        automations: { [action.automation.id]: { $set: action.automation } },
+        automations: {
+          [action.automation.id]: { $set: action.automation },
+        },
       };
 
       newState = update(previousState, change);
@@ -377,7 +386,9 @@ function reducer(previousState, action) {
 
     case "STATE_SAVE":
       change = {
-        sceneStates: { [action.sceneState.id]: { $set: action.sceneState } },
+        sceneStates: {
+          [action.sceneState.id]: { $set: action.sceneState },
+        },
       };
 
       if (previousState.scenes[action.sceneState.sceneId]) {
@@ -527,7 +538,6 @@ function reducer(previousState, action) {
           }
           return a;
         }, {});
-      console.log(devices);
       newState = reducer(previousState, {
         type: "DEVICES_UPDATE",
         partial: true,

smart-hut/src/storeActions.js

@@ -63,9 +63,10 @@ const actions = {
     devices,
     partial,
   }),
-  hostDevicesUpdate: (hostId, devices) => ({
+  hostDevicesUpdate: (hostId, devices, partial = false) => ({
     type: "HOST_DEVICES_UPDATE",
     hostId,
+    partial,
     devices,
   }),
   stateDelete: (stateId) => ({

smart-hut/src/views/Dashboard.js

@@ -8,10 +8,7 @@ import ScenesNavbar from "./ScenesNavbar";
 import HostsNavbar from "./HostsNavbar";
 import MyHeader from "../components/HeaderController";
 import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
-import {
+import { mobilePanelStyle } from "../components/dashboard/devices/styleComponents";
-  panelStyle,
-  mobilePanelStyle,
-} from "../components/dashboard/devices/styleComponents";
 
 import { RemoteService } from "../remote";
 import { connect } from "react-redux";
@@ -85,7 +82,7 @@ class Dashboard extends Component {
     //in case a room has one.
     let backgroundImageHelper;
     if (this.activeTab === "Devices") {
-      backgroundImageHelper=this.props.allRooms;
+      backgroundImageHelper = this.props.backgroundImage;
     } else {
       backgroundImageHelper = null;
     }
@@ -135,15 +132,19 @@ class Dashboard extends Component {
                 </Grid.Column>
               )}
               <Grid.Column width={this.hasNavbar ? 13 : 16}>
-                <div style={
+                <div
-                  {backgroundImage:"url("+ backgroundImageHelper+")",
+                  style={{
+                    backgroundImage: "url(" + backgroundImageHelper + ")",
                     backgroundColor: "#fafafa",
                     height: "85vh",
                     padding: "0rem 3rem",
                     color: "#000000",
                     overflow: "auto",
-                    maxHeight: "75vh",}
+                    maxHeight: "75vh",
-                }>{this.renderTab(this.activeTab)}</div>
+                  }}
+                >
+                  {this.renderTab(this.activeTab)}
+                </div>
               </Grid.Column>
             </Grid.Row>
           </Grid>
@@ -219,23 +220,13 @@ const mapStateToProps = (state, _) => ({
   get currentRoom() {
     return state.active.activeRoom;
   },
-  //this took me way longer to figure out than it should have
+  get backgroundImage() {
-  get allRooms(){
+    if (state.active.activeRoom === -1) {
-    if(state.active.activeRoom==-1){
-      return null;
-    }
-    for(let i in state.rooms){
-      if(i==state.active.activeRoom){
-        //console.log("check",state.rooms[i].image)
-        if(state.rooms[i].image===undefined){
       return null;
     } else {
-          return state.rooms[i].image;
+      return state.rooms[state.active.activeRoom].image;
-        }
-      }
     }
   },
-
 });
 
 const setActiveTab = (activeTab) => {

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+