198 lines
5.9 KiB
JavaScript
198 lines
5.9 KiB
JavaScript
import React, { Component } from "react";
|
|
import {
|
|
Menu,
|
|
Button,
|
|
Grid,
|
|
Icon,
|
|
Responsive,
|
|
Dropdown,
|
|
} from "semantic-ui-react";
|
|
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
|
|
import ModalWindow from "../components/modalform";
|
|
import { RemoteService } from "../remote";
|
|
import { connect } from "react-redux";
|
|
import { appActions } from "../storeActions";
|
|
|
|
class Navbar extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
editMode: false,
|
|
};
|
|
|
|
this.toggleEditMode = this.toggleEditMode.bind(this);
|
|
this.selectRoom = this.selectRoom.bind(this);
|
|
|
|
this.getRooms();
|
|
}
|
|
|
|
getRooms() {
|
|
this.props.fetchAllRooms().catch(console.error);
|
|
}
|
|
|
|
get activeItem() {
|
|
return this.props.activeRoom;
|
|
}
|
|
|
|
set activeItem(item) {
|
|
this.props.setActiveRoom(item);
|
|
}
|
|
|
|
get activeItemName() {
|
|
console.log(this.constructor);
|
|
if (this.props.activeRoom === -1) return "Home";
|
|
return this.props.rooms[this.props.activeRoom];
|
|
}
|
|
|
|
toggleEditMode(e) {
|
|
this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
|
}
|
|
|
|
selectRoom(e, { id }) {
|
|
this.activeItem = id;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
|
|
<Responsive minWidth={768}>
|
|
<Grid>
|
|
<Grid.Row color="black">
|
|
<button style={editButtonStyle} onClick={this.toggleEditMode}>
|
|
Edit
|
|
</button>
|
|
</Grid.Row>
|
|
<Grid.Row>
|
|
<Menu inverted fluid vertical>
|
|
<Menu.Item
|
|
key={-1}
|
|
id={-1}
|
|
name="Home"
|
|
active={this.activeRoom === -1}
|
|
onClick={this.selectRoom}
|
|
>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<Icon name="home" size="small" />
|
|
</Grid.Column>
|
|
<Grid.Column>HOME</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Menu.Item>
|
|
|
|
{Object.values(this.props.rooms).map((e, i) => {
|
|
return (
|
|
<Menu.Item
|
|
id={e.id}
|
|
key={i}
|
|
name={e.name}
|
|
active={this.activeRoom === e.id}
|
|
onClick={this.selectRoom}
|
|
>
|
|
<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.id} />
|
|
) : null}
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Menu.Item>
|
|
);
|
|
})}
|
|
|
|
<Menu.Item name="newM">
|
|
<Grid>
|
|
<Grid.Row centered name="new">
|
|
<ModalWindow type="new" />
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
|
|
<Responsive maxWidth={768}>
|
|
<Menu>
|
|
<Dropdown item fluid text={this.activeItemName}>
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item
|
|
key={-1}
|
|
id={-1}
|
|
name="Home"
|
|
active={this.activeRoom === -1}
|
|
onClick={this.selectRoom}
|
|
>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<Icon name="home" size="small" />
|
|
</Grid.Column>
|
|
<Grid.Column>Home</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Dropdown.Item>
|
|
|
|
{Object.values(this.props.rooms).map((e, i) => {
|
|
return (
|
|
<Dropdown.Item
|
|
id={e.id}
|
|
key={i}
|
|
name={e.name}
|
|
active={this.activeRoom === e.id}
|
|
onClick={this.selectRoom}
|
|
>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column width={1}>
|
|
<Icon name={e.icon} size="small" />
|
|
</Grid.Column>
|
|
<Grid.Column>{e.name}</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
<ModalWindow type="modify" nicolaStop={true} idRoom={e} />
|
|
</Dropdown.Item>
|
|
);
|
|
})}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</Menu>
|
|
<Grid inverted>
|
|
<Grid.Row>
|
|
<Grid.Column width={8}>
|
|
<ModalWindow type="new" />
|
|
</Grid.Column>
|
|
{this.activeRoom !== -1 ? (
|
|
<Grid.Column width={8}>
|
|
<Button icon fluid labelPosition="left">
|
|
<Icon name="pencil" size="small" />
|
|
EDIT ROOM
|
|
</Button>
|
|
</Grid.Column>
|
|
) : null}
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const setActiveRoom = (activeRoom) => {
|
|
return (dispatch) => dispatch(appActions.setActiveRoom(activeRoom));
|
|
};
|
|
|
|
const mapStateToProps = (state, _) => ({ rooms: state.rooms });
|
|
const NavbarContainer = connect(mapStateToProps, {
|
|
...RemoteService,
|
|
setActiveRoom,
|
|
})(Navbar);
|
|
export default NavbarContainer;
|