aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/admin/StatisticsPage.js6
-rw-r--r--modern/src/reports/ChartReportPage.js6
-rw-r--r--modern/src/reports/EventReportPage.js6
-rw-r--r--modern/src/reports/ReportLayout.js (renamed from modern/src/reports/ReportLayoutPage.js)118
-rw-r--r--modern/src/reports/RouteReportPage.js6
-rw-r--r--modern/src/reports/StopReportPage.js6
-rw-r--r--modern/src/reports/SummaryReportPage.js6
-rw-r--r--modern/src/reports/TripReportPage.js6
8 files changed, 90 insertions, 70 deletions
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 (
- <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+ <ReportLayout filter={<Filter setItems={setItems} />}>
<TableContainer component={Paper}>
<Table>
<TableHead>
@@ -131,7 +131,7 @@ const StatisticsPage = () => {
</TableBody>
</Table>
</TableContainer>
- </ReportLayoutPage>
+ </ReportLayout>
);
}
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 (
- <ReportLayoutPage filter={
+ <ReportLayout filter={
<Filter setItems={setItems}>
<ChartType type={type} setType={setType} />
</Filter>
}>
<Graph items={items} type={type} />
- </ReportLayoutPage>
+ </ReportLayout>
)
}
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 (
- <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+ <ReportLayout filter={<Filter setItems={setItems} />}>
<DataGrid
rows={items}
columns={columns}
hideFooter
autoHeight />
- </ReportLayoutPage>
+ </ReportLayout>
);
}
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayout.js
index 6bab67c..5b54335 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayout.js
@@ -1,6 +1,14 @@
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 {
+ 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';
@@ -9,56 +17,67 @@ 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 SideNav from '../components/SideNav';
+import NavBar from '../components/NavBar';
import t from '../common/localization';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
- height: '100%',
+ height: '100%'
},
drawerContainer: {
- width: theme.dimensions.drawerWidthDesktop,
+ width: theme.dimensions.drawerWidthDesktop
},
drawer: {
width: theme.dimensions.drawerWidthDesktop,
- [theme.breakpoints.down("md")]: {
- width: theme.dimensions.drawerWidthTablet,
+ [theme.breakpoints.down('md')]: {
+ width: theme.dimensions.drawerWidthTablet
}
- },
+ },
content: {
flex: 1,
- padding: theme.spacing(5, 3, 3, 3),
+ padding: theme.spacing(5, 3, 3, 3)
},
drawerHeader: {
...theme.mixins.toolbar,
display: 'flex',
alignItems: 'center',
- padding: theme.spacing(0, 1),
- },
- backArrowIconContainer: {
- '&:hover': {
- backgroundColor:"transparent"
- }
+ padding: theme.spacing(0, 1)
},
toolbar: {
- [theme.breakpoints.down("md")]: {
- ...theme.mixins.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 /> },
+ {
+ 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 ReportLayout = ({ children, filter }) => {
const classes = useStyles();
const history = useHistory();
const location = useLocation();
@@ -77,38 +96,39 @@ const ReportLayoutPage = ({ children, filter, }) => {
});
}, [location]);
+ const pageTitle = `${t('reportTitle')} / ${reportTitle}`;
+
return (
<div className={classes.root}>
<Hidden only={['lg', 'xl']}>
- <ReportNavbar setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
+ <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} />
<Drawer
variant="temporary"
open={openDrawer}
onClose={() => setOpenDrawer(!openDrawer)}
- classes={{paper: classes.drawer}}>
- <ReportSidebar routes={routes} />
+ classes={{ paper: classes.drawer }}
+ >
+ <SideNav 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>
+ <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} />
@@ -116,9 +136,9 @@ const ReportLayoutPage = ({ children, filter, }) => {
<Grid item>{filter}</Grid>
<Grid item>{children}</Grid>
</Grid>
- </div>
+ </div>
</div>
);
-}
+};
-export default ReportLayoutPage;
+export default ReportLayout;
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 (
- <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+ <ReportLayout filter={<Filter setItems={setItems} />}>
<Paper>
<DataGrid
rows={items}
@@ -91,7 +91,7 @@ const RouteReportPage = () => {
hideFooter
autoHeight />
</Paper>
- </ReportLayoutPage>
+ </ReportLayout>
);
};
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 (
- <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+ <ReportLayout filter={<Filter setItems={setItems} />}>
<DataGrid
rows={items}
columns={columns}
hideFooter
autoHeight
getRowId={() => Math.random()} />
- </ReportLayoutPage>
+ </ReportLayout>
);
};
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 (
- <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+ <ReportLayout filter={<Filter setItems={setItems} />}>
<DataGrid
rows={items}
columns={columns}
hideFooter
autoHeight
getRowId={() => Math.random()} />
- </ReportLayoutPage>
+ </ReportLayout>
);
}
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 (
- <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+ <ReportLayout filter={<Filter setItems={setItems} />}>
<DataGrid
rows={items}
columns={columns}
hideFooter
autoHeight
getRowId={() => Math.random()} />
- </ReportLayoutPage>
+ </ReportLayout>
);
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 13:38:20 +0000