189 lines
4.7 KiB
JavaScript
189 lines
4.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {
|
|
Button, Modal, Icon, Image, Form, Dropdown,
|
|
} from 'semantic-ui-react';
|
|
import { connect } from 'react-redux';
|
|
import styled from 'styled-components';
|
|
import { RemoteService } from '../../remote';
|
|
// import { appActions } from "../../storeActions";
|
|
|
|
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 NewSceneDevice extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
openModal: false,
|
|
sceneDevices: this.props.scene ? this.props.scene.sceneStates : {},
|
|
deviceName: '',
|
|
availableDevices: [],
|
|
};
|
|
this.getDevices();
|
|
// this.getSceneStates();
|
|
this.availableDevices();
|
|
// console.log(this.state);
|
|
|
|
this.setSceneState = this.setSceneState.bind(this);
|
|
this.createState = this.createState.bind(this);
|
|
this.availableDevices = this.availableDevices.bind(this);
|
|
}
|
|
|
|
getDevices() {
|
|
this.props
|
|
.fetchDevices()
|
|
.catch((err) => console.error('error fetching devices:', err));
|
|
}
|
|
|
|
// getSceneStates() {
|
|
// this.props
|
|
// .fetchStates(this.props.activeScene)
|
|
// .catch((err) => console.error(`error fetching states`, err));
|
|
// }
|
|
|
|
handleOpen = () => {
|
|
this.setState({ openModal: true });
|
|
};
|
|
|
|
handleClose = () => {
|
|
this.setState({ openModal: false });
|
|
};
|
|
|
|
availableDevices() {
|
|
const availableDevices = [];
|
|
this.props.devices.forEach((e) => {
|
|
if (
|
|
Object.values(this.props.sceneStates).filter((d) => e.id === d.deviceId)
|
|
.length < 1
|
|
) {
|
|
if (e.flowType === 'OUTPUT') {
|
|
availableDevices.push({
|
|
key: e.id,
|
|
text: e.name,
|
|
value: e.id,
|
|
});
|
|
}
|
|
} else {
|
|
// console.log("NOT FOUND", e);
|
|
}
|
|
});
|
|
this.setState({ availableDevices });
|
|
// return availableDevices;
|
|
}
|
|
|
|
resetState = () => {
|
|
this.setState(this.baseState);
|
|
this.handleClose();
|
|
};
|
|
|
|
setSceneState(e, d) {
|
|
this.setState({ devicesAttached: d.value });
|
|
}
|
|
|
|
createState() {
|
|
for (let i = 0; i < this.state.devicesAttached.length; i++) {
|
|
const device = this.props.devices.filter(
|
|
(e) => this.state.devicesAttached[i] === e.id,
|
|
);
|
|
const data = {
|
|
sceneId: this.props.activeScene,
|
|
id: device[0].id,
|
|
kind: device[0].kind,
|
|
};
|
|
this.props
|
|
.saveState(data)
|
|
.catch((err) => console.error('error in creating state', err));
|
|
}
|
|
this.resetState();
|
|
}
|
|
|
|
render() {
|
|
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 Scene State</Modal.Header>
|
|
<Modal.Content>
|
|
<Form>
|
|
<Form.Field style={{ marginTop: '1rem' }}>
|
|
<label>Select devices you want to attach: </label>
|
|
<Dropdown
|
|
name="scene devices"
|
|
placeholder="Select Devices"
|
|
fluid
|
|
multiple
|
|
onChange={this.setSceneState}
|
|
onClick={() => this.availableDevices()}
|
|
options={this.state.availableDevices}
|
|
/>
|
|
</Form.Field>
|
|
</Form>
|
|
</Modal.Content>
|
|
<Modal.Actions>
|
|
<Button
|
|
onClick={this.createState}
|
|
color="blue"
|
|
icon
|
|
labelPosition="right"
|
|
>
|
|
<Icon name="up arrow" />
|
|
Finish
|
|
</Button>
|
|
</Modal.Actions>
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, _) => ({
|
|
devices: Object.values(state.devices),
|
|
get sceneStates() {
|
|
if (state.active.activeScene !== -1) {
|
|
const stateArray = [
|
|
...state.scenes[state.active.activeScene].sceneStates,
|
|
].sort();
|
|
console.log(state.scenes[state.active.activeScene]);
|
|
return stateArray.map((id) => state.sceneStates[id]);
|
|
}
|
|
return [];
|
|
},
|
|
activeScene: state.active.activeScene,
|
|
});
|
|
const NewSceneDeviceContainer = connect(
|
|
mapStateToProps,
|
|
RemoteService,
|
|
)(NewSceneDevice);
|
|
export default NewSceneDeviceContainer;
|