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

fixed mobile

Browse source
This commit is contained in:
Claudio Maggioni 2020-03-26 10:26:43 +01:00
parent f0c429b9a3
commit fab38d9ad0
2 changed files with 76 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
smart-hut/src/components/modalform.js
View file

@ -102,32 +102,50 @@ export default class ModalWindow extends Component {
padding: "10px 10px", padding: "10px 10px",
margin: "10px 0px", margin: "10px 0px",
}; };
console.log(this.state, this.idRoom);
return ( return (
<div> <div>
<Responsive minWidth={768}> {!this.props.nicolaStop ? (
{this.props.type === "new" ? ( <div>
<Button icon labelPosition="left" inverted onClick={this.openModal}> <Responsive minWidth={768}>
<Icon name="plus" size="small" /> {this.props.type === "new" ? (
ADD ROOM <Button
</Button> icon
) : ( labelPosition="left"
<Icon name="pencil" size="small" onClick={this.openModal} /> inverted
)} onClick={this.openModal}
</Responsive> >
<Responsive maxWidth={768}> <Icon name="plus" size="small" />
{this.props.type === "new" ? ( ADD ROOM
<Button icon fluid labelPosition="left" onClick={this.openModal}> </Button>
<Icon name="plus" size="small" /> ) : (
ADD ROOM <Icon name="pencil" size="small" onClick={this.openModal} />
</Button> )}
) : ( </Responsive>
<Button icon fluid labelPosition="left" onClick={this.openModal}> <Responsive maxWidth={768}>
<Icon name="pencil" size="small" /> {this.props.type === "new" ? (
EDIT ROOM <Button
</Button> icon
)} fluid
</Responsive> 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>
</div>
) : null}
<Modal onClose={this.closeModal} open={this.state.openModal}> <Modal onClose={this.closeModal} open={this.state.openModal}>
<Header> <Header>

47
smart-hut/src/views/Navbar.js
View file

@ -1,5 +1,12 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Menu, Grid, Icon, Responsive, Dropdown } from "semantic-ui-react"; import {
Menu,
Button,
Grid,
Icon,
Responsive,
Dropdown,
} from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents"; import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform"; import ModalWindow from "../components/modalform";
@ -13,6 +20,11 @@ class Navbar extends Component {
editMode: false, editMode: false,
room: "", room: "",
}; };
this.roomRefs = {};
this.props.rooms.forEach((e) => {
this.roomRefs[e.id] = React.createRef();
});
} }
componentDidMount() { componentDidMount() {
@ -26,13 +38,10 @@ class Navbar extends Component {
handleClick = (e, { id, name }) => { handleClick = (e, { id, name }) => {
const room = this.props.rooms.filter((d) => d.id === id)[0]; const room = this.props.rooms.filter((d) => d.id === id)[0];
console.log(room);
this.setState({ this.setState({
activeItem: id, activeItem: id,
activeItemName: name, activeItemName: name,
}); });
this.activeRoom = room;
console.log(this.activeRoom);
this.forceUpdate(); this.forceUpdate();
this.props.handleItemClick(id); this.props.handleItemClick(id);
}; };
@ -137,6 +146,8 @@ class Navbar extends Component {
{this.props.rooms {this.props.rooms
? this.props.rooms.map((e, i) => { ? this.props.rooms.map((e, i) => {
if (!this.roomRefs[e.id])
this.roomRefs[e.id] = React.createRef();
return ( return (
<Dropdown.Item <Dropdown.Item
id={e.id} id={e.id}
@ -153,6 +164,14 @@ class Navbar extends Component {
<Grid.Column>{e.name}</Grid.Column> <Grid.Column>{e.name}</Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
<ModalWindow
ref={this.roomRefs[e.id]}
type="modify"
nicolaStop={true}
idRoom={e}
updateRoom={this.props.updateRoom}
deleteRoom={this.props.deleteRoom}
/>
</Dropdown.Item> </Dropdown.Item>
); );
}) })
@ -167,15 +186,17 @@ class Navbar extends Component {
</Grid.Column> </Grid.Column>
{this.state.activeItem !== -1 ? ( {this.state.activeItem !== -1 ? (
<Grid.Column width={8}> <Grid.Column width={8}>
<ModalWindow <Button
type="modify" icon
idRoom={() => { fluid
console.log("MALUSA", this.activeRoom); labelPosition="left"
return this.activeRoom; onClick={() =>
}} this.roomRefs[this.state.activeItem].current.openModal()
updateRoom={this.props.updateRoom} }
deleteRoom={this.props.deleteRoom} >
/> <Icon name="pencil" size="small" />
EDIT ROOM
</Button>
</Grid.Column> </Grid.Column>
) : null} ) : null}
</Grid.Row> </Grid.Row>