2020-04-23 14:55:44 +00:00
|
|
|
import React, { Component } from "react";
|
|
|
|
import { Checkbox } from "semantic-ui-react";
|
2020-04-23 14:02:02 +00:00
|
|
|
import { RemoteService } from "../../../remote";
|
|
|
|
import { connect } from "react-redux";
|
2020-04-23 14:55:44 +00:00
|
|
|
import "./Thermostat.css";
|
|
|
|
import {
|
2020-04-24 21:34:01 +00:00
|
|
|
stateTag,
|
|
|
|
container,
|
|
|
|
deviceName,
|
|
|
|
targetTemperature,
|
|
|
|
slider,
|
|
|
|
line,
|
|
|
|
toggle,
|
|
|
|
stateTagContainer,
|
2020-04-23 14:55:44 +00:00
|
|
|
} from "./ThermostatStyle";
|
2020-04-23 14:02:02 +00:00
|
|
|
|
|
|
|
//not quite working yet
|
2020-04-23 14:55:44 +00:00
|
|
|
class Thermostats extends Component {
|
2020-04-24 21:34:01 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
2020-04-25 15:27:56 +00:00
|
|
|
targetTemperature: this.props.stateOrDevice.targetTemperature,
|
2020-04-26 11:38:54 +00:00
|
|
|
internalSensorTemperature: this.props.stateOrDevice
|
|
|
|
.internalSensorTemperature,
|
2020-04-25 15:27:56 +00:00
|
|
|
mode: this.props.stateOrDevice.mode,
|
|
|
|
measuredTemperature: this.props.stateOrDevice.measuredTemperature,
|
|
|
|
useExternalSensors: this.props.stateOrDevice.useExternalSensors,
|
2020-04-24 21:34:01 +00:00
|
|
|
timeout: null,
|
2020-04-23 14:02:02 +00:00
|
|
|
};
|
2020-04-24 21:34:01 +00:00
|
|
|
this.setMode = this.setMode.bind(this);
|
|
|
|
this.setTargetTemperature = this.setTargetTemperature.bind(this);
|
|
|
|
this.setInternalSensorTemperature = this.setInternalSensorTemperature.bind(
|
|
|
|
this
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
//getters
|
|
|
|
get getMode() {
|
2020-04-25 15:27:56 +00:00
|
|
|
return this.props.stateOrDevice.mode;
|
2020-04-24 21:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
get getTargetTemperature() {
|
2020-04-25 15:27:56 +00:00
|
|
|
return this.props.stateOrDevice.targetTemperature;
|
2020-04-24 21:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
get getInternalSensorTemperature() {
|
2020-04-25 15:27:56 +00:00
|
|
|
return this.props.stateOrDevice.internalSensorTemperature;
|
2020-04-24 21:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
get getMeasuredTemperature() {
|
2020-04-25 15:27:56 +00:00
|
|
|
return this.props.stateOrDevice.measuredTemperature;
|
2020-04-24 21:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
get getUseExternalSensors() {
|
2020-04-25 15:27:56 +00:00
|
|
|
return this.props.stateOrDevice.useExternalSensors;
|
2020-04-24 21:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
2020-04-27 17:24:21 +00:00
|
|
|
console.log(turnOn);
|
2020-04-26 11:38:54 +00:00
|
|
|
if (this.props.tab === "Devices") {
|
2020-04-25 13:37:40 +00:00
|
|
|
this.props
|
2020-04-26 11:38:54 +00:00
|
|
|
.saveDevice({ ...this.props.stateOrDevice, turnOn })
|
|
|
|
.catch((err) => console.error("thermostat update error", err));
|
|
|
|
} else {
|
|
|
|
this.props.updateState(
|
2020-05-01 17:55:08 +00:00
|
|
|
{ id: this.props.stateOrDevice.id, on: turnOn },
|
2020-04-27 13:47:59 +00:00
|
|
|
this.props.stateOrDevice.kind
|
2020-04-26 11:38:54 +00:00
|
|
|
);
|
2020-04-25 13:37:40 +00:00
|
|
|
}
|
2020-04-24 21:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
onClickDevice = () => {
|
|
|
|
const on = !this.turnedOn;
|
2020-04-26 11:38:54 +00:00
|
|
|
if (this.props.tab === "Devices") {
|
2020-04-25 13:37:40 +00:00
|
|
|
this.props
|
2020-04-26 11:38:54 +00:00
|
|
|
.saveDevice({ ...this.props.stateOrDevice, on })
|
|
|
|
.catch((err) => console.error("thermostat update error", err));
|
|
|
|
} else {
|
|
|
|
this.props.updateState(
|
2020-04-27 13:47:59 +00:00
|
|
|
{ id: this.props.stateOrDevice.id, on: on },
|
|
|
|
this.props.stateOrDevice.kind
|
2020-04-26 11:38:54 +00:00
|
|
|
);
|
2020-04-25 13:37:40 +00:00
|
|
|
}
|
2020-04-24 21:34:01 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
//It seems to work
|
|
|
|
saveTargetTemperature(targetTemperature) {
|
2020-04-27 17:24:21 +00:00
|
|
|
const turn = this.props.stateOrDevice.mode !== "OFF" ? true : false;
|
2020-04-26 11:38:54 +00:00
|
|
|
if (this.props.tab === "Devices") {
|
2020-04-25 13:37:40 +00:00
|
|
|
this.props
|
2020-04-27 17:24:21 +00:00
|
|
|
.saveDevice({
|
|
|
|
...this.props.stateOrDevice,
|
|
|
|
targetTemperature,
|
|
|
|
turnOn: turn,
|
|
|
|
})
|
2020-04-26 11:38:54 +00:00
|
|
|
.catch((err) => console.error("thermostat update error", err));
|
|
|
|
} else {
|
|
|
|
this.props.updateState(
|
2020-04-27 13:47:59 +00:00
|
|
|
{
|
|
|
|
id: this.props.stateOrDevice.id,
|
|
|
|
targetTemperature: targetTemperature,
|
|
|
|
},
|
|
|
|
this.props.stateOrDevice.kind
|
2020-04-26 11:38:54 +00:00
|
|
|
);
|
2020-04-25 13:37:40 +00:00
|
|
|
}
|
2020-04-24 21:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
setTargetTemperature(newTemp) {
|
|
|
|
if (this.state.timeout) {
|
|
|
|
clearTimeout(this.state.timeout);
|
2020-04-23 14:02:02 +00:00
|
|
|
}
|
|
|
|
|
2020-04-24 21:34:01 +00:00
|
|
|
this.setState({
|
|
|
|
newTemp,
|
|
|
|
timeout: setTimeout(() => {
|
|
|
|
this.saveTargetTemperature(newTemp);
|
2020-04-23 14:02:02 +00:00
|
|
|
this.setState({
|
2020-04-24 21:34:01 +00:00
|
|
|
targetTemperature: this.state.targetTemperature,
|
|
|
|
timeout: null,
|
2020-04-23 14:02:02 +00:00
|
|
|
});
|
2020-04-24 21:34:01 +00:00
|
|
|
}, 100),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//I have no idea why it doesn't want to update the temperature
|
|
|
|
saveInternalSensorTemperature(internalSensorTemperature) {
|
2020-04-26 11:38:54 +00:00
|
|
|
if (this.props.tab === "Devices") {
|
2020-04-25 13:37:40 +00:00
|
|
|
this.props
|
2020-04-26 11:38:54 +00:00
|
|
|
.saveDevice({ ...this.props.device, internalSensorTemperature })
|
|
|
|
.catch((err) => console.error("thermostat update error", err));
|
|
|
|
} else {
|
|
|
|
this.props.updateState(
|
|
|
|
{
|
2020-04-27 13:47:59 +00:00
|
|
|
id: this.props.stateOrDevice.id,
|
2020-04-26 11:38:54 +00:00
|
|
|
internalSensorTemperature: internalSensorTemperature,
|
|
|
|
},
|
2020-04-27 13:47:59 +00:00
|
|
|
this.props.stateOrDevice.kind
|
2020-04-26 11:38:54 +00:00
|
|
|
);
|
2020-04-25 13:37:40 +00:00
|
|
|
}
|
2020-04-24 21:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
setInternalSensorTemperature(newTemp) {
|
|
|
|
if (this.state.timeout) {
|
|
|
|
clearTimeout(this.state.timeout);
|
2020-04-23 14:02:02 +00:00
|
|
|
}
|
|
|
|
|
2020-04-24 21:34:01 +00:00
|
|
|
this.setState({
|
|
|
|
newTemp,
|
|
|
|
timeout: setTimeout(() => {
|
|
|
|
this.saveInternalSensorTemperature(newTemp);
|
2020-04-23 14:02:02 +00:00
|
|
|
this.setState({
|
2020-04-24 21:34:01 +00:00
|
|
|
internalSensorTemperature: this.state.internalSensorTemperature,
|
|
|
|
timeout: null,
|
2020-04-23 14:02:02 +00:00
|
|
|
});
|
2020-04-24 21:34:01 +00:00
|
|
|
}, 100),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
helperMode = () => {
|
|
|
|
//this.setMode("HEATING");
|
|
|
|
this.setTargetTemperature(20);
|
|
|
|
//this.setInternalSensorTemperature(42);
|
|
|
|
};
|
|
|
|
|
|
|
|
handleChange = (value) => {
|
|
|
|
this.setTargetTemperature(value);
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div style={container}>
|
2020-04-25 15:27:56 +00:00
|
|
|
<h3 style={deviceName}>{this.props.stateOrDevice.name}</h3>
|
2020-04-24 21:34:01 +00:00
|
|
|
<div style={line}></div>
|
|
|
|
<Checkbox
|
2020-04-27 17:24:21 +00:00
|
|
|
checked={this.props.stateOrDevice.mode !== "OFF" ? true : false}
|
2020-04-24 21:34:01 +00:00
|
|
|
slider
|
|
|
|
style={toggle}
|
|
|
|
// TODO Manage the state hereconsole.log("CHANGE", val.checked)
|
|
|
|
onChange={(e, val) => this.setMode(val.checked)}
|
|
|
|
/>
|
|
|
|
<span style={targetTemperature}>
|
2020-05-01 17:55:08 +00:00
|
|
|
{this.props.device.targetTemperature}ºC
|
2020-04-24 21:34:01 +00:00
|
|
|
</span>
|
2020-05-01 17:55:08 +00:00
|
|
|
{this.props.activeTab === "Devices" ? (
|
|
|
|
<input
|
|
|
|
type="range"
|
|
|
|
min="0"
|
|
|
|
max="40"
|
|
|
|
className="slider-css"
|
|
|
|
value={this.props.device.targetTemperature}
|
|
|
|
onChange={(event) => this.handleChange(event.target.value)}
|
|
|
|
id="targetTemperature"
|
|
|
|
/>
|
|
|
|
) : null}
|
2020-04-24 21:34:01 +00:00
|
|
|
<div style={stateTagContainer}>
|
2020-04-25 15:27:56 +00:00
|
|
|
<span style={stateTag}>{this.props.stateOrDevice.mode}</span>
|
2020-04-24 21:34:01 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2020-04-23 14:02:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
2020-04-26 11:38:54 +00:00
|
|
|
get stateOrDevice() {
|
|
|
|
if (state.active.activeTab === "Devices") {
|
2020-04-25 15:27:56 +00:00
|
|
|
return state.devices[ownProps.id];
|
2020-04-26 11:38:54 +00:00
|
|
|
} else {
|
|
|
|
return state.sceneStates[ownProps.id];
|
2020-04-25 15:27:56 +00:00
|
|
|
}
|
|
|
|
},
|
2020-05-01 17:55:08 +00:00
|
|
|
get device() {
|
|
|
|
if (state.active.activeTab === "Devices") {
|
|
|
|
return state.devices[ownProps.id];
|
|
|
|
} else {
|
|
|
|
return state.devices[state.sceneStates[ownProps.id].deviceId];
|
|
|
|
}
|
|
|
|
},
|
|
|
|
activeTab: state.activeTab,
|
2020-04-23 14:02:02 +00:00
|
|
|
});
|
|
|
|
|
2020-04-23 14:55:44 +00:00
|
|
|
const ThermostatContainer = connect(
|
2020-04-24 21:34:01 +00:00
|
|
|
mapStateToProps,
|
|
|
|
RemoteService
|
2020-04-23 14:55:44 +00:00
|
|
|
)(Thermostats);
|
|
|
|
export default ThermostatContainer;
|