diff --git a/smart-hut/src/components/DropdownSimulation.js b/smart-hut/src/components/DropdownSimulation.js index 1017bd4..853f441 100644 --- a/smart-hut/src/components/DropdownSimulation.js +++ b/smart-hut/src/components/DropdownSimulation.js @@ -1,15 +1,15 @@ -import React from 'react' -import { Dropdown } from 'semantic-ui-react' +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 +export default DropdownSimulation; diff --git a/smart-hut/src/components/SimulationPanel.js b/smart-hut/src/components/SimulationPanel.js index 38f506e..d4297f0 100644 --- a/smart-hut/src/components/SimulationPanel.js +++ b/smart-hut/src/components/SimulationPanel.js @@ -1,12 +1,5 @@ -import React from "react"; -import Modal from "react-modal"; -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 React from 'react'; +import Modal from 'react-modal'; import { Grid, Divider, @@ -15,10 +8,17 @@ import { Responsive, Checkbox, Image, - GridColumn, + GridColumn, Header, - Segment - } from "semantic-ui-react"; + Segment, + } from 'semantic-ui-react'; +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'; const SimulationPanel = (props) => ( @@ -34,7 +34,7 @@ const SimulationPanel = (props) => ( left: 0, right: 0, bottom: 0, - backgroundColor: 'rgba(0,0,0,0.5)' + backgroundColor: 'rgba(0,0,0,0.5)', }, content: { position: 'absolute', @@ -49,220 +49,220 @@ const SimulationPanel = (props) => ( borderRadius: '4px', outline: 'none', padding: '20px', - backgroundColor: 'rgb(65, 67, 69)' - } + backgroundColor: 'rgb(65, 67, 69)', + }, }} > {props.simulationPanel} - {/* TITLE */} - -

+ {/* TITLE */} + +

Welcome in the Simulation Panel -

- +

+ - {/* TEMPERATURE SENSOR */} - - - + + - + -

+ /> +

Temperature Sensor -

- - +

+ + - - - -
+ +
- -
- -
+ +
+ +
- -
- - + > + +
+ + - {/* HUMIDTY SENSOR */} - - - + + - + -

+ /> +

Humidity Sensor -

- - +

+ + - - - -
+ +
- -
- -
+ +
+ +
- -
- - + > + +
+ + - {/* LIGHT SENSOR */} - - - + + - + -

+ /> +

Light Sensor -

- - +

+ + - - - -
+ +
- -
- -
+ +
+ +
- -
- - + > + +
+ + - {/* MOTION SENSOR */} - - - + + - + -

+ /> +

Motion Sensor -

- - +

+ + - - - -
+ +
- -
- -
+ +
+ +
- -
- - - + > + +
+ + + diff --git a/smart-hut/src/components/SliderHumidity.js b/smart-hut/src/components/SliderHumidity.js index 030273f..94e1242 100644 --- a/smart-hut/src/components/SliderHumidity.js +++ b/smart-hut/src/components/SliderHumidity.js @@ -1,44 +1,45 @@ -import React, { Component } from 'react' -import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' - +import React, { Component } from 'react'; +import { + Form, Grid, Image, Transition, Divider, +} from 'semantic-ui-react'; export default class SliderHumidity extends Component { - state = {visible: true, duration: 78 } + state = { visible: true, duration: 78 } handleChange = (e, { name, value }) => this.setState({ [name]: value }) - handleVisibility = () => - this.setState((prevState) => ({ visible: !prevState.visible })) + handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible })) render() { - const { duration } = this.state + const { duration } = this.state; return ( -

- {`Humidity: ${duration} %`} -

+ color: 'white', + padding: '0.5rem', + display: 'block', + marinLeft: 'auto', + marginRight: 'auto', +}} + > + {`Humidity: ${duration} %`} +

- + - ) + ); } -} \ No newline at end of file +} diff --git a/smart-hut/src/components/SliderLight.js b/smart-hut/src/components/SliderLight.js index 03b2d18..e5a638c 100644 --- a/smart-hut/src/components/SliderLight.js +++ b/smart-hut/src/components/SliderLight.js @@ -1,44 +1,45 @@ -import React, { Component } from 'react' -import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' - +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 } + state = { visible: true, duration: 10500 } handleChange = (e, { name, value }) => this.setState({ [name]: value }) - handleVisibility = () => - this.setState((prevState) => ({ visible: !prevState.visible })) + handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible })) render() { - const { duration } = this.state + const { duration } = this.state; return ( -

