aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/reports')
-rw-r--r--modern/src/reports/ChartReportPage.js16
-rw-r--r--modern/src/reports/EventReportPage.js19
-rw-r--r--modern/src/reports/RouteReportPage.js30
-rw-r--r--modern/src/reports/StatisticsPage.js14
-rw-r--r--modern/src/reports/StopReportPage.js14
-rw-r--r--modern/src/reports/SummaryReportPage.js19
-rw-r--r--modern/src/reports/TripReportPage.js14
-rw-r--r--modern/src/reports/common/useReportStyles.js49
-rw-r--r--modern/src/reports/components/ColumnSelect.js6
-rw-r--r--modern/src/reports/components/ReportFilter.js42
10 files changed, 82 insertions, 141 deletions
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index a26c4111..ce50819b 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -2,11 +2,10 @@ import React, { useState } from 'react';
import {
FormControl, InputLabel, Select, MenuItem,
} from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
import {
CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
} from 'recharts';
-import ReportFilter, { useFilterStyles } from './components/ReportFilter';
+import ReportFilter from './components/ReportFilter';
import { formatDate } from '../common/util/formatter';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
@@ -15,17 +14,10 @@ import usePositionAttributes from '../common/attributes/usePositionAttributes';
import { useCatch } from '../reactHelper';
import { useAttributePreference } from '../common/util/preferences';
import { distanceFromMeters, speedFromKnots, volumeFromLiters } from '../common/util/converter';
-
-const useStyles = makeStyles(() => ({
- chart: {
- flexGrow: 1,
- overflow: 'hidden',
- },
-}));
+import useReportStyles from './common/useReportStyles';
const ChartReportPage = () => {
- const classes = useStyles();
- const filterClasses = useFilterStyles();
+ const classes = useReportStyles();
const t = useTranslation();
const positionAttributes = usePositionAttributes(t);
@@ -84,7 +76,7 @@ const ChartReportPage = () => {
return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}>
<ReportFilter handleSubmit={handleSubmit} showOnly>
- <div className={filterClasses.item}>
+ <div className={classes.filterItem}>
<FormControl fullWidth>
<InputLabel>{t('reportChartType')}</InputLabel>
<Select label={t('reportChartType')} value={type} onChange={(e) => setType(e.target.value)}>
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 504534a2..447adaef 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -3,9 +3,8 @@ import {
FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableCell, TableBody,
} from '@mui/material';
import { useSelector } from 'react-redux';
-import { makeStyles } from '@mui/styles';
import { formatDate } from '../common/util/formatter';
-import ReportFilter, { useFilterStyles } from './components/ReportFilter';
+import ReportFilter from './components/ReportFilter';
import { prefixString } from '../common/util/stringUtils';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
@@ -13,6 +12,7 @@ import ReportsMenu from './components/ReportsMenu';
import usePersistedState from '../common/util/usePersistedState';
import ColumnSelect from './components/ColumnSelect';
import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
const typesArray = [
['allEvents', 'eventAll'],
@@ -44,19 +44,8 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
-const useStyles = makeStyles(() => ({
- header: {
- position: 'sticky',
- left: 0,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'stretch',
- },
-}));
-
const EventReportPage = () => {
- const classes = useStyles();
- const filterClasses = useFilterStyles();
+ const classes = useReportStyles();
const t = useTranslation();
const geofences = useSelector((state) => state.geofences.items);
@@ -110,7 +99,7 @@ const EventReportPage = () => {
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}>
<div className={classes.header}>
<ReportFilter handleSubmit={handleSubmit}>
- <div className={filterClasses.item}>
+ <div className={classes.filterItem}>
<FormControl fullWidth>
<InputLabel>{t('reportEventTypes')}</InputLabel>
<Select
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 152d0ead..b29fb269 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
import {
IconButton, Table, TableBody, TableCell, TableHead, TableRow,
} from '@mui/material';
-import { makeStyles } from '@mui/styles';
import GpsFixedIcon from '@mui/icons-material/GpsFixed';
import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
import ReportFilter from './components/ReportFilter';
@@ -17,35 +16,10 @@ import { useCatch } from '../reactHelper';
import Map from '../map/core/Map';
import MapRoutePath from '../map/MapRoutePath';
import MapPositions from '../map/MapPositions';
-
-const useStyles = makeStyles((theme) => ({
- container: {
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- },
- containerMap: {
- flexBasis: '40%',
- flexShrink: 0,
- },
- containerMain: {
- overflow: 'auto',
- },
- header: {
- position: 'sticky',
- left: 0,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'stretch',
- },
- columnAction: {
- width: '1%',
- paddingLeft: theme.spacing(1),
- },
-}));
+import useReportStyles from './common/useReportStyles';
const RouteReportPage = () => {
- const classes = useStyles();
+ const classes = useReportStyles();
const t = useTranslation();
const positionAttributes = usePositionAttributes(t);
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index bb9926f7..5da5b44e 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
import {
Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
-import { makeStyles } from '@mui/styles';
import { formatDate } from '../common/util/formatter';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
@@ -11,6 +10,7 @@ import ReportFilter from './components/ReportFilter';
import usePersistedState from '../common/util/usePersistedState';
import ColumnSelect from './components/ColumnSelect';
import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
const columnsArray = [
['captureTime', 'statisticsCaptureTime'],
@@ -26,18 +26,8 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
-const useStyles = makeStyles(() => ({
- header: {
- position: 'sticky',
- left: 0,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'stretch',
- },
-}));
-
const StatisticsPage = () => {
- const classes = useStyles();
+ const classes = useReportStyles();
const t = useTranslation();
const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']);
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 6cf8be07..d2823b06 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
import {
Table, TableBody, TableCell, TableHead, TableRow,
} from '@mui/material';
-import { makeStyles } from '@mui/styles';
import {
formatDistance, formatHours, formatDate, formatVolume,
} from '../common/util/formatter';
@@ -14,6 +13,7 @@ import ReportsMenu from './components/ReportsMenu';
import ColumnSelect from './components/ColumnSelect';
import usePersistedState from '../common/util/usePersistedState';
import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
const columnsArray = [
['startTime', 'reportStartTime'],
@@ -26,18 +26,8 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
-const useStyles = makeStyles(() => ({
- header: {
- position: 'sticky',
- left: 0,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'stretch',
- },
-}));
-
const StopReportPage = () => {
- const classes = useStyles();
+ const classes = useReportStyles();
const t = useTranslation();
const distanceUnit = useAttributePreference('distanceUnit');
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index e2f5e009..a66d1c61 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -2,11 +2,10 @@ import React, { useState } from 'react';
import {
FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableBody, TableCell,
} from '@mui/material';
-import { makeStyles } from '@mui/styles';
import {
formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
} from '../common/util/formatter';
-import ReportFilter, { useFilterStyles } from './components/ReportFilter';
+import ReportFilter from './components/ReportFilter';
import { useAttributePreference } from '../common/util/preferences';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
@@ -14,6 +13,7 @@ import ReportsMenu from './components/ReportsMenu';
import usePersistedState from '../common/util/usePersistedState';
import ColumnSelect from './components/ColumnSelect';
import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
const columnsArray = [
['startTime', 'reportStartDate'],
@@ -27,19 +27,8 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
-const useStyles = makeStyles(() => ({
- header: {
- position: 'sticky',
- left: 0,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'stretch',
- },
-}));
-
const SummaryReportPage = () => {
- const classes = useStyles();
- const filterClasses = useFilterStyles();
+ const classes = useReportStyles();
const t = useTranslation();
const distanceUnit = useAttributePreference('distanceUnit');
@@ -93,7 +82,7 @@ const SummaryReportPage = () => {
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportSummary']}>
<div className={classes.header}>
<ReportFilter handleSubmit={handleSubmit}>
- <div className={filterClasses.item}>
+ <div className={classes.filterItem}>
<FormControl fullWidth>
<InputLabel>{t('sharedType')}</InputLabel>
<Select label={t('sharedType')} value={daily} onChange={(e) => setDaily(e.target.value)}>
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 4d627b67..798f28d3 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
import {
Table, TableBody, TableCell, TableHead, TableRow,
} from '@mui/material';
-import { makeStyles } from '@mui/styles';
import {
formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
} from '../common/util/formatter';
@@ -14,6 +13,7 @@ import ReportsMenu from './components/ReportsMenu';
import ColumnSelect from './components/ColumnSelect';
import usePersistedState from '../common/util/usePersistedState';
import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
const columnsArray = [
['startTime', 'reportStartTime'],
@@ -31,18 +31,8 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
-const useStyles = makeStyles(() => ({
- header: {
- position: 'sticky',
- left: 0,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'stretch',
- },
-}));
-
const TripReportPage = () => {
- const classes = useStyles();
+ const classes = useReportStyles();
const t = useTranslation();
const distanceUnit = useAttributePreference('distanceUnit');
diff --git a/modern/src/reports/common/useReportStyles.js b/modern/src/reports/common/useReportStyles.js
new file mode 100644
index 00000000..e09c8695
--- /dev/null
+++ b/modern/src/reports/common/useReportStyles.js
@@ -0,0 +1,49 @@
+import { makeStyles } from '@mui/styles';
+
+export default makeStyles((theme) => ({
+ container: {
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ containerMap: {
+ flexBasis: '40%',
+ flexShrink: 0,
+ },
+ containerMain: {
+ overflow: 'auto',
+ },
+ header: {
+ position: 'sticky',
+ left: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+ columnAction: {
+ width: '1%',
+ paddingLeft: theme.spacing(1),
+ },
+ filter: {
+ display: 'inline-flex',
+ flexWrap: 'wrap',
+ gap: theme.spacing(2),
+ padding: theme.spacing(3, 2, 2),
+ },
+ filterItem: {
+ minWidth: 0,
+ flex: `1 1 ${theme.dimensions.filterFormWidth}`,
+ },
+ filterButtons: {
+ display: 'flex',
+ gap: theme.spacing(1),
+ flex: `1 1 ${theme.dimensions.filterFormWidth}`,
+ },
+ filterButton: {
+ flexGrow: 1,
+ },
+ chart: {
+ flexGrow: 1,
+ overflow: 'hidden',
+ },
+}));
diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js
index d708c3d7..09932ee3 100644
--- a/modern/src/reports/components/ColumnSelect.js
+++ b/modern/src/reports/components/ColumnSelect.js
@@ -3,16 +3,16 @@ import {
FormControl, InputLabel, MenuItem, Select,
} from '@mui/material';
import { useTranslation } from '../../common/components/LocalizationProvider';
-import { useFilterStyles } from './ReportFilter';
+import useReportStyles from '../common/useReportStyles';
const ColumnSelect = ({
columns, setColumns, columnsArray, columnsObject,
}) => {
- const classes = useFilterStyles();
+ const classes = useReportStyles();
const t = useTranslation();
return (
- <div className={classes.item}>
+ <div className={classes.filterItem}>
<FormControl fullWidth>
<InputLabel>{t('sharedColumns')}</InputLabel>
<Select
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 586ccc37..29d53dd0 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -2,37 +2,15 @@ import React, { useState } from 'react';
import {
FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
} from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
import { useSelector } from 'react-redux';
import moment from 'moment';
import { useTranslation } from '../../common/components/LocalizationProvider';
-import dimensions from '../../common/theme/dimensions';
-
-export const useFilterStyles = makeStyles((theme) => ({
- filter: {
- display: 'inline-flex',
- flexWrap: 'wrap',
- gap: theme.spacing(2),
- padding: theme.spacing(3, 2, 2),
- },
- item: {
- minWidth: 0,
- flex: `1 1 ${dimensions.filterFormWidth}`,
- },
- buttons: {
- display: 'flex',
- gap: theme.spacing(1),
- flex: `1 1 ${dimensions.filterFormWidth}`,
- },
- button: {
- flexGrow: 1,
- },
-}));
+import useReportStyles from '../common/useReportStyles';
const ReportFilter = ({
children, handleSubmit, showOnly, ignoreDevice,
}) => {
- const classes = useFilterStyles();
+ const classes = useReportStyles();
const t = useTranslation();
const devices = useSelector((state) => state.devices.items);
@@ -90,7 +68,7 @@ const ReportFilter = ({
return (
<div className={classes.filter}>
{!ignoreDevice && (
- <div className={classes.item}>
+ <div className={classes.filterItem}>
<FormControl fullWidth>
<InputLabel>{t('reportDevice')}</InputLabel>
<Select label={t('reportDevice')} value={deviceId || ''} onChange={(e) => setDeviceId(e.target.value)}>
@@ -101,7 +79,7 @@ const ReportFilter = ({
</FormControl>
</div>
)}
- <div className={classes.item}>
+ <div className={classes.filterItem}>
<FormControl fullWidth>
<InputLabel>{t('reportPeriod')}</InputLabel>
<Select label={t('reportPeriod')} value={period} onChange={(e) => setPeriod(e.target.value)}>
@@ -116,7 +94,7 @@ const ReportFilter = ({
</FormControl>
</div>
{period === 'custom' && (
- <div className={classes.item}>
+ <div className={classes.filterItem}>
<TextField
label={t('reportFrom')}
type="datetime-local"
@@ -127,7 +105,7 @@ const ReportFilter = ({
</div>
)}
{period === 'custom' && (
- <div className={classes.item}>
+ <div className={classes.filterItem}>
<TextField
label={t('reportTo')}
type="datetime-local"
@@ -138,12 +116,12 @@ const ReportFilter = ({
</div>
)}
{children}
- <div className={classes.buttons}>
+ <div className={classes.filterButtons}>
<Button
onClick={() => handleClick(false, true)}
variant="outlined"
color="secondary"
- className={classes.button}
+ className={classes.filterButton}
disabled={!ignoreDevice && !deviceId}
>
{t('reportShow')}
@@ -153,7 +131,7 @@ const ReportFilter = ({
onClick={() => handleClick(false, false)}
variant="outlined"
color="secondary"
- className={classes.button}
+ className={classes.filterButton}
disabled={!ignoreDevice && !deviceId}
>
{t('reportExport')}
@@ -164,7 +142,7 @@ const ReportFilter = ({
onClick={() => handleClick(true, false)}
variant="outlined"
color="secondary"
- className={classes.button}
+ className={classes.filterButton}
disabled={!ignoreDevice && !deviceId}
>
<Typography variant="button" noWrap>{t('reportEmail')}</Typography>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-10 03:40:56 +0000