diff options
author | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-01 14:01:14 +0000 |
---|---|---|
committer | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-01 14:01:14 +0000 |
commit | 7e495f2d557ca738460c1031302929ae075f0399 (patch) | |
tree | a218ee3252e746a5b2164bfeddf83c0f400501ac /modern/src/reports/ReportLayoutPage.js | |
parent | 8b1c7bb055ceeb4d3e95d7ab3b8fbe7aa1f8dfa7 (diff) | |
download | trackermap-web-7e495f2d557ca738460c1031302929ae075f0399.tar.gz trackermap-web-7e495f2d557ca738460c1031302929ae075f0399.tar.bz2 trackermap-web-7e495f2d557ca738460c1031302929ae075f0399.zip |
Renamed ReportLayoutPage to ReportLayout
Diffstat (limited to 'modern/src/reports/ReportLayoutPage.js')
-rw-r--r-- | modern/src/reports/ReportLayoutPage.js | 124 |
1 files changed, 0 insertions, 124 deletions
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js deleted file mode 100644 index 6bab67c6..00000000 --- a/modern/src/reports/ReportLayoutPage.js +++ /dev/null @@ -1,124 +0,0 @@ -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 ReportSidebar from '../components/reports/ReportSidebar' -import ReportNavbar from '../components/reports/ReportNavbar' -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), - }, - backArrowIconContainer: { - '&:hover': { - backgroundColor:"transparent" - } - }, - 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 ReportLayoutPage = ({ 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]); - - return ( - <div className={classes.root}> - <Hidden only={['lg', 'xl']}> - <ReportNavbar setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} /> - <Drawer - variant="temporary" - open={openDrawer} - onClose={() => setOpenDrawer(!openDrawer)} - classes={{paper: classes.drawer}}> - <ReportSidebar routes={routes} /> - </Drawer> - </Hidden> - <Hidden only={['xs', 'sm', 'md']}> - <div className={classes.drawerContainer}> - <Drawer - variant="permanent" - classes={{paper: classes.drawer}}> - <div className={classes.drawerHeader}> - <IconButton - onClick={() => history.push('/')} - className={classes.backArrowIconContainer} - disableRipple> - <ArrowBackIcon /> - </IconButton> - <Typography variant="h6" color="inherit" noWrap> - {t('reportTitle')} - </Typography> - </div> - <Divider /> - <ReportSidebar routes={routes} /> - </Drawer> - </div> - </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 ReportLayoutPage; |