Fixed and beautified merge
This commit is contained in:
parent
897d6705b0
commit
bca57e2a9b
2 changed files with 91 additions and 68 deletions
|
|
@ -16,10 +16,10 @@ export default class ModalWindow extends Component {
|
|||
this.state = {
|
||||
id: "",
|
||||
selectedIcon: "",
|
||||
name: this.props.type === 'new' ? '' : this.props.idRoom.name,
|
||||
img: this.props.type === 'new' ? '' : this.props.idRoom.images,
|
||||
openModal: false
|
||||
}
|
||||
name: this.props.type === "new" ? "" : this.props.idRoom.name,
|
||||
img: this.props.type === "new" ? "" : this.props.idRoom.images,
|
||||
openModal: false,
|
||||
};
|
||||
|
||||
this.addRoomModal = this.addRoomModal.bind(this);
|
||||
this.updateIcon = this.updateIcon.bind(this);
|
||||
|
|
@ -59,16 +59,10 @@ export default class ModalWindow extends Component {
|
|||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
this.setState({[nam]: val});
|
||||
console.log(this.state);
|
||||
}
|
||||
|
||||
closeModal = (e) => {
|
||||
this.setState({openModal:false});
|
||||
this.updateIcon('home');
|
||||
}
|
||||
closeModal = (e) => {
|
||||
this.setState({ openModal: false });
|
||||
this.updateIcon("home");
|
||||
};
|
||||
|
||||
openModal = (e) => {
|
||||
this.setState({ openModal: true });
|
||||
|
|
@ -93,64 +87,93 @@ export default class ModalWindow extends Component {
|
|||
<Icon name="plus" size="small" />
|
||||
ADD ROOM
|
||||
</Button>
|
||||
:
|
||||
<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>
|
||||
) : (
|
||||
<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>
|
||||
|
||||
<Modal
|
||||
onClose={this.closeModal}
|
||||
open={this.state.openModal}>
|
||||
<Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header>
|
||||
<Modal.Content>
|
||||
<Form>
|
||||
<p>Insert the name of the room:</p>
|
||||
<Form.Field>
|
||||
<Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}
|
||||
value={this.state.name}/>
|
||||
</Form.Field>
|
||||
<p>Insert an image of the room:</p>
|
||||
<Form.Field>
|
||||
<Input label='Room image' type='file' name="img" onChange={this.changeSomething}
|
||||
value={this.state.img}/>
|
||||
</Form.Field>
|
||||
</Form>
|
||||
<Modal onClose={this.closeModal} open={this.state.openModal}>
|
||||
<Header>
|
||||
{this.props.type === "new" ? "Add new room" : "Modify room"}
|
||||
</Header>
|
||||
<Modal.Content>
|
||||
<Form>
|
||||
<p>Insert the name of the room:</p>
|
||||
<Form.Field>
|
||||
<Input
|
||||
label="Room name"
|
||||
placeholder="Room Name"
|
||||
name="name"
|
||||
type="text"
|
||||
onChange={this.changeSomething}
|
||||
value={this.state.name}
|
||||
/>
|
||||
</Form.Field>
|
||||
<p>Insert an image of the room:</p>
|
||||
<Form.Field>
|
||||
<Input
|
||||
label="Room image"
|
||||
type="file"
|
||||
name="img"
|
||||
onChange={this.changeSomething}
|
||||
value={this.state.img}
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form>
|
||||
|
||||
<div style={spaceDiv}>
|
||||
<p>Select an icon:</p>
|
||||
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
|
||||
</div>
|
||||
<div style={spaceDiv}>
|
||||
<p>Select an icon:</p>
|
||||
<SelectIcons
|
||||
updateIcon={this.updateIcon}
|
||||
currentIcon={
|
||||
this.props.type === "new" ? "home" : this.props.idRoom.icon
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{this.props.type === "modify" ?
|
||||
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
|
||||
<Icon name='trash alternate' />
|
||||
Delete room
|
||||
</Button> : null }
|
||||
{this.props.type === "modify" ? (
|
||||
<Button
|
||||
icon
|
||||
labelPosition="left"
|
||||
inverted
|
||||
color="red"
|
||||
onClick={this.deleteRoom}
|
||||
>
|
||||
<Icon name="trash alternate" />
|
||||
Delete room
|
||||
</Button>
|
||||
) : null}
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button color="red" onClick={this.closeModal}>
|
||||
<Icon name="remove" />{" "}
|
||||
{this.props.type === "new" ? "Cancel" : "Discard changes"}
|
||||
</Button>
|
||||
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button color='red' onClick={this.closeModal}>
|
||||
<Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" }
|
||||
</Button>
|
||||
|
||||
|
||||
<Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
|
||||
<Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
|
||||
</Button>
|
||||
<Button
|
||||
color="green"
|
||||
onClick={
|
||||
this.props.type === "new"
|
||||
? this.addRoomModal
|
||||
: this.modifyRoomModal
|
||||
}
|
||||
>
|
||||
<Icon name="checkmark" />{" "}
|
||||
{this.props.type === "new" ? "Add room" : "Save changes"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
color="green"
|
||||
|
|
|
|||
Loading…
Reference in a new issue