diff --git a/smart-hut/package.json b/smart-hut/package.json index 502c36b..e5ced9e 100644 --- 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", diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js index 84a5b8c..bab8a80 100644 --- 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 === "") { diff --git a/smart-hut/src/components/dashboard/devices/Thermostat.css b/smart-hut/src/components/dashboard/devices/Thermostat.css index bfff9ee..15c4314 100644 --- 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; } +*/ \ No newline at end of file diff --git a/smart-hut/src/components/dashboard/devices/ThermostatStyle.js b/smart-hut/src/components/dashboard/devices/ThermostatStyle.js index 934f258..4e29276 100644 --- 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)", }; diff --git a/smart-hut/src/components/dashboard/devices/Thermostats.js b/smart-hut/src/components/dashboard/devices/Thermostats.js index ef89dfd..62a8589 100644 --- 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 (
-

{this.props.stateOrDevice.name}

-
- this.setMode(val.checked)} - /> - - {this.props.device.targetTemperature}ºC - - {this.props.activeTab === "Devices" ? ( - + Thermostat + this.setMode(val.checked)} + /> + +
+
+ {" "} + {this.props.device.measuredTemperature} ºC
+ {this.state.targetTemperature.toFixed(1)} ºC +
+ {this.props.tab === "Devices" ? ( + this.handleChange(event.target.value)} - id="targetTemperature" + value={this.state.targetTemperature} + onChange={(event) => this.handleChange(event)} + onChangeComplete={() => this.setTargetTemperature()} /> ) : null}
diff --git a/smart-hut/yarn.lock b/smart-hut/yarn.lock index 4364834..267efdb 100644 --- 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"