smarthut/frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix turn on/off thermostat

Browse Source
This commit is contained in:
britea 2020-04-24 23:34:01 +02:00
parent 3ca1f519b6
commit 6ecfe9653d
1 changed files with 145 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

287
smart-hut/src/components/dashboard/devices/Thermostats.js
View File

@ -4,135 +4,138 @@ import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import "./Thermostat.css"; import "./Thermostat.css";
import { import {
stateTag, stateTag,
container, container,
deviceName, deviceName,
targetTemperature, targetTemperature,
slider, slider,
line, line,
toggle, toggle,
stateTagContainer, stateTagContainer,
} from "./ThermostatStyle"; } from "./ThermostatStyle";
//not quite working yet //not quite working yet
class Thermostats extends Component { class Thermostats extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
targetTemperature: this.props.device.targetTemperature, targetTemperature: this.props.device.targetTemperature,
internalSensorTemperature: this.props.device internalSensorTemperature: this.props.device.internalSensorTemperature,
.internalSensorTemperature, mode: this.props.device.mode,
mode: this.props.device.mode, measuredTemperature: this.props.device.measuredTemperature,
measuredTemperature: this.props.device.measuredTemperature, useExternalSensors: this.props.device.useExternalSensors,
useExternalSensors: this.props.device.useExternalSensors, timeout: null,
timeout: null,
};
this.setMode = this.setMode.bind(this);
this.setTargetTemperature = this.setTargetTemperature.bind(this);
this.setInternalSensorTemperature = this.setInternalSensorTemperature.bind(
this
);
}
//getters
get getMode() {
return this.props.device.mode;
}
get getTargetTemperature() {
return this.props.device.targetTemperature;
}
get getInternalSensorTemperature() {
return this.props.device.internalSensorTemperature;
}
get getMeasuredTemperature() {
return this.props.device.measuredTemperature;
}
get getUseExternalSensors() {
return this.props.device.useExternalSensors;
}
setMode(mode) {
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
//i came to the conclusion that is not possible to set mode.
this.mode = "HEATING";
}
onClickDevice = () => {
const on = !this.turnedOn;
this.props
.saveDevice({ ...this.props.device, on })
.catch((err) => console.error("regular light update error", err));
}; };
this.setMode = this.setMode.bind(this);
this.setTargetTemperature = this.setTargetTemperature.bind(this);
this.setInternalSensorTemperature = this.setInternalSensorTemperature.bind(
this
);
}
//It seems to work //getters
saveTargetTemperature(targetTemperature) { get getMode() {
this.props return this.props.device.mode;
.saveDevice({ ...this.props.device, targetTemperature }) }
.catch((err) => console.error(" update error", err));
get getTargetTemperature() {
return this.props.device.targetTemperature;
}
get getInternalSensorTemperature() {
return this.props.device.internalSensorTemperature;
}
get getMeasuredTemperature() {
return this.props.device.measuredTemperature;
}
get getUseExternalSensors() {
return this.props.device.useExternalSensors;
}
setMode(mode) {
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
console.log(mode);
//i came to the conclusion that is not possible to set mode.
//this.mode = "HEATING";
const turnOn = mode;
this.props
.saveDevice({ ...this.props.device, turnOn })
.catch((err) => console.error("regular light update error", err));
}
onClickDevice = () => {
const on = !this.turnedOn;
this.props
.saveDevice({ ...this.props.device, on })
.catch((err) => console.error("regular light update error", err));
};
//It seems to work
saveTargetTemperature(targetTemperature) {
this.props
.saveDevice({ ...this.props.device, targetTemperature })
.catch((err) => console.error(" update error", err));
}
setTargetTemperature(newTemp) {
if (this.state.timeout) {
clearTimeout(this.state.timeout);
} }
setTargetTemperature(newTemp) { this.setState({
if (this.state.timeout) { newTemp,
clearTimeout(this.state.timeout); timeout: setTimeout(() => {
} this.saveTargetTemperature(newTemp);
this.setState({ this.setState({
newTemp, targetTemperature: this.state.targetTemperature,
timeout: setTimeout(() => { timeout: null,
this.saveTargetTemperature(newTemp);
this.setState({
targetTemperature: this.state.targetTemperature,
timeout: null,
});
}, 100),
}); });
}, 100),
});
}
//I have no idea why it doesn't want to update the temperature
saveInternalSensorTemperature(internalSensorTemperature) {
this.props
.saveDevice({ ...this.props.device, internalSensorTemperature })
.catch((err) => console.error(" update error", err));
}
setInternalSensorTemperature(newTemp) {
if (this.state.timeout) {
clearTimeout(this.state.timeout);
} }
//I have no idea why it doesn't want to update the temperature this.setState({
saveInternalSensorTemperature(internalSensorTemperature) { newTemp,
this.props timeout: setTimeout(() => {
.saveDevice({ ...this.props.device, internalSensorTemperature }) this.saveInternalSensorTemperature(newTemp);
.catch((err) => console.error(" update error", err));
}
setInternalSensorTemperature(newTemp) {
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
this.setState({ this.setState({
newTemp, internalSensorTemperature: this.state.internalSensorTemperature,
timeout: setTimeout(() => { timeout: null,
this.saveInternalSensorTemperature(newTemp);
this.setState({
internalSensorTemperature: this.state
.internalSensorTemperature,
timeout: null,
});
}, 100),
}); });
} }, 100),
});
}
helperMode = () => { helperMode = () => {
//this.setMode("HEATING"); //this.setMode("HEATING");
this.setTargetTemperature(20); this.setTargetTemperature(20);
//this.setInternalSensorTemperature(42); //this.setInternalSensorTemperature(42);
}; };
handleChange = (value) => { handleChange = (value) => {
this.setTargetTemperature(value); this.setTargetTemperature(value);
}; };
render() { render() {
return ( return (
/*<div> /*<div>
<p>"mode is: "{this.props.device.mode}</p> <p>"mode is: "{this.props.device.mode}</p>
<p> <p>
"internalsensortemperature is: " "internalsensortemperature is: "
@ -159,42 +162,42 @@ class Thermostats extends Component {
/> />
</div>*/ </div>*/
<div style={container}> <div style={container}>
<h3 style={deviceName}>{this.props.device.name}</h3> <h3 style={deviceName}>{this.props.device.name}</h3>
<div style={line}></div> <div style={line}></div>
<Checkbox <Checkbox
slider slider
style={toggle} style={toggle}
// TODO Manage the state here // TODO Manage the state hereconsole.log("CHANGE", val.checked)
onChange={(e, val) => console.log("CHANGE", val.checked)} onChange={(e, val) => this.setMode(val.checked)}
/> />
<span style={targetTemperature}> <span style={targetTemperature}>
{this.props.device.targetTemperature}ºC {this.props.device.targetTemperature}ºC
</span> </span>
<input <input
type="range" type="range"
min="0" min="0"
max="40" max="40"
className="slider-css" className="slider-css"
value={this.props.device.targetTemperature} value={this.props.device.targetTemperature}
onChange={(event) => this.handleChange(event.target.value)} onChange={(event) => this.handleChange(event.target.value)}
id="targetTemperature" id="targetTemperature"
/> />
<div style={stateTagContainer}> <div style={stateTagContainer}>
<span style={stateTag}>{this.props.device.mode}</span> <span style={stateTag}>{this.props.device.mode}</span>
</div> </div>
</div> </div>
); );
} }
} }
const mapStateToProps = (state, ownProps) => ({ const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id], device: state.devices[ownProps.id],
}); });
const ThermostatContainer = connect( const ThermostatContainer = connect(
mapStateToProps, mapStateToProps,
RemoteService RemoteService
)(Thermostats); )(Thermostats);
export default ThermostatContainer; export default ThermostatContainer;