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

Fixed and beautified merge

Browse source
This commit is contained in:
Claudio Maggioni 2020-03-23 21:29:42 +01:00
parent 897d6705b0
commit bca57e2a9b
2 changed files with 91 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
smart-hut/icons.js → smart-hut/icons.txt
View file

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