Merge branch 'thermostat-fix' into 'dev'
Thermostats fixed See merge request sa4-2020/the-sanmarinoes/frontend!110
This commit is contained in:
commit
126efe3b53
6 changed files with 83 additions and 101 deletions
|
@ -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",
|
||||
|
|
|
@ -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 === "") {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
*/
|
|
@ -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)",
|
||||
};
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue