diff --git a/smart-hut/package-lock.json b/smart-hut/package-lock.json index be890f1..f1c109d 100644 --- a/smart-hut/package-lock.json +++ b/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", diff --git a/smart-hut/package.json b/smart-hut/package.json index 664eb89..a0225fc 100644 --- a/smart-hut/package.json +++ b/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", diff --git a/smart-hut/public/img/camera-icon-simulation.png b/smart-hut/public/img/camera-icon-simulation.png new file mode 100644 index 0000000..ebc169c Binary files /dev/null and b/smart-hut/public/img/camera-icon-simulation.png differ diff --git a/smart-hut/public/img/insensity-light-simulation.png b/smart-hut/public/img/insensity-light-simulation.png new file mode 100644 index 0000000..b252bc7 Binary files /dev/null and b/smart-hut/public/img/insensity-light-simulation.png differ diff --git a/smart-hut/public/img/intensity-icon-simulation-2.png b/smart-hut/public/img/intensity-icon-simulation-2.png new file mode 100644 index 0000000..347fd79 Binary files /dev/null and b/smart-hut/public/img/intensity-icon-simulation-2.png differ diff --git a/smart-hut/public/img/light-simulation.png b/smart-hut/public/img/light-simulation.png new file mode 100644 index 0000000..744aeb0 Binary files /dev/null and b/smart-hut/public/img/light-simulation.png differ diff --git a/smart-hut/src/components/DropdownSimulation.js b/smart-hut/src/components/DropdownSimulation.js new file mode 100644 index 0000000..1017bd4 --- /dev/null +++ b/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 = () => ( + +) + +export default DropdownSimulation \ No newline at end of file diff --git a/smart-hut/src/components/HeaderController.js b/smart-hut/src/components/HeaderController.js index e4a0308..13c9f16 100644 --- a/smart-hut/src/components/HeaderController.js +++ b/smart-hut/src/components/HeaderController.js @@ -103,6 +103,7 @@ export class MyHeader extends React.Component { + Share cameras} checked={this.props.cameraEnabled} - toggle onChange={(e, val) => this.setCameraEnabled(val.checked)} /> @@ -130,29 +130,44 @@ export class MyHeader extends React.Component { - - - - + - - +
+ +
+ + + + + + - + + + Share cameras} checked={this.props.cameraEnabled} - toggle onChange={(e, val) => this.setCameraEnabled(val.checked)} /> - + + diff --git a/smart-hut/src/components/SimulationPanel.js b/smart-hut/src/components/SimulationPanel.js index bcef43f..63862c6 100644 --- a/smart-hut/src/components/SimulationPanel.js +++ b/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, @@ -7,30 +9,12 @@ import { Label, Responsive, Checkbox, - Image, + 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) => ( ( borderRadius: '4px', outline: 'none', padding: '20px', - backgroundColor: 'black' + backgroundColor: 'rgb(65, 67, 69)' } }} > {props.simulationPanel} - - - - - - - - - - - - - + - - - - - - - - - - + {/* TITLE */} + +

+ Welcome in the Simulation Panel +

+ + + {/* NORMAL LIGHT */} + + + +

+ Normal Light +

+ + + + +

+ ON / OFF +

+ + + + + + + + + + {/* INTENSITY LIGHT */} + + + +

+ Intensity Light +

+ + + + +
+ +
+ + + + {/* SECURITY CAMERA */} + + + +

+ Security Camera +

+ + + + +

+ Select the rooms in which you want camera ON +

+ + + + + + + + + - ); diff --git a/smart-hut/src/components/SliderSimulation.js b/smart-hut/src/components/SliderSimulation.js new file mode 100644 index 0000000..2dc438d --- /dev/null +++ b/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 ( + + +

+ {`Degree of intensity: ${duration} `} +

+ + + + + + ) + } +} \ No newline at end of file