68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react'
|
||
|
|
import SelectIcons from "./SelectIcons";
|
||
|
|
|
||
|
|
export default class ModalWindow extends Component {
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
selectedIcon: 'home',
|
||
|
|
name: "",
|
||
|
|
img: ""
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render(){
|
||
|
|
|
||
|
|
const spaceDiv = {
|
||
|
|
background: '#f4f4f4',
|
||
|
|
padding: '10px 10px',
|
||
|
|
margin: '10px 0px'
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Modal trigger={<Button icon labelPosition='left' inverted>
|
||
|
|
<Icon name='plus' size='middle'/>
|
||
|
|
ADD ROOM
|
||
|
|
</Button>} closeIcon>
|
||
|
|
<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' type='text'/>
|
||
|
|
</Form.Field>
|
||
|
|
<p>Insert an image of the room:</p>
|
||
|
|
<Form.Field>
|
||
|
|
<Input label='Room image' type='file' />
|
||
|
|
</Form.Field>
|
||
|
|
</Form>
|
||
|
|
|
||
|
|
<div style={spaceDiv}>
|
||
|
|
<p>Select an icon:</p>
|
||
|
|
<SelectIcons/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Button icon labelPosition='left' inverted color='red'>
|
||
|
|
<Icon name='trash alternate' />
|
||
|
|
Delete room
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
</Modal.Content>
|
||
|
|
<Modal.Actions>
|
||
|
|
<Button color='red' onClick="">
|
||
|
|
<Icon name='remove' /> No
|
||
|
|
</Button>
|
||
|
|
<Button color='green' onClick="">
|
||
|
|
<Icon name='checkmark' /> Yes
|
||
|
|
</Button>
|
||
|
|
</Modal.Actions>
|
||
|
|
</Modal>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|