434 lines
11 KiB
JavaScript
434 lines
11 KiB
JavaScript
import React, { Component } from 'react';
|
|
import styled from 'styled-components';
|
|
import {
|
|
Button,
|
|
Dropdown,
|
|
Form,
|
|
Icon,
|
|
Image,
|
|
Input,
|
|
Modal,
|
|
} from 'semantic-ui-react';
|
|
import { connect } from 'react-redux';
|
|
import { RemoteService } from '../../../remote';
|
|
|
|
const StyledDiv = styled.div`
|
|
background-color: #505bda;
|
|
padding: 3rem;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
border-radius: 100%;
|
|
border: none;
|
|
position: relative;
|
|
box-shadow: 3px 2px 10px 5px #ccc;
|
|
transition: all 0.3s ease-out;
|
|
:hover {
|
|
background-color: #4345d9;
|
|
}
|
|
:active {
|
|
transform: translate(0.3px, 0.8px);
|
|
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
|
|
}
|
|
`;
|
|
|
|
class NewDevice extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
step: 1,
|
|
openModal: false,
|
|
motion: false,
|
|
deviceName: '',
|
|
};
|
|
this.baseState = this.state;
|
|
this.createDevice = this.createDevice.bind(this);
|
|
}
|
|
|
|
handleOpen = () => {
|
|
this.setState({ openModal: true });
|
|
};
|
|
|
|
handleClose = () => {
|
|
this.setState({ openModal: false });
|
|
};
|
|
|
|
resetState = () => {
|
|
this.setState(this.baseState);
|
|
this.handleClose();
|
|
};
|
|
|
|
nextStep = () => {
|
|
this.setState((prevState) => ({ step: prevState.step + 1 }));
|
|
};
|
|
|
|
previousStep = () => {
|
|
this.setState((prevState) => ({ step: prevState.step - 1 }));
|
|
};
|
|
|
|
setTypeOfDevice = (e, d) => {
|
|
if (d.value === 'dimmableLight') {
|
|
this.setState({ typeOfDevice: d.value, intensity: 0 });
|
|
} else {
|
|
this.setState({ typeOfDevice: d.value });
|
|
}
|
|
};
|
|
|
|
setDeviceName = (e, d) => {
|
|
this.setState({ deviceName: d.value });
|
|
};
|
|
|
|
setTypeOfSensor = (e, d) => {
|
|
console.log(d.value);
|
|
if (d.value === 'motionSensor') {
|
|
this.setState({ typeOfSensor: d.value, motion: true });
|
|
} else {
|
|
this.setState({ typeOfSensor: d.value });
|
|
}
|
|
};
|
|
|
|
setLightsDimmerSwitch = (e, d) => {
|
|
this.setState({ lightsAttached: d.value });
|
|
};
|
|
|
|
async createDevice() {
|
|
// Connect to the backend and create device here.
|
|
const data = {
|
|
id: null,
|
|
roomId: this.props.activeRoom,
|
|
name: this.state.deviceName,
|
|
kind: this.state.motion ? 'motionSensor' : this.state.typeOfDevice,
|
|
};
|
|
let outputs = null;
|
|
|
|
const defaultNames = {
|
|
regularLight: 'New regular light',
|
|
dimmableLight: 'New intensity light',
|
|
smartPlug: 'New smart Plug',
|
|
sensor: 'New sensor',
|
|
switch: 'New switch',
|
|
buttonDimmer: 'New button dimmer',
|
|
knobDimmer: 'New knob dimmer',
|
|
securityCamera: 'New security camera',
|
|
thermostat: 'New thermostat',
|
|
curtains: 'New curtains',
|
|
};
|
|
|
|
if (this.state.deviceName === '') {
|
|
data.name = defaultNames[this.state.typeOfDevice];
|
|
}
|
|
console.log('-------------------------');
|
|
console.log(this.state.typeOfDevice);
|
|
|
|
switch (this.state.typeOfDevice) {
|
|
// trying to make securityCamera work
|
|
// case "securityCamera":
|
|
// data.path="/security_camera_videos/security_camera_1.mp4";
|
|
// data.on=false;
|
|
// break;
|
|
// trying to make thermostat work
|
|
case 'thermostat':
|
|
data.targetTemperature = 0;
|
|
data.measuredTemperature = 0;
|
|
break;
|
|
case 'dimmableLight':
|
|
data.intensity = 0;
|
|
break;
|
|
case 'sensor':
|
|
if (!this.state.motion) {
|
|
data.sensor = this.state.typeOfSensor;
|
|
data.value = 0;
|
|
}
|
|
break;
|
|
case 'switch':
|
|
case 'buttonDimmer':
|
|
case 'knobDimmer':
|
|
outputs = this.state.lightsAttached;
|
|
if (
|
|
this.state.lightsAttached === undefined
|
|
|| this.state.lightsAttached.length === 0
|
|
) {
|
|
alert(
|
|
'No lights attached to this switch! Please, add a light a first.',
|
|
);
|
|
return;
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
try {
|
|
const newDevice = await this.props.saveDevice(data);
|
|
if (outputs) {
|
|
await this.props.connectOutputs(newDevice, outputs);
|
|
}
|
|
this.resetState();
|
|
} catch (e) {
|
|
console.error('device creation error: ', e);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const deviceOptions = [
|
|
// stuff
|
|
{
|
|
key: 'thermostat',
|
|
text: 'Thermostat',
|
|
value: 'thermostat',
|
|
image: { avatar: true, src: '/img/thermostat-icon.png' },
|
|
},
|
|
{
|
|
key: 'curtains',
|
|
text: 'Curtain',
|
|
value: 'curtains',
|
|
image: { avatar: true, src: '/img/curtains-icon.png' },
|
|
},
|
|
// stuff ends
|
|
{
|
|
key: 'light',
|
|
text: 'Normal Light',
|
|
value: 'regularLight',
|
|
image: { avatar: true, src: '/img/lightOn.svg' },
|
|
},
|
|
{
|
|
key: 'intensity-light',
|
|
text: 'Intensity Light',
|
|
value: 'dimmableLight',
|
|
image: { avatar: true, src: '/img/intensity-light.svg' },
|
|
},
|
|
{
|
|
key: 'smart-plug',
|
|
text: 'Smart Plug',
|
|
value: 'smartPlug',
|
|
image: { avatar: true, src: '/img/smart-plug.svg' },
|
|
},
|
|
{
|
|
key: 'sensor',
|
|
text: 'Sensor',
|
|
value: 'sensor',
|
|
image: { avatar: true, src: '/img/sensorOn.svg' },
|
|
},
|
|
{
|
|
key: 'switch',
|
|
text: 'Switch',
|
|
value: 'switch',
|
|
image: { avatar: true, src: '/img/switchOn.svg' },
|
|
},
|
|
{
|
|
key: 'knobDimmer',
|
|
text: 'Knob Dimmer',
|
|
value: 'knobDimmer',
|
|
image: { avatar: true, src: '/img/knob.svg' },
|
|
},
|
|
{
|
|
key: 'buttonDimmer',
|
|
text: 'Button Dimmer',
|
|
value: 'buttonDimmer',
|
|
image: { avatar: true, src: '/img/plusMinus.svg' },
|
|
},
|
|
{
|
|
key: 'securityCamera',
|
|
text: 'Security Camera',
|
|
value: 'securityCamera',
|
|
image: { avatar: true, src: '/img/security-icon.png' },
|
|
},
|
|
];
|
|
const sensorOptions = [
|
|
{
|
|
key: 'temperature',
|
|
text: 'Temperature Sensor',
|
|
value: 'TEMPERATURE',
|
|
image: { avatar: true, src: '/img/temperature-sensor.svg' },
|
|
},
|
|
{
|
|
key: 'humidity',
|
|
text: 'Humidity Sensor',
|
|
value: 'HUMIDITY',
|
|
image: { avatar: true, src: '/img/humidity-sensor.svg' },
|
|
},
|
|
{
|
|
key: 'light',
|
|
text: 'Light Sensor',
|
|
value: 'LIGHT',
|
|
image: { avatar: true, src: '/img/light-sensor.svg' },
|
|
},
|
|
{
|
|
key: 'motion',
|
|
text: 'Motion Sensor',
|
|
value: 'motionSensor',
|
|
image: { avatar: true, src: '/img/sensorOn.svg' },
|
|
},
|
|
];
|
|
const availableSwitchDevices = [];
|
|
const availableDimmerDevices = [];
|
|
this.props.devices.forEach((d) => {
|
|
if (
|
|
d.kind === 'regularLight'
|
|
|| d.kind === 'dimmableLight'
|
|
|| d.kind === 'smartPlug'
|
|
) {
|
|
availableSwitchDevices.push({
|
|
key: d.id,
|
|
text: d.name,
|
|
value: d.id,
|
|
});
|
|
}
|
|
if (d.kind === 'dimmableLight') {
|
|
availableDimmerDevices.push({
|
|
key: d.id,
|
|
text: d.name,
|
|
value: d.id,
|
|
});
|
|
}
|
|
});
|
|
const step1 = (
|
|
<Dropdown
|
|
name="typeOfDevice"
|
|
placeholder="Select a Type of Device"
|
|
fluid
|
|
selection
|
|
onChange={this.setTypeOfDevice}
|
|
options={deviceOptions}
|
|
/>
|
|
);
|
|
const step2 = (typeOfDevice) => {
|
|
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' }}>
|
|
<label>Type of Sensor: </label>
|
|
<Dropdown
|
|
name="typeOfDevice"
|
|
placeholder="Select a Type of Sensor"
|
|
fluid
|
|
selection
|
|
onChange={this.setTypeOfSensor}
|
|
options={sensorOptions}
|
|
/>
|
|
</Form.Field>
|
|
);
|
|
const switchOptions = (
|
|
<Form.Field style={{ marginTop: '1rem' }}>
|
|
<label>Select the lights or smart plugs You Want to Attach: </label>
|
|
<Dropdown
|
|
name="typeOfDevice"
|
|
placeholder="Select Lights"
|
|
fluid
|
|
multiple
|
|
onChange={this.setLightsDimmerSwitch}
|
|
options={availableSwitchDevices}
|
|
/>
|
|
</Form.Field>
|
|
);
|
|
const dimmerOptions = (
|
|
<Form.Field style={{ marginTop: '1rem' }}>
|
|
<label>Select the dimmable lights You Want to Attach: </label>
|
|
<Dropdown
|
|
name="typeOfDevice"
|
|
placeholder="Select Lights"
|
|
fluid
|
|
multiple
|
|
onChange={this.setLightsDimmerSwitch}
|
|
options={availableDimmerDevices}
|
|
/>
|
|
</Form.Field>
|
|
);
|
|
return (
|
|
<Form>
|
|
{deviceName}
|
|
{this.state.typeOfDevice === 'sensor' ? sensorForm : ''}
|
|
{this.state.typeOfDevice === 'switch' ? switchOptions : ''}
|
|
{this.state.typeOfDevice === 'buttonDimmer'
|
|
|| this.state.typeOfDevice === 'knobDimmer'
|
|
? dimmerOptions
|
|
: ''}
|
|
</Form>
|
|
);
|
|
};
|
|
const steps = [step1, step2()];
|
|
return (
|
|
<Modal
|
|
closeIcon
|
|
open={this.state.openModal}
|
|
onClose={this.resetState}
|
|
trigger={(
|
|
<StyledDiv
|
|
onClick={this.handleOpen}
|
|
style={{
|
|
position: 'relative',
|
|
top: 'calc(50% - 5rem)',
|
|
left: 'calc(50% - 5rem)',
|
|
}}
|
|
>
|
|
<Image src="/img/add.svg" style={{ filter: 'invert()' }} />
|
|
</StyledDiv>
|
|
)}
|
|
centered
|
|
>
|
|
<Modal.Header>Add a New Device</Modal.Header>
|
|
<Modal.Content>{steps[this.state.step - 1]}</Modal.Content>
|
|
<Modal.Actions>
|
|
{this.state.step > 1 ? (
|
|
<Button
|
|
onClick={this.previousStep}
|
|
color="blue"
|
|
icon
|
|
labelPosition="left"
|
|
>
|
|
<Icon name="left arrow" />
|
|
Back
|
|
</Button>
|
|
) : (
|
|
''
|
|
)}
|
|
{this.state.step < steps.length ? (
|
|
<Button
|
|
color="blue"
|
|
onClick={this.nextStep}
|
|
icon
|
|
labelPosition="right"
|
|
>
|
|
Next
|
|
<Icon name="right arrow" />
|
|
</Button>
|
|
) : (
|
|
''
|
|
)}
|
|
{this.state.step === steps.length ? (
|
|
<Button
|
|
onClick={this.createDevice}
|
|
color="blue"
|
|
icon
|
|
labelPosition="right"
|
|
>
|
|
<Icon name="up arrow" />
|
|
Finish
|
|
</Button>
|
|
) : (
|
|
''
|
|
)}
|
|
</Modal.Actions>
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, _) => ({
|
|
devices: Object.values(state.devices),
|
|
activeRoom: state.active.activeRoom,
|
|
});
|
|
const NewDeviceContainer = connect(mapStateToProps, RemoteService)(NewDevice);
|
|
export default NewDeviceContainer;
|