2020-03-23 20:24:17 +00:00
|
|
|
import React, { Component } from "react";
|
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Header,
|
|
|
|
Modal,
|
|
|
|
Form,
|
|
|
|
Input,
|
|
|
|
Icon,
|
|
|
|
Responsive,
|
2020-03-24 14:55:51 +00:00
|
|
|
Image
|
2020-03-23 20:24:17 +00:00
|
|
|
} from "semantic-ui-react";
|
2020-03-13 14:21:33 +00:00
|
|
|
import SelectIcons from "./SelectIcons";
|
|
|
|
|
2020-03-24 14:33:32 +00:00
|
|
|
const NO_IMAGE="https://react.semantic-ui.com/images/wireframe/image.png";
|
|
|
|
|
2020-03-13 14:21:33 +00:00
|
|
|
export default class ModalWindow extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-03-24 14:33:32 +00:00
|
|
|
|
|
|
|
console.table(this.props);
|
|
|
|
|
2020-03-13 14:21:33 +00:00
|
|
|
this.state = {
|
2020-03-23 20:24:17 +00:00
|
|
|
id: "",
|
2020-03-17 15:39:21 +00:00
|
|
|
selectedIcon: "",
|
2020-03-23 20:29:42 +00:00
|
|
|
name: this.props.type === "new" ? "" : this.props.idRoom.name,
|
2020-03-24 14:33:32 +00:00
|
|
|
img: this.props.type === "new" ? null : this.props.idRoom.image,
|
2020-03-23 20:29:42 +00:00
|
|
|
openModal: false,
|
2020-03-24 14:33:32 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
this.fileInputRef = React.createRef();
|
2020-03-14 14:25:55 +00:00
|
|
|
|
|
|
|
this.addRoomModal = this.addRoomModal.bind(this);
|
|
|
|
this.updateIcon = this.updateIcon.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
addRoomModal = (e) => {
|
|
|
|
let data = {
|
2020-03-23 20:24:17 +00:00
|
|
|
icon: this.state.selectedIcon,
|
|
|
|
name: this.state.name,
|
|
|
|
image: this.state.img,
|
|
|
|
};
|
2020-03-14 14:25:55 +00:00
|
|
|
this.props.addRoom(data);
|
|
|
|
this.closeModal();
|
2020-03-23 20:24:17 +00:00
|
|
|
};
|
2020-03-14 14:25:55 +00:00
|
|
|
|
2020-03-17 15:39:21 +00:00
|
|
|
modifyRoomModal = (e) => {
|
|
|
|
let data = {
|
2020-03-23 20:24:17 +00:00
|
|
|
icon:
|
|
|
|
this.state.selectedIcon === ""
|
|
|
|
? this.props.idRoom.icon
|
|
|
|
: this.state.selectedIcon,
|
|
|
|
name: this.state.name === "" ? this.props.idRoom.name : this.state.name,
|
|
|
|
image: this.state.img,
|
|
|
|
};
|
2020-03-17 15:39:21 +00:00
|
|
|
this.props.updateRoom(data);
|
|
|
|
this.closeModal();
|
2020-03-23 20:24:17 +00:00
|
|
|
};
|
2020-03-17 15:39:21 +00:00
|
|
|
|
2020-03-14 14:25:55 +00:00
|
|
|
deleteRoom = (e) => {
|
2020-03-19 10:52:13 +00:00
|
|
|
this.props.deleteRoom();
|
2020-03-17 15:39:21 +00:00
|
|
|
this.closeModal();
|
2020-03-23 20:24:17 +00:00
|
|
|
};
|
2020-03-13 14:21:33 +00:00
|
|
|
|
2020-03-14 14:25:55 +00:00
|
|
|
changeSomething = (event) => {
|
2020-03-23 20:24:17 +00:00
|
|
|
let nam = event.target.name;
|
|
|
|
let val = event.target.value;
|
|
|
|
this.setState({ [nam]: val });
|
|
|
|
};
|
2020-03-22 16:58:27 +00:00
|
|
|
|
2020-03-23 20:29:42 +00:00
|
|
|
closeModal = (e) => {
|
|
|
|
this.setState({ openModal: false });
|
|
|
|
this.updateIcon("home");
|
|
|
|
};
|
2020-03-14 14:25:55 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
openModal = (e) => {
|
|
|
|
this.setState({ openModal: true });
|
|
|
|
};
|
2020-03-14 14:25:55 +00:00
|
|
|
|
|
|
|
updateIcon(e) {
|
2020-03-23 20:24:17 +00:00
|
|
|
this.setState({ selectedIcon: e });
|
2020-03-14 14:25:55 +00:00
|
|
|
}
|
|
|
|
|
2020-03-24 14:33:32 +00:00
|
|
|
getBase64(file, callback) {
|
|
|
|
let reader = new FileReader();
|
|
|
|
reader.readAsDataURL(file.target.files[0]);
|
|
|
|
reader.onload = () => {
|
|
|
|
this.state.img = reader.result;
|
|
|
|
this.setState(this.state);
|
|
|
|
};
|
|
|
|
reader.onerror = console.error;
|
|
|
|
}
|
|
|
|
|
2020-03-14 14:25:55 +00:00
|
|
|
render(){
|
2020-03-13 14:21:33 +00:00
|
|
|
|
|
|
|
const spaceDiv = {
|
2020-03-23 20:24:17 +00:00
|
|
|
background: "#f4f4f4",
|
|
|
|
padding: "10px 10px",
|
|
|
|
margin: "10px 0px",
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Responsive minWidth={768}>
|
|
|
|
{this.props.type === "new" ? (
|
|
|
|
<Button icon labelPosition="left" inverted onClick={this.openModal}>
|
|
|
|
<Icon name="plus" size="small" />
|
2020-03-22 16:58:27 +00:00
|
|
|
ADD ROOM
|
|
|
|
</Button>
|
2020-03-23 20:29:42 +00:00
|
|
|
) : (
|
|
|
|
<Icon name="pencil" size="small" onClick={this.openModal} />
|
|
|
|
)}
|
|
|
|
</Responsive>
|
|
|
|
<Responsive maxWidth={768}>
|
|
|
|
{this.props.type === "new" ? (
|
|
|
|
<Button icon fluid labelPosition="left" onClick={this.openModal}>
|
|
|
|
<Icon name="plus" size="small" />
|
|
|
|
ADD ROOM
|
2020-03-24 14:55:51 +00:00
|
|
|
</Button>)
|
2020-03-22 16:58:27 +00:00
|
|
|
:
|
|
|
|
<Icon name='pencil' size='small' onClick={this.openModal} />
|
|
|
|
}
|
|
|
|
</Responsive>
|
|
|
|
<Responsive maxWidth={768} >
|
|
|
|
{
|
|
|
|
this.props.type === "new" ?
|
|
|
|
<Button icon fluid labelPosition='left' onClick={this.openModal}>
|
|
|
|
<Icon name='plus' size='small'/>
|
|
|
|
ADD ROOM
|
|
|
|
</Button>
|
|
|
|
:
|
|
|
|
<Button icon fluid labelPosition='left' onClick={this.openModal}>
|
|
|
|
<Icon name='pencil' size='small'/>
|
|
|
|
EDIT ROOM
|
|
|
|
</Button>
|
|
|
|
}
|
|
|
|
</Responsive>
|
2020-03-17 15:39:21 +00:00
|
|
|
|
2020-03-14 14:25:55 +00:00
|
|
|
<Modal
|
|
|
|
onClose={this.closeModal}
|
|
|
|
open={this.state.openModal}>
|
2020-03-19 10:52:13 +00:00
|
|
|
<Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header>
|
2020-03-13 14:21:33 +00:00
|
|
|
<Modal.Content>
|
|
|
|
<Form>
|
|
|
|
<p>Insert the name of the room:</p>
|
|
|
|
<Form.Field>
|
2020-03-24 14:55:51 +00:00
|
|
|
<Input
|
|
|
|
label='Room name'
|
|
|
|
placeholder='Room Name'
|
|
|
|
name="name"
|
|
|
|
type='text'
|
|
|
|
onChange={this.changeSomething}
|
|
|
|
value={this.state.name}/>
|
2020-03-13 14:21:33 +00:00
|
|
|
</Form.Field>
|
|
|
|
<p>Insert an image of the room:</p>
|
|
|
|
<Form.Field>
|
2020-03-24 14:33:32 +00:00
|
|
|
|
2020-03-24 14:55:51 +00:00
|
|
|
<Image
|
|
|
|
src={this.state.img == null ? NO_IMAGE : this.state.img}
|
|
|
|
size='small'
|
|
|
|
onClick={() => this.fileInputRef.current.click()}/>
|
2020-03-24 14:33:32 +00:00
|
|
|
|
|
|
|
<input ref={this.fileInputRef} hidden label='Room image' type='file' name="img" accept="image/png, image/jpeg"
|
2020-03-24 14:55:51 +00:00
|
|
|
onChange={this.getBase64.bind(this)}/>
|
2020-03-24 14:33:32 +00:00
|
|
|
|
2020-03-13 14:21:33 +00:00
|
|
|
</Form.Field>
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
<div style={spaceDiv}>
|
|
|
|
<p>Select an icon:</p>
|
2020-03-19 10:52:13 +00:00
|
|
|
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
|
2020-03-13 14:21:33 +00:00
|
|
|
</div>
|
|
|
|
|
2020-03-19 10:52:13 +00:00
|
|
|
{this.props.type === "modify" ?
|
2020-03-14 14:25:55 +00:00
|
|
|
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
|
2020-03-13 14:21:33 +00:00
|
|
|
<Icon name='trash alternate' />
|
|
|
|
Delete room
|
2020-03-14 14:25:55 +00:00
|
|
|
</Button> : null }
|
2020-03-13 14:21:33 +00:00
|
|
|
|
|
|
|
</Modal.Content>
|
|
|
|
<Modal.Actions>
|
2020-03-14 14:25:55 +00:00
|
|
|
<Button color='red' onClick={this.closeModal}>
|
2020-03-19 10:52:13 +00:00
|
|
|
<Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" }
|
2020-03-13 14:21:33 +00:00
|
|
|
</Button>
|
2020-03-17 15:39:21 +00:00
|
|
|
|
|
|
|
|
2020-03-19 10:52:13 +00:00
|
|
|
<Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
|
|
|
|
<Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
|
2020-03-13 14:21:33 +00:00
|
|
|
</Button>
|
2020-03-17 15:39:21 +00:00
|
|
|
|
2020-03-13 14:21:33 +00:00
|
|
|
</Modal.Actions>
|
|
|
|
</Modal>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|