2020-04-23 14:55:44 +00:00
|
|
|
import React, { Component } from "react";
|
2020-05-02 09:11:21 +00:00
|
|
|
import { Checkbox, Icon } 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";
|
2020-05-02 09:11:21 +00:00
|
|
|
import Slider from "react-rangeslider";
|
|
|
|
import "react-rangeslider/lib/index.css";
|
|
|
|
|
2020-04-23 14:55:44 +00:00
|
|
|
import {
|
2020-04-24 21:34:01 +00:00
|
|
|
stateTag,
|
|
|
|
container,
|
|
|
|
deviceName,
|
|
|
|
targetTemperature,
|
|
|
|
toggle,
|
|
|
|
stateTagContainer,
|
2020-04-23 14:55:44 +00:00
|
|
|
} from "./ThermostatStyle";
|
2020-04-23 14:02:02 +00:00
|
|
|
|
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-05-02 11:58:02 +00:00
|
|
|
targetTemperature: this.props.device.targetTemperature,
|
|
|
|
mode: this.props.device.mode,
|
|
|
|
measuredTemperature: this.props.device.measuredTemperature,
|
|
|
|
useExternalSensors: this.props.device.useExternalSensors,
|
2020-04-23 14:02:02 +00:00
|
|
|
};
|
2020-05-02 11:58:02 +00:00
|
|
|
console.log(this.state);
|
2020-04-24 21:34:01 +00:00
|
|
|
this.setMode = this.setMode.bind(this);
|
|
|
|
this.setTargetTemperature = this.setTargetTemperature.bind(this);
|
2020-05-02 09:11:21 +00:00
|
|
|
this.setTargetTemperature = this.setTargetTemperature.bind(this);
|
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.
|
2020-05-02 09:11:21 +00:00
|
|
|
// Good job Jacob (Claudio)
|
2020-04-24 21:34:01 +00:00
|
|
|
//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-05-02 09:11:21 +00:00
|
|
|
{ id: this.props.stateOrDevice.id, on },
|
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
|
|
|
};
|
|
|
|
|
|
|
|
saveTargetTemperature(targetTemperature) {
|
2020-05-02 09:11:21 +00:00
|
|
|
const turn = this.props.stateOrDevice.mode !== "OFF";
|
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),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-05-02 09:11:21 +00:00
|
|
|
saveTargetTemperature(targetTemperature) {
|
2020-04-26 11:38:54 +00:00
|
|
|
if (this.props.tab === "Devices") {
|
2020-04-25 13:37:40 +00:00
|
|
|
this.props
|
2020-05-02 09:11:21 +00:00
|
|
|
.saveDevice({
|
|
|
|
...this.props.device,
|
|
|
|
turnOn: this.props.device.mode !== "OFF",
|
|
|
|
targetTemperature,
|
|
|
|
})
|
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,
|
2020-05-02 09:11:21 +00:00
|
|
|
targetTemperature: targetTemperature,
|
2020-04-26 11:38:54 +00:00
|
|
|
},
|
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
|
|
|
}
|
|
|
|
|
2020-05-02 09:11:21 +00:00
|
|
|
setTargetTemperature() {
|
|
|
|
this.saveTargetTemperature(this.state.targetTemperature);
|
2020-04-24 21:34:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
handleChange = (value) => {
|
2020-05-02 09:11:21 +00:00
|
|
|
this.setState({ ...this.state, targetTemperature: value });
|
2020-04-24 21:34:01 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div style={container}>
|
2020-05-02 09:11:21 +00:00
|
|
|
<h3 style={deviceName}>
|
|
|
|
Thermostat
|
|
|
|
<Checkbox
|
2020-05-02 11:58:02 +00:00
|
|
|
checked={
|
|
|
|
this.props.tab === "Devices"
|
|
|
|
? this.props.device.mode !== "OFF"
|
|
|
|
: this.props.stateOrDevice.on
|
|
|
|
}
|
2020-05-02 09:11:21 +00:00
|
|
|
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}
|
2020-05-01 17:55:08 +00:00
|
|
|
className="slider-css"
|
2020-05-02 09:11:21 +00:00
|
|
|
value={this.state.targetTemperature}
|
|
|
|
onChange={(event) => this.handleChange(event)}
|
|
|
|
onChangeComplete={() => this.setTargetTemperature()}
|
2020-05-01 17:55:08 +00:00
|
|
|
/>
|
|
|
|
) : null}
|
2020-04-24 21:34:01 +00:00
|
|
|
<div style={stateTagContainer}>
|
2020-05-02 11:58:02 +00:00
|
|
|
<span style={stateTag}>
|
|
|
|
{this.props.tab === "Devices"
|
|
|
|
? this.props.device.mode
|
|
|
|
: this.props.stateOrDevice.on
|
|
|
|
? "WILL TURN ON"
|
|
|
|
: "WILL TURN OFF"}
|
|
|
|
</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;
|