Added Logs navigation
This commit is contained in:
136
Birdmap.API/ClientApp/src/components/appBar/BirdmapBar.tsx
Normal file
136
Birdmap.API/ClientApp/src/components/appBar/BirdmapBar.tsx
Normal file
@ -0,0 +1,136 @@
|
||||
import { ClickAwayListener, Container, createStyles, Grow, IconButton, makeStyles, MenuItem, MenuList, Paper, Popper, Theme } from '@material-ui/core';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import AccountCircle from '@material-ui/icons/AccountCircle';
|
||||
import React from 'react';
|
||||
import { Link, NavLink } from 'react-router-dom';
|
||||
import BirdmapTitle from './BirdmapTitle';
|
||||
|
||||
export default function BirdmapBar(props: { onLogout: () => void; isAuthenticated: any; isAdmin: any; }) {
|
||||
const classes = useAppbarStyles();
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const anchorRef = React.useRef<HTMLButtonElement>(null);
|
||||
|
||||
const handleToggle = () => {
|
||||
setOpen((prevOpen) => !prevOpen);
|
||||
};
|
||||
|
||||
const handleClose = (event: React.MouseEvent<EventTarget>) => {
|
||||
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleLogout = (event: React.MouseEvent<EventTarget>) => {
|
||||
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
props.onLogout();
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
function handleListKeyDown(event: React.KeyboardEvent) {
|
||||
if (event.key === 'Tab') {
|
||||
event.preventDefault();
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
const prevOpen = React.useRef(open);
|
||||
React.useEffect(() => {
|
||||
if (prevOpen.current === true && open === false) {
|
||||
anchorRef.current!.focus();
|
||||
}
|
||||
|
||||
prevOpen.current = open;
|
||||
}, [open]);
|
||||
|
||||
const renderNavLinks = () => {
|
||||
return props.isAuthenticated
|
||||
? <Container className={classes.nav_menu}>
|
||||
<NavLink exact to="/" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Dashboard</NavLink>
|
||||
{props.isAdmin ? <NavLink exact to="/logs" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Logs</NavLink> : null}
|
||||
<NavLink to="/devices" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Devices</NavLink>
|
||||
<NavLink exact to="/heatmap" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Heatmap</NavLink>
|
||||
<IconButton className={classes.nav_menu_icon}
|
||||
ref={anchorRef}
|
||||
aria-haspopup="true"
|
||||
aria-controls={open ? 'menu-list-grow' : undefined}
|
||||
aria-label="account of current user"
|
||||
onClick={handleToggle}>
|
||||
<AccountCircle />
|
||||
</IconButton>
|
||||
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
|
||||
{({ TransitionProps, placement }) => (
|
||||
<Grow
|
||||
{...TransitionProps}
|
||||
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}>
|
||||
<Paper>
|
||||
<ClickAwayListener onClickAway={handleClose}>
|
||||
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
|
||||
<MenuItem onClick={handleLogout} component={Link} {...{ to: '/login' }}>Logout</MenuItem>
|
||||
</MenuList>
|
||||
</ClickAwayListener>
|
||||
</Paper>
|
||||
</Grow>
|
||||
)}
|
||||
</Popper>
|
||||
</Container>
|
||||
: null;
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
<BirdmapTitle />
|
||||
<Typography component={'span'} className={classes.typo}>
|
||||
{renderNavLinks()}
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
const useAppbarStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
typo: {
|
||||
marginLeft: 'auto',
|
||||
color: 'white',
|
||||
},
|
||||
nav_menu: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
nav_menu_icon: {
|
||||
color: 'inherit',
|
||||
marginLeft: '24px',
|
||||
'&:hover': {
|
||||
color: 'inherit',
|
||||
}
|
||||
},
|
||||
nav_menu_item: {
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'normal',
|
||||
color: 'inherit',
|
||||
marginLeft: '24px',
|
||||
'&:hover': {
|
||||
color: 'inherit',
|
||||
}
|
||||
},
|
||||
nav_menu_item_active: {
|
||||
textDecoration: 'underline',
|
||||
fontWeight: 'bold',
|
||||
color: 'inherit',
|
||||
marginLeft: '24px',
|
||||
'&:hover': {
|
||||
color: 'inherit',
|
||||
}
|
||||
},
|
||||
}),
|
||||
);
|
||||
@ -1,4 +1,5 @@
|
||||
/*global google*/
|
||||
import { Box, withStyles } from '@material-ui/core';
|
||||
import GoogleMapReact from 'google-map-react';
|
||||
import React, { Component } from 'react';
|
||||
import C from '../../common/Constants';
|
||||
@ -8,7 +9,14 @@ import DeviceMarker from './DeviceMarker';
|
||||
const lat_offset = 0.000038;
|
||||
const lng_offset = -0.000058;
|
||||
|
||||
export default class MapContainer extends Component {
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
height: '93vh',
|
||||
width: '100%',
|
||||
}
|
||||
});
|
||||
|
||||
class MapContainer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -64,6 +72,8 @@ export default class MapContainer extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {classes} = this.props;
|
||||
|
||||
const heatMapData = {
|
||||
positions: this.state.heatmapPoints,
|
||||
options: {
|
||||
@ -92,7 +102,7 @@ export default class MapContainer extends Component {
|
||||
));
|
||||
|
||||
return (
|
||||
<div style={{ height: '93vh', width: '100%' }}>
|
||||
<Box className={classes.root}>
|
||||
<GoogleMapReact
|
||||
bootstrapURLKeys={{
|
||||
key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],
|
||||
@ -106,7 +116,9 @@ export default class MapContainer extends Component {
|
||||
defaultCenter={this.state.center}>
|
||||
{Markers}
|
||||
</GoogleMapReact>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(MapContainer);
|
||||
@ -1,8 +1,19 @@
|
||||
import { Button, Checkbox, List, ListItem, ListItemIcon, ListItemText, Paper } from '@material-ui/core';
|
||||
import { Box, Button, Checkbox, List, ListItem, ListItemIcon, ListItemText, Paper, withStyles } from '@material-ui/core';
|
||||
import { blueGrey } from '@material-ui/core/colors';
|
||||
import React, { Component } from 'react';
|
||||
import LogService from './LogService';
|
||||
|
||||
export class Logs extends Component {
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
padding: '64px',
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
},
|
||||
paper: {
|
||||
backgroundColor: blueGrey[50],
|
||||
},
|
||||
});
|
||||
|
||||
class Logs extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
@ -10,6 +21,7 @@ export class Logs extends Component {
|
||||
service: null,
|
||||
files: [],
|
||||
checked: [],
|
||||
selectAllChecked: false,
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,7 +47,18 @@ export class Logs extends Component {
|
||||
this.setState({checked: newChecked});
|
||||
}
|
||||
|
||||
downloadChecked = () => {
|
||||
handleSelectAllToggle = () => {
|
||||
this.setState({selectAllChecked: !this.state.selectAllChecked});
|
||||
if (this.state.selectAllChecked) {
|
||||
this.setState({checked: []});
|
||||
} else {
|
||||
const newChecked = [...this.state.files];
|
||||
this.setState({checked: newChecked});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onDownload = () => {
|
||||
this.state.service.getFiles(this.state.checked)
|
||||
.then(result => {
|
||||
const filename = `Logs-${new Date().toISOString()}.zip`;
|
||||
@ -47,11 +70,15 @@ export class Logs extends Component {
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
this.setState({checked: []});
|
||||
this.setState({selectAllChecked: false});
|
||||
})
|
||||
.catch(ex => console.log(ex));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
const Files = this.state.files.map((value) => {
|
||||
const labelId = `checkbox-list-label-${value}`;
|
||||
|
||||
@ -72,16 +99,30 @@ export class Logs extends Component {
|
||||
})
|
||||
|
||||
return (
|
||||
<Paper>
|
||||
<List >
|
||||
{Files}
|
||||
</List>
|
||||
<Button onClick={this.downloadChecked}>
|
||||
Download
|
||||
</Button>
|
||||
</Paper>
|
||||
<Box className={classes.root}>
|
||||
<Paper className={classes.paper}>
|
||||
<List className={classes.paper}>
|
||||
<ListItem key="Select-all" role={undefined} dense button onClick={this.handleSelectAllToggle}>
|
||||
<ListItemIcon>
|
||||
<Checkbox
|
||||
edge="start"
|
||||
checked={this.state.selectAllChecked}
|
||||
tabIndex={-1}
|
||||
disableRipple
|
||||
inputProps={{ 'aria-labelledby': "Select-all" }}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText id="checkbox-list-label-Select-all" primary={(this.state.selectAllChecked ? "Uns" : "S") + "elect all"} />
|
||||
</ListItem>
|
||||
{Files}
|
||||
</List>
|
||||
<Button onClick={this.onDownload}>
|
||||
Download
|
||||
</Button>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Logs
|
||||
export default withStyles(styles)(Logs);
|
||||
|
||||
Reference in New Issue
Block a user