Thermostats fixed

2020-05-02 11:11:21 +02:00 · 2020-05-02 11:11:21 +02:00 · d49d6361ef
commit d49d6361ef
parent 3af3b85aa9
6 changed files with 83 additions and 101 deletions
--- a/smart-hut/package.json
+++ b/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",
--- a/smart-hut/src/components/dashboard/devices/NewDevice.js
+++ b/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 === "") {
--- a/smart-hut/src/components/dashboard/devices/Thermostat.css
+++ b/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;
 }
+*/
--- a/smart-hut/src/components/dashboard/devices/ThermostatStyle.js
+++ b/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)",
 };
--- a/smart-hut/src/components/dashboard/devices/Thermostats.js
+++ b/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);
-    }
-
-    this.setState({
-      newTemp,
-      timeout: setTimeout(() => {
-        this.saveInternalSensorTemperature(newTemp);
-        this.setState({
-          internalSensorTemperature: this.state.internalSensorTemperature,
-          timeout: null,
-        });
-      }, 100),
-    });
+  setTargetTemperature() {
+    this.saveTargetTemperature(this.state.targetTemperature);
  }

-  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>
-        <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 style={deviceName}>
+          Thermostat
+          <Checkbox
+            checked={this.props.stateOrDevice.mode !== "OFF" ? true : false}
+            slider
+            style={toggle}
+            onChange={(e, val) => this.setMode(val.checked)}
+          />
+        </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}>
--- a/smart-hut/yarn.lock
+++ b/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"