2020-03-23 20:24:17 +00:00
|
|
|
import React, { Component } from "react";
|
2020-03-26 09:26:43 +00:00
|
|
|
import {
|
|
|
|
Menu,
|
|
|
|
Button,
|
|
|
|
Grid,
|
|
|
|
Icon,
|
|
|
|
Responsive,
|
|
|
|
Dropdown,
|
|
|
|
} from "semantic-ui-react";
|
2020-03-23 20:24:17 +00:00
|
|
|
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
|
2020-04-11 11:57:03 +00:00
|
|
|
import RoomModal from "../components/RoomModal";
|
2020-04-09 15:24:30 +00:00
|
|
|
import { RemoteService } from "../remote";
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
import { appActions } from "../storeActions";
|
2020-03-13 14:21:33 +00:00
|
|
|
|
|
|
|
class Navbar extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
2020-03-23 20:24:17 +00:00
|
|
|
editMode: false,
|
|
|
|
};
|
2020-03-26 09:26:43 +00:00
|
|
|
|
2020-04-09 15:24:30 +00:00
|
|
|
this.toggleEditMode = this.toggleEditMode.bind(this);
|
|
|
|
this.selectRoom = this.selectRoom.bind(this);
|
2020-04-11 16:29:32 +00:00
|
|
|
this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this);
|
2020-04-09 15:24:30 +00:00
|
|
|
|
|
|
|
this.getRooms();
|
|
|
|
}
|
|
|
|
|
|
|
|
getRooms() {
|
|
|
|
this.props.fetchAllRooms().catch(console.error);
|
|
|
|
}
|
|
|
|
|
|
|
|
get activeItem() {
|
|
|
|
return this.props.activeRoom;
|
|
|
|
}
|
|
|
|
|
|
|
|
set activeItem(item) {
|
|
|
|
this.props.setActiveRoom(item);
|
2020-03-13 14:21:33 +00:00
|
|
|
}
|
|
|
|
|
2020-04-09 15:24:30 +00:00
|
|
|
get activeItemName() {
|
|
|
|
if (this.props.activeRoom === -1) return "Home";
|
2020-04-11 16:29:32 +00:00
|
|
|
return this.props.rooms[this.props.activeRoom].name;
|
|
|
|
}
|
|
|
|
|
|
|
|
openCurrentModalMobile() {
|
|
|
|
console.log(this.activeItem, this.props.roomModalRefs);
|
|
|
|
const currentModal = this.props.roomModalRefs[this.activeItem].current;
|
|
|
|
currentModal.openModal();
|
2020-03-24 17:17:04 +00:00
|
|
|
}
|
|
|
|
|
2020-04-09 15:24:30 +00:00
|
|
|
toggleEditMode(e) {
|
2020-03-23 20:24:17 +00:00
|
|
|
this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
2020-04-09 15:24:30 +00:00
|
|
|
}
|
2020-03-13 14:21:33 +00:00
|
|
|
|
2020-04-09 15:24:30 +00:00
|
|
|
selectRoom(e, { id }) {
|
2020-04-11 16:29:32 +00:00
|
|
|
this.activeItem = id || -1;
|
2020-04-09 15:24:30 +00:00
|
|
|
}
|
2020-03-13 14:21:33 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
render() {
|
2020-03-13 14:21:33 +00:00
|
|
|
return (
|
2020-05-01 14:42:42 +00:00
|
|
|
<div>
|
2020-03-25 12:55:52 +00:00
|
|
|
<Responsive minWidth={768}>
|
2020-05-01 14:42:42 +00:00
|
|
|
<Grid style={{ margin: "1em -1em 0 1em" }}>
|
2020-03-25 12:55:52 +00:00
|
|
|
<Grid.Row color="black">
|
2020-04-09 15:24:30 +00:00
|
|
|
<button style={editButtonStyle} onClick={this.toggleEditMode}>
|
2020-03-25 12:55:52 +00:00
|
|
|
Edit
|
|
|
|
</button>
|
|
|
|
</Grid.Row>
|
|
|
|
<Grid.Row>
|
|
|
|
<Menu inverted fluid vertical>
|
|
|
|
<Menu.Item
|
|
|
|
key={-1}
|
2020-04-11 16:29:32 +00:00
|
|
|
id={null}
|
2020-03-25 12:55:52 +00:00
|
|
|
name="Home"
|
2020-04-11 16:29:32 +00:00
|
|
|
active={this.activeItem === -1}
|
2020-04-09 15:24:30 +00:00
|
|
|
onClick={this.selectRoom}
|
2020-03-23 20:24:17 +00:00
|
|
|
>
|
2020-03-25 12:55:52 +00:00
|
|
|
<Grid>
|
|
|
|
<Grid.Row>
|
|
|
|
<Grid.Column>
|
|
|
|
<Icon name="home" size="small" />
|
|
|
|
</Grid.Column>
|
2020-05-02 14:40:29 +00:00
|
|
|
<Grid.Column width={8}>
|
|
|
|
<strong>Home view</strong>
|
|
|
|
</Grid.Column>
|
2020-03-25 12:55:52 +00:00
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</Menu.Item>
|
2020-03-23 20:24:17 +00:00
|
|
|
|
2020-04-09 15:24:30 +00:00
|
|
|
{Object.values(this.props.rooms).map((e, i) => {
|
|
|
|
return (
|
|
|
|
<Menu.Item
|
|
|
|
id={e.id}
|
|
|
|
key={i}
|
|
|
|
name={e.name}
|
2020-04-11 16:29:32 +00:00
|
|
|
active={this.activeItem === e.id}
|
2020-04-09 15:24:30 +00:00
|
|
|
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 ? (
|
2020-04-11 11:57:03 +00:00
|
|
|
<RoomModal id={e.id} />
|
2020-04-09 15:24:30 +00:00
|
|
|
) : null}
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</Menu.Item>
|
|
|
|
);
|
|
|
|
})}
|
2020-03-13 14:21:33 +00:00
|
|
|
|
2020-04-09 15:24:30 +00:00
|
|
|
<Menu.Item name="newM">
|
2020-03-25 12:55:52 +00:00
|
|
|
<Grid>
|
|
|
|
<Grid.Row centered name="new">
|
2020-04-11 11:57:03 +00:00
|
|
|
<RoomModal id={null} />
|
2020-03-25 12:55:52 +00:00
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>
|
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</Responsive>
|
2020-03-23 20:24:17 +00:00
|
|
|
|
2020-03-25 12:55:52 +00:00
|
|
|
<Responsive maxWidth={768}>
|
|
|
|
<Menu>
|
2020-04-09 15:24:30 +00:00
|
|
|
<Dropdown item fluid text={this.activeItemName}>
|
2020-03-25 12:55:52 +00:00
|
|
|
<Dropdown.Menu>
|
|
|
|
<Dropdown.Item
|
|
|
|
key={-1}
|
2020-04-11 16:29:32 +00:00
|
|
|
id={null}
|
2020-03-25 12:55:52 +00:00
|
|
|
name="Home"
|
2020-04-11 16:29:32 +00:00
|
|
|
active={this.activeItem === -1}
|
2020-04-09 15:24:30 +00:00
|
|
|
onClick={this.selectRoom}
|
2020-03-25 12:55:52 +00:00
|
|
|
>
|
|
|
|
<Grid>
|
|
|
|
<Grid.Row>
|
|
|
|
<Grid.Column>
|
|
|
|
<Icon name="home" size="small" />
|
|
|
|
</Grid.Column>
|
|
|
|
<Grid.Column>Home</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</Dropdown.Item>
|
2020-03-23 20:24:17 +00:00
|
|
|
|
2020-04-09 15:24:30 +00:00
|
|
|
{Object.values(this.props.rooms).map((e, i) => {
|
|
|
|
return (
|
|
|
|
<Dropdown.Item
|
|
|
|
id={e.id}
|
|
|
|
key={i}
|
|
|
|
name={e.name}
|
2020-04-11 16:29:32 +00:00
|
|
|
active={this.activeItem === e.id}
|
2020-04-09 15:24:30 +00:00
|
|
|
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>
|
2020-04-11 16:29:32 +00:00
|
|
|
<RoomModal
|
|
|
|
ref={this.props.roomModalRefs[e.id]}
|
|
|
|
nicolaStop={true}
|
|
|
|
id={e.id}
|
|
|
|
/>
|
2020-04-09 15:24:30 +00:00
|
|
|
</Dropdown.Item>
|
|
|
|
);
|
|
|
|
})}
|
2020-03-25 12:55:52 +00:00
|
|
|
</Dropdown.Menu>
|
|
|
|
</Dropdown>
|
|
|
|
</Menu>
|
|
|
|
<Grid inverted>
|
|
|
|
<Grid.Row>
|
|
|
|
<Grid.Column width={8}>
|
2020-04-11 11:57:03 +00:00
|
|
|
<RoomModal id={null} />
|
2020-03-25 12:55:52 +00:00
|
|
|
</Grid.Column>
|
2020-04-11 16:29:32 +00:00
|
|
|
{this.activeItem !== -1 ? (
|
2020-03-23 20:24:17 +00:00
|
|
|
<Grid.Column width={8}>
|
2020-04-11 16:29:32 +00:00
|
|
|
<Button
|
|
|
|
icon
|
|
|
|
fluid
|
|
|
|
labelPosition="left"
|
|
|
|
onClick={this.openCurrentModalMobile}
|
|
|
|
>
|
2020-03-26 09:26:43 +00:00
|
|
|
<Icon name="pencil" size="small" />
|
|
|
|
EDIT ROOM
|
|
|
|
</Button>
|
2020-03-23 20:24:17 +00:00
|
|
|
</Grid.Column>
|
2020-03-25 12:55:52 +00:00
|
|
|
) : null}
|
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</Responsive>
|
2020-03-23 20:24:17 +00:00
|
|
|
</div>
|
2020-03-13 14:21:33 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-10 15:52:02 +00:00
|
|
|
const setActiveRoom = (activeRoom) => {
|
|
|
|
return (dispatch) => dispatch(appActions.setActiveRoom(activeRoom));
|
2020-04-09 15:24:30 +00:00
|
|
|
};
|
2020-04-10 15:25:52 +00:00
|
|
|
|
2020-04-11 16:29:32 +00:00
|
|
|
const mapStateToProps = (state, _) => ({
|
|
|
|
rooms: state.rooms,
|
|
|
|
activeRoom: state.active.activeRoom,
|
|
|
|
roomModalRefs: Object.keys(state.rooms).reduce(
|
|
|
|
(acc, key) => ({ ...acc, [key]: React.createRef() }),
|
|
|
|
{}
|
|
|
|
),
|
|
|
|
});
|
2020-04-10 15:25:52 +00:00
|
|
|
const NavbarContainer = connect(mapStateToProps, {
|
|
|
|
...RemoteService,
|
|
|
|
setActiveRoom,
|
|
|
|
})(Navbar);
|
2020-04-09 15:24:30 +00:00
|
|
|
export default NavbarContainer;
|