frontend/smart-hut/src/components/dashboard/devices/Thermostats.js

import React, { Component } from "react";
import { Checkbox } from "semantic-ui-react";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
import "./Thermostat.css";
import {
    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));
    };

    //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);
        }

        this.setState({
            newTemp,
            timeout: setTimeout(() => {
                this.saveTargetTemperature(newTemp);
                this.setState({
                    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);
        }

        this.setState({
            newTemp,
            timeout: setTimeout(() => {
                this.saveInternalSensorTemperature(newTemp);
                this.setState({
                    internalSensorTemperature: this.state
                        .internalSensorTemperature,
                    timeout: null,
                });
            }, 100),
        });
    }

    helperMode = () => {
        //this.setMode("HEATING");
        this.setTargetTemperature(20);
        //this.setInternalSensorTemperature(42);
    };

    handleChange = (value) => {
        this.setTargetTemperature(value);
    };

    render() {
        return (
            /*<div>
                <p>"mode is: "{this.props.device.mode}</p>
                <p>
                    "internalsensortemperature is: "
                    {this.props.device.internalSensorTemperature}
                </p>
                <p>
                    "targetTemperature is: "
                    {this.props.device.targetTemperature}
                </p>
                <p>
                    "measuredtemperature is: "
                    {this.props.device.measuredTemperature}
                </p>
                <p>{this.props.device.on}</p>
                <input
                    type="submit"
                    value="change targetTemperature"
                    onClick={this.helperMode}
                />
                <input
                    type="submit"
                    value="robe"
                    onClick={this.onClickDevice}
                />
            </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)}
                />

                <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],
});

const ThermostatContainer = connect(
    mapStateToProps,
    RemoteService
)(Thermostats);
export default ThermostatContainer;