almost complete simulation panel

smart-hut/src/components/SimulationPanel.js

@@ -4,6 +4,7 @@ import {
     Divider,
     Image,
     Modal,
+    Button,
   } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { RemoteService } from '../remote';
@@ -265,6 +266,36 @@ class SimulationPanel extends Component {
         value: null,
         error: null,
       };
+      this.updateSliderValues = this.updateSliderValues.bind(this);
+      this.saveChanges = this.saveChanges.bind(this);
+  }
+
+  updateSliderValues(type, data, motion) {
+    console.log(data, motion);
+    this.setState({
+      [type ? 'error' : 'value']: data,
+    });
+  }
+
+  saveChanges(device) {
+    console.log(this.state);
+    const { value } = this.state;
+    const { error } = this.state;
+    if (device.kind === 'sensor') {
+      this.props
+        .updateSimulation(
+          { ...device, typical: value, err: error },
+        )
+        .catch((err) => console.error('Simulation panel update error', err));
+    } else {
+      const val = device.kind === 'motionSensor' ? 'detected' : 'typical';
+      this.props
+        .saveDevice(
+          { ...device, [val]: value, err: error },
+          null,
+        )
+        .catch((err) => console.error('Simulation panel update error', err));
+    }
   }
 
   renderImage(device) {
@@ -320,14 +351,21 @@ class SimulationPanel extends Component {
           </Grid.Row>
           {
             this.props.devices
-            ? this.props.devices.map((e, i) => (
+            ? this.props.devices.map((d, i) => (
-              <Grid.Row>
+              <Grid.Row key={i}>
                 <Grid.Column width={6} textAlign="center">
-                  {this.renderImage(e)}
+                  {this.renderImage(d)}
                   <p style={{ padding: '0.5rem' }}>
-                    {e.name}
+                    {d.name}
                   </p>
                   <Divider />
+                  <Button
+                    color="green"
+                    id={d.id}
+                    onClick={(e, { id }) => this.saveChanges(d, id)}
+                  >
+                    Save
+                  </Button>
                 </Grid.Column>
 
 
@@ -339,10 +377,10 @@ class SimulationPanel extends Component {
                         marginLeft: '30%',
                     }}
                   >
-                    <SimulationPanelSlider error={false} device={e} id={e.id} />
+                    <SimulationPanelSlider update={this.updateSliderValues} error={false} device={d} id={d.id} />
                   </div>
                   {
-                    e.kind === 'motionSensor'
+                    d.kind === 'motionSensor'
                     ? null
                     : (
                       <>
@@ -353,7 +391,7 @@ class SimulationPanel extends Component {
                           marginLeft: '30%',
                       }}
                         >
-                          <SimulationPanelSlider error device={e} id={e.id} />
+                          <SimulationPanelSlider update={this.updateSliderValues} error device={d} id={d.id} />
                         </div>
                       </>
 )

smart-hut/src/components/SimulationPanelSlider.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
- Form, Grid, Header, Checkbox,
+ Form, Grid, Checkbox, Message, Label,
 } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { RemoteService } from '../remote';
@@ -11,16 +11,17 @@ class SimulationPanelSlider extends Component {
       console.log(this.props.device);
       this.state = {
         value: this.internalValue,
-        error: null,
+        error: this.internalValue,
       };
       this.updateSliderValues = this.updateSliderValues.bind(this);
   }
 
   updateSliderValues(data) {
-    console.log(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() {
@@ -47,13 +48,20 @@ class SimulationPanelSlider extends Component {
   }
 
   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 'sensor':
-          return this.props.device.value.toFixed(2);
-        case 'thermostat':
-          return this.props.device.internalSensorTemperature;
         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 '';
       }
@@ -63,30 +71,40 @@ class SimulationPanelSlider extends Component {
     return (
       <Grid columns={2}>
         <Grid.Column as={Form} textAlign="center">
-          <Header as="h2">{this.props.error ? 'Edit error' : 'Edit value'}</Header>
+          <Message>
-          <p
+            <Message.Header>{this.props.error ? 'Edit error' : 'Edit value'}</Message.Header>
-            style={{
+            <p>
-                padding: '0.5rem',
+                Actual value of
-                display: 'block',
+              {' '}
-                marinLeft: 'auto',
-                marginRight: 'auto',
-}}
-          >
               {this.props.device.name}
-,
+:
-            {this.internalValue}
+              {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"
-                    onChange={(e, { checked }) => this.updateSliderValues(checked)}
                     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}
@@ -94,9 +112,10 @@ class SimulationPanelSlider extends Component {
                       onChange={(e, { value }) => this.updateSliderValues(value)}
                       step={this.settings().step}
                       type="range"
-                    value={this.state.value}
+                      value={this.props.error ? this.state.error : this.state.value}
                     />
-)
+                  </>
+                    )
             }
         </Grid.Column>
       </Grid>

smart-hut/src/components/dashboard/AutomationCreationModal.js

@@ -653,6 +653,7 @@ class AutomationSaveModal extends Component {
     }
 
     render() {
+        console.log(this.state.conditionsList);
         return (
           <Modal
             closeIcon

smart-hut/src/remote.js

@@ -540,6 +540,19 @@ export const RemoteService = {
         });
     },
 
+    updateSimulation: (data) => (dispatch) => {
+      const url = `/sensor/${data.id}/simulation`;
+      return Endpoint.put(url, {}, data)
+      .then((res) => {
+        dispatch(actions.deviceSave(res.data));
+        return res.data;
+      })
+      .catch((err) => {
+        console.warn('Update device: ', data, 'error: ', err);
+        throw new RemoteError(['Network error']);
+      });
+    },
+
   fastUpdateAutomation: (automation) => (dispatch) => Endpoint.put('/automation/fast', {}, automation)
         .then((res) => dispatch(actions.automationSave(res.data)))
         .catch((err) => {