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",
margin: "10px 0px",
};
console.log(this.state, this.idRoom);
return (
<div>
<Responsive minWidth={768}>
{this.props.type === "new" ? (
<Button icon labelPosition="left" inverted onClick={this.openModal}>
<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>
{!this.props.nicolaStop ? (
<div>
<Responsive minWidth={768}>
{this.props.type === "new" ? (
<Button
icon
labelPosition="left"
inverted
onClick={this.openModal}
>
<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>
</div>
) : null}
<Modal onClose={this.closeModal} open={this.state.openModal}>
<Header>

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

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