smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

update branch

Browse source
This commit is contained in:
britea 2020-05-23 16:11:25 +02:00
parent 747bd370cc
commit a184333579
8 changed files with 369 additions and 363 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
smart-hut/src/components/DropdownSimulation.js
View file

@ -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 = () => (
<Dropdown placeholder='Skills' fluid multiple selection options={options} />
)
<Dropdown placeholder="Skills" fluid multiple selection options={options} />
);
export default DropdownSimulation
export default DropdownSimulation;

356
smart-hut/src/components/SimulationPanel.js
View file

@ -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,
@ -17,8 +10,15 @@ import {
Image,
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,219 +49,219 @@ const SimulationPanel = (props) => (
borderRadius: '4px',
outline: 'none',
padding: '20px',
backgroundColor: 'rgb(65, 67, 69)'
}
backgroundColor: 'rgb(65, 67, 69)',
},
}}
>
{props.simulationPanel}
<Grid celled>
{/* TITLE */}
<Grid.Row textAlign="center">
<h1 style={{ color: "white", padding:"1rem", fontFamily: "Arial"}}>
{/* TITLE */}
<Grid.Row textAlign="center">
<h1 style={{ color: 'white', padding: '1rem', fontFamily: 'Arial' }}>
Welcome in the Simulation Panel
</h1>
</Grid.Row>
</h1>
</Grid.Row>
{/* TEMPERATURE SENSOR */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Divider
style={{
marginTop: "3rem",
marginBottom: "auto"
}}
/>
<Image
src='./../img/thermo-simulation.png'
{/* TEMPERATURE SENSOR */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Divider
style={{
width: "60px",
height: "auto",
display:"block",
marginLeft:"auto",
marginRight:"auto",
marginTop: "1rem",
marginBottom: "1rem"
marginTop: '3rem',
marginBottom: 'auto',
}}
/>
<Image
src="./../img/thermo-simulation.png"
style={{
width: '60px',
height: 'auto',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
marginTop: '1rem',
marginBottom: '1rem',
}}
/>
<p style={{ color: "white", padding:"0.5rem"}}>
/>
<p style={{ color: 'white', padding: '0.5rem' }}>
Temperature Sensor
</p>
<Divider />
</Grid.Column>
</p>
<Divider />
</Grid.Column>
<Grid.Column width={10} textAlign="center">
<Grid.Column width={10} textAlign="center">
<div
<div
style={{
display: "block",
marginLeft: "30%",
display: 'block',
marginLeft: '30%',
}}
>
<SliderTemperature />
</div>
<Divider />
<div
style={{
display: "block",
marginLeft: "30%",
>
<SliderTemperature />
</div>
<Divider />
<div
style={{
display: 'block',
marginLeft: '30%',
}}
>
<SliderTempRange/>
</div>
</Grid.Column>
</Grid.Row>
>
<SliderTempRange />
</div>
</Grid.Column>
</Grid.Row>
{/* HUMIDTY SENSOR */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Divider
style={{
marginTop: "3rem",
marginBottom: "auto"
}}
/>
<Image
src='./../img/humidity-simulation.png'
{/* HUMIDTY SENSOR */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Divider
style={{
width: "60px",
height: "auto",
display:"block",
marginLeft:"auto",
marginRight:"auto",
marginTop: "1rem",
marginBottom: "1rem"
marginTop: '3rem',
marginBottom: 'auto',
}}
/>
<Image
src="./../img/humidity-simulation.png"
style={{
width: '60px',
height: 'auto',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
marginTop: '1rem',
marginBottom: '1rem',
}}
/>
<p style={{ color: "white", padding:"0.5rem"}}>
/>
<p style={{ color: 'white', padding: '0.5rem' }}>
Humidity Sensor
</p>
<Divider />
</Grid.Column>
</p>
<Divider />
</Grid.Column>
<Grid.Column width={10} textAlign="center">
<Grid.Column width={10} textAlign="center">
<div
<div
style={{
display: "block",
marginLeft: "30%",
display: 'block',
marginLeft: '30%',
}}
>
<SliderHumidty />
</div>
<Divider />
<div
style={{
display: "block",
marginLeft: "30%",
>
<SliderHumidty />
</div>
<Divider />
<div
style={{
display: 'block',
marginLeft: '30%',
}}
>
<SliderTempRange/>
</div>
</Grid.Column>
</Grid.Row>
>
<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'
{/* LIGHT SENSOR */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Divider
style={{
width: "60px",
height: "auto",
display:"block",
marginLeft:"auto",
marginRight:"auto",
marginTop: "1rem",
marginBottom: "1rem"
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"}}>
/>
<p style={{ color: 'white', padding: '0.5rem' }}>
Light Sensor
</p>
<Divider />
</Grid.Column>
</p>
<Divider />
</Grid.Column>
<Grid.Column width={10} textAlign="center">
<Grid.Column width={10} textAlign="center">
<div
<div
style={{
display: "block",
marginLeft: "30%",
display: 'block',
marginLeft: '30%',
}}
>
<SliderLight />
</div>
<Divider />
<div
style={{
display: "block",
marginLeft: "30%",
>
<SliderLight />
</div>
<Divider />
<div
style={{
display: 'block',
marginLeft: '30%',
}}
>
<SliderLightRange/>
</div>
</Grid.Column>
</Grid.Row>
>
<SliderLightRange />
</div>
</Grid.Column>
</Grid.Row>
{/* MOTION SENSOR */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Divider
style={{
marginTop: "3rem",
marginBottom: "auto"
{/* MOTION SENSOR */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Divider
style={{
marginTop: '3rem',
marginBottom: 'auto',
}}
/>
<Image
src='./../img/motion-simulation.png'
/>
<Image
src="./../img/motion-simulation.png"
style={{
width: "60px",
height: "auto",
display:"block",
marginLeft:"auto",
marginRight:"auto",
marginTop: "1rem",
marginBottom: "1rem"
width: '60px',
height: 'auto',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
marginTop: '1rem',
marginBottom: '1rem',
}}
/>
<p style={{ color: "white", padding:"0.5rem"}}>
/>
<p style={{ color: 'white', padding: '0.5rem' }}>
Motion Sensor
</p>
<Divider />
</Grid.Column>
</p>
<Divider />
</Grid.Column>
<Grid.Column width={10} textAlign="center">
<Grid.Column width={10} textAlign="center">
<div
<div
style={{
display: "block",
marginLeft: "30%",
display: 'block',
marginLeft: '30%',
}}
>
<SliderMotion />
</div>
<Divider />
<div
style={{
display: "block",
marginLeft: "30%",
>
<SliderMotion />
</div>
<Divider />
<div
style={{
display: 'block',
marginLeft: '30%',
}}
>
<SliderTempRange/>
</div>
</Grid.Column>
</Grid.Row>
>
<SliderTempRange />
</div>
</Grid.Column>
</Grid.Row>
</Grid>

53
smart-hut/src/components/SliderHumidity.js
View file

@ -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 (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Humidity: ${duration} %`}
</p>
color: 'white',
padding: '0.5rem',
display: 'block',
marinLeft: 'auto',
marginRight: 'auto',
}}
>
{`Humidity: ${duration} %`}
</p>
<Form.Input
min={0}
max={100}
name='duration'
onChange={this.handleChange}
step={1}
type='range'
value={duration}
/>
<Form.Input
min={0}
max={100}
name="duration"
onChange={this.handleChange}
step={1}
type="range"
value={duration}
/>
</Grid.Column>
</Grid>
)
);
}
}

53
smart-hut/src/components/SliderLight.js
View file

@ -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 (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Light intensity: ${duration} lm`}
</p>
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}
/>
<Form.Input
min={0}
max={15000}
name="duration"
onChange={this.handleChange}
step={5}
type="range"
value={duration}
/>
</Grid.Column>
</Grid>
)
);
}
}

53
smart-hut/src/components/SliderLightRange.js
View file

@ -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 (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Chosen tolerance: +/- ${duration}`}
</p>
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}
/>
<Form.Input
min={0}
max={1000}
name="duration"
onChange={this.handleChange}
step={1}
type="range"
value={duration}
/>
</Grid.Column>
</Grid>
)
);
}
}

53
smart-hut/src/components/SliderMotion.js
View file

@ -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 (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Range: ${duration} meters`}
</p>
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}
/>
<Form.Input
min={0}
max={15}
name="duration"
onChange={this.handleChange}
step={5}
type="range"
value={duration}
/>
</Grid.Column>
</Grid>
)
);
}
}

53
smart-hut/src/components/SliderTempRange.js
View file

@ -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 (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Chosen tolerance: +/- ${duration}`}
</p>
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}
/>
<Form.Input
min={0}
max={10}
name="duration"
onChange={this.handleChange}
step={1}
type="range"
value={duration}
/>
</Grid.Column>
</Grid>
)
);
}
}

53
smart-hut/src/components/SliderTemperature.js
View file

@ -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 (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Heat: ${duration} Celsius Degrees`}
</p>
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}
/>
<Form.Input
min={10}
max={35}
name="duration"
onChange={this.handleChange}
step={1}
type="range"
value={duration}
/>
</Grid.Column>
</Grid>
)
);
}
}