- {`Light intensity: ${duration} lm`} -

+ color: 'white', + padding: '0.5rem', + display: 'block', + marinLeft: 'auto', + marginRight: 'auto', +}} + > + {`Light intensity: ${duration} lm`} +

- + - ) + ); } -} \ No newline at end of file +} diff --git a/smart-hut/src/components/SliderLightRange.js b/smart-hut/src/components/SliderLightRange.js index 2615922..0854a10 100644 --- a/smart-hut/src/components/SliderLightRange.js +++ b/smart-hut/src/components/SliderLightRange.js @@ -1,45 +1,46 @@ -import React, { Component } from 'react' -import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' - +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 } + state = { visible: true, duration: 500 } handleChange = (e, { name, value }) => this.setState({ [name]: value }) - handleVisibility = () => - this.setState((prevState) => ({ visible: !prevState.visible })) + handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible })) render() { - const { duration } = this.state + const { duration } = this.state; return ( -

- {`Chosen tolerance: +/- ${duration}`} -

- + color: 'white', + padding: '0.5rem', + display: 'block', + marinLeft: 'auto', + marginRight: 'auto', +}} + > + {`Chosen tolerance: +/- ${duration}`} +

- + + - ) + ); } -} \ No newline at end of file +} diff --git a/smart-hut/src/components/SliderMotion.js b/smart-hut/src/components/SliderMotion.js index 1468c56..8c3a8ce 100644 --- a/smart-hut/src/components/SliderMotion.js +++ b/smart-hut/src/components/SliderMotion.js @@ -1,44 +1,45 @@ -import React, { Component } from 'react' -import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' - +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 } + state = { visible: true, duration: 5 } handleChange = (e, { name, value }) => this.setState({ [name]: value }) - handleVisibility = () => - this.setState((prevState) => ({ visible: !prevState.visible })) + handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible })) render() { - const { duration } = this.state + const { duration } = this.state; return ( -

- {`Range: ${duration} meters`} -

+ color: 'white', + padding: '0.5rem', + display: 'block', + marinLeft: 'auto', + marginRight: 'auto', +}} + > + {`Range: ${duration} meters`} +

- + - ) + ); } -} \ No newline at end of file +} diff --git a/smart-hut/src/components/SliderTempRange.js b/smart-hut/src/components/SliderTempRange.js index 54720c3..41035f3 100644 --- a/smart-hut/src/components/SliderTempRange.js +++ b/smart-hut/src/components/SliderTempRange.js @@ -1,45 +1,46 @@ -import React, { Component } from 'react' -import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' - +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 } + state = { visible: true, duration: 5 } handleChange = (e, { name, value }) => this.setState({ [name]: value }) - handleVisibility = () => - this.setState((prevState) => ({ visible: !prevState.visible })) + handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible })) render() { - const { duration } = this.state + const { duration } = this.state; return ( -

- {`Chosen tolerance: +/- ${duration}`} -

- + color: 'white', + padding: '0.5rem', + display: 'block', + marinLeft: 'auto', + marginRight: 'auto', +}} + > + {`Chosen tolerance: +/- ${duration}`} +

- + + - ) + ); } -} \ No newline at end of file +} diff --git a/smart-hut/src/components/SliderTemperature.js b/smart-hut/src/components/SliderTemperature.js index bcf606b..5cace21 100644 --- a/smart-hut/src/components/SliderTemperature.js +++ b/smart-hut/src/components/SliderTemperature.js @@ -1,44 +1,45 @@ -import React, { Component } from 'react' -import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react' - +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 } + state = { visible: true, duration: 20 } handleChange = (e, { name, value }) => this.setState({ [name]: value }) - handleVisibility = () => - this.setState((prevState) => ({ visible: !prevState.visible })) + handleVisibility = () => this.setState((prevState) => ({ visible: !prevState.visible })) render() { - const { duration } = this.state + const { duration } = this.state; return ( -

- {`Heat: ${duration} Celsius Degrees`} -

+ color: 'white', + padding: '0.5rem', + display: 'block', + marinLeft: 'auto', + marginRight: 'auto', +}} + > + {`Heat: ${duration} Celsius Degrees`} +

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