initial simulation panel

smart-hut/src/components/HeaderController.js

@@ -25,7 +25,7 @@ const IconHomeImage = () => (
 
 const TitleImage = () => <Image src="sm_logo.png" size="medium" centered />;
 
-export class MyHeader extends React.Component {
+class MyHeader extends React.Component {
   constructor(props) {
     super(props);
     this.state = { simulationPanel: undefined };

smart-hut/src/components/SimulationPanel.js

@@ -1,26 +1,15 @@
-import React from 'react';
+import React, { Component } from 'react';
-import Modal from 'react-modal';
 import {
     Grid,
     Divider,
-    Button,
-    Label,
-    Responsive,
-    Checkbox,
     Image,
-    GridColumn,
+    Modal,
-    Header,
-    Segment,
   } from 'semantic-ui-react';
-import SliderTemperature from './SliderTemperature.js';
+import { connect } from 'react-redux';
-import SliderTempRange from './SliderTempRange.js';
+import { RemoteService } from '../remote';
-import SliderHumidty from './SliderHumidity.js';
+import SimulationPanelSlider from './SimulationPanelSlider.js';
-import SliderLight from './SliderLight.js';
-import SliderLightRange from './SliderLightRange.js';
-import SliderMotion from './SliderMotion.js';
-import DropdownSimulation from './DropdownSimulation.js';
-
 
+/*
 const SimulationPanel = (props) => (
   <Modal
     isOpen={!!props.simulationPanel}
@@ -56,14 +45,14 @@ const SimulationPanel = (props) => (
     {props.simulationPanel}
     <Grid celled>
 
-      {/* TITLE */}
+      {/* TITLE }
       <Grid.Row textAlign="center">
         <h1 style={{ color: 'white', padding: '1rem', fontFamily: 'Arial' }}>
         Welcome in the Simulation Panel
         </h1>
       </Grid.Row>
 
-      {/* TEMPERATURE SENSOR */}
+      {/* TEMPERATURE SENSOR }
       <Grid.Row>
         <Grid.Column width={6} textAlign="center">
           <Divider
@@ -99,7 +88,7 @@ const SimulationPanel = (props) => (
                 marginLeft: '30%',
             }}
           >
-            <SliderTemperature />
+            <SimulationPanelSlider />
           </div>
           <Divider />
           <div
@@ -108,12 +97,12 @@ const SimulationPanel = (props) => (
               marginLeft: '30%',
           }}
           >
-            <SliderTempRange />
+            <SimulationPanelSlider />
           </div>
         </Grid.Column>
       </Grid.Row>
 
-      {/*  HUMIDTY SENSOR */}
+      {/*  HUMIDTY SENSOR }
       <Grid.Row>
         <Grid.Column width={6} textAlign="center">
           <Divider
@@ -149,7 +138,7 @@ const SimulationPanel = (props) => (
                 marginLeft: '30%',
             }}
           >
-            <SliderHumidty />
+            <SimulationPanelSlider />
           </div>
           <Divider />
           <div
@@ -158,12 +147,12 @@ const SimulationPanel = (props) => (
               marginLeft: '30%',
           }}
           >
-            <SliderTempRange />
+            <SimulationPanelSlider />
           </div>
         </Grid.Column>
       </Grid.Row>
 
-      {/*  LIGHT SENSOR */}
+      {/*  LIGHT SENSOR }
       <Grid.Row>
         <Grid.Column width={6} textAlign="center">
           <Divider
@@ -199,7 +188,7 @@ const SimulationPanel = (props) => (
                 marginLeft: '30%',
             }}
           >
-            <SliderLight />
+            <SimulationPanelSlider />
           </div>
           <Divider />
           <div
@@ -208,12 +197,12 @@ const SimulationPanel = (props) => (
               marginLeft: '30%',
           }}
           >
-            <SliderLightRange />
+            <SimulationPanelSlider />
           </div>
         </Grid.Column>
       </Grid.Row>
 
-      {/*  MOTION SENSOR */}
+      {/*  MOTION SENSOR }
       <Grid.Row>
         <Grid.Column width={6} textAlign="center">
           <Divider
@@ -249,7 +238,7 @@ const SimulationPanel = (props) => (
                 marginLeft: '30%',
             }}
           >
-            <SliderMotion />
+            <SimulationPanelSlider />
           </div>
           <Divider />
           <div
@@ -258,7 +247,7 @@ const SimulationPanel = (props) => (
               marginLeft: '30%',
           }}
           >
-            <SliderTempRange />
+            <SimulationPanelSlider />
           </div>
         </Grid.Column>
       </Grid.Row>
@@ -267,5 +256,143 @@ const SimulationPanel = (props) => (
     </Grid>
   </Modal>
 );
+*/
+class SimulationPanel extends Component {
+  constructor(props) {
+      super(props);
+      console.log(this.props.devices);
+      this.state = {
+        value: null,
+        error: null,
+      };
 
-export default SimulationPanel;
+      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) {
+    let image = './../img/';
+    switch (device.kind) {
+      case 'thermostat':
+        image += 'thermo-simulation.png';
+        break;
+      case 'motionSensor':
+        image += 'motion-simulation.png';
+        break;
+      case 'sensor':
+        if (device.sensorType === 'TEMPERATURE') {
+          image += 'thermo-simulation.png';
+        } else if (device.sensorType === 'HUMIDITY') {
+          image += 'humidity-simulation.png';
+        } else {
+          image += 'light-simulation.png';
+        }
+        break;
+      default:
+        break;
+    }
+
+    return (
+      <Image
+        src={image}
+        style={{
+                  width: '60px',
+                  height: 'auto',
+                  display: 'block',
+                  marginLeft: 'auto',
+                  marginRight: 'auto',
+                  marginTop: '1rem',
+                  marginBottom: '1rem',
+              }}
+      />
+);
+  }
+
+  render() {
+    return (
+      <Modal
+        closeIcon
+        open={!!this.props.simulationPanel}
+        onClose={this.props.closeSimulationPanel}
+      >
+        <Grid celled>
+          <Grid.Row textAlign="center">
+            <h1 style={{ padding: '1rem', fontFamily: 'Arial' }}>
+              Welcome in the Simulation Panel
+            </h1>
+          </Grid.Row>
+          {
+            this.props.devices
+            ? this.props.devices.map((e, i) => (
+              <Grid.Row>
+                <Grid.Column width={6} textAlign="center">
+                  {this.renderImage(e)}
+                  <p style={{ padding: '0.5rem' }}>
+                    {e.name}
+                  </p>
+                  <Divider />
+                </Grid.Column>
+
+
+                <Grid.Column width={10} textAlign="center">
+
+                  <div
+                    style={{
+                        display: 'block',
+                        marginLeft: '30%',
+                    }}
+                  >
+                    <SimulationPanelSlider update={this.updateSliderValues} error={false} device={e} id={e.id} />
+                  </div>
+                  <Divider />
+                  <div
+                    style={{
+                      display: 'block',
+                      marginLeft: '30%',
+                  }}
+                  >
+                    <SimulationPanelSlider update={this.updateSliderValues} error device={e} id={e.id} />
+                  </div>
+                </Grid.Column>
+              </Grid.Row>
+            ))
+            : null
+          }
+        </Grid>
+
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = (state, _) => ({
+  get devices() {
+      const deviceInternalSensor = {
+          thermostat: 'Thermostat',
+          sensor: 'Sensor',
+          motionSensor: 'Sensor',
+        };
+      const deviceArray = [
+      ...Object.values(state.devices),
+      ].filter((e) => e.kind in deviceInternalSensor);
+      return deviceArray;
+  },
+});
+const SimulationPanelContainer = connect(
+mapStateToProps,
+RemoteService,
+)(SimulationPanel);
+export default SimulationPanelContainer;

smart-hut/src/components/SimulationPanelSlider.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import {
+ Form, Grid, Header,
+} 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);
+  }
+
+  get internalValue() {
+      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 ? 'on' : 'off';
+      }
+  }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  render() {
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form} textAlign="center">
+          <Header as="h2">{this.props.error ? 'Edit error' : 'Edit value'}</Header>
+          <p
+            style={{
+                padding: '0.5rem',
+                display: 'block',
+                marinLeft: 'auto',
+                marginRight: 'auto',
+}}
+          >
+            {this.props.device.name}
+,
+            {this.internalValue}
+          </p>
+
+          <Form.Input
+            min={0}
+            max={15000}
+            name="value"
+            onChange={this.handleChange}
+            step={5}
+            type="range"
+            value={this.props.device.value}
+          />
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+    device: state.devices[ownProps.id],
+  });
+const SimulationPanelSliderContainer = connect(mapStateToProps, RemoteService)(SimulationPanelSlider);
+export default SimulationPanelSliderContainer;