88 lines
2.0 KiB
JavaScript
88 lines
2.0 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Button, Modal, Icon, Image } from "semantic-ui-react";
|
|
import { connect } from "react-redux";
|
|
import { RemoteService } from "../../remote";
|
|
import styled from "styled-components";
|
|
//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,
|
|
};
|
|
}
|
|
|
|
handleOpen = () => {
|
|
this.setState({ openModal: true });
|
|
};
|
|
handleClose = () => {
|
|
this.setState({ openModal: false });
|
|
};
|
|
|
|
resetState = () => {
|
|
this.setState(this.baseState);
|
|
this.handleClose();
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<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}
|
|
>
|
|
<Modal.Header>Add a New Scene Device</Modal.Header>
|
|
<Modal.Content></Modal.Content>
|
|
<Modal.Actions>
|
|
<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 NewSceneDeviceContainer = connect(
|
|
mapStateToProps,
|
|
RemoteService
|
|
)(NewSceneDevice);
|
|
export default NewSceneDeviceContainer;
|