frontend/smart-hut/src/views/Navbar.js

115 lines
3.5 KiB
JavaScript
Raw Normal View History

2020-03-13 14:21:33 +00:00
import React, { Component } from 'react';
import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } 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',
edited: "",
editMode : false
2020-03-13 14:21:33 +00:00
}
}
editModeController = (e) => {
this.setState((prevState) => ({ editMode: !prevState.editMode }));
};
2020-03-13 14:21:33 +00:00
2020-03-18 11:46:28 +00:00
handleClick = (e, {id}) => {
console.log(id);
this.setState({ activeItem: id,
2020-03-13 14:21:33 +00:00
});
2020-03-18 11:46:28 +00:00
this.props.handleItemClick(id)
2020-03-13 14:21:33 +00:00
}
render(){
2020-03-18 11:46:28 +00:00
//const { activeItem } = this.state
2020-03-13 14:21:33 +00:00
return (
<div>
<Segment.Group>
<Responsive as={Segment}>
<Grid>
2020-03-14 14:25:55 +00:00
<Grid.Row color='black'>
2020-03-13 14:21:33 +00:00
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
</Grid.Row>
2020-03-14 14:25:55 +00:00
<Grid.Row color='black'>
2020-03-13 14:21:33 +00:00
<Menu inverted fluid vertical>
<Menu.Item
2020-03-18 11:46:28 +00:00
key={-1}
2020-03-13 14:21:33 +00:00
name='Home'
2020-03-18 11:46:28 +00:00
active={this.state.activeItem === 'Home'}
2020-03-13 14:21:33 +00:00
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small"/>
</Grid.Column>
<Grid.Column>
HOME
2020-03-13 14:21:33 +00:00
</Grid.Column>
</Grid.Row>
</Grid>
</ Menu.Item>
{this.props.rooms ?
this.props.rooms.map((e, i) => {
return (
<Menu.Item
2020-03-14 14:25:55 +00:00
id={e.id}
2020-03-13 14:21:33 +00:00
key={i}
name={e.name}
2020-03-18 11:46:28 +00:00
active={this.state.activeItem === e.id}
2020-03-13 14:21:33 +00:00
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column>
2020-03-14 14:25:55 +00:00
<Icon name={e.icon} size="small"/>
2020-03-13 14:21:33 +00:00
</Grid.Column>
<Grid.Column width={8}>
2020-03-13 14:21:33 +00:00
{e.name}
</Grid.Column>
<Grid.Column floated="right">
{this.state.edit ?
<ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
: null
}
2020-03-13 14:21:33 +00:00
</Grid.Column>
</Grid.Row>
</Grid>
</ Menu.Item>
)
}) : null
}
<Menu.Item
name='newM'
2020-03-18 11:46:28 +00:00
active={this.state.activeItem === 'newM'}
2020-03-13 14:21:33 +00:00
>
<Grid>
<Grid.Row centered name='new'>
2020-03-14 14:25:55 +00:00
<ModalWindow type="new" addRoom={this.props.addRoom}/>
2020-03-13 14:21:33 +00:00
</Grid.Row>
</Grid>
</ Menu.Item>
</Menu>
</Grid.Row>
</Grid>
</Responsive>
<Responsive as={Segment} maxWidth={768}>
//dropdown menu
</Responsive>
</Segment.Group>
</div>
);
}
}
export default Navbar;