188 lines
4.9 KiB
JavaScript
188 lines
4.9 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Button, Header, Modal, Icon, Responsive } from "semantic-ui-react";
|
|
import { connect } from "react-redux";
|
|
import { RemoteService } from "../remote";
|
|
import { appActions } from "../storeActions";
|
|
//import { update } from "immutability-helper";
|
|
|
|
class SceneModal extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = this.initialState;
|
|
this.setInitialState();
|
|
|
|
this.addSceneModal = this.addSceneModal.bind(this);
|
|
this.modifySceneModal = this.modifySceneModal.bind(this);
|
|
this.deleteScene = this.deleteScene.bind(this);
|
|
}
|
|
|
|
get initialState() {
|
|
return {
|
|
//INITIAL STATE HERE
|
|
};
|
|
}
|
|
|
|
setInitialState() {
|
|
this.setState(this.initialState);
|
|
}
|
|
|
|
get type() {
|
|
return !this.props.id ? "new" : "modify";
|
|
}
|
|
|
|
addSceneModal = (e) => {
|
|
/*let data = {
|
|
// DATA HERE
|
|
};*/
|
|
// TODO CALL TO REMOTE SERVER TO ADD SCENE
|
|
/*this.props
|
|
.saveRoom(data, null)
|
|
.then(() => {
|
|
this.setInitialState();
|
|
this.closeModal();
|
|
})
|
|
.catch((err) => console.error("error in creating room", err));*/
|
|
};
|
|
|
|
modifySceneModal = (e) => {
|
|
/*let data = {
|
|
// DATA HERE
|
|
};*/
|
|
// TODO CALL TO REMOTE SERVER TO MODIFY SCENE
|
|
/*this.props
|
|
.saveRoom(data, this.props.id)
|
|
.then(() => {
|
|
this.setInitialState();
|
|
this.closeModal();
|
|
})
|
|
.catch((err) => console.error("error in updating room", err));*/
|
|
};
|
|
|
|
deleteScene = (e) => {
|
|
// TODO CALL TO REMOTE SERVER TO DELETE SCENE
|
|
/*
|
|
this.props
|
|
.deleteRoom(this.props.id)
|
|
.then(() => this.closeModal())
|
|
.catch((err) => console.error("error in deleting room", err));*/
|
|
};
|
|
|
|
changeSomething = (event) => {
|
|
let nam = event.target.name;
|
|
let val = event.target.value;
|
|
this.setState({ [nam]: val });
|
|
};
|
|
|
|
closeModal = (e) => {
|
|
this.setState({ openModal: false });
|
|
};
|
|
|
|
openModal = (e) => {
|
|
this.setState({ openModal: true });
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
{!this.props.nicolaStop ? (
|
|
<div>
|
|
<Responsive minWidth={768}>
|
|
{this.type === "new" ? (
|
|
<Button
|
|
icon
|
|
labelPosition="left"
|
|
inverted
|
|
onClick={this.openModal}
|
|
>
|
|
<Icon name="plus" size="small" />
|
|
ADD SCENE
|
|
</Button>
|
|
) : (
|
|
<Icon name="pencil" size="small" onClick={this.openModal} />
|
|
)}
|
|
</Responsive>
|
|
<Responsive maxWidth={768}>
|
|
{this.type === "new" ? (
|
|
<Button
|
|
icon
|
|
fluid
|
|
labelPosition="left"
|
|
onClick={this.openModal}
|
|
>
|
|
<Icon name="plus" size="small" />
|
|
ADD SCENE
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
icon
|
|
fluid
|
|
labelPosition="left"
|
|
onClick={this.openModal}
|
|
>
|
|
<Icon name="pencil" size="small" />
|
|
EDIT SCENE
|
|
</Button>
|
|
)}
|
|
</Responsive>
|
|
</div>
|
|
) : null}
|
|
|
|
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
|
|
<Header>
|
|
{this.type === "new" ? "Add new scene" : "Modify scene"}
|
|
</Header>
|
|
<Modal.Content>
|
|
{
|
|
//TODO FORM TO ADD OR MODIFY SCENE
|
|
}
|
|
|
|
{this.type === "modify" ? (
|
|
<Button
|
|
icon
|
|
labelPosition="left"
|
|
inverted
|
|
color="red"
|
|
onClick={this.deleteScene}
|
|
>
|
|
<Icon name="trash alternate" />
|
|
Delete Scene
|
|
</Button>
|
|
) : null}
|
|
</Modal.Content>
|
|
<Modal.Actions>
|
|
<Button color="red" onClick={this.closeModal}>
|
|
<Icon name="remove" />{" "}
|
|
{this.type === "new" ? "Cancel" : "Discard changes"}
|
|
</Button>
|
|
|
|
<Button
|
|
color="green"
|
|
onClick={
|
|
this.type === "new" ? this.addSceneModal : this.modifySceneModal
|
|
}
|
|
>
|
|
<Icon name="checkmark" />{" "}
|
|
{this.type === "new" ? "Add scene" : "Save changes"}
|
|
</Button>
|
|
</Modal.Actions>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const setActiveScene = (activeScene) => {
|
|
return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
|
|
};
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
scene: ownProps.id ? state.scenes[ownProps.id] : null,
|
|
});
|
|
const SceneModalContainer = connect(
|
|
mapStateToProps,
|
|
{ ...RemoteService, setActiveScene },
|
|
null,
|
|
{ forwardRef: true }
|
|
)(SceneModal);
|
|
export default SceneModalContainer;
|