smarthut/frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'dev' into 'beautification'

Browse Source 
# Conflicts:
#   smart-hut/src/components/modalform.js
This commit is contained in:
Claudio Maggioni 2020-03-23 21:26:07 +01:00
commit 897d6705b0
1 changed files with 69 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
smart-hut/src/components/modalform.js
View File

@ -16,10 +16,10 @@ export default class ModalWindow extends Component {
this.state = { this.state = {
id: "", id: "",
selectedIcon: "", selectedIcon: "",
name: "", name: this.props.type === 'new' ? '' : this.props.idRoom.name,
img: "", img: this.props.type === 'new' ? '' : this.props.idRoom.images,
openModal: false, openModal: false
}; }
this.addRoomModal = this.addRoomModal.bind(this); this.addRoomModal = this.addRoomModal.bind(this);
this.updateIcon = this.updateIcon.bind(this); this.updateIcon = this.updateIcon.bind(this);
@ -59,10 +59,16 @@ export default class ModalWindow extends Component {
this.setState({ [nam]: val }); this.setState({ [nam]: val });
}; };
closeModal = (e) => { let nam = event.target.name;
this.setState({ openModal: false }); let val = event.target.value;
this.updateIcon("home"); this.setState({[nam]: val});
}; console.log(this.state);
}
closeModal = (e) => {
this.setState({openModal:false});
this.updateIcon('home');
}
openModal = (e) => { openModal = (e) => {
this.setState({ openModal: true }); this.setState({ openModal: true });
@ -87,85 +93,64 @@ export default class ModalWindow extends Component {
<Icon name="plus" size="small" /> <Icon name="plus" size="small" />
ADD ROOM ADD ROOM
</Button> </Button>
) : ( :
<Icon name="pencil" size="small" onClick={this.openModal} /> <Icon name='pencil' size='small' onClick={this.openModal} />
)} }
</Responsive> </Responsive>
<Responsive maxWidth={768}> <Responsive maxWidth={768} >
{this.props.type === "new" ? ( {
<Button icon fluid labelPosition="left" onClick={this.openModal}> this.props.type === "new" ?
<Icon name="plus" size="small" /> <Button icon fluid labelPosition='left' onClick={this.openModal}>
ADD ROOM <Icon name='plus' size='small'/>
</Button> ADD ROOM
) : ( </Button>
<Button icon fluid labelPosition="left" onClick={this.openModal}> :
<Icon name="pencil" size="small" /> <Button icon fluid labelPosition='left' onClick={this.openModal}>
EDIT ROOM <Icon name='pencil' size='small'/>
</Button> EDIT ROOM
)} </Button>
</Responsive> }
</Responsive>
<Modal onClose={this.closeModal} open={this.state.openModal}> <Modal
<Header> onClose={this.closeModal}
{this.props.type === "new" ? "Add new room" : "Modify room"} open={this.state.openModal}>
</Header> <Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header>
<Modal.Content> <Modal.Content>
<Form> <Form>
<p>Insert the name of the room:</p> <p>Insert the name of the room:</p>
<Form.Field> <Form.Field>
<Input <Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}
label="Room name" value={this.state.name}/>
placeholder="Room Name" </Form.Field>
name="name" <p>Insert an image of the room:</p>
type="text" <Form.Field>
onChange={this.changeSomething} <Input label='Room image' type='file' name="img" onChange={this.changeSomething}
value={ value={this.state.img}/>
this.props.type === "new" ? "" : this.props.idRoom.name </Form.Field>
} </Form>
/>
</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.props.type === "new" ? "" : this.props.idRoom.images
}
/>
</Form.Field>
</Form>
<div style={spaceDiv}> <div style={spaceDiv}>
<p>Select an icon:</p> <p>Select an icon:</p>
<SelectIcons <SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
updateIcon={this.updateIcon} </div>
currentIcon={
this.props.type === "new" ? "home" : this.props.idRoom.icon
}
/>
</div>
{this.props.type === "modify" ? ( {this.props.type === "modify" ?
<Button <Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
icon <Icon name='trash alternate' />
labelPosition="left" Delete room
inverted </Button> : null }
color="red"
onClick={this.deleteRoom} </Modal.Content>
> <Modal.Actions>
<Icon name="trash alternate" /> <Button color='red' onClick={this.closeModal}>
Delete room <Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" }
</Button> </Button>
) : null}
</Modal.Content>
<Modal.Actions> <Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
<Button color="red" onClick={this.closeModal}> <Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
<Icon name="remove" />{" "} </Button>
{this.props.type === "new" ? "Cancel" : "Discard changes"}
</Button>
<Button <Button
color="green" color="green"