simulation panel is finished.

smart-hut/src/components/SimulationPanel.js

@@ -1,6 +1,11 @@
 import React from "react";
 import Modal from "react-modal";
-import SliderSimulation from "./SliderSimulation.js";
+import SliderTemperature from "./SliderTemperature.js";
+import SliderTempRange from "./SliderTempRange.js";
+import SliderHumidty from "./SliderHumidity.js";
+import SliderLight from "./SliderLight.js";
+import SliderLightRange from "./SliderLightRange.js";
+import SliderMotion from "./SliderMotion.js";
 import DropdownSimulation from "./DropdownSimulation.js";
 import {
     Grid,
@@ -58,76 +63,35 @@ const SimulationPanel = (props) => (
       </h1>
     </Grid.Row>
 
-    {/* NORMAL LIGHT */}
+    {/* TEMPERATURE SENSOR */}
     <Grid.Row>
       <Grid.Column width={6} textAlign="center">
+      <Divider 
+        style={{ 
+          marginTop: "3rem",
+          marginBottom: "auto"
+      }}
+      />
         <Image 
-            src='./../img/light-simulation.png' 
+            src='./../img/thermo-simulation.png' 
             style={{ 
-                width: "50px", 
+                width: "60px", 
                 height: "auto", 
                 display:"block", 
                 marginLeft:"auto", 
                 marginRight:"auto",
+                marginTop: "1rem",
+                marginBottom: "1rem"
             }}
         />
         <p style={{ color: "white", padding:"0.5rem"}}> 
-            Normal Light
+            Temperature Sensor
         </p>
+        <Divider />
       </Grid.Column>
 
+    
       <Grid.Column width={10} textAlign="center">
-      <Grid.Row >
-            <p 
-                style={{
-                    color: "white", 
-                    padding:"0.5rem",  
-                    display:"block", 
-                    marinLeft:"auto", 
-                    marginRight:"auto",
-                }}
-            >
-                ON / OFF
-            </p>
-      </Grid.Row>
-      <Divider />
-      <Grid.Row>
-        <Checkbox 
-            toggle 
-            style={{ 
-                width: "50px", 
-                height: "auto", 
-                display:"block", 
-                marginLeft:"auto", 
-                marginRight:"auto",
-                marginTop: "auto",
-                marginBottom: "auto"
-            }}
-        />
-        
-      </Grid.Row>
-      </Grid.Column>
-    </Grid.Row>
-
-    {/*  INTENSITY LIGHT */}
-    <Grid.Row>
-    <Grid.Column width={6} textAlign="center">
-      <Image 
-          src='./../img/intensity-icon-simulation-2.png' 
-          style={{ 
-              width: "60px", 
-              height: "auto", 
-              display:"block", 
-              marginLeft:"auto", 
-              marginRight:"auto",
-          }}
-      />
-      <p style={{ color: "white", padding:"0.5rem"}}> 
-          Intensity Light
-      </p>
-    </Grid.Column>
-
-    <Grid.Column width={10} textAlign="center">
     
         <div
             style={{ 
@@ -135,50 +99,169 @@ const SimulationPanel = (props) => (
                 marginLeft: "30%",
             }}
         >
-        <SliderSimulation />
+        <SliderTemperature />
+        </div>
+        <Divider />
+        <div
+          style={{ 
+              display: "block",
+              marginLeft: "30%",
+          }}
+        >
+        <SliderTempRange/>
         </div>
     </Grid.Column>
-  </Grid.Row>
+    </Grid.Row>
 
-     {/*  SECURITY CAMERA */}
+    {/*  HUMIDTY SENSOR */}
-     <Grid.Row>
+    <Grid.Row>
-     <Grid.Column width={6} textAlign="center">
+      <Grid.Column width={6} textAlign="center">
-       <Image 
+      <Divider 
-           src='./../img/camera-icon-simulation.png' 
+        style={{ 
-           style={{ 
+          marginTop: "3rem",
-               width: "60px", 
+          marginBottom: "auto"
-               height: "auto", 
+      }}
-               display:"block", 
+      />
-               marginLeft:"auto", 
+        <Image 
-               marginRight:"auto",
+            src='./../img/humidity-simulation.png' 
-           }}
+            style={{ 
-       />
+                width: "60px", 
-       <p style={{ color: "white", padding:"0.5rem"}}> 
+                height: "auto", 
-           Security Camera
+                display:"block", 
-       </p>
+                marginLeft:"auto", 
-     </Grid.Column>
+                marginRight:"auto",
- 
+                marginTop: "1rem",
-     <Grid.Column width={10} textAlign="center">
+                marginBottom: "1rem"
-         <Grid.Row >
+            }}
-            <p 
+        />
-                style={{
+        <p style={{ color: "white", padding:"0.5rem"}}> 
-                    color: "white", 
+            Humidity Sensor
-                    padding:"0.5rem",  
+        </p>
-                    display:"block", 
-                    marinLeft:"auto", 
-                    marginRight:"auto",
-                }}
-            >
-                Select the rooms in which you want camera ON
-            </p>
-        </Grid.Row>
         <Divider />
-        <Grid.Row>
+      </Grid.Column>
-            <DropdownSimulation />
+
-        
+    
-        </Grid.Row>
+      <Grid.Column width={10} textAlign="center">
-     </Grid.Column>
+    
-   </Grid.Row>
+        <div
+            style={{ 
+                display: "block",
+                marginLeft: "30%",
+            }}
+        >
+        <SliderHumidty />
+        </div>
+        <Divider />
+        <div
+          style={{ 
+              display: "block",
+              marginLeft: "30%",
+          }}
+        >
+        <SliderTempRange/>
+        </div>
+    </Grid.Column>
+    </Grid.Row>
+
+     {/*  LIGHT SENSOR */}
+     <Grid.Row>
+      <Grid.Column width={6} textAlign="center">
+      <Divider 
+        style={{ 
+          marginTop: "3rem",
+          marginBottom: "auto"
+      }}
+      />
+        <Image 
+            src='./../img/light-simulation.png' 
+            style={{ 
+                width: "60px", 
+                height: "auto", 
+                display:"block", 
+                marginLeft:"auto", 
+                marginRight:"auto",
+                marginTop: "1rem",
+                marginBottom: "1rem"
+            }}
+        />
+        <p style={{ color: "white", padding:"0.5rem"}}> 
+            Light Sensor
+        </p>
+        <Divider />
+      </Grid.Column>
+
+    
+      <Grid.Column width={10} textAlign="center">
+    
+        <div
+            style={{ 
+                display: "block",
+                marginLeft: "30%",
+            }}
+        >
+        <SliderLight />
+        </div>
+        <Divider />
+        <div
+          style={{ 
+              display: "block",
+              marginLeft: "30%",
+          }}
+        >
+        <SliderLightRange/>
+        </div>
+    </Grid.Column>
+    </Grid.Row>
+
+     {/*  MOTION SENSOR */}
+     <Grid.Row>
+      <Grid.Column width={6} textAlign="center">
+      <Divider 
+        style={{ 
+          marginTop: "3rem",
+          marginBottom: "auto"
+      }}
+      />
+        <Image 
+            src='./../img/motion-simulation.png' 
+            style={{ 
+                width: "60px", 
+                height: "auto", 
+                display:"block", 
+                marginLeft:"auto", 
+                marginRight:"auto",
+                marginTop: "1rem",
+                marginBottom: "1rem"
+            }}
+        />
+        <p style={{ color: "white", padding:"0.5rem"}}> 
+           Motion Sensor
+        </p>
+        <Divider />
+      </Grid.Column>
+
+    
+      <Grid.Column width={10} textAlign="center">
+    
+        <div
+            style={{ 
+                display: "block",
+                marginLeft: "30%",
+            }}
+        >
+        <SliderMotion />
+        </div>
+        <Divider />
+        <div
+          style={{ 
+              display: "block",
+              marginLeft: "30%",
+          }}
+        >
+        <SliderTempRange/>
+        </div>
+    </Grid.Column>
+    </Grid.Row>
     
 
     </Grid>

smart-hut/src/components/SliderHumidity.js

@@ -3,8 +3,8 @@ import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
 
 
 
-export default class SliderSimulation extends Component {
+export default class SliderHumidity extends Component {
-  state = {visible: true, duration: 50 }
+  state = {visible: true, duration: 78 }
 
   handleChange = (e, { name, value }) => this.setState({ [name]: value })
 
@@ -25,16 +25,15 @@ export default class SliderSimulation extends Component {
                 marinLeft:"auto", 
                 marginRight:"auto",}}
             >
-                {`Degree of intensity: ${duration} `}
+                {`Humidity: ${duration} %`}
             </p>
-            <Divider />
 
             <Form.Input
                 min={0}
                 max={100}
                 name='duration'
                 onChange={this.handleChange}
-                step={5}
+                step={1}
                 type='range'
                 value={duration}
             />

smart-hut/src/components/SliderLight.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
+
+
+
+export default class SliderLight extends Component {
+  state = {visible: true, duration: 10500 }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  handleVisibility = () =>
+    this.setState((prevState) => ({ visible: !prevState.visible }))
+
+  render() {
+    const { duration } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form} textAlign="center">
+            <p 
+            style={{
+                color: "white", 
+                padding:"0.5rem",  
+                display:"block", 
+                marinLeft:"auto", 
+                marginRight:"auto",}}
+            >
+                {`Light intensity: ${duration} lm`}
+            </p>
+
+            <Form.Input
+                min={0}
+                max={15000}
+                name='duration'
+                onChange={this.handleChange}
+                step={5}
+                type='range'
+                value={duration}
+            />
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

smart-hut/src/components/SliderLightRange.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
+
+
+
+export default class SliderTempRange extends Component {
+  state = {visible: true, duration: 500 }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  handleVisibility = () =>
+    this.setState((prevState) => ({ visible: !prevState.visible }))
+
+  render() {
+    const { duration } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form} textAlign="center">
+            <p 
+            style={{
+                color: "white", 
+                padding:"0.5rem",  
+                display:"block", 
+                marinLeft:"auto", 
+                marginRight:"auto",}}
+            >
+                {`Chosen tolerance: +/- ${duration}`}
+            </p>
+           
+
+            <Form.Input
+                min={0}
+                max={1000}
+                name='duration'
+                onChange={this.handleChange}
+                step={1}
+                type='range'
+                value={duration}
+            />
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

smart-hut/src/components/SliderMotion.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
+
+
+
+export default class SliderLight extends Component {
+  state = {visible: true, duration:5 }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  handleVisibility = () =>
+    this.setState((prevState) => ({ visible: !prevState.visible }))
+
+  render() {
+    const { duration } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form} textAlign="center">
+            <p 
+            style={{
+                color: "white", 
+                padding:"0.5rem",  
+                display:"block", 
+                marinLeft:"auto", 
+                marginRight:"auto",}}
+            >
+                {`Range: ${duration} meters`}
+            </p>
+
+            <Form.Input
+                min={0}
+                max={15}
+                name='duration'
+                onChange={this.handleChange}
+                step={5}
+                type='range'
+                value={duration}
+            />
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

smart-hut/src/components/SliderTempRange.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
+
+
+
+export default class SliderTempRange extends Component {
+  state = {visible: true, duration: 5 }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  handleVisibility = () =>
+    this.setState((prevState) => ({ visible: !prevState.visible }))
+
+  render() {
+    const { duration } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form} textAlign="center">
+            <p 
+            style={{
+                color: "white", 
+                padding:"0.5rem",  
+                display:"block", 
+                marinLeft:"auto", 
+                marginRight:"auto",}}
+            >
+                {`Chosen tolerance: +/- ${duration}`}
+            </p>
+           
+
+            <Form.Input
+                min={0}
+                max={10}
+                name='duration'
+                onChange={this.handleChange}
+                step={1}
+                type='range'
+                value={duration}
+            />
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

smart-hut/src/components/SliderTemperature.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
+
+
+
+export default class SliderTemperature extends Component {
+  state = {visible: true, duration: 20 }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  handleVisibility = () =>
+    this.setState((prevState) => ({ visible: !prevState.visible }))
+
+  render() {
+    const { duration } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form} textAlign="center">
+            <p 
+            style={{
+                color: "white", 
+                padding:"0.5rem",  
+                display:"block", 
+                marinLeft:"auto", 
+                marginRight:"auto",}}
+            >
+                {`Heat: ${duration} Celsius Degrees`}
+            </p>
+
+            <Form.Input
+                min={10}
+                max={35}
+                name='duration'
+                onChange={this.handleChange}
+                step={1}
+                type='range'
+                value={duration}
+            />
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}