From 7e495f2d557ca738460c1031302929ae075f0399 Mon Sep 17 00:00:00 2001 From: Desmond Kyeremeh Date: Thu, 1 Jul 2021 14:01:14 +0000 Subject: Renamed ReportLayoutPage to ReportLayout --- modern/src/admin/StatisticsPage.js | 6 +- modern/src/reports/ChartReportPage.js | 6 +- modern/src/reports/EventReportPage.js | 6 +- modern/src/reports/ReportLayout.js | 144 ++++++++++++++++++++++++++++++++ modern/src/reports/ReportLayoutPage.js | 124 --------------------------- modern/src/reports/RouteReportPage.js | 6 +- modern/src/reports/StopReportPage.js | 6 +- modern/src/reports/SummaryReportPage.js | 6 +- modern/src/reports/TripReportPage.js | 6 +- 9 files changed, 165 insertions(+), 145 deletions(-) create mode 100644 modern/src/reports/ReportLayout.js delete mode 100644 modern/src/reports/ReportLayoutPage.js (limited to 'modern') diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js index 1e440a4..0137a1f 100644 --- a/modern/src/admin/StatisticsPage.js +++ b/modern/src/admin/StatisticsPage.js @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import { FormControl, InputLabel,Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; import t from '../common/localization'; import { formatDate } from '../common/formatter'; -import ReportLayoutPage from '../reports/ReportLayoutPage'; +import ReportLayout from '../reports/ReportLayout'; import moment from 'moment'; const Filter = ({ setItems }) => { @@ -96,7 +96,7 @@ const StatisticsPage = () => { const [items, setItems] = useState([]); return ( - }> + }> @@ -131,7 +131,7 @@ const StatisticsPage = () => {
- + ); } diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js index 0a5c8e1..8eeedc4 100644 --- a/modern/src/reports/ChartReportPage.js +++ b/modern/src/reports/ChartReportPage.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; -import ReportLayoutPage from './ReportLayoutPage'; +import ReportLayout from './ReportLayout'; import ReportFilter from './ReportFilter'; import Graph from './Graph'; import { useAttributePreference } from '../common/preferences'; @@ -61,13 +61,13 @@ const ChartReportPage = () => { const [type, setType] = useState('speed'); return ( - }> - + ) } diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 6d80860..b938dc8 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -5,7 +5,7 @@ import { useTheme } from "@material-ui/core/styles"; import { useSelector } from 'react-redux'; import { formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; -import ReportLayoutPage from './ReportLayoutPage'; +import ReportLayout from './ReportLayout'; import { prefixString } from '../common/stringUtils'; import t from '../common/localization'; @@ -99,13 +99,13 @@ const EventReportPage = () => { }]; return ( - }> + }> - + ); } 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: }, + { + name: t('reportEvents'), + href: '/reports/event', + icon: + }, + { + name: t('reportTrips'), + href: '/reports/trip', + icon: + }, + { + name: t('reportStops'), + href: '/reports/stop', + icon: + }, + { + name: t('reportSummary'), + href: '/reports/summary', + icon: + }, + { name: t('reportChart'), href: '/reports/chart', icon: } +]; + +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 ( +
+ + + setOpenDrawer(!openDrawer)} + classes={{ paper: classes.drawer }} + > + + + + + +
+ history.push('/')} + > + + + + {t('reportTitle')} + +
+ + + + +
+
+ + {filter} + {children} + +
+
+ ); +}; + +export default ReportLayout; diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js deleted file mode 100644 index 6bab67c..0000000 --- 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: }, - { name: t('reportEvents'), href: '/reports/event', icon: }, - { name: t('reportTrips'), href: '/reports/trip', icon: }, - { name: t('reportStops'), href: '/reports/stop', icon: }, - { name: t('reportSummary'), href: '/reports/summary', icon: }, - { name: t('reportChart'), href: '/reports/chart', icon: }, -]; - -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 ( -
- - - setOpenDrawer(!openDrawer)} - classes={{paper: classes.drawer}}> - - - - -
- -
- history.push('/')} - className={classes.backArrowIconContainer} - disableRipple> - - - - {t('reportTitle')} - -
- - - -
- -
-
- - {filter} - {children} - -
-
- ); -} - -export default ReportLayoutPage; diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index 04b513e..c09d4f5 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -4,7 +4,7 @@ import { DataGrid } from '@material-ui/data-grid'; import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter'; import ReportFilter from './ReportFilter'; -import ReportLayoutPage from './ReportLayoutPage'; +import ReportLayout from './ReportLayout'; import { useAttributePreference, usePreference } from '../common/preferences'; import t from '../common/localization'; @@ -83,7 +83,7 @@ const RouteReportPage = () => { const [items, setItems] = useState([]); return ( - }> + }> { hideFooter autoHeight /> - + ); }; diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index 6953c46..57f5956 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -3,7 +3,7 @@ import { DataGrid } from '@material-ui/data-grid'; import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; -import ReportLayoutPage from './ReportLayoutPage'; +import ReportLayout from './ReportLayout'; import { useAttributePreference } from '../common/preferences'; import t from '../common/localization'; @@ -82,14 +82,14 @@ const StopReportPage = () => { }] return ( - }> + }> Math.random()} /> - + ); }; diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index e3819a5..53e697d 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -4,7 +4,7 @@ import { Grid, FormControlLabel, Checkbox } from '@material-ui/core'; import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; -import ReportLayoutPage from './ReportLayoutPage'; +import ReportLayout from './ReportLayout'; import { useAttributePreference } from '../common/preferences'; import t from '../common/localization'; @@ -100,14 +100,14 @@ const SummaryReportPage = () => { }] return ( - }> + }> Math.random()} /> - + ); } diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index 5f414f4..e8c9129 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -3,7 +3,7 @@ import { DataGrid } from '@material-ui/data-grid'; import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; -import ReportLayoutPage from './ReportLayoutPage'; +import ReportLayout from './ReportLayout'; import { useAttributePreference } from '../common/preferences'; import t from '../common/localization'; @@ -113,14 +113,14 @@ const TripReportPage = () => { }] return ( - }> + }> Math.random()} /> - + ); } -- cgit v1.2.3