diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-05-15 15:51:09 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-05-15 15:51:09 +0530 |
commit | 15db54a9e1ade16758eb0f716e7eb72c9847109a (patch) | |
tree | 5990be602af025aaebed21f760453c186568ccc7 /modern/src | |
parent | 5d81e6dfe6f7e6fd9579f2527f83b27c5494b887 (diff) | |
download | etbsa-traccar-web-15db54a9e1ade16758eb0f716e7eb72c9847109a.tar.gz etbsa-traccar-web-15db54a9e1ade16758eb0f716e7eb72c9847109a.tar.bz2 etbsa-traccar-web-15db54a9e1ade16758eb0f716e7eb72c9847109a.zip |
Adding ReportHeader
Diffstat (limited to 'modern/src')
-rw-r--r-- | modern/src/reports/ReportHeader.js | 0 | ||||
-rw-r--r-- | modern/src/reports/ReportLayoutPage.js | 38 |
2 files changed, 24 insertions, 14 deletions
diff --git a/modern/src/reports/ReportHeader.js b/modern/src/reports/ReportHeader.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/modern/src/reports/ReportHeader.js diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js index c5e13fd..cdce2b3 100644 --- a/modern/src/reports/ReportLayoutPage.js +++ b/modern/src/reports/ReportLayoutPage.js @@ -8,9 +8,9 @@ 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 ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import { Link } from "react-router-dom"; +import { useHistory } from 'react-router-dom'; import t from '../common/localization'; @@ -43,9 +43,11 @@ const useStyles = makeStyles(theme => ({ 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 }, @@ -56,6 +58,10 @@ const ReportLayoutPage = ({ children, filter }) => { { 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"> @@ -81,27 +87,31 @@ const ReportLayoutPage = ({ children, filter }) => { onClose={() => setOpenDrawer(!openDrawer)} classes={{ paper: classes.drawer }} > - <div className={classes.drawerHeader}> - <IconButton> - <ChevronLeftIcon /> - </IconButton> - </div> - <Divider /> + { !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 - component={Link} - to={route.link} - onClick={() => setOpenDrawer(false)} + selected={value === route.activeIndex} + onClick={() => { setValue(route.activeIndex); handleClick(route)}} > <ListItemIcon> {route.icon} </ListItemIcon> - <ListItemText className={classes.drawerItem} disableTypography> - {route.name} - </ListItemText> + <ListItemText primary={route.name} /> </ListItem> ))} </List> |