132 lines
3.9 KiB
JavaScript
132 lines
3.9 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {
|
|
Form, Grid, Checkbox, Message, Label,
|
|
} from 'semantic-ui-react';
|
|
import { connect } from 'react-redux';
|
|
import { RemoteService } from '../remote';
|
|
|
|
class SimulationPanelSlider extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
console.log(this.props.device);
|
|
this.state = {
|
|
value: this.internalValue,
|
|
error: this.internalValue,
|
|
};
|
|
this.props.update(this.props.error, this.internalValue);
|
|
this.updateSliderValues = this.updateSliderValues.bind(this);
|
|
}
|
|
|
|
updateSliderValues(data) {
|
|
this.setState({
|
|
[this.props.error ? 'error' : 'value']: data,
|
|
});
|
|
console.log(this.state);
|
|
this.props.update(this.props.error, data, this.props.device.kind === 'motionSensor');
|
|
}
|
|
|
|
settings() {
|
|
let max;
|
|
let step;
|
|
switch (this.props.device.kind) {
|
|
case 'sensor':
|
|
if (this.props.device.sensorType === 'LIGHT') {
|
|
max = this.props.error ? 1000 : 15000;
|
|
step = 10;
|
|
} else {
|
|
max = 100;
|
|
step = 1;
|
|
}
|
|
break;
|
|
case 'thermostat':
|
|
max = 100;
|
|
step = 1;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return { max, step };
|
|
}
|
|
|
|
get internalValue() {
|
|
if (this.props.device.kind === 'motionSensor') {
|
|
return this.props.device.detected;
|
|
}
|
|
return this.props.error ? this.props.device.err : this.props.device.typical.toFixed(2);
|
|
}
|
|
|
|
get getValue() {
|
|
switch (this.props.device.kind) {
|
|
case 'motionSensor':
|
|
return this.props.device.detected;
|
|
case 'thermostat':
|
|
return this.props.device.internalSensorTemperature;
|
|
case 'sensor':
|
|
return this.props.device.value.toFixed(2);
|
|
default:
|
|
return '';
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Grid columns={2}>
|
|
<Grid.Column as={Form} textAlign="center">
|
|
<Message>
|
|
<Message.Header>{this.props.error ? 'Edit error' : 'Edit value'}</Message.Header>
|
|
<p>
|
|
Actual value of
|
|
{' '}
|
|
{this.props.device.name}
|
|
:
|
|
{this.props.device.kind === 'motionSensor'
|
|
? this.getValue ? 'on' : 'off' : this.getValue}
|
|
</p>
|
|
<p>
|
|
{this.props.error ? 'error' : 'typical value'}
|
|
{' '}
|
|
:
|
|
{this.props.device.kind === 'motionSensor'
|
|
? this.internalValue ? 'on' : 'off' : this.internalValue}
|
|
</p>
|
|
</Message>
|
|
{
|
|
this.props.device.kind === 'motionSensor'
|
|
? (
|
|
<Checkbox
|
|
toggle
|
|
name="value"
|
|
checked={this.state.value}
|
|
onChange={(e, { checked }) => this.updateSliderValues(checked)}
|
|
/>
|
|
)
|
|
: (
|
|
<>
|
|
<Label>
|
|
Value :
|
|
<Label.Detail>{this.props.error ? this.state.error : this.state.value}</Label.Detail>
|
|
</Label>
|
|
<Form.Input
|
|
min={0}
|
|
max={this.settings().max}
|
|
name="value"
|
|
onChange={(e, { value }) => this.updateSliderValues(value)}
|
|
step={this.settings().step}
|
|
type="range"
|
|
value={this.props.error ? this.state.error : this.state.value}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
</Grid.Column>
|
|
</Grid>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
device: state.devices[ownProps.id],
|
|
});
|
|
const SimulationPanelSliderContainer = connect(mapStateToProps, RemoteService)(SimulationPanelSlider);
|
|
export default SimulationPanelSliderContainer;
|