2020-03-23 20:24:17 +00:00
|
|
|
import React, { Component } from "react";
|
|
|
|
import styled from "styled-components";
|
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Dropdown,
|
|
|
|
Form,
|
|
|
|
Icon,
|
|
|
|
Image,
|
|
|
|
Input,
|
|
|
|
Modal,
|
|
|
|
} from "semantic-ui-react";
|
2020-03-09 12:52:27 +00:00
|
|
|
|
|
|
|
const StyledDiv = styled.div`
|
2020-03-23 20:24:17 +00:00
|
|
|
background-color: #ff4050;
|
|
|
|
padding: 3rem;
|
2020-03-09 12:52:27 +00:00
|
|
|
width: 10rem;
|
|
|
|
height: 10rem;
|
2020-03-23 20:24:17 +00:00
|
|
|
border-radius: 100%;
|
|
|
|
border: none;
|
|
|
|
position: relative;
|
2020-03-09 12:52:27 +00:00
|
|
|
box-shadow: 3px 2px 10px 5px #ccc;
|
2020-03-23 20:24:17 +00:00
|
|
|
transition: all 0.3s ease-out;
|
|
|
|
:hover {
|
|
|
|
background-color: #ff2436;
|
2020-03-09 12:52:27 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-03-18 13:18:37 +00:00
|
|
|
export default class NewDevice extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
step: 1,
|
2020-03-23 20:24:17 +00:00
|
|
|
openModal: false,
|
2020-03-24 19:35:23 +00:00
|
|
|
motion: false,
|
2020-03-15 14:50:25 +00:00
|
|
|
};
|
2020-03-23 20:24:17 +00:00
|
|
|
this.baseState = this.state;
|
2020-03-19 10:52:13 +00:00
|
|
|
this.createDevice = this.createDevice.bind(this);
|
2020-03-18 13:18:37 +00:00
|
|
|
}
|
2020-03-15 14:50:25 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
handleOpen = () => {
|
|
|
|
this.setState({ openModal: true });
|
|
|
|
};
|
|
|
|
handleClose = () => {
|
|
|
|
this.setState({ openModal: false });
|
|
|
|
};
|
2020-03-15 14:50:25 +00:00
|
|
|
|
2020-03-18 13:18:37 +00:00
|
|
|
resetState = () => {
|
|
|
|
this.setState(this.baseState);
|
|
|
|
this.handleClose();
|
|
|
|
};
|
2020-03-09 12:52:27 +00:00
|
|
|
|
2020-03-18 13:18:37 +00:00
|
|
|
nextStep = () => {
|
2020-03-23 20:24:17 +00:00
|
|
|
this.setState((prevState) => ({ step: prevState.step + 1 }));
|
2020-03-18 13:18:37 +00:00
|
|
|
};
|
|
|
|
previousStep = () => {
|
2020-03-23 20:24:17 +00:00
|
|
|
this.setState((prevState) => ({ step: prevState.step - 1 }));
|
2020-03-18 13:18:37 +00:00
|
|
|
};
|
2020-03-15 14:50:25 +00:00
|
|
|
|
2020-03-18 13:18:37 +00:00
|
|
|
setTypeOfDevice = (e, d) => {
|
2020-03-23 20:24:17 +00:00
|
|
|
if (d.value === "dimmableLight") {
|
|
|
|
this.setState({ typeOfDevice: d.value, intensity: 0 });
|
|
|
|
} else {
|
|
|
|
this.setState({ typeOfDevice: d.value });
|
|
|
|
}
|
2020-03-18 13:18:37 +00:00
|
|
|
};
|
2020-03-15 14:50:25 +00:00
|
|
|
|
2020-03-18 13:18:37 +00:00
|
|
|
setDeviceName = (e, d) => {
|
2020-03-23 20:24:17 +00:00
|
|
|
this.setState({ deviceName: d.value });
|
2020-03-18 13:18:37 +00:00
|
|
|
};
|
2020-03-15 14:50:25 +00:00
|
|
|
|
2020-03-18 13:18:37 +00:00
|
|
|
setTypeOfSensor = (e, d) => {
|
2020-03-24 19:35:23 +00:00
|
|
|
console.log(d.value);
|
|
|
|
if (d.value === "motionSensor") {
|
|
|
|
this.setState({ typeOfSensor: d.value, motion: true });
|
|
|
|
} else {
|
|
|
|
this.setState({ typeOfSensor: d.value });
|
|
|
|
}
|
2020-03-18 13:18:37 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
setLightsDimmerSwitch = (e, d) => {
|
2020-03-23 20:24:17 +00:00
|
|
|
this.setState({ lightsAttached: d.value });
|
2020-03-18 13:18:37 +00:00
|
|
|
};
|
|
|
|
|
2020-03-19 10:52:13 +00:00
|
|
|
createDevice() {
|
2020-03-18 13:18:37 +00:00
|
|
|
// Connect to the backend and create device here.
|
2020-03-19 10:52:13 +00:00
|
|
|
const data = {
|
|
|
|
params: {
|
2020-03-23 20:24:17 +00:00
|
|
|
name: this.state.deviceName,
|
2020-03-19 10:52:13 +00:00
|
|
|
},
|
2020-03-24 19:35:23 +00:00
|
|
|
device: this.state.motion ? "motionSensor" : this.state.typeOfDevice,
|
2020-03-23 20:24:17 +00:00
|
|
|
};
|
2020-03-20 17:42:38 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
switch (this.state.typeOfDevice) {
|
2020-03-20 17:42:38 +00:00
|
|
|
case "dimmableLight":
|
|
|
|
data.params["intensity"] = 1;
|
|
|
|
break;
|
2020-03-23 18:08:31 +00:00
|
|
|
case "sensor":
|
2020-03-24 19:35:23 +00:00
|
|
|
if (!this.state.motion) {
|
|
|
|
data.params["sensor"] = this.state.typeOfSensor;
|
|
|
|
data.params["value"] = 0;
|
|
|
|
}
|
2020-03-23 18:08:31 +00:00
|
|
|
break;
|
|
|
|
case "switch":
|
|
|
|
data.params["lights"] = this.state.lightsAttached;
|
|
|
|
break;
|
2020-03-23 20:24:17 +00:00
|
|
|
default:
|
2020-03-20 17:42:38 +00:00
|
|
|
break;
|
|
|
|
}
|
2020-03-23 20:24:17 +00:00
|
|
|
console.log(data);
|
2020-03-19 10:52:13 +00:00
|
|
|
this.props.addDevice(data);
|
2020-03-18 13:18:37 +00:00
|
|
|
this.resetState();
|
2020-03-23 20:24:17 +00:00
|
|
|
}
|
2020-03-09 12:52:27 +00:00
|
|
|
|
2020-03-18 13:18:37 +00:00
|
|
|
render() {
|
|
|
|
const deviceOptions = [
|
|
|
|
{
|
2020-03-23 20:24:17 +00:00
|
|
|
key: "light",
|
|
|
|
text: "Normal Light",
|
|
|
|
value: "regularLight",
|
|
|
|
image: { avatar: true, src: "/img/lightOn.svg" },
|
2020-03-18 13:18:37 +00:00
|
|
|
},
|
|
|
|
{
|
2020-03-23 20:24:17 +00:00
|
|
|
key: "intensity-light",
|
|
|
|
text: "Intensity Light",
|
|
|
|
value: "dimmableLight",
|
|
|
|
image: { avatar: true, src: "/img/intensity-light.svg" },
|
2020-03-18 13:18:37 +00:00
|
|
|
},
|
|
|
|
{
|
2020-03-23 20:24:17 +00:00
|
|
|
key: "smart-plug",
|
|
|
|
text: "Smart Plug",
|
|
|
|
value: "smartPlug",
|
|
|
|
image: { avatar: true, src: "/img/smart-plug.svg" },
|
2020-03-18 13:18:37 +00:00
|
|
|
},
|
|
|
|
{
|
2020-03-23 20:24:17 +00:00
|
|
|
key: "sensor",
|
|
|
|
text: "Sensor",
|
|
|
|
value: "sensor",
|
|
|
|
image: { avatar: true, src: "/img/sensorOn.svg" },
|
2020-03-18 13:18:37 +00:00
|
|
|
},
|
|
|
|
{
|
2020-03-23 20:24:17 +00:00
|
|
|
key: "switch",
|
|
|
|
text: "Switch",
|
|
|
|
value: "switch",
|
|
|
|
image: { avatar: true, src: "/img/switchOn.svg" },
|
2020-03-18 13:18:37 +00:00
|
|
|
},
|
|
|
|
{
|
2020-03-23 20:24:17 +00:00
|
|
|
key: "dimmer",
|
|
|
|
text: "Dimmer",
|
|
|
|
value: "buttonDimmer",
|
|
|
|
image: { avatar: true, src: "/img/dimmer.svg" },
|
2020-03-18 13:18:37 +00:00
|
|
|
},
|
|
|
|
];
|
|
|
|
const sensorOptions = [
|
|
|
|
{
|
|
|
|
key: "temperature",
|
|
|
|
text: "Temperature Sensor",
|
2020-03-20 17:42:38 +00:00
|
|
|
value: "TEMPERATURE",
|
2020-03-23 20:24:17 +00:00
|
|
|
image: { avatar: true, src: "/img/temperature-sensor.svg" },
|
2020-03-18 13:18:37 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "humidity",
|
|
|
|
text: "Humidity Sensor",
|
2020-03-20 17:42:38 +00:00
|
|
|
value: "HUMIDITY",
|
2020-03-23 20:24:17 +00:00
|
|
|
image: { avatar: true, src: "/img/humidity-sensor.svg" },
|
2020-03-18 13:18:37 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "light",
|
|
|
|
text: "Light Sensor",
|
2020-03-20 17:42:38 +00:00
|
|
|
value: "LIGHT",
|
2020-03-23 20:24:17 +00:00
|
|
|
image: { avatar: true, src: "/img/light-sensor.svg" },
|
2020-03-18 13:18:37 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "motion",
|
|
|
|
text: "Motion Sensor",
|
2020-03-20 17:42:38 +00:00
|
|
|
value: "motionSensor",
|
2020-03-23 20:24:17 +00:00
|
|
|
image: { avatar: true, src: "/img/sensorOn.svg" },
|
|
|
|
},
|
2020-03-18 13:18:37 +00:00
|
|
|
];
|
|
|
|
const availableLights = [];
|
2020-03-23 20:24:17 +00:00
|
|
|
this.props.devices.forEach((d) => {
|
|
|
|
availableLights.push({
|
|
|
|
key: d.id,
|
|
|
|
text: d.name,
|
|
|
|
value: d.id,
|
|
|
|
});
|
2020-03-18 13:18:37 +00:00
|
|
|
});
|
|
|
|
const step1 = (
|
|
|
|
<Dropdown
|
|
|
|
name="typeOfDevice"
|
2020-03-23 20:24:17 +00:00
|
|
|
placeholder="Select a Type of Device"
|
2020-03-18 13:18:37 +00:00
|
|
|
fluid
|
|
|
|
selection
|
|
|
|
onChange={this.setTypeOfDevice}
|
|
|
|
options={deviceOptions}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
const step2 = (typeOfDevice) => {
|
2020-03-23 20:24:17 +00:00
|
|
|
const deviceName = (
|
|
|
|
<div>
|
|
|
|
<Form.Field>
|
|
|
|
<label>Device Name: </label>
|
|
|
|
<Input
|
|
|
|
fluid
|
|
|
|
size={"large"}
|
|
|
|
onChange={this.setDeviceName}
|
|
|
|
focus
|
|
|
|
placeholder="Device Name"
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
const sensorForm = (
|
|
|
|
<Form.Field style={{ marginTop: "1rem" }}>
|
2020-03-18 13:18:37 +00:00
|
|
|
<label>Type of Sensor: </label>
|
|
|
|
<Dropdown
|
|
|
|
name="typeOfDevice"
|
2020-03-23 20:24:17 +00:00
|
|
|
placeholder="Select a Type of Sensor"
|
2020-03-18 13:18:37 +00:00
|
|
|
fluid
|
|
|
|
selection
|
|
|
|
onChange={this.setTypeOfSensor}
|
|
|
|
options={sensorOptions}
|
|
|
|
/>
|
2020-03-23 20:24:17 +00:00
|
|
|
</Form.Field>
|
|
|
|
);
|
|
|
|
const switchDimmerOptions = (
|
|
|
|
<Form.Field style={{ marginTop: "1rem" }}>
|
|
|
|
<label>Select the Lights You Want to Attach: </label>
|
|
|
|
<Dropdown
|
|
|
|
name="typeOfDevice"
|
|
|
|
placeholder="Select Lights"
|
|
|
|
fluid
|
|
|
|
multiple
|
|
|
|
onChange={this.setLightsDimmerSwitch}
|
|
|
|
options={availableLights}
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
|
|
|
);
|
2020-03-18 13:18:37 +00:00
|
|
|
return (
|
|
|
|
<Form>
|
|
|
|
{deviceName}
|
2020-03-23 20:24:17 +00:00
|
|
|
{this.state.typeOfDevice === "sensor" ? sensorForm : ""}
|
|
|
|
{this.state.typeOfDevice === "switch" ||
|
|
|
|
this.state.typeOfDevice === "dimmer"
|
|
|
|
? switchDimmerOptions
|
|
|
|
: ""}
|
2020-03-18 13:18:37 +00:00
|
|
|
</Form>
|
2020-03-23 20:24:17 +00:00
|
|
|
);
|
2020-03-18 13:18:37 +00:00
|
|
|
};
|
|
|
|
const steps = [step1, step2()];
|
|
|
|
return (
|
2020-03-23 20:24:17 +00:00
|
|
|
<Modal
|
|
|
|
closeIcon
|
|
|
|
open={this.state.openModal}
|
|
|
|
onClose={this.resetState}
|
|
|
|
trigger={
|
|
|
|
<StyledDiv onClick={this.handleOpen}>
|
|
|
|
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
|
|
|
|
</StyledDiv>
|
|
|
|
}
|
|
|
|
centered={true}
|
|
|
|
>
|
2020-03-18 13:18:37 +00:00
|
|
|
<Modal.Header>Add a New Device</Modal.Header>
|
2020-03-23 20:24:17 +00:00
|
|
|
<Modal.Content>{steps[this.state.step - 1]}</Modal.Content>
|
2020-03-18 13:18:37 +00:00
|
|
|
<Modal.Actions>
|
|
|
|
{this.state.step > 1 ? (
|
2020-03-23 20:24:17 +00:00
|
|
|
<Button
|
|
|
|
onClick={this.previousStep}
|
|
|
|
color="blue"
|
|
|
|
icon
|
|
|
|
labelPosition="left"
|
|
|
|
>
|
|
|
|
<Icon name="left arrow" />
|
2020-03-18 13:18:37 +00:00
|
|
|
Back
|
|
|
|
</Button>
|
2020-03-23 20:24:17 +00:00
|
|
|
) : (
|
|
|
|
""
|
|
|
|
)}
|
2020-03-18 13:18:37 +00:00
|
|
|
{this.state.step < steps.length ? (
|
2020-03-23 20:24:17 +00:00
|
|
|
<Button
|
|
|
|
color="blue"
|
|
|
|
onClick={this.nextStep}
|
|
|
|
icon
|
|
|
|
labelPosition="right"
|
|
|
|
>
|
2020-03-18 13:18:37 +00:00
|
|
|
Next
|
2020-03-23 20:24:17 +00:00
|
|
|
<Icon name="right arrow" />
|
2020-03-18 13:18:37 +00:00
|
|
|
</Button>
|
2020-03-23 20:24:17 +00:00
|
|
|
) : (
|
|
|
|
""
|
|
|
|
)}
|
2020-03-18 13:18:37 +00:00
|
|
|
{this.state.step === steps.length ? (
|
2020-03-23 20:24:17 +00:00
|
|
|
<Button
|
|
|
|
onClick={this.createDevice}
|
|
|
|
color="blue"
|
|
|
|
icon
|
|
|
|
labelPosition="right"
|
|
|
|
>
|
|
|
|
<Icon name="up arrow" />
|
2020-03-18 13:18:37 +00:00
|
|
|
Finish
|
|
|
|
</Button>
|
2020-03-23 20:24:17 +00:00
|
|
|
) : (
|
|
|
|
""
|
|
|
|
)}
|
2020-03-18 13:18:37 +00:00
|
|
|
</Modal.Actions>
|
|
|
|
</Modal>
|
2020-03-23 20:24:17 +00:00
|
|
|
);
|
2020-03-18 13:18:37 +00:00
|
|
|
}
|
2020-03-09 12:52:27 +00:00
|
|
|
}
|