aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports/ReportLayout.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/reports/ReportLayout.js')
-rw-r--r--modern/src/reports/ReportLayout.js144
1 files changed, 144 insertions, 0 deletions
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
new file mode 100644
index 0000000..5b54335
--- /dev/null
+++ b/modern/src/reports/ReportLayout.js
@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import {
+ Grid,
+ Typography,
+ Divider,
+ Drawer,
+ makeStyles,
+ IconButton,
+ Hidden
+} from '@material-ui/core';
+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 SideNav from '../components/SideNav';
+import NavBar from '../components/NavBar';
+import t from '../common/localization';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ display: 'flex',
+ height: '100%'
+ },
+ drawerContainer: {
+ width: theme.dimensions.drawerWidthDesktop
+ },
+ drawer: {
+ width: theme.dimensions.drawerWidthDesktop,
+ [theme.breakpoints.down('md')]: {
+ width: theme.dimensions.drawerWidthTablet
+ }
+ },
+ content: {
+ flex: 1,
+ padding: theme.spacing(5, 3, 3, 3)
+ },
+ drawerHeader: {
+ ...theme.mixins.toolbar,
+ display: 'flex',
+ alignItems: 'center',
+ padding: theme.spacing(0, 1)
+ },
+ toolbar: {
+ [theme.breakpoints.down('md')]: {
+ ...theme.mixins.toolbar
+ }
+ }
+}));
+
+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 ReportLayout = ({ children, filter }) => {
+ const classes = useStyles();
+ const history = useHistory();
+ const location = useLocation();
+ const [openDrawer, setOpenDrawer] = useState(false);
+ const [reportTitle, setReportTitle] = useState();
+
+ useEffect(() => {
+ routes.forEach(route => {
+ switch (location.pathname) {
+ case `${route.href}`:
+ setReportTitle(route.name);
+ break;
+ default:
+ break;
+ }
+ });
+ }, [location]);
+
+ const pageTitle = `${t('reportTitle')} / ${reportTitle}`;
+
+ return (
+ <div className={classes.root}>
+ <Hidden only={['lg', 'xl']}>
+ <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} />
+ <Drawer
+ variant="temporary"
+ open={openDrawer}
+ onClose={() => setOpenDrawer(!openDrawer)}
+ classes={{ paper: classes.drawer }}
+ >
+ <SideNav routes={routes} />
+ </Drawer>
+ </Hidden>
+ <Hidden only={['xs', 'sm', 'md']}>
+ <Drawer
+ variant="permanent"
+ classes={{ root: classes.drawerContainer, paper: classes.drawer }}
+ >
+ <div className={classes.drawerHeader}>
+ <IconButton
+ onClick={() => history.push('/')}
+ >
+ <ArrowBackIcon />
+ </IconButton>
+ <Typography variant="h6" color="inherit" noWrap>
+ {t('reportTitle')}
+ </Typography>
+ </div>
+ <Divider />
+ <SideNav routes={routes} />
+ </Drawer>
+ </Hidden>
+ <div className={classes.content}>
+ <div className={classes.toolbar} />
+ <Grid container direction="column" spacing={2}>
+ <Grid item>{filter}</Grid>
+ <Grid item>{children}</Grid>
+ </Grid>
+ </div>
+ </div>
+ );
+};
+
+export default ReportLayout;