fixed simulation panel

smart-hut/src/components/SimulationPanel.js

@@ -265,22 +265,6 @@ class SimulationPanel extends Component {
         value: null,
         error: null,
       };
-
-      this.updateSliderValues = this.updateSliderValues.bind(this);
-  }
-
-  updateSliderValues(type, data) {
-    let content;
-    if (type === 'value') {
-      content = {
-        value: data,
-      };
-    } else {
-      content = {
-        error: data,
-      };
-    }
-    this.setState(content);
   }
 
   renderImage(device) {
@@ -355,8 +339,13 @@ class SimulationPanel extends Component {
                         marginLeft: '30%',
                     }}
                   >
-                    <SimulationPanelSlider update={this.updateSliderValues} error={false} device={e} id={e.id} />
+                    <SimulationPanelSlider error={false} device={e} id={e.id} />
                   </div>
+                  {
+                    e.kind === 'motionSensor'
+                    ? null
+                    : (
+                      <>
                         <Divider />
                         <div
                           style={{
@@ -364,8 +353,11 @@ class SimulationPanel extends Component {
                           marginLeft: '30%',
                       }}
                         >
-                    <SimulationPanelSlider update={this.updateSliderValues} error device={e} id={e.id} />
+                          <SimulationPanelSlider error device={e} id={e.id} />
                         </div>
+                      </>
+)
+                  }
                 </Grid.Column>
               </Grid.Row>
             ))

smart-hut/src/components/SimulationPanelSlider.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
- Form, Grid, Header,
+ Form, Grid, Header, Checkbox,
 } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { RemoteService } from '../remote';
@@ -9,6 +9,41 @@ class SimulationPanelSlider extends Component {
   constructor(props) {
       super(props);
       console.log(this.props.device);
+      this.state = {
+        value: this.internalValue,
+        error: null,
+      };
+      this.updateSliderValues = this.updateSliderValues.bind(this);
+  }
+
+  updateSliderValues(data) {
+    console.log(data);
+    this.setState({
+        [this.props.error ? 'error' : 'value']: data,
+    });
+  }
+
+  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() {
@@ -18,12 +53,12 @@ class SimulationPanelSlider extends Component {
         case 'thermostat':
           return this.props.device.internalSensorTemperature;
         case 'motionSensor':
-          return this.props.device.detected ? 'on' : 'off';
+          return this.props.device.detected;
+        default:
+            return '';
       }
   }
 
-  handleChange = (e, { name, value }) => this.setState({ [name]: value })
-
   render() {
     return (
       <Grid columns={2}>
@@ -41,16 +76,28 @@ class SimulationPanelSlider extends Component {
 ,
             {this.internalValue}
           </p>
-
+          {
+                this.props.device.kind === 'motionSensor'
+                ? (
+                  <Checkbox
+                    toggle
+                    name="value"
+                    onChange={(e, { checked }) => this.updateSliderValues(checked)}
+                    checked={this.state.value}
+                  />
+)
+                : (
                   <Form.Input
                     min={0}
-            max={15000}
+                    max={this.settings().max}
                     name="value"
-            onChange={this.handleChange}
+                    onChange={(e, { value }) => this.updateSliderValues(value)}
-            step={5}
+                    step={this.settings().step}
                     type="range"
-            value={this.props.device.value}
+                    value={this.state.value}
                   />
+)
+            }
         </Grid.Column>
       </Grid>
     );

smart-hut/src/components/dashboard/devices/VideocamModal.js

@@ -1,21 +1,5 @@
 import React from 'react';
 import Modal from 'react-modal';
-import { Button } from 'semantic-ui-react';
-
-const modal = {
-  opacity: 0,
-  alignItems: 'center',
-  display: 'flex',
-  justifyContent: 'center',
-  transition: 'opacity 200ms ease-in-out',
-  background: 'grey',
-  color: 'white',
-  maxWidth: '2rem',
-  outline: 'none',
-  padding: '2rem',
-  textAlign: 'center',
-  maxHeight: '50vh',
-};
 
 const VideocamModal = (props) => (
   <Modal