Merge branch '59-added-motion-sensor-update' into 'dev'

added motion sensor update

Closes #59

See merge request sa4-2020/the-sanmarinoes/frontend!62

smart-hut/src/components/FilterDevices.js

@@ -0,0 +1,82 @@
+import { Dropdown } from "semantic-ui-react";
+import React, { Component } from "react";
+
+export default class FilterDevices extends Component {
+  render() {
+    const tagOptions = [
+      {
+        key: "regularLight",
+        text: "regularLight",
+        value: "regularLight",
+        label: { color: "red", empty: true, circular: true },
+      },
+      {
+        key: "dimmableLight",
+        text: "dimmableLight",
+        value: "dimmableLight",
+        label: { color: "blue", empty: true, circular: true },
+      },
+      {
+        key: "buttonDimmer",
+        text: "buttonDimmer",
+        value: "buttonDimmer",
+        label: { color: "black", empty: true, circular: true },
+      },
+      {
+        key: "knobDimmer",
+        text: "knobDimmer",
+        value: "knobDimmer",
+        label: { color: "purple", empty: true, circular: true },
+      },
+      {
+        key: "motionSensor",
+        text: "motionSensor",
+        value: "motionSensor",
+        label: { color: "orange", empty: true, circular: true },
+      },
+      {
+        key: "sensor",
+        text: "sensor",
+        value: "sensor",
+        label: { empty: true, circular: true },
+      },
+      {
+        key: "smartPlug",
+        text: "smartPlug",
+        value: "smartPlug",
+        label: { color: "pink", empty: true, circular: true },
+      },
+      {
+        key: "switch",
+        text: "switch",
+        value: "switch",
+        label: { color: "green", empty: true, circular: true },
+      },
+    ];
+
+    return (
+      <Dropdown
+        text="Filter Devices"
+        icon="filter"
+        floating
+        labeled
+        button
+        className="icon"
+      >
+        <Dropdown.Menu>
+          <Dropdown.Divider />
+          <Dropdown.Header icon="tags" content="Tag Device" />
+          <Dropdown.Menu scrolling>
+            {tagOptions.map((option) => (
+              <Dropdown.Item
+                key={option.value}
+                {...option}
+                onClick={this.props.filterDevices}
+              />
+            ))}
+          </Dropdown.Menu>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  }
+}

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

@@ -25,6 +25,15 @@ const DeviceType = (props) => {
           edit={props.edit}
         />
       );
+    case "motionSensor":
+      return (
+        <Sensor
+          updateDev={props.updateDeviceUi}
+          onChangeData={props.changeDeviceData}
+          device={props.device}
+          edit={props.edit}
+        />
+      );
     case "buttonDimmer":
       return (
         <DefaultDimmer

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

@@ -31,6 +31,7 @@ export default class NewDevice extends Component {
     this.state = {
       step: 1,
       openModal: false,
+      motion: false,
     };
     this.baseState = this.state;
     this.createDevice = this.createDevice.bind(this);
@@ -68,7 +69,12 @@ export default class NewDevice extends Component {
   };
 
   setTypeOfSensor = (e, d) => {
-    this.setState({ typeOfSensor: d.value });
+    console.log(d.value);
+    if (d.value === "motionSensor") {
+      this.setState({ typeOfSensor: d.value, motion: true });
+    } else {
+      this.setState({ typeOfSensor: d.value });
+    }
   };
 
   setLightsDimmerSwitch = (e, d) => {
@@ -81,7 +87,7 @@ export default class NewDevice extends Component {
       params: {
         name: this.state.deviceName,
       },
-      device: this.state.typeOfDevice,
+      device: this.state.motion ? "motionSensor" : this.state.typeOfDevice,
     };
 
     switch (this.state.typeOfDevice) {
@@ -89,8 +95,10 @@ export default class NewDevice extends Component {
         data.params["intensity"] = 1;
         break;
       case "sensor":
-        data.params["sensor"] = this.state.typeOfSensor;
+        if (!this.state.motion) {
-        data.params["value"] = 0;
+          data.params["sensor"] = this.state.typeOfSensor;
+          data.params["value"] = 0;
+        }
         break;
       case "switch":
         data.params["lights"] = this.state.lightsAttached;

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

@@ -29,19 +29,25 @@ import { sensorText, style, valueStyle } from "./SensorStyle";
 import Settings from "./DeviceSettings";
 import { StyledDiv } from "./styleComponents";
 import { call } from "../../../client_server";
+import { nameStyle } from "./LightStyle";
+import { iconStyle } from "./styleComponents";
+import { Image } from "semantic-ui-react";
 
 export default class Sensor extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      turnedOn: false,
       value: 0,
+      motion: false,
     };
     this.units = "";
     this.stateCallback = (e) => {
       this.setState(Object.assign(this.state, e));
     };
 
+    this.iconOn = "/img/lightOn.svg";
+    this.iconOff = "/img/lightOff.svg";
+
     call.socketSubscribe(this.props.device.id, this.stateCallback);
   }
 
@@ -57,24 +63,38 @@ export default class Sensor extends Component {
   };
 
   componentDidMount() {
-    switch (this.props.device.sensor) {
+    if (this.props.device.kind === "sensor") {
-      case "TEMPERATURE":
+      switch (this.props.device.sensor) {
-        this.units = "ºC";
+        case "TEMPERATURE":
-        break;
+          this.units = "ºC";
-      case "HUMIDITY":
+          break;
-        this.units = "%";
+        case "HUMIDITY":
-        break;
+          this.units = "%";
-      case "LIGHT":
+          break;
-        this.units = "lm";
+        case "LIGHT":
-        break;
+          this.units = "lm";
-      default:
+          break;
-        this.units = "";
+        default:
+          this.units = "";
+      }
+      this.setState({
+        value: this.props.device.value,
+      });
+    } else {
+      this.setState({
+        detected: this.props.device.detected,
+        motion: true,
+      });
     }
-    this.setState({
-      value: this.props.device.value,
-    });
   }
 
+  getIcon = () => {
+    if (this.state.detected) {
+      return this.iconOn;
+    }
+    return this.iconOff;
+  };
+
   render() {
     return (
       <StyledDiv>
@@ -85,32 +105,38 @@ export default class Sensor extends Component {
             this.props.onChangeData(id, newSettings)
           }
         />
-
+        {this.state.motion ? (
-        <CircularInput value={this.state.value / 100} style={style}>
+          <div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
-          <CircularTrack />
+            <Image src={this.getIcon()} style={iconStyle} />
-          <CircularProgress />
+            <h5 style={nameStyle}>Motion Sensor</h5>
-          <text
+          </div>
-            style={valueStyle}
+        ) : (
-            x={100}
+          <CircularInput value={this.state.value / 100} style={style}>
-            y={80}
+            <CircularTrack />
-            textAnchor="middle"
+            <CircularProgress />
-            dy="0.3em"
+            <text
-            fontWeight="bold"
+              style={valueStyle}
-          >
+              x={100}
-            {+(Math.round(this.state.value + "e+2") + "e-2")}
+              y={80}
-            {this.units}
+              textAnchor="middle"
-          </text>
+              dy="0.3em"
-          <text
+              fontWeight="bold"
-            style={sensorText}
+            >
-            x={100}
+              {+(Math.round(this.state.value + "e+2") + "e-2")}
-            y={150}
+              {this.units}
-            textAnchor="middle"
+            </text>
-            dy="0.3em"
+            <text
-            fontWeight="bold"
+              style={sensorText}
-          >
+              x={100}
-            {this.setName()}
+              y={150}
-          </text>
+              textAnchor="middle"
-        </CircularInput>
+              dy="0.3em"
+              fontWeight="bold"
+            >
+              {this.setName()}
+            </text>
+          </CircularInput>
+        )}
       </StyledDiv>
     );
   }