frontend/smart-hut/src/components/SimulationPanelSlider.js

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;