a first version of the simulation panel, I still need to fix some binors bugs, and to add the other devices. Also, in the ehader controller, I converted the toggle into a chebox, because otherwise it was bugging with tthe modal in a very weird way

smart-hut/package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@ant-design/css-animation": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/css-animation/-/css-animation-1.7.2.tgz",
+      "integrity": "sha512-bvVOe7A+r7lws58B7r+fgnQDK90cV45AXuvGx6i5CCSX1W/M3AJnHsNggDANBxEtWdNdFWcDd5LorB+RdSIlBw=="
+    },
     "@babel/code-frame": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
@@ -1993,6 +1998,14 @@
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
       "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA=="
     },
+    "add-dom-event-listener": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz",
+      "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==",
+      "requires": {
+        "object-assign": "4.x"
+      }
+    },
     "address": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
@@ -4244,6 +4257,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-align": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.11.1.tgz",
+      "integrity": "sha512-hN42DmUgtweBx0iBjDLO4WtKOMcK8yBmPx/fgdsgQadLuzPu/8co3oLdK5yMmeM/vnUd3yDyV6qV8/NzxBexQg=="
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -10731,6 +10749,73 @@
         }
       }
     },
+    "rc-align": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-3.0.0.tgz",
+      "integrity": "sha512-/T/4LOlKJLFe8EwsORuc3pFWOJ8caUpj2vtKIHWea4PhakoleM7KDQsx0n1WDQENIeSfrP9P1FowVxAdvhjsvw==",
+      "requires": {
+        "classnames": "2.x",
+        "dom-align": "^1.7.0",
+        "rc-util": "^4.12.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-animate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.0.0.tgz",
+      "integrity": "sha512-+ANeyCei4lWSJHWTcocywdYAy6lpRdBva/7Fs3nBBiAngW/W+Gmx+gQEcsmcgQBqziWUYnR91Bk12ltR3GBHPA==",
+      "requires": {
+        "@ant-design/css-animation": "^1.7.2",
+        "classnames": "^2.2.6",
+        "raf": "^3.4.0",
+        "rc-util": "^4.15.3"
+      }
+    },
+    "rc-slider": {
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.2.4.tgz",
+      "integrity": "sha512-wSr7vz+WtzzGqsGU2rTQ4mmLz9fkuIDMPYMYm8ygYFvxQ2Rh4uRhOWHYI0R8krNK5k1bGycckYxmQqUIvLAh3w==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5",
+        "rc-tooltip": "^4.0.0",
+        "rc-util": "^4.0.4",
+        "shallowequal": "^1.1.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "rc-tooltip": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-4.0.3.tgz",
+      "integrity": "sha512-HNyBh9/fPdds0DXja8JQX0XTIHmZapB3lLzbdn74aNSxXG1KUkt+GK4X1aOTRY5X9mqm4uUKdeFrn7j273H8gw==",
+      "requires": {
+        "rc-trigger": "^4.0.0"
+      }
+    },
+    "rc-trigger": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.1.0.tgz",
+      "integrity": "sha512-EyQjO6aHDAPRvJeyPmg/yVL/8Bp7oA6Lf+4Ay2OyOwhZLzHHN8m+F2XrVWKpjg04eBXbuGBNiucIqv1d/ddE3w==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "raf": "^3.4.1",
+        "rc-align": "^3.0.0-rc.0",
+        "rc-animate": "^3.0.0",
+        "rc-util": "^4.20.0"
+      }
+    },
+    "rc-util": {
+      "version": "4.20.5",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.20.5.tgz",
+      "integrity": "sha512-f67s4Dt1quBYhrVPq5QMKmK3eS2hN1NNIAyhaiG0HmvqiGYAXMQ7SP2AlGqv750vnzhJs38JklbkWT1/wjhFPg==",
+      "requires": {
+        "add-dom-event-listener": "^1.1.0",
+        "prop-types": "^15.5.10",
+        "react-is": "^16.12.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "react": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz",
@@ -10958,6 +11043,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-modal": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.2.2.tgz",

smart-hut/package.json

@@ -13,6 +13,7 @@
     "classnames": "^2.2.6",
     "immutability-helper": "^3.0.2",
     "material-ui-image": "^3.2.3",
+    "rc-slider": "^9.2.4",
     "react": "^16.12.0",
     "react-axios": "^2.0.3",
     "react-circular-input": "^0.1.6",

smart-hut/src/components/DropdownSimulation.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+const options = [
+    { key: 'Living Room', text: 'Living Room', value: 'Living Room' },
+    { key: 'Kitchen', text: 'Kitchen', value: 'Kitchen' },
+    { key: 'Garden', text: 'Garden', value: 'Garden' },
+    { key: 'Bedroom 1', text: 'Bedroom 1', value: 'Bedroom 1' },
+]
+
+const DropdownSimulation = () => (
+    <Dropdown placeholder='Skills' fluid multiple selection options={options} />
+)
+
+export default DropdownSimulation

smart-hut/src/components/HeaderController.js

@@ -103,6 +103,7 @@ export class MyHeader extends React.Component {
                 <Button basic inverted onClick={this.logout}>
                   Logout
                 </Button>
+                <Divider />
                 <Segment
                   compact
                   style={{
@@ -114,7 +115,6 @@ export class MyHeader extends React.Component {
                   <Checkbox
                     label={<label>Share cameras</label>}
                     checked={this.props.cameraEnabled}
-                    toggle
                     onChange={(e, val) => this.setCameraEnabled(val.checked)}
                   />
                 </Segment>
@@ -131,28 +131,43 @@ export class MyHeader extends React.Component {
             </Grid.Row>
             <Grid.Row color="black" textAlign="center">
               <Grid.Column>
-                <IconHomeImage />
+                <Grid.Row>
+                  <IconHomeImage />
+                </Grid.Row>
+                <Divider />
+                <Grid.Row>
+                <div onClick={this.openSimulationPanel}>
+                  <Button > Similuation Panel </Button>
+                </div>
+              </Grid.Row>
               </Grid.Column>
+              <Divider />
               <Grid.Column>
-                <Grid.Row>
+              <Grid.Column width={4} heigth={1}>
-                  <Label as="a" image color="black">
+                <Label as="a" image color="black">
-                    <img alt="SmartHut logo" src="smart-home.png" />
+                  <img alt="SmartHut logo" src="smart-home.png" />
-                    {this.props.username}
+                  {this.props.username}
-                  </Label>
+                </Label>
-                </Grid.Row>
                 <Divider />
-                <Grid.Row>
+                <Button basic inverted onClick={this.logout}>
-                  <Button onClick={this.logout}>Logout</Button>
+                  Logout
-                </Grid.Row>  
+                </Button>
                 <Divider />
-                <Grid.Row>
+                <Segment
+                  compact
+                  style={{
+                    margin: "auto",
+                    marginTop: "1em",
+                    textAlign: "center",
+                  }}
+                >
                   <Checkbox
                     label={<label>Share cameras</label>}
                     checked={this.props.cameraEnabled}
-                    toggle
                     onChange={(e, val) => this.setCameraEnabled(val.checked)}
                   />
-                </Grid.Row>
+                </Segment>
+            </Grid.Column>
               </Grid.Column>
             </Grid.Row>
           </Grid>

smart-hut/src/components/SimulationPanel.js

@@ -1,5 +1,7 @@
 import React from "react";
 import Modal from "react-modal";
+import SliderSimulation from "./SliderSimulation.js";
+import DropdownSimulation from "./DropdownSimulation.js";
 import {
     Grid,
     Divider,
@@ -8,29 +10,11 @@ import {
     Responsive,
     Checkbox,
     Image,
+    GridColumn, 
+    Header,
+    Segment
   } from "semantic-ui-react";
 
-// const ReactModalPortal = {
-//   opacity: 0
-// };
-
-// const ReactModal__Overlay = {
-//   background: 'black',
-//   alignItems: 'center',
-//   display: 'flex',
-//   justifyContent: 'center',
-//   transition: 'opacity 200ms ease-in-out'
-// };
-
-
-// const modal = {
-//   background: 'grey',
-//   color: 'white',
-//   maxWidth: '2rem',
-//   outline: 'none',
-//   padding: '2rem',
-//   textAlign: 'center'
-// };
 
 const SimulationPanel = (props) => (
   <Modal
@@ -60,38 +44,144 @@ const SimulationPanel = (props) => (
           borderRadius: '4px',
           outline: 'none',
           padding: '20px',
-          backgroundColor: 'black'
+          backgroundColor: 'rgb(65, 67, 69)'
         }
       }}
   >
     {props.simulationPanel}
-    <Responsive minWidth={768}>
+    <Grid celled>
-        <Grid columns={3} divided inverted padded>
-        <Grid.Row>
-        <Grid.Column>
-            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
-        </Grid.Column>
-        <Grid.Column>
-            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
-        </Grid.Column>
-        <Grid.Column>
-            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
-        </Grid.Column>
-        </Grid.Row>
 
-        <Grid.Row>
+    {/* TITLE */}
-        <Grid.Column>
+    <Grid.Row  textAlign="center">
-            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
+      <h1 style={{ color: "white", padding:"1rem", fontFamily: "Arial"}}>
-        </Grid.Column>
+        Welcome in the Simulation Panel
-        <Grid.Column>
+      </h1>
-            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
+    </Grid.Row>
-        </Grid.Column>
+
-        <Grid.Column>
+    {/* NORMAL LIGHT */}
-            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
+    <Grid.Row>
-        </Grid.Column>
+      <Grid.Column width={6} textAlign="center">
+        <Image 
+            src='./../img/light-simulation.png' 
+            style={{ 
+                width: "50px", 
+                height: "auto", 
+                display:"block", 
+                marginLeft:"auto", 
+                marginRight:"auto",
+            }}
+        />
+        <p style={{ color: "white", padding:"0.5rem"}}> 
+            Normal Light
+        </p>
+      </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={{ 
+                display: "block",
+                marginLeft: "30%",
+            }}
+        >
+        <SliderSimulation />
+        </div>
+    </Grid.Column>
+  </Grid.Row>
+
+     {/*  SECURITY CAMERA */}
+     <Grid.Row>
+     <Grid.Column width={6} textAlign="center">
+       <Image 
+           src='./../img/camera-icon-simulation.png' 
+           style={{ 
+               width: "60px", 
+               height: "auto", 
+               display:"block", 
+               marginLeft:"auto", 
+               marginRight:"auto",
+           }}
+       />
+       <p style={{ color: "white", padding:"0.5rem"}}> 
+           Security Camera
+       </p>
+     </Grid.Column>
+ 
+     <Grid.Column width={10} textAlign="center">
+         <Grid.Row >
+            <p 
+                style={{
+                    color: "white", 
+                    padding:"0.5rem",  
+                    display:"block", 
+                    marinLeft:"auto", 
+                    marginRight:"auto",
+                }}
+            >
+                Select the rooms in which you want camera ON
+            </p>
         </Grid.Row>
+        <Divider />
+        <Grid.Row>
+            <DropdownSimulation />
+        
+        </Grid.Row>
+     </Grid.Column>
+   </Grid.Row>
+    
+
     </Grid>
-    </Responsive>
   </Modal>
 );
 

smart-hut/src/components/SliderSimulation.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
+
+
+
+export default class SliderSimulation extends Component {
+  state = {visible: true, duration: 50 }
+
+  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",}}
+            >
+                {`Degree of intensity: ${duration} `}
+            </p>
+            <Divider />
+
+            <Form.Input
+                min={0}
+                max={100}
+                name='duration'
+                onChange={this.handleChange}
+                step={5}
+                type='range'
+                value={duration}
+            />
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}