190 lines
6.1 KiB
JavaScript
190 lines
6.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment, 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 = {
|
|
activeItem: 'Home',
|
|
activeItemName: 'Home',
|
|
edited: "",
|
|
editMode : false
|
|
}
|
|
}
|
|
|
|
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
|
|
|
handleClick = (e, {id, name}) => {
|
|
console.log(id);
|
|
let obj = undefined;
|
|
this.props.rooms.forEach((e) => {
|
|
if (e.id === id) {
|
|
obj = e;
|
|
}
|
|
});
|
|
this.setState({
|
|
activeItem: id,
|
|
activeItemName: name,
|
|
activeRoom: obj
|
|
});
|
|
this.props.handleItemClick(id)
|
|
}
|
|
|
|
render(){
|
|
//const { activeItem } = this.state
|
|
return (
|
|
<div>
|
|
<Segment.Group>
|
|
<Responsive as={Segment} minWidth={768}>
|
|
<Grid>
|
|
<Grid.Row color='black'>
|
|
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
|
</Grid.Row>
|
|
<Grid.Row color='black'>
|
|
<Menu inverted fluid vertical>
|
|
<Menu.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>
|
|
|
|
</ 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} modifyRoom={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 as={Segment} maxWidth={768}>
|
|
<Menu inverted>
|
|
<Dropdown item fluid text={this.state.activeItemName}>
|
|
<Dropdown.Menu>
|
|
|
|
<Dropdown.Item
|
|
key={-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>
|
|
<Grid.Row>
|
|
<Grid.Column width={8}>
|
|
<Button icon fluid labelPosition='left'>
|
|
<Icon name='plus' size='small'/>
|
|
ADD ROOM
|
|
</Button>
|
|
</Grid.Column>
|
|
<Grid.Column width={8}>
|
|
<Button icon fluid labelPosition='left'>
|
|
<Icon name='pencil' size='small'/>
|
|
EDIT ROOM
|
|
</Button>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
</Segment.Group>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Navbar;
|