2020-05-12 13:18:33 +00:00
|
|
|
import React, { Component } from 'react';
|
2020-04-16 13:15:33 +00:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Header,
|
|
|
|
Modal,
|
|
|
|
Icon,
|
|
|
|
Responsive,
|
|
|
|
Form,
|
|
|
|
Input,
|
2020-05-04 14:09:56 +00:00
|
|
|
Dropdown,
|
2020-05-05 13:53:07 +00:00
|
|
|
Checkbox,
|
2020-05-06 09:28:27 +00:00
|
|
|
Segment,
|
2020-05-12 13:18:33 +00:00
|
|
|
} from 'semantic-ui-react';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import SelectIcons from './SelectIcons';
|
|
|
|
import { RemoteService } from '../remote';
|
|
|
|
import { appActions } from '../storeActions';
|
|
|
|
// import { update } from "immutability-helper";
|
2020-04-15 13:54:30 +00:00
|
|
|
|
|
|
|
class SceneModal extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = this.initialState;
|
|
|
|
this.addSceneModal = this.addSceneModal.bind(this);
|
|
|
|
this.modifySceneModal = this.modifySceneModal.bind(this);
|
|
|
|
this.deleteScene = this.deleteScene.bind(this);
|
2020-05-04 13:08:17 +00:00
|
|
|
this.updateIcon = this.updateIcon.bind(this);
|
2020-05-05 13:53:07 +00:00
|
|
|
this.setGuestAccessEnabled = this.setGuestAccessEnabled.bind(this);
|
2020-05-04 14:09:56 +00:00
|
|
|
this.setCopyFrom = this.setCopyFrom.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(oldProps) {
|
|
|
|
// this might bug out since we are just checking the length
|
|
|
|
// to see if the elements inside this.props.scenes are changing
|
|
|
|
if (this.props.scenes.length !== oldProps.scenes.length) {
|
|
|
|
this.setState({ ...this.state, scenes: this.scenes });
|
|
|
|
}
|
2020-04-15 13:54:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
get initialState() {
|
|
|
|
return {
|
2020-05-12 13:18:33 +00:00
|
|
|
name: this.type === 'new' ? 'New Scene' : this.props.scene.name,
|
2020-04-16 13:15:33 +00:00
|
|
|
openModal: false,
|
2020-05-12 13:18:33 +00:00
|
|
|
selectedIcon: 'home',
|
2020-05-04 14:09:56 +00:00
|
|
|
scenes: this.scenes,
|
|
|
|
copyFrom: null,
|
2020-05-05 13:53:07 +00:00
|
|
|
guestAccessEnabled:
|
2020-05-12 13:18:33 +00:00
|
|
|
this.type === 'new' ? null : this.props.scene.guestAccessEnabled,
|
2020-04-15 13:54:30 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-05-04 14:09:56 +00:00
|
|
|
get scenes() {
|
|
|
|
return this.props.scenes.map((s) => ({
|
|
|
|
key: s.id,
|
|
|
|
text: s.name,
|
|
|
|
value: s.id,
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2020-04-15 13:54:30 +00:00
|
|
|
setInitialState() {
|
|
|
|
this.setState(this.initialState);
|
|
|
|
}
|
|
|
|
|
|
|
|
get type() {
|
2020-05-12 13:18:33 +00:00
|
|
|
return !this.props.id ? 'new' : 'modify';
|
2020-04-15 13:54:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
addSceneModal = (e) => {
|
2020-05-12 13:18:33 +00:00
|
|
|
const data = {
|
2020-04-18 14:26:12 +00:00
|
|
|
name: this.state.name,
|
2020-05-04 13:08:17 +00:00
|
|
|
icon: this.state.selectedIcon,
|
2020-04-18 14:26:12 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
this.props
|
2020-05-04 14:09:56 +00:00
|
|
|
.saveScene(data, null, this.state.copyFrom)
|
2020-04-15 13:54:30 +00:00
|
|
|
.then(() => {
|
|
|
|
this.setInitialState();
|
|
|
|
this.closeModal();
|
|
|
|
})
|
2020-05-12 13:18:33 +00:00
|
|
|
.catch((err) => console.error('error in creating room', err));
|
2020-04-15 13:54:30 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
modifySceneModal = (e) => {
|
2020-05-12 13:18:33 +00:00
|
|
|
const data = {
|
2020-04-18 14:26:12 +00:00
|
|
|
name: this.state.name,
|
2020-05-04 13:08:17 +00:00
|
|
|
icon: this.state.selectedIcon,
|
2020-05-05 13:53:07 +00:00
|
|
|
guestAccessEnabled: this.state.guestAccessEnabled,
|
2020-04-18 14:26:12 +00:00
|
|
|
};
|
2020-05-05 13:53:07 +00:00
|
|
|
console.log(data);
|
2020-04-18 14:26:12 +00:00
|
|
|
|
|
|
|
this.props
|
|
|
|
.saveScene(data, this.props.id)
|
2020-04-15 13:54:30 +00:00
|
|
|
.then(() => {
|
|
|
|
this.setInitialState();
|
|
|
|
this.closeModal();
|
|
|
|
})
|
2020-05-12 13:18:33 +00:00
|
|
|
.catch((err) => console.error('error in updating room', err));
|
2020-04-15 13:54:30 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
deleteScene = (e) => {
|
|
|
|
this.props
|
2020-04-18 14:26:12 +00:00
|
|
|
.deleteScene(this.props.id)
|
2020-04-15 13:54:30 +00:00
|
|
|
.then(() => this.closeModal())
|
2020-05-12 13:18:33 +00:00
|
|
|
.catch((err) => console.error('error in deleting room', err));
|
2020-04-15 13:54:30 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
changeSomething = (event) => {
|
2020-05-12 13:18:33 +00:00
|
|
|
const nam = event.target.name;
|
|
|
|
const val = event.target.value;
|
2020-04-15 13:54:30 +00:00
|
|
|
this.setState({ [nam]: val });
|
|
|
|
};
|
|
|
|
|
|
|
|
closeModal = (e) => {
|
2020-05-06 09:28:27 +00:00
|
|
|
this.setState({ ...this.state, openModal: false });
|
2020-04-15 13:54:30 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
openModal = (e) => {
|
2020-05-08 13:45:08 +00:00
|
|
|
this.setState({ ...this.state, openModal: true });
|
2020-04-15 13:54:30 +00:00
|
|
|
};
|
|
|
|
|
2020-05-04 13:08:17 +00:00
|
|
|
updateIcon(e) {
|
2020-05-08 13:45:08 +00:00
|
|
|
this.setState({ ...this.state, selectedIcon: e });
|
2020-05-04 13:08:17 +00:00
|
|
|
}
|
|
|
|
|
2020-05-04 14:09:56 +00:00
|
|
|
setCopyFrom(_, copyFrom) {
|
|
|
|
this.setState({ ...this.state, copyFrom: copyFrom.value });
|
|
|
|
}
|
|
|
|
|
2020-05-05 13:53:07 +00:00
|
|
|
setGuestAccessEnabled(val) {
|
|
|
|
console.log(this.state, val);
|
2020-05-08 13:45:08 +00:00
|
|
|
this.setState({ ...this.state, guestAccessEnabled: val });
|
2020-05-05 13:53:07 +00:00
|
|
|
}
|
|
|
|
|
2020-04-15 13:54:30 +00:00
|
|
|
render() {
|
2020-05-04 13:08:17 +00:00
|
|
|
const spaceDiv = {
|
2020-05-12 13:18:33 +00:00
|
|
|
background: '#f4f4f4',
|
|
|
|
padding: '10px 10px',
|
|
|
|
margin: '10px 0px',
|
2020-05-04 13:08:17 +00:00
|
|
|
};
|
2020-04-15 13:54:30 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{!this.props.nicolaStop ? (
|
|
|
|
<div>
|
|
|
|
<Responsive minWidth={768}>
|
2020-05-12 13:18:33 +00:00
|
|
|
{this.type === 'new' ? (
|
2020-04-15 13:54:30 +00:00
|
|
|
<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}>
|
2020-05-12 13:18:33 +00:00
|
|
|
{this.type === 'new' ? (
|
2020-04-15 13:54:30 +00:00
|
|
|
<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>
|
2020-05-12 13:18:33 +00:00
|
|
|
{this.type === 'new' ? 'Add new scene' : 'Modify scene'}
|
2020-04-15 13:54:30 +00:00
|
|
|
</Header>
|
|
|
|
<Modal.Content>
|
2020-04-16 13:15:33 +00:00
|
|
|
<Form>
|
|
|
|
<p>Insert the name of the scene:</p>
|
|
|
|
<Form.Field>
|
|
|
|
<Input
|
2020-05-04 14:09:56 +00:00
|
|
|
required
|
2020-04-16 13:15:33 +00:00
|
|
|
label="Scene name"
|
|
|
|
placeholder="Scene Name"
|
|
|
|
name="name"
|
|
|
|
type="text"
|
|
|
|
onChange={this.changeSomething}
|
|
|
|
value={this.state.name}
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
2020-05-04 13:08:17 +00:00
|
|
|
<div style={spaceDiv}>
|
2020-05-04 14:09:56 +00:00
|
|
|
<label>Icon:</label>
|
2020-05-04 13:08:17 +00:00
|
|
|
<SelectIcons
|
|
|
|
updateIcon={this.updateIcon}
|
|
|
|
currentIcon={
|
2020-05-12 13:18:33 +00:00
|
|
|
this.type === 'new' ? 'home' : this.props.scene.icon
|
2020-05-04 13:08:17 +00:00
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
2020-05-12 13:18:33 +00:00
|
|
|
{this.type === 'new' && (
|
2020-05-04 14:09:56 +00:00
|
|
|
<Form.Field>
|
|
|
|
<label>Copy configuration from:</label>
|
|
|
|
<Dropdown
|
|
|
|
name="guests"
|
|
|
|
placeholder="Select scene to copy configuration form"
|
|
|
|
fluid
|
|
|
|
onChange={this.setCopyFrom}
|
|
|
|
options={this.state.scenes}
|
|
|
|
value={this.state.copyFrom}
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
|
|
|
)}
|
2020-05-12 13:18:33 +00:00
|
|
|
{this.type === 'modify' ? (
|
2020-05-05 13:53:07 +00:00
|
|
|
<Form.Field>
|
2020-05-12 13:18:33 +00:00
|
|
|
<Segment compact style={{ marginBottom: '1rem' }}>
|
2020-05-08 13:45:08 +00:00
|
|
|
<Checkbox
|
|
|
|
label="Enable guest access"
|
|
|
|
checked={this.state.guestAccessEnabled}
|
|
|
|
toggle
|
2020-05-12 13:18:33 +00:00
|
|
|
onChange={(e, val) => this.setGuestAccessEnabled(val.checked)}
|
2020-05-08 13:45:08 +00:00
|
|
|
/>
|
2020-05-06 09:28:27 +00:00
|
|
|
</Segment>
|
2020-05-05 13:53:07 +00:00
|
|
|
</Form.Field>
|
|
|
|
) : null}
|
2020-04-16 13:15:33 +00:00
|
|
|
</Form>
|
2020-04-15 13:54:30 +00:00
|
|
|
|
2020-05-12 13:18:33 +00:00
|
|
|
{this.type === 'modify' ? (
|
2020-04-15 13:54:30 +00:00
|
|
|
<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}>
|
2020-05-12 13:18:33 +00:00
|
|
|
<Icon name="remove" />
|
|
|
|
{' '}
|
|
|
|
{this.type === 'new' ? 'Cancel' : 'Discard changes'}
|
2020-04-15 13:54:30 +00:00
|
|
|
</Button>
|
|
|
|
|
|
|
|
<Button
|
|
|
|
color="green"
|
|
|
|
onClick={
|
2020-05-12 13:18:33 +00:00
|
|
|
this.type === 'new' ? this.addSceneModal : this.modifySceneModal
|
2020-04-15 13:54:30 +00:00
|
|
|
}
|
|
|
|
>
|
2020-05-12 13:18:33 +00:00
|
|
|
<Icon name="checkmark" />
|
|
|
|
{' '}
|
|
|
|
{this.type === 'new' ? 'Add scene' : 'Save changes'}
|
2020-04-15 13:54:30 +00:00
|
|
|
</Button>
|
|
|
|
</Modal.Actions>
|
|
|
|
</Modal>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-12 13:18:33 +00:00
|
|
|
const setActiveScene = (activeScene) => (dispatch) => dispatch(appActions.setActiveScene(activeScene));
|
2020-04-15 13:54:30 +00:00
|
|
|
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
|
|
scene: ownProps.id ? state.scenes[ownProps.id] : null,
|
2020-05-04 14:09:56 +00:00
|
|
|
scenes: Object.values(state.scenes),
|
2020-04-15 13:54:30 +00:00
|
|
|
});
|
|
|
|
const SceneModalContainer = connect(
|
|
|
|
mapStateToProps,
|
|
|
|
{ ...RemoteService, setActiveScene },
|
|
|
|
null,
|
2020-05-12 13:18:33 +00:00
|
|
|
{ forwardRef: true },
|
2020-04-15 13:54:30 +00:00
|
|
|
)(SceneModal);
|
|
|
|
export default SceneModalContainer;
|