aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/reports')
-rw-r--r--modern/src/reports/ChartReportPage.js9
-rw-r--r--modern/src/reports/EventReportPage.js8
-rw-r--r--modern/src/reports/RouteReportPage.js23
-rw-r--r--modern/src/reports/StatisticsPage.js22
-rw-r--r--modern/src/reports/StopReportPage.js8
-rw-r--r--modern/src/reports/SummaryReportPage.js8
-rw-r--r--modern/src/reports/TripReportPage.js8
-rw-r--r--modern/src/reports/components/ReportFilter.js11
-rw-r--r--modern/src/reports/components/ReportLayout.js124
-rw-r--r--modern/src/reports/components/ReportsMenu.js88
10 files changed, 147 insertions, 162 deletions
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 70429ec5..4ddb5f75 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -2,13 +2,14 @@ import React, { useState } from 'react';
import {
Grid, FormControl, InputLabel, Select, MenuItem,
} from '@material-ui/core';
-import ReportLayout from './components/ReportLayout';
import ReportFilter from './components/ReportFilter';
import Graph from './components/Graph';
import { useAttributePreference } from '../common/util/preferences';
import { formatDate } from '../common/util/formatter';
import { speedFromKnots } from '../common/util/converter';
import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
const Filter = ({ children, setItems }) => {
const speedUnit = useAttributePreference('speedUnit');
@@ -61,14 +62,12 @@ const ChartReportPage = () => {
const [type, setType] = useState('speed');
return (
- <ReportLayout filter={(
+ <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}>
<Filter setItems={setItems}>
<ChartType type={type} setType={setType} />
</Filter>
- )}
- >
<Graph items={items} type={type} />
- </ReportLayout>
+ </PageLayout>
);
};
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index bbd92d59..71ca08d9 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -7,9 +7,10 @@ import { useTheme } from '@material-ui/core/styles';
import { useSelector } from 'react-redux';
import { formatDate } from '../common/util/formatter';
import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
import { prefixString } from '../common/util/stringUtils';
import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
const Filter = ({ setItems }) => {
const t = useTranslation();
@@ -106,14 +107,15 @@ const EventReportPage = () => {
}];
return (
- <ReportLayout filter={<Filter setItems={setItems} />}>
+ <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}>
+ <Filter setItems={setItems} />
<DataGrid
rows={items}
columns={columns}
hideFooter
autoHeight
/>
- </ReportLayout>
+ </PageLayout>
);
};
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 035f6acd..dfce525f 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,14 +1,14 @@
import React, { useState } from 'react';
-import { Paper } from '@material-ui/core';
import { DataGrid } from '@material-ui/data-grid';
import { useTheme } from '@material-ui/core/styles';
import {
formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate,
} from '../common/util/formatter';
import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
import { useAttributePreference, usePreference } from '../common/util/preferences';
import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
const Filter = ({ setItems }) => {
const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -88,16 +88,15 @@ const RouteReportPage = () => {
const [items, setItems] = useState([]);
return (
- <ReportLayout filter={<Filter setItems={setItems} />}>
- <Paper>
- <DataGrid
- rows={items}
- columns={columns}
- hideFooter
- autoHeight
- />
- </Paper>
- </ReportLayout>
+ <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}>
+ <Filter setItems={setItems} />
+ <DataGrid
+ rows={items}
+ columns={columns}
+ hideFooter
+ autoHeight
+ />
+ </PageLayout>
);
};
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index 4b0d9bfe..f04f6e43 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -1,13 +1,21 @@
import React, { useState } from 'react';
import {
- FormControl, InputLabel, Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ FormControl, InputLabel, Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles,
} from '@material-ui/core';
import moment from 'moment';
import { formatDate } from '../common/util/formatter';
-import OptionsLayout from '../settings/components/OptionsLayout';
import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
+
+const useStyles = makeStyles((theme) => ({
+ filter: {
+ margin: theme.spacing(1),
+ },
+}));
const Filter = ({ setItems }) => {
+ const classes = useStyles();
const t = useTranslation();
const [period, setPeriod] = useState('today');
@@ -56,7 +64,7 @@ const Filter = ({ setItems }) => {
};
return (
- <>
+ <div className={classes.filter}>
<FormControl variant="filled" margin="normal" fullWidth>
<InputLabel>{t('reportPeriod')}</InputLabel>
<Select value={period} onChange={(e) => setPeriod(e.target.value)}>
@@ -91,8 +99,8 @@ const Filter = ({ setItems }) => {
fullWidth
/>
)}
- <Button variant="contained" color="primary" onClick={handleClick} fullWidth>{t('reportShow')}</Button>
- </>
+ <Button variant="outlined" color="secondary" onClick={handleClick} fullWidth>{t('reportShow')}</Button>
+ </div>
);
};
@@ -102,7 +110,7 @@ const StatisticsPage = () => {
const [items, setItems] = useState([]);
return (
- <OptionsLayout>
+ <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}>
<Filter setItems={setItems} />
<TableContainer>
<Table>
@@ -138,7 +146,7 @@ const StatisticsPage = () => {
</TableBody>
</Table>
</TableContainer>
- </OptionsLayout>
+ </PageLayout>
);
};
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 0dca99b3..8dc71af6 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -5,9 +5,10 @@ import {
formatDistance, formatHours, formatDate, formatVolume,
} from '../common/util/formatter';
import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
import { useAttributePreference } from '../common/util/preferences';
import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
const Filter = ({ setItems }) => {
const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -85,7 +86,8 @@ const StopReportPage = () => {
}];
return (
- <ReportLayout filter={<Filter setItems={setItems} />}>
+ <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportStops']}>
+ <Filter setItems={setItems} />
<DataGrid
rows={items}
columns={columns}
@@ -93,7 +95,7 @@ const StopReportPage = () => {
autoHeight
getRowId={() => Math.random()}
/>
- </ReportLayout>
+ </PageLayout>
);
};
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index fe6f4aa1..b9f5e5dd 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -6,9 +6,10 @@ import {
formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
} from '../common/util/formatter';
import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
import { useAttributePreference } from '../common/util/preferences';
import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
const Filter = ({ setItems }) => {
const t = useTranslation();
@@ -106,7 +107,8 @@ const SummaryReportPage = () => {
}];
return (
- <ReportLayout filter={<Filter setItems={setItems} />}>
+ <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportSummary']}>
+ <Filter setItems={setItems} />
<DataGrid
rows={items}
columns={columns}
@@ -114,7 +116,7 @@ const SummaryReportPage = () => {
autoHeight
getRowId={() => Math.random()}
/>
- </ReportLayout>
+ </PageLayout>
);
};
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index a87031d3..a0141b68 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -5,9 +5,10 @@ import {
formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
} from '../common/util/formatter';
import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
import { useAttributePreference } from '../common/util/preferences';
import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
const Filter = ({ setItems }) => {
const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -116,7 +117,8 @@ const TripReportPage = () => {
}];
return (
- <ReportLayout filter={<Filter setItems={setItems} />}>
+ <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportTrips']}>
+ <Filter setItems={setItems} />
<DataGrid
rows={items}
columns={columns}
@@ -124,7 +126,7 @@ const TripReportPage = () => {
autoHeight
getRowId={() => Math.random()}
/>
- </ReportLayout>
+ </PageLayout>
);
};
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index bc9c5af6..739d5e47 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -1,12 +1,19 @@
import React, { useState } from 'react';
import {
- FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography,
+ FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography, makeStyles,
} from '@material-ui/core';
import { useSelector } from 'react-redux';
import moment from 'moment';
import { useTranslation } from '../../common/components/LocalizationProvider';
+const useStyles = makeStyles((theme) => ({
+ filter: {
+ padding: theme.spacing(2),
+ },
+}));
+
const ReportFilter = ({ children, handleSubmit, showOnly }) => {
+ const classes = useStyles();
const t = useTranslation();
const devices = useSelector((state) => state.devices.items);
@@ -60,7 +67,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
};
return (
- <Grid container spacing={2} justifyContent="flex-end">
+ <Grid container className={classes.filter} spacing={2} justifyContent="flex-end">
<Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
<FormControl variant="filled" fullWidth>
<InputLabel>{t('reportDevice')}</InputLabel>
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;
diff --git a/modern/src/reports/components/ReportsMenu.js b/modern/src/reports/components/ReportsMenu.js
new file mode 100644
index 00000000..8e973562
--- /dev/null
+++ b/modern/src/reports/components/ReportsMenu.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+ Divider, List, ListItem, ListItemIcon, ListItemText,
+} 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 BarChartIcon from '@material-ui/icons/BarChart';
+import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import { useAdministrator } from '../../common/util/permissions';
+
+const MenuItem = ({
+ title, link, icon, selected,
+}) => (
+ <ListItem button key={link} component={Link} to={link} selected={selected}>
+ <ListItemIcon>{icon}</ListItemIcon>
+ <ListItemText primary={title} />
+ </ListItem>
+);
+
+const ReportsMenu = () => {
+ const t = useTranslation();
+ const location = useLocation();
+
+ const admin = useAdministrator();
+
+ return (
+ <>
+ <List>
+ <MenuItem
+ title={t('reportRoute')}
+ link="/reports/route"
+ icon={<TimelineIcon />}
+ selected={location.pathname === '/reports/route'}
+ />
+ <MenuItem
+ title={t('reportEvents')}
+ link="/reports/event"
+ icon={<NotificationsActiveIcon />}
+ selected={location.pathname === '/reports/event'}
+ />
+ <MenuItem
+ title={t('reportTrips')}
+ link="/reports/trip"
+ icon={<PlayCircleFilledIcon />}
+ selected={location.pathname === '/reports/trip'}
+ />
+ <MenuItem
+ title={t('reportStops')}
+ link="/reports/stop"
+ icon={<PauseCircleFilledIcon />}
+ selected={location.pathname === '/reports/stop'}
+ />
+ <MenuItem
+ title={t('reportSummary')}
+ link="/reports/summary"
+ icon={<FormatListBulletedIcon />}
+ selected={location.pathname === '/reports/summary'}
+ />
+ <MenuItem
+ title={t('reportChart')}
+ link="/reports/chart"
+ icon={<TrendingUpIcon />}
+ selected={location.pathname === '/reports/chart'}
+ />
+ </List>
+ {admin && (
+ <>
+ <Divider />
+ <List>
+ <MenuItem
+ title={t('statisticsTitle')}
+ link="/reports/statistics"
+ icon={<BarChartIcon />}
+ selected={location.pathname === '/reports/statistics'}
+ />
+ </List>
+ </>
+ )}
+ </>
+ );
+};
+
+export default ReportsMenu;
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-10 17:03:48 +0000