fix turn on/off thermostat
This commit is contained in:
britea
parent
3ca1f519b6
commit
6ecfe9653d
1 changed files with 145 additions and 142 deletions
|
|
@ -4,135 +4,138 @@ import { RemoteService } from "../../../remote";
|
|||
import { connect } from "react-redux";
|
||||
import "./Thermostat.css";
|
||||
import {
|
||||
stateTag,
|
||||
container,
|
||||
deviceName,
|
||||
targetTemperature,
|
||||
slider,
|
||||
line,
|
||||
toggle,
|
||||
stateTagContainer,
|
||||
stateTag,
|
||||
container,
|
||||
deviceName,
|
||||
targetTemperature,
|
||||
slider,
|
||||
line,
|
||||
toggle,
|
||||
stateTagContainer,
|
||||
} from "./ThermostatStyle";
|
||||
|
||||
//not quite working yet
|
||||
class Thermostats extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
targetTemperature: this.props.device.targetTemperature,
|
||||
internalSensorTemperature: this.props.device
|
||||
.internalSensorTemperature,
|
||||
mode: this.props.device.mode,
|
||||
measuredTemperature: this.props.device.measuredTemperature,
|
||||
useExternalSensors: this.props.device.useExternalSensors,
|
||||
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));
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
targetTemperature: this.props.device.targetTemperature,
|
||||
internalSensorTemperature: this.props.device.internalSensorTemperature,
|
||||
mode: this.props.device.mode,
|
||||
measuredTemperature: this.props.device.measuredTemperature,
|
||||
useExternalSensors: this.props.device.useExternalSensors,
|
||||
timeout: null,
|
||||
};
|
||||
this.setMode = this.setMode.bind(this);
|
||||
this.setTargetTemperature = this.setTargetTemperature.bind(this);
|
||||
this.setInternalSensorTemperature = this.setInternalSensorTemperature.bind(
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
//It seems to work
|
||||
saveTargetTemperature(targetTemperature) {
|
||||
this.props
|
||||
.saveDevice({ ...this.props.device, targetTemperature })
|
||||
.catch((err) => console.error(" update error", err));
|
||||
//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);
|
||||
}
|
||||
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) {
|
||||
if (this.state.timeout) {
|
||||
clearTimeout(this.state.timeout);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
newTemp,
|
||||
timeout: setTimeout(() => {
|
||||
this.saveTargetTemperature(newTemp);
|
||||
this.setState({
|
||||
newTemp,
|
||||
timeout: setTimeout(() => {
|
||||
this.saveTargetTemperature(newTemp);
|
||||
this.setState({
|
||||
targetTemperature: this.state.targetTemperature,
|
||||
timeout: null,
|
||||
});
|
||||
}, 100),
|
||||
targetTemperature: this.state.targetTemperature,
|
||||
timeout: null,
|
||||
});
|
||||
}, 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
|
||||
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);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
newTemp,
|
||||
timeout: setTimeout(() => {
|
||||
this.saveInternalSensorTemperature(newTemp);
|
||||
this.setState({
|
||||
newTemp,
|
||||
timeout: setTimeout(() => {
|
||||
this.saveInternalSensorTemperature(newTemp);
|
||||
this.setState({
|
||||
internalSensorTemperature: this.state
|
||||
.internalSensorTemperature,
|
||||
timeout: null,
|
||||
});
|
||||
}, 100),
|
||||
internalSensorTemperature: this.state.internalSensorTemperature,
|
||||
timeout: null,
|
||||
});
|
||||
}
|
||||
}, 100),
|
||||
});
|
||||
}
|
||||
|
||||
helperMode = () => {
|
||||
//this.setMode("HEATING");
|
||||
this.setTargetTemperature(20);
|
||||
//this.setInternalSensorTemperature(42);
|
||||
};
|
||||
helperMode = () => {
|
||||
//this.setMode("HEATING");
|
||||
this.setTargetTemperature(20);
|
||||
//this.setInternalSensorTemperature(42);
|
||||
};
|
||||
|
||||
handleChange = (value) => {
|
||||
this.setTargetTemperature(value);
|
||||
};
|
||||
handleChange = (value) => {
|
||||
this.setTargetTemperature(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
/*<div>
|
||||
render() {
|
||||
return (
|
||||
/*<div>
|
||||
<p>"mode is: "{this.props.device.mode}</p>
|
||||
<p>
|
||||
"internalsensortemperature is: "
|
||||
|
|
@ -159,42 +162,42 @@ class Thermostats extends Component {
|
|||
/>
|
||||
</div>*/
|
||||
|
||||
<div style={container}>
|
||||
<h3 style={deviceName}>{this.props.device.name}</h3>
|
||||
<div style={line}></div>
|
||||
<Checkbox
|
||||
slider
|
||||
style={toggle}
|
||||
// TODO Manage the state here
|
||||
onChange={(e, val) => console.log("CHANGE", val.checked)}
|
||||
/>
|
||||
<div style={container}>
|
||||
<h3 style={deviceName}>{this.props.device.name}</h3>
|
||||
<div style={line}></div>
|
||||
<Checkbox
|
||||
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>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="40"
|
||||
className="slider-css"
|
||||
value={this.props.device.targetTemperature}
|
||||
onChange={(event) => this.handleChange(event.target.value)}
|
||||
id="targetTemperature"
|
||||
/>
|
||||
<div style={stateTagContainer}>
|
||||
<span style={stateTag}>{this.props.device.mode}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<span style={targetTemperature}>
|
||||
{this.props.device.targetTemperature}ºC
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="40"
|
||||
className="slider-css"
|
||||
value={this.props.device.targetTemperature}
|
||||
onChange={(event) => this.handleChange(event.target.value)}
|
||||
id="targetTemperature"
|
||||
/>
|
||||
<div style={stateTagContainer}>
|
||||
<span style={stateTag}>{this.props.device.mode}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
device: state.devices[ownProps.id],
|
||||
device: state.devices[ownProps.id],
|
||||
});
|
||||
|
||||
const ThermostatContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
)(Thermostats);
|
||||
export default ThermostatContainer;
|
||||
|
|
|
|||
Loading…
Reference in a new issue