2020-03-09 12:52:27 +00:00
|
|
|
import React, {Component} from 'react';
|
2020-03-15 14:50:25 +00:00
|
|
|
import styled from 'styled-components';
|
|
|
|
import {Button, Dropdown, Form, Image} from "semantic-ui-react";
|
|
|
|
import {addDeviceFormStyle} from "./styleComponents";
|
|
|
|
import {deviceList} from "./TypesOfDevices";
|
2020-03-09 12:52:27 +00:00
|
|
|
|
|
|
|
const StyledDiv = styled.div`
|
|
|
|
background-color : #ff4050;
|
|
|
|
padding : 3rem;
|
|
|
|
width: 10rem;
|
|
|
|
height: 10rem;
|
|
|
|
border-radius : 100%;
|
|
|
|
border : none;
|
|
|
|
position : relative;
|
|
|
|
box-shadow: 3px 2px 10px 5px #ccc;
|
|
|
|
transition : all .3s ease-out;
|
|
|
|
:hover{
|
|
|
|
background-color : #ff2436;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-03-15 14:50:25 +00:00
|
|
|
class NewDeviceForm extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
}
|
|
|
|
|
|
|
|
formSelector = (option) => {
|
|
|
|
switch (option) {
|
|
|
|
case "Light":
|
|
|
|
return <LightForm/>;
|
|
|
|
case "Sensor":
|
|
|
|
return "This is a sensor form";
|
|
|
|
default:
|
|
|
|
return "This is a default text"
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let options = [];
|
|
|
|
deviceList.forEach((e, i) => {
|
|
|
|
options.push({key: i, text: e, value: e})
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Form style={addDeviceFormStyle}>
|
|
|
|
<Form.Field>
|
|
|
|
<label style={{color: "white"}}>Select the type of device</label>
|
|
|
|
<Dropdown clearable options={options} selection/>
|
|
|
|
</Form.Field>
|
|
|
|
|
|
|
|
<Button type='submit' onClick={this.saveChanges}>Save</Button>
|
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
}
|
2020-03-09 12:52:27 +00:00
|
|
|
}
|
|
|
|
|
2020-03-15 14:50:25 +00:00
|
|
|
|
|
|
|
class LightForm extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let options = [
|
|
|
|
{
|
|
|
|
key: 1,
|
|
|
|
value: "common",
|
|
|
|
text: "Normal Light"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 1,
|
|
|
|
value: "intensity",
|
|
|
|
text: "Supports intensity level"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
return (
|
|
|
|
<Form.Field>
|
|
|
|
<label style={{color: "white"}}>Type of light</label>
|
|
|
|
<Dropdown clearable options={options} selection/>
|
|
|
|
</Form.Field>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2020-03-09 12:52:27 +00:00
|
|
|
export default class NewDevice extends Component {
|
2020-03-15 14:50:25 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
openForm: false
|
|
|
|
}
|
2020-03-09 12:52:27 +00:00
|
|
|
}
|
|
|
|
|
2020-03-15 14:50:25 +00:00
|
|
|
onClickDevice = (event) => {
|
|
|
|
this.setState((prevState) => ({openForm: !prevState.openForm}));
|
|
|
|
};
|
2020-03-09 12:52:27 +00:00
|
|
|
|
2020-03-15 14:50:25 +00:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<StyledDiv onClick={this.onClickDevice} style={{textAlign: "center"}}>
|
|
|
|
<Image src="/img/add.svg" style={{filter: "invert()"}}/>
|
|
|
|
{this.state.openForm ? (
|
|
|
|
<NewDeviceForm/>
|
|
|
|
) : ""}
|
|
|
|
</StyledDiv>
|
|
|
|
)
|
|
|
|
}
|
2020-03-09 12:52:27 +00:00
|
|
|
}
|