190 lines
6.2 KiB
JavaScript
190 lines
6.2 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Menu, Grid, Icon, Responsive, Dropdown } from "semantic-ui-react";
|
|
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
|
|
import ModalWindow from "../components/modalform";
|
|
|
|
class Navbar extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
activeItemName: "Home",
|
|
activeItem: -1,
|
|
edited: "",
|
|
editMode: false,
|
|
room: "",
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.setState({
|
|
activeItem: this.props.activeItem,
|
|
});
|
|
}
|
|
|
|
editModeController = (e) =>
|
|
this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
|
|
|
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);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
|
|
<Responsive minWidth={768}>
|
|
<Grid>
|
|
<Grid.Row color="black">
|
|
<button style={editButtonStyle} onClick={this.editModeController}>
|
|
Edit
|
|
</button>
|
|
</Grid.Row>
|
|
<Grid.Row>
|
|
<Menu inverted fluid vertical>
|
|
<Menu.Item
|
|
key={-1}
|
|
id={-1}
|
|
name="Home"
|
|
active={this.state.activeItem === -1}
|
|
onClick={this.handleClick}
|
|
>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<Icon name="home" size="small" />
|
|
</Grid.Column>
|
|
<Grid.Column>HOME</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Menu.Item>
|
|
|
|
{this.props.rooms
|
|
? this.props.rooms.map((e, i) => {
|
|
return (
|
|
<Menu.Item
|
|
id={e.id}
|
|
key={i}
|
|
name={e.name}
|
|
active={this.state.activeItem === e.id}
|
|
onClick={this.handleClick}
|
|
>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<Icon name={e.icon} size="small" />
|
|
</Grid.Column>
|
|
<Grid.Column width={8}>{e.name}</Grid.Column>
|
|
<Grid.Column floated="right">
|
|
{this.state.editMode ? (
|
|
<ModalWindow
|
|
type="modify"
|
|
idRoom={e}
|
|
updateRoom={this.props.updateRoom}
|
|
deleteRoom={this.props.deleteRoom}
|
|
/>
|
|
) : null}
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Menu.Item>
|
|
);
|
|
})
|
|
: null}
|
|
|
|
<Menu.Item
|
|
name="newM"
|
|
active={this.state.activeItem === "newM"}
|
|
>
|
|
<Grid>
|
|
<Grid.Row centered name="new">
|
|
<ModalWindow type="new" addRoom={this.props.addRoom} />
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
|
|
<Responsive maxWidth={768}>
|
|
<Menu>
|
|
<Dropdown item fluid text={this.state.activeItemName}>
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item
|
|
key={-1}
|
|
id={-1}
|
|
name="Home"
|
|
active={this.state.activeItem === "Home"}
|
|
onClick={this.handleClick}
|
|
>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<Icon name="home" size="small" />
|
|
</Grid.Column>
|
|
<Grid.Column>Home</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Dropdown.Item>
|
|
|
|
{this.props.rooms
|
|
? this.props.rooms.map((e, i) => {
|
|
return (
|
|
<Dropdown.Item
|
|
id={e.id}
|
|
key={i}
|
|
name={e.name}
|
|
active={this.state.activeItem === e.id}
|
|
onClick={this.handleClick}
|
|
>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column width={1}>
|
|
<Icon name={e.icon} size="small" />
|
|
</Grid.Column>
|
|
<Grid.Column>{e.name}</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Dropdown.Item>
|
|
);
|
|
})
|
|
: null}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</Menu>
|
|
<Grid inverted>
|
|
<Grid.Row>
|
|
<Grid.Column width={8}>
|
|
<ModalWindow type="new" addRoom={this.props.addRoom} />
|
|
</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}
|
|
/>
|
|
</Grid.Column>
|
|
) : null}
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Navbar;
|