aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-05-17 15:10:29 +0530
committerAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-05-17 15:10:29 +0530
commit0ab07c40f48889727b1503eaedb5daa8f344dd19 (patch)
tree2d48c33c1f89810bf28407a175dc98ce3aad9031 /modern/src
parent589244b4a65813271440d11c09fa63dfb4d8ad78 (diff)
downloadetbsa-traccar-web-0ab07c40f48889727b1503eaedb5daa8f344dd19.tar.gz
etbsa-traccar-web-0ab07c40f48889727b1503eaedb5daa8f344dd19.tar.bz2
etbsa-traccar-web-0ab07c40f48889727b1503eaedb5daa8f344dd19.zip
Initial draft of Reports Development
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/reports/ReportLayoutPage.js60
1 files changed, 33 insertions, 27 deletions
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index e203b5a..4ffc881 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } 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';
@@ -10,7 +10,7 @@ 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 { Link, useHistory, useLocation } from 'react-router-dom';
import t from '../common/localization';
@@ -21,9 +21,6 @@ const useStyles = makeStyles(theme => ({
},
drawerContainer: {
width: theme.dimensions.drawerWidth,
- [theme.breakpoints.down("md")]: {
- width: 0,
- }
},
drawer: {
width: theme.dimensions.drawerWidth,
@@ -53,29 +50,32 @@ const useStyles = makeStyles(theme => ({
},
}));
+const routes = [
+ { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
+ { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
+ { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
+ { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
+ { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
+ { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
+];
+
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 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 location = useLocation();
const navigationList = (
<List disablePadding>
- {routes.map(route => (
+ {routes.map((route, index) => (
<ListItem
- key={`${route}${route.activeIndex}`}
+ disableRipple
+ component={Link}
+ key={`${route}${index}`}
button
- onClick={() => handleListItemClick(route)}>
+ to={route.href}
+ selected={route.href === location.pathname}>
<ListItemIcon>
{route.icon}
</ListItemIcon>
@@ -119,23 +119,29 @@ const ReportLayoutPage = ({ children, filter }) => {
</AppBar>
);
- const handleListItemClick = (route) => {
- history.push(route.link);
- }
-
return (
<div className={classes.root}>
- {matchesMD && appBar}
- <div className={classes.drawerContainer}>
+ <Hidden mdUp>
+ {appBar}
<Drawer
- variant={matchesMD ? "temporary": "permanent"}
+ variant="temporary"
open={openDrawer}
onClose={() => setOpenDrawer(!openDrawer)}
classes={{paper: classes.drawer}}>
- {!matchesMD && drawerHeader}
+ {drawerHeader}
{navigationList}
</Drawer>
- </div>
+ </Hidden>
+ <Hidden mdDown>
+ <div className={classes.drawerContainer}>
+ <Drawer
+ variant="permanent"
+ classes={{paper: classes.drawer}}>
+ {drawerHeader}
+ {navigationList}
+ </Drawer>
+ </div>
+ </Hidden>
<div className={classes.content}>
<div className={classes.toolbar} />
{filter}