import React, { Component } from "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 mapStateToProps from "../../../deviceProps"; import { stateTag, container, deviceName, targetTemperature, toggle, stateTagContainer, } from "./ThermostatStyle"; class Thermostats extends Component { constructor(props) { super(props); this.state = { targetTemperature: this.props.device.targetTemperature, mode: this.props.device.mode, measuredTemperature: this.props.device.measuredTemperature, useExternalSensors: this.props.device.useExternalSensors, }; this.setMode = this.setMode.bind(this); this.setTargetTemperature = this.setTargetTemperature.bind(this); } setMode(mode) { if (this.state.timeout) { clearTimeout(this.state.timeout); } //i came to the conclusion that is not possible to set mode. // Good job Jacob (Claudio) //this.mode = "HEATING"; const turnOn = mode; if (this.props.tab === "Devices") { this.props .saveDevice({ ...this.props.stateOrDevice, turnOn }) .catch((err) => console.error("thermostat update error", err)); } else { this.props.updateState( { id: this.props.stateOrDevice.id, on: turnOn }, this.props.stateOrDevice.kind ); } } onClickDevice = () => { const on = !this.turnedOn; if (this.props.tab === "Devices") { this.props .saveDevice({ ...this.props.stateOrDevice, on }) .catch((err) => console.error("thermostat update error", err)); } else { this.props.updateState( { id: this.props.stateOrDevice.id, on }, this.props.stateOrDevice.kind ); } }; saveTargetTemperature(targetTemperature) { const turn = this.props.stateOrDevice.mode !== "OFF"; if (this.props.tab === "Devices") { this.props .saveDevice({ ...this.props.stateOrDevice, targetTemperature, turnOn: turn, }) .catch((err) => console.error("thermostat update error", err)); } else { this.props.updateState( { id: this.props.stateOrDevice.id, targetTemperature: targetTemperature, }, this.props.stateOrDevice.kind ); } } setTargetTemperature() { this.saveTargetTemperature(this.state.targetTemperature); } handleChange = (value) => { this.setState({ ...this.state, targetTemperature: value }); }; render() { return (

Thermostat this.setMode(val.checked)} />


{" "} {this.props.device.measuredTemperature} ºC
{" "} {this.props.device.targetTemperature.toFixed(1)} ºC
{this.props.tab === "Devices" ? ( this.handleChange(event)} onChangeComplete={() => this.setTargetTemperature()} /> ) : null}
{this.props.tab !== "Scenes" ? this.props.device.mode : this.props.stateOrDevice.on ? "WILL TURN ON" : "WILL TURN OFF"}
); } } const ThermostatContainer = connect( mapStateToProps, RemoteService )(Thermostats); export default ThermostatContainer;