Merge branch 'helpWithBackend' into 'dev'

Help with backend

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

smart-hut/package-lock.json

@@ -10922,6 +10922,11 @@
         "scheduler": "^0.18.0"
       }
     },
+    "react-dom-factories": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz",
+      "integrity": "sha1-63cFxNs2+1AbOqOP91lhaqD/luA="
+    },
     "react-error-overlay": {
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.6.tgz",
@@ -10932,6 +10937,23 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
+    "react-modal": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.2.2.tgz",
+      "integrity": "sha512-tdgyEyfbyfzDUj40XtWldAQe7e+yhJDUtVSlsQ9AQCGifzWck6v1XTtIVGViVftOsEA3cBWCZCjF3rq6FPJzMg==",
+      "requires": {
+        "exenv": "1.2.0",
+        "prop-types": "^15.5.10",
+        "react-dom-factories": "^1.0.0"
+      },
+      "dependencies": {
+        "exenv": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.0.tgz",
+          "integrity": "sha1-ODXxJ6vwdb/ggtCu1EhAV8eOPIk="
+        }
+      }
+    },
     "react-popper": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",

smart-hut/package.json

@@ -19,7 +19,7 @@
     "react-circular-slider-svg": "^0.1.5",
     "react-device-detect": "^1.11.14",
     "react-dom": "^16.12.0",
-    "react-modal": "2.2.2",
+    "react-modal": "^2.2.2",
     "react-redux": "^7.2.0",
     "react-round-slider": "^1.0.1",
     "react-router": "^5.1.2",

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

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+import "./Curtains.css";
+import { RemoteService } from "../../../remote";
+import { connect } from "react-redux";
+import { Slider } from "@material-ui/core";
+
+class Curtain extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { intensity: this.props.device.intensity, timeout: null };
+
+        this.setIntensity = this.setIntensity.bind(this);
+    }
+
+    //getters
+    get turnedOn() {
+        return this.props.device.on;
+    }
+
+    get intensity() {
+        return this.props.device.intensity || 0;
+    }
+
+    onClickDevice = () => {
+        const on = !this.turnedOn;
+        this.props
+            .saveDevice({ ...this.props.device, on })
+            .catch((err) => console.error("curtains update error", err));
+    };
+
+    setIntensity(intensity) {
+        intensity *= 100;
+
+        if (this.state.timeout) {
+            clearTimeout(this.state.timeout);
+        }
+
+        this.setState({
+            intensity,
+            timeout: setTimeout(() => {
+                this.saveIntensity();
+                this.setState({
+                    intensity: this.state.intensity,
+                    timeout: null,
+                });
+            }, 100),
+        });
+    }
+
+    saveIntensity = () => {
+        const intensity = Math.round(this.state.intensity);
+        this.props
+            .saveDevice({ ...this.props.device, intensity })
+            .catch((err) => console.error("curtains update error", err));
+    };
+
+    helper = () => {
+        if (this.props.device.intensity >= 90) {
+            this.setIntensity(1);
+            this.saveIntensity();
+        } else {
+            this.setIntensity(this.props.device.intensity / 100 + 0.1);
+            this.saveIntensity();
+        }
+    };
+
+
+    ///*this took me way too much more time than it should have*/
+
+    handleChange = (a) => {
+        this.setIntensity(a.target.value / 100);
+        this.saveIntensity();
+    };
+
+    render() {
+        return (
+            <div className="container">
+                <div
+                    className="open-container"
+                    style={{
+                        height: (9 * this.props.device.intensity) / 100 + "rem",
+                    }}
+                ></div>{" "}
+                <span className="span-open">
+                    {Math.round(this.props.device.intensity)}%
+                </span>
+                <input
+                    onChange={this.handleChange}
+                    value={this.props.device.intensity}
+                    className="slider"
+                    type="range"
+                    min="0"
+                    max="100"
+                />
+            </div>
+
+        );
+    }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+    device: state.devices[ownProps.id],
+});
+const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
+export default CurtainContainer;

smart-hut/src/components/dashboard/devices/Curtains.css

@@ -0,0 +1,69 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.container {
+    position: relative;
+    margin-top: 10%;
+    width: 18rem;
+    height: 9rem;
+    background-color: #f7f7f7;
+    border-radius: 5px;
+    box-shadow: 10px 10px 30px 15px rgba(0, 0, 0, 0.247);
+}
+
+.open-container {
+    position: absolute;
+    width: 18rem;
+    background-color: #f79071;
+    border-radius: 5px;
+}
+
+.slider {
+    -webkit-appearance: none;
+    width: 9rem;
+    position: absolute;
+    left: 75%;
+    top: 50%;
+    transform: translateY(-50%) rotateZ(90deg);
+    background: transparent;
+    outline: none;
+}
+
+.slider::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    height: 5px;
+    background-color: #1b1c1d;
+    border-radius: 50px;
+    cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #1b1c1d;
+    position: relative;
+    transition: all;
+    top: -5.5px;
+}
+
+.slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
+.span-open {
+    -webkit-user-select: none;
+    font-family: "Lato";
+    font-weight: bold;
+    font-size: 3rem;
+    text-emphasis: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

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

@@ -5,6 +5,8 @@ import Sensor from "./Sensor";
 import { ButtonDimmer, KnobDimmer } from "./Dimmer";
 import Switcher from "./Switch";
 import Videocam from "./Videocam";
+import Curtains from "./Curtain";
+import Thermostat from "./Thermostats";
 import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
@@ -31,7 +33,13 @@ class Device extends React.Component {
     }
 
     renderDeviceComponent() {
+        console.log("check here")
+        console.log(this.props.stateOrDevice.kind)
         switch (this.props.stateOrDevice.kind) {
+            case "curtains":
+                return <Curtains tab={this.props.tab} id={this.props.id} />;
+            case "thermostat":
+                return <Thermostat tab={this.props.tab} id={this.props.id} />;
             case "regularLight":
                 return <Light tab={this.props.tab} id={this.props.id} />;
             case "sensor":
@@ -62,7 +70,9 @@ class Device extends React.Component {
                     <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
                     {this.props.tab === "Devices" ? (
                         <Grid.Column textAlign="center">
-              <Header as="h3">{this.props.stateOrDevice.name}</Header>
+                            <Header as="h3">
+                                {this.props.stateOrDevice.name}
+                            </Header>
                             <Button
                                 color="blue"
                                 icon
@@ -86,11 +96,16 @@ class Device extends React.Component {
                         </Grid.Column>
                     ) : (
                         <Grid.Column textAlign="center">
-              <Header as="h3">{this.props.stateOrDevice.name}</Header>
+                            <Header as="h3">
+                                {this.props.stateOrDevice.name}
+                            </Header>
                         </Grid.Column>
                     )}
 
-          <DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
+                    <DeviceSettingsModal
+                        ref={this.modalRef}
+                        id={this.props.id}
+                    />
                 </Grid>
             </Segment>
         );

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

@@ -7,7 +7,6 @@
  * Lights have an internal state that can be changed and it must
  * be shown accordingly in the SmartHut views (house view and room views).
  */
-
 import React, { Component } from "react";
 import {
   iconStyle,

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

@@ -112,8 +112,20 @@ class NewDevice extends Component {
     if (this.state.deviceName === "") {
       data.name = defaultNames[this.state.typeOfDevice];
     }
+    console.log("-------------------------");
+    console.log(this.state.typeOfDevice);
 
     switch (this.state.typeOfDevice) {
+      //trying to make securityCamera work
+      //case "securityCamera":
+        // data.path="/security_camera_videos/security_camera_1.mp4";
+        // data.on=false;
+        //break;
+      //trying to make thermostat work
+      case "thermostat":
+        data.targetTemperature=0;
+        data.measuredTemperuature=0;
+        break;
       case "dimmableLight":
         data.intensity = 0;
         break;
@@ -145,6 +157,16 @@ class NewDevice extends Component {
 
   render() {
     const deviceOptions = [
+        //stuff
+      {key:"thermostat",
+        text:"Thermostat",
+        value:"thermostat",
+        image:{}},
+      {key:"curtains",
+      text:"Curtain",
+      value:"curtains",
+      image:{}},
+        //stuff ends
       {
         key: "light",
         text: "Normal Light",

smart-hut/src/components/dashboard/devices/SecurityCamera

@@ -0,0 +1,36 @@
+import React, {Component} from "react";
+
+import { RemoteService } from "../../../remote";
+import { connect } from "react-redux";
+
+
+
+
+class SecurityCamera extends Component{
+    constructor (props){
+        super(props);
+        this.state = { path: this.props.device.path, on:this.props.device.on, timeout: null };
+
+       // this.setIntensity = this.setIntensity.bind(this);
+    }
+
+
+
+    render(){
+        return <div><p>"mode is: "{this.props.device.mode}</p>
+            <p>"internalsensortemperature is: "{this.props.device.internalSensorTemperature}</p>
+            <p>"targetTemperature is: "{this.props.device.targetTemperature}</p>
+            <p>"measuredtemperature is: "{this.props.device.measuredTemperature}</p>
+            <p>{this.props.device.on}</p>
+            <input type="submit" value="change targetTemperature" onClick={this.helperMode}/>
+            <input type="submit" value="robe" onClick={this.onClickDevice}/></div>;
+    }
+}
+
+
+const mapStateToProps = (state, ownProps) => ({
+    device: state.devices[ownProps.id],
+});
+
+const SecurityCameraContainer = connect(mapStateToProps, RemoteService)(SecurityCamera);
+export default SecurityCameraContainer;

smart-hut/src/components/dashboard/devices/Thermostat.css

@@ -0,0 +1,38 @@
+.slider-css {
+    -webkit-appearance: none;
+    width: 20rem;
+    font-family: "Lato";
+    position: absolute;
+    margin-top: 32%;
+    margin-left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.slider-css::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: 5px solid #ffffff;
+    width: 18px;
+    height: 18px;
+    border-radius: 10px;
+    background-color: rgba(94, 246, 152, 1);
+    cursor: pointer;
+    box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
+    margin-top: -7px;
+}
+
+.slider-css:focus {
+    -webkit-appearance: none;
+
+    outline: none;
+}
+
+.slider-css::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    outline: none;
+    width: 100%;
+    height: 7px;
+    cursor: pointer;
+    box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3);
+    background: white;
+    border-radius: 5px;
+}

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

@@ -0,0 +1,73 @@
+export const container = {
+    position: "relative",
+    width: "25rem",
+    height: "12rem",
+    boxShadow: "22px 18px 54px -7px rgba(102,102,102,1)",
+    borderRadius: "30px",
+    backgroundColor: "white",
+};
+
+export const line = {
+    width: "250px",
+    height: "47px",
+    borderBottom: "1px solid #646464",
+    position: "absolute",
+    left: "5%",
+};
+
+export const deviceName = {
+    fontFamily: "Lato",
+    position: "absolute",
+    marginTop: "5%",
+    marginLeft: "8%",
+    fontSize: "1rem",
+    fontWeight: "bold",
+    color: "#646464",
+};
+
+export const targetTemperature = {
+    fontFamily: "Lato",
+    position: "absolute",
+    marginTop: "20%",
+    marginLeft: "50%",
+    transform: "translate(-50%,-50%)",
+    fontSize: "3.5rem",
+    fontWeight: "bold",
+    color: "#646464",
+};
+
+export const slider = {
+    width: "25rem",
+    fontFamily: "Lato",
+    position: "absolute",
+    marginTop: "35%",
+    marginLeft: "50%",
+    transform: "translate(-50%,-50%)",
+};
+
+export const stateTagContainer = {
+    textAlign: "center",
+    position: "absolute",
+    width: "4rem",
+    height: "1rem",
+    marginTop: "40%",
+    marginLeft: "50%",
+    transform: "translate(-50%,-50%)",
+    padding: "0.5rem 4rem",
+    backgroundColor: "rgba(94,246,152,1)",
+    borderRadius: "50px",
+};
+
+export const stateTag = {
+    fontFamily: "Lato",
+    fontSize: "1.2rem",
+    color: "white",
+    textTransform: "uppercase",
+};
+
+export const toggle = {
+    position: "absolute",
+    top: "10%",
+    left: "35%",
+    transform: "rotate(-360deg)",
+};

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

@@ -0,0 +1,177 @@
+import React, { Component } from "react";
+import { Checkbox } from "semantic-ui-react";
+import { RemoteService } from "../../../remote";
+import { connect } from "react-redux";
+import "./Thermostat.css";
+import {
+  stateTag,
+  container,
+  deviceName,
+  targetTemperature,
+  slider,
+  line,
+  toggle,
+  stateTagContainer,
+} from "./ThermostatStyle";
+
+//not quite working yet
+class Thermostats extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      targetTemperature: this.props.device.targetTemperature,
+      internalSensorTemperature: this.props.device.internalSensorTemperature,
+      mode: this.props.device.mode,
+      measuredTemperature: this.props.device.measuredTemperature,
+      useExternalSensors: this.props.device.useExternalSensors,
+      timeout: null,
+    };
+    this.setMode = this.setMode.bind(this);
+    this.setTargetTemperature = this.setTargetTemperature.bind(this);
+    this.setInternalSensorTemperature = this.setInternalSensorTemperature.bind(
+      this
+    );
+  }
+
+  //getters
+  get getMode() {
+    return this.props.device.mode;
+  }
+
+  get getTargetTemperature() {
+    return this.props.device.targetTemperature;
+  }
+
+  get getInternalSensorTemperature() {
+    return this.props.device.internalSensorTemperature;
+  }
+
+  get getMeasuredTemperature() {
+    return this.props.device.measuredTemperature;
+  }
+
+  get getUseExternalSensors() {
+    return this.props.device.useExternalSensors;
+  }
+
+  setMode(mode) {
+    if (this.state.timeout) {
+      clearTimeout(this.state.timeout);
+    }
+    console.log(mode);
+
+    //i came to the conclusion that is not possible to set mode.
+    //this.mode = "HEATING";
+    const turnOn = mode;
+    this.props
+      .saveDevice({ ...this.props.device, turnOn })
+      .catch((err) => console.error("regular light update error", err));
+  }
+
+  onClickDevice = () => {
+    const on = !this.turnedOn;
+    this.props
+      .saveDevice({ ...this.props.device, on })
+      .catch((err) => console.error("regular light update error", err));
+  };
+
+  //It seems to work
+  saveTargetTemperature(targetTemperature) {
+    this.props
+      .saveDevice({ ...this.props.device, targetTemperature })
+      .catch((err) => console.error(" update error", err));
+  }
+
+  setTargetTemperature(newTemp) {
+    if (this.state.timeout) {
+      clearTimeout(this.state.timeout);
+    }
+
+    this.setState({
+      newTemp,
+      timeout: setTimeout(() => {
+        this.saveTargetTemperature(newTemp);
+        this.setState({
+          targetTemperature: this.state.targetTemperature,
+          timeout: null,
+        });
+      }, 100),
+    });
+  }
+
+  //I have no idea why it doesn't want to update the temperature
+  saveInternalSensorTemperature(internalSensorTemperature) {
+    this.props
+      .saveDevice({ ...this.props.device, internalSensorTemperature })
+      .catch((err) => console.error(" update error", err));
+  }
+
+  setInternalSensorTemperature(newTemp) {
+    if (this.state.timeout) {
+      clearTimeout(this.state.timeout);
+    }
+
+    this.setState({
+      newTemp,
+      timeout: setTimeout(() => {
+        this.saveInternalSensorTemperature(newTemp);
+        this.setState({
+          internalSensorTemperature: this.state.internalSensorTemperature,
+          timeout: null,
+        });
+      }, 100),
+    });
+  }
+
+  helperMode = () => {
+    //this.setMode("HEATING");
+    this.setTargetTemperature(20);
+    //this.setInternalSensorTemperature(42);
+  };
+
+  handleChange = (value) => {
+    this.setTargetTemperature(value);
+  };
+
+  render() {
+    return (
+
+      <div style={container}>
+        <h3 style={deviceName}>{this.props.device.name}</h3>
+        <div style={line}></div>
+        <Checkbox
+          slider
+          style={toggle}
+          // TODO Manage the state hereconsole.log("CHANGE", val.checked)
+          onChange={(e, val) => this.setMode(val.checked)}
+        />
+
+        <span style={targetTemperature}>
+          {this.props.device.targetTemperature}ºC
+        </span>
+        <input
+          type="range"
+          min="0"
+          max="40"
+          className="slider-css"
+          value={this.props.device.targetTemperature}
+          onChange={(event) => this.handleChange(event.target.value)}
+          id="targetTemperature"
+        />
+        <div style={stateTagContainer}>
+          <span style={stateTag}>{this.props.device.mode}</span>
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  device: state.devices[ownProps.id],
+});
+
+const ThermostatContainer = connect(
+  mapStateToProps,
+  RemoteService
+)(Thermostats);
+export default ThermostatContainer;

smart-hut/yarn.lock

@@ -4243,12 +4243,7 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-exenv@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89"
-  integrity sha1-ODXxJ6vwdb/ggtCu1EhAV8eOPIk=
-
-exenv@^1.2.2:
+exenv@^1.2.0, exenv@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
   integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
@@ -8741,11 +8736,6 @@ react-device-detect@^1.11.14:
   dependencies:
     ua-parser-js "^0.7.20"
 
-react-dom-factories@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0"
-  integrity sha1-63cFxNs2+1AbOqOP91lhaqD/luA=
-
 react-dom@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
@@ -8776,14 +8766,13 @@ react-is@^16.9.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-modal@2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.2.tgz#4bbf98bc506e61c446c9f57329c7a488ea7d504b"
-  integrity sha512-tdgyEyfbyfzDUj40XtWldAQe7e+yhJDUtVSlsQ9AQCGifzWck6v1XTtIVGViVftOsEA3cBWCZCjF3rq6FPJzMg==
+react-modal@^2.2.2:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.4.1.tgz#cb09b26711b148eb9f59cb180e1b7d82980ded05"
+  integrity sha512-3WQCn3xqkbEUvxRUO3nkeqxMNgt1F4CyEU3BiUIrg7C71tnqjQIuSE7+JXp85yFl8X1iRTJouySNpwNqv4kiWg==
   dependencies:
-    exenv "1.2.0"
+    exenv "^1.2.0"
     prop-types "^15.5.10"
-    react-dom-factories "^1.0.0"
 
 react-popper@^1.3.4:
   version "1.3.7"