Thermostats fixed

This commit is contained in:
Claudio Maggioni (maggicl) 2020-05-02 11:11:21 +02:00
parent 3af3b85aa9
commit d49d6361ef
6 changed files with 83 additions and 101 deletions

View file

@ -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",

View file

@ -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 === "") {

View file

@ -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;
}
*/

View file

@ -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)",
};

View file

@ -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}>

View file

@ -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"