191 lines
5.4 KiB
JavaScript
191 lines
5.4 KiB
JavaScript
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,
|
|
};
|
|
this.setMode = this.setMode.bind(this);
|
|
this.setTargetTemperature = this.setTargetTemperature.bind(this);
|
|
}
|
|
|
|
setMode(mode) {
|
|
// 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,
|
|
},
|
|
this.props.stateOrDevice.kind,
|
|
);
|
|
}
|
|
}
|
|
|
|
setTargetTemperature() {
|
|
this.saveTargetTemperature(this.state.targetTemperature);
|
|
}
|
|
|
|
handleChange = (value) => {
|
|
this.setState({ ...this.state, targetTemperature: value });
|
|
};
|
|
|
|
handleCheckbox = (val) => {
|
|
const useExternalSensors = val;
|
|
const turnOn = this.props.stateOrDevice.mode !== 'OFF';
|
|
if (this.props.tab === 'Devices') {
|
|
this.props
|
|
.saveDevice({ ...this.props.stateOrDevice, useExternalSensors, turnOn })
|
|
.catch((err) => console.error('thermostat update error', err));
|
|
}
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div style={container}>
|
|
<h3 style={deviceName}>
|
|
Thermostat
|
|
<Checkbox
|
|
disabled={this.props.disabled}
|
|
checked={
|
|
this.props.tab === 'Devices'
|
|
? this.props.device.mode !== 'OFF'
|
|
: this.props.stateOrDevice.on
|
|
}
|
|
toggle
|
|
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.props.device.targetTemperature.toFixed(1)}
|
|
{' '}
|
|
ºC
|
|
</div>
|
|
{this.props.tab === 'Devices' ? (
|
|
<>
|
|
<Slider
|
|
disabled={this.props.disabled}
|
|
min={10}
|
|
max={30}
|
|
step={0.1}
|
|
tooltip={false}
|
|
className="slider-css"
|
|
value={this.state.targetTemperature}
|
|
onChange={(event) => this.handleChange(event)}
|
|
onChangeComplete={() => this.setTargetTemperature()}
|
|
/>
|
|
<Checkbox
|
|
style={{ padding: '0 .7rem' }}
|
|
label="Use external sensors"
|
|
name="external"
|
|
toggle
|
|
checked={this.props.stateOrDevice.useExternalSensors}
|
|
disabled={!this.props.tempSensorsInRoom}
|
|
onChange={(e, val) => this.handleCheckbox(val.checked)}
|
|
/>
|
|
</>
|
|
) : null}
|
|
|
|
<div style={stateTagContainer}>
|
|
<span style={stateTag}>
|
|
{this.props.tab !== 'Scenes'
|
|
? this.props.device.mode
|
|
: this.props.stateOrDevice.on
|
|
? 'WILL TURN ON'
|
|
: 'WILL TURN OFF'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps2 = (state, ownProps) => ({
|
|
...mapStateToProps(state, ownProps),
|
|
get tempSensorsInRoom() {
|
|
if (state.active.activeTab !== 'Devices') return false;
|
|
const room = state.rooms[state.devices[ownProps.id].roomId];
|
|
if (!room) return false;
|
|
const deviceIds = room.devices;
|
|
const devices = [...deviceIds].map((id) => state.devices[id]);
|
|
const sensors = devices.filter(
|
|
(d) => d.kind === 'sensor' && d.sensor === 'TEMPERATURE',
|
|
);
|
|
return sensors.length > 0;
|
|
},
|
|
});
|
|
|
|
const ThermostatContainer = connect(
|
|
mapStateToProps2,
|
|
RemoteService,
|
|
)(Thermostats);
|
|
export default ThermostatContainer;
|