1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import React, { useState } from 'react';
import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Grid, Paper, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
import { useTheme } from "@material-ui/core/styles";
import MenuIcon from '@material-ui/icons/Menu';
import TimelineIcon from '@material-ui/icons/Timeline';
import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
import TrendingUpIcon from '@material-ui/icons/TrendingUp';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import { useHistory } from 'react-router-dom';
import t from '../common/localization';
const useStyles = makeStyles(theme => ({
root: {
height: '100%',
display: 'flex',
},
content: {
flex: 1,
overflow: 'auto',
padding: theme.spacing(2),
},
drawer: {
width: 360,
[theme.breakpoints.down("md")]: {
width: 320,
}
},
drawerHeader: {
...theme.mixins.toolbar,
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
},
form: {
padding: theme.spacing(1, 2, 2),
},
}));
const ReportLayoutPage = ({ children, filter }) => {
const classes = useStyles();
const history = useHistory();
const theme = useTheme();
const matchesMD = useMediaQuery(theme.breakpoints.down("md"));
const [openDrawer, setOpenDrawer] = useState(false);
const [value, setValue] = useState(0);
const routes = [
{ name: t('reportRoute'), link: '/reports/route', icon: <TimelineIcon />, activeIndex: 0 },
{ name: t('reportEvents'), link: '/reports/event', icon: <NotificationsActiveIcon />, activeIndex: 1 },
{ name: t('reportTrips'), link: '/reports/trip', icon: <PlayCircleFilledIcon />, activeIndex: 2 },
{ name: t('reportStops'), link: '/reports/stop', icon: <PauseCircleFilledIcon />, activeIndex: 3 },
{ name: t('reportSummary'), link: '/reports/summary', icon: <FormatListBulletedIcon />, activeIndex: 4 },
{ name: t('reportChart'), link: '/reports/chart', icon: <TrendingUpIcon />, activeIndex: 5 },
];
const handleClick = (route) => {
history.push(route.link);
}
console.log('rendering Layout, ', value);
return (
<div className={classes.root}>
{matchesMD && <AppBar position="fixed">
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={() => setOpenDrawer(!openDrawer)}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Reports
</Typography>
</Toolbar>
</AppBar>
}
<Drawer
variant={matchesMD ? "temporary": "permanent"}
open={openDrawer}
onClose={() => setOpenDrawer(!openDrawer)}
classes={{ paper: classes.drawer }}
>
{ !matchesMD &&
<>
<div className={classes.drawerHeader}>
<IconButton>
<ArrowBackIcon />
</IconButton>
<Typography variant="h6" color='primary' noWrap>
Reports
</Typography>
</div>
<Divider />
</>
}
<List disablePadding>
{routes.map(route => (
<ListItem
key={`${route}${route.activeIndex}`}
button
selected={value === route.activeIndex}
onClick={() => { setValue(route.activeIndex); handleClick(route)}}
>
<ListItemIcon>
{route.icon}
</ListItemIcon>
<ListItemText primary={route.name} />
</ListItem>
))}
</List>
</Drawer>
</div>
);
}
export default ReportLayoutPage;
|
