Thermostats fixed

smart-hut/package.json

@@ -20,6 +20,7 @@
     "react-device-detect": "^1.11.14",
     "react-dom": "^16.12.0",
     "react-modal": "^2.2.2",
+    "react-rangeslider": "^2.2.0",
     "react-redux": "^7.2.0",
     "react-round-slider": "^1.0.1",
     "react-router": "^5.1.2",

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

@@ -107,6 +107,7 @@ class NewDevice extends Component {
       buttonDimmer: "New button dimmer",
       knobDimmer: "New knob dimmer",
       securityCamera: "New security camera",
+      thermostat: "New thermostat",
     };
 
     if (this.state.deviceName === "") {

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

@@ -1,15 +1,10 @@
-.slider-css {
-  -webkit-appearance: none;
-  width: 20rem;
-  font-family: "Lato";
-  position: absolute;
-  margin-top: 27%;
-  margin-left: 50%;
-  transform: translate(-50%, -50%);
+.rangeslider.slider-css {
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 
+/*
 .slider-css::-webkit-slider-thumb {
-  -webkit-appearance: none;
   border: 5px solid #ffffff;
   width: 18px;
   height: 18px;
@@ -21,13 +16,10 @@
 }
 
 .slider-css:focus {
-  -webkit-appearance: none;
-
   outline: none;
 }
 
 .slider-css::-webkit-slider-runnable-track {
-  -webkit-appearance: none;
   outline: none;
   width: 100%;
   height: 7px;
@@ -36,3 +28,4 @@
   background: white;
   border-radius: 5px;
 }
+*/

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

@@ -1,37 +1,27 @@
 export const container = {
-  position: "relative",
-  width: "25rem",
-  height: "12rem",
-  boxShadow: "22px 18px 54px -7px rgba(102,102,102,1)",
-  borderRadius: "30px",
+  margin: "-1em 0",
+  width: "15em",
+  height: "14em",
+  boxShadow: "5px 5px 5px 5px #DDD",
+  borderRadius: "1em",
   backgroundColor: "white",
-};
-
-export const line = {
-  width: "250px",
-  height: "47px",
-  borderBottom: "1px solid #646464",
-  position: "absolute",
-  left: "5%",
+  transform: "translate(-2.5em, 0)",
 };
 
 export const deviceName = {
+  paddingTop: ".5rem",
+  paddingLeft: "1rem",
   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: "2rem",
+  marginTop: ".5rem",
+  width: "100%",
+  textAlign: "center",
+  fontSize: "1.3rem",
   fontWeight: "bold",
   color: "#646464",
 };
@@ -48,26 +38,26 @@ export const slider = {
 export const stateTagContainer = {
   textAlign: "center",
   position: "absolute",
-  //width: "3rem",
+  width: "10rem",
   height: "2rem",
-  marginTop: "35%",
-  marginLeft: "50%",
+  bottom: 0,
+  left: "50%",
   transform: "translate(-50%,-50%)",
-  padding: "0.5rem 4rem",
-  backgroundColor: "rgba(94,246,152,1)",
+  backgroundColor: "#2b2",
   borderRadius: "50px",
 };
 
 export const stateTag = {
   fontFamily: "Lato",
   fontSize: "1.2rem",
+  lineHeight: "2rem",
   color: "white",
   textTransform: "uppercase",
 };
 
 export const toggle = {
   position: "absolute",
-  top: "10%",
-  left: "35%",
+  top: ".7rem",
+  right: "2.5rem",
   transform: "rotate(-360deg)",
 };

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

@@ -1,15 +1,16 @@
 import React, { Component } from "react";
-import { Checkbox } from "semantic-ui-react";
+import { Checkbox, Icon } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 import "./Thermostat.css";
+import Slider from "react-rangeslider";
+import "react-rangeslider/lib/index.css";
+
 import {
   stateTag,
   container,
   deviceName,
   targetTemperature,
-  slider,
-  line,
   toggle,
   stateTagContainer,
 } from "./ThermostatStyle";
@@ -20,8 +21,6 @@ class Thermostats extends Component {
     super(props);
     this.state = {
       targetTemperature: this.props.stateOrDevice.targetTemperature,
-      internalSensorTemperature: this.props.stateOrDevice
-        .internalSensorTemperature,
       mode: this.props.stateOrDevice.mode,
       measuredTemperature: this.props.stateOrDevice.measuredTemperature,
       useExternalSensors: this.props.stateOrDevice.useExternalSensors,
@@ -29,9 +28,7 @@ class Thermostats extends Component {
     };
     this.setMode = this.setMode.bind(this);
     this.setTargetTemperature = this.setTargetTemperature.bind(this);
-    this.setInternalSensorTemperature = this.setInternalSensorTemperature.bind(
-      this
-    );
+    this.setTargetTemperature = this.setTargetTemperature.bind(this);
   }
 
   //getters
@@ -43,10 +40,6 @@ class Thermostats extends Component {
     return this.props.stateOrDevice.targetTemperature;
   }
 
-  get getInternalSensorTemperature() {
-    return this.props.stateOrDevice.internalSensorTemperature;
-  }
-
   get getMeasuredTemperature() {
     return this.props.stateOrDevice.measuredTemperature;
   }
@@ -62,6 +55,7 @@ class Thermostats extends Component {
     console.log(mode);
 
     //i came to the conclusion that is not possible to set mode.
+    // Good job Jacob (Claudio)
     //this.mode = "HEATING";
     const turnOn = mode;
     console.log(turnOn);
@@ -85,7 +79,7 @@ class Thermostats extends Component {
         .catch((err) => console.error("thermostat update error", err));
     } else {
       this.props.updateState(
-        { id: this.props.stateOrDevice.id, on: on },
+        { id: this.props.stateOrDevice.id, on },
         this.props.stateOrDevice.kind
       );
     }
@@ -93,7 +87,7 @@ class Thermostats extends Component {
 
   //It seems to work
   saveTargetTemperature(targetTemperature) {
-    const turn = this.props.stateOrDevice.mode !== "OFF" ? true : false;
+    const turn = this.props.stateOrDevice.mode !== "OFF";
     if (this.props.tab === "Devices") {
       this.props
         .saveDevice({
@@ -131,73 +125,63 @@ class Thermostats extends Component {
   }
 
   //I have no idea why it doesn't want to update the temperature
-  saveInternalSensorTemperature(internalSensorTemperature) {
+  // Maybe ask yourself some questions
+  saveTargetTemperature(targetTemperature) {
     if (this.props.tab === "Devices") {
       this.props
-        .saveDevice({ ...this.props.device, internalSensorTemperature })
+        .saveDevice({
+          ...this.props.device,
+          turnOn: this.props.device.mode !== "OFF",
+          targetTemperature,
+        })
         .catch((err) => console.error("thermostat update error", err));
     } else {
       this.props.updateState(
         {
           id: this.props.stateOrDevice.id,
-          internalSensorTemperature: internalSensorTemperature,
+          targetTemperature: targetTemperature,
         },
         this.props.stateOrDevice.kind
       );
     }
   }
 
-  setInternalSensorTemperature(newTemp) {
-    if (this.state.timeout) {
-      clearTimeout(this.state.timeout);
+  setTargetTemperature() {
+    this.saveTargetTemperature(this.state.targetTemperature);
   }
 
-    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);
+    this.setState({ ...this.state, targetTemperature: value });
   };
 
   render() {
     return (
       <div style={container}>
-        <h3 style={deviceName}>{this.props.stateOrDevice.name}</h3>
-        <div style={line}></div>
+        <h3 style={deviceName}>
+          Thermostat
           <Checkbox
             checked={this.props.stateOrDevice.mode !== "OFF" ? true : false}
             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>
-        {this.props.activeTab === "Devices" ? (
-          <input
-            type="range"
-            min="0"
-            max="40"
+        </h3>
+        <hr />
+        <div style={targetTemperature}>
+          <Icon name="thermometer half" />{" "}
+          {this.props.device.measuredTemperature} ºC <br />
+          <Icon name="target" /> {this.state.targetTemperature.toFixed(1)} ºC
+        </div>
+        {this.props.tab === "Devices" ? (
+          <Slider
+            min={10}
+            max={30}
+            step={0.1}
+            tooltip={false}
             className="slider-css"
-            value={this.props.device.targetTemperature}
-            onChange={(event) => this.handleChange(event.target.value)}
-            id="targetTemperature"
+            value={this.state.targetTemperature}
+            onChange={(event) => this.handleChange(event)}
+            onChangeComplete={() => this.setTargetTemperature()}
           />
         ) : null}
         <div style={stateTagContainer}>

smart-hut/yarn.lock

@@ -2814,7 +2814,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.6:
+classnames@^2.2.3, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -8787,6 +8787,14 @@ react-popper@^1.3.4:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-rangeslider@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-rangeslider/-/react-rangeslider-2.2.0.tgz#4362b01f4f5a455f0815d371d496f69ca4c6b5aa"
+  integrity sha512-5K7Woa+cyqZ5wiW5+KhqGV+3+FiFxGKQ9rUxTMh52sObXVYEeBbfxFrp1eBvS8mRIxnUbHz9ppnFP0LhwOyNeg==
+  dependencies:
+    classnames "^2.2.3"
+    resize-observer-polyfill "^1.4.2"
+
 react-redux@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
@@ -9208,6 +9216,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.4.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"