diff options
Diffstat (limited to 'modern/src/reports/components/ReportLayout.js')
-rw-r--r-- | modern/src/reports/components/ReportLayout.js | 124 |
1 files changed, 0 insertions, 124 deletions
diff --git a/modern/src/reports/components/ReportLayout.js b/modern/src/reports/components/ReportLayout.js deleted file mode 100644 index c028530b..00000000 --- a/modern/src/reports/components/ReportLayout.js +++ /dev/null @@ -1,124 +0,0 @@ -import React, { useState, useEffect, useMemo } 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 '../../common/components/SideNav'; -import NavBar from '../../common/components/NavBar'; -import { useTranslation } from '../../common/components/LocalizationProvider'; - -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - [theme.breakpoints.down('sm')]: { - flexDirection: 'column', - }, - height: '100%', - }, - drawerContainer: { - width: theme.dimensions.drawerWidthDesktop, - }, - drawer: { - width: theme.dimensions.drawerWidthDesktop, - [theme.breakpoints.down('sm')]: { - width: theme.dimensions.drawerWidthTablet, - }, - }, - content: { - flex: 1, - padding: theme.spacing(3, 3, 3, 3), - }, - drawerHeader: { - ...theme.mixins.toolbar, - display: 'flex', - alignItems: 'center', - padding: theme.spacing(0, 1), - }, - backArrowIconContainer: { - '&:hover': { - backgroundColor: 'transparent', - }, - }, -})); - -const ReportLayout = ({ children, filter }) => { - const classes = useStyles(); - const history = useHistory(); - const location = useLocation(); - const t = useTranslation(); - - const [openDrawer, setOpenDrawer] = useState(false); - const [reportTitle, setReportTitle] = useState(); - - const routes = useMemo(() => [ - { 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 /> }, - ], [t]); - - useEffect(() => { - routes.forEach((route) => { - switch (location.pathname) { - case `${route.href}`: - setReportTitle(route.name); - break; - default: - break; - } - }); - }, [routes, location]); - - const pageTitle = `${t('reportTitle')} / ${reportTitle}`; - - return ( - <div className={classes.root}> - <Hidden mdUp> - <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} /> - <Drawer - variant="temporary" - open={openDrawer} - onClose={() => setOpenDrawer(!openDrawer)} - classes={{ paper: classes.drawer }} - > - <SideNav routes={routes} /> - </Drawer> - </Hidden> - <Hidden smDown> - <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}> - <Grid container direction="column" spacing={2}> - <Grid item>{filter}</Grid> - <Grid item>{children}</Grid> - </Grid> - </div> - </div> - ); -}; - -export default ReportLayout; |