aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-14 20:20:32 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-14 20:20:32 -0700
commit2eae9b6502ab06742f4de46cf7273f789d7ba786 (patch)
treea488003d8c9f5b0f5ecf45ecd489715a9171ea6d /modern
parent73296469de0cf1318347dcabc5cef5ad759f067b (diff)
downloadtrackermap-web-2eae9b6502ab06742f4de46cf7273f789d7ba786.tar.gz
trackermap-web-2eae9b6502ab06742f4de46cf7273f789d7ba786.tar.bz2
trackermap-web-2eae9b6502ab06742f4de46cf7273f789d7ba786.zip
Migrate trip report
Diffstat (limited to 'modern')
-rw-r--r--modern/src/reports/EventReportPage.js4
-rw-r--r--modern/src/reports/TripReportPage.js172
2 files changed, 76 insertions, 100 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 7baf2205..076979ba 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -3,7 +3,7 @@ import {
FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableCell, TableBody,
} from '@material-ui/core';
import { useSelector } from 'react-redux';
-import { formatTime } from '../common/util/formatter';
+import { formatDate } from '../common/util/formatter';
import ReportFilter, { useFilterStyles } from './components/ReportFilter';
import { prefixString } from '../common/util/stringUtils';
import { useTranslation } from '../common/components/LocalizationProvider';
@@ -74,7 +74,7 @@ const EventReportPage = () => {
const formatValue = (item, key) => {
switch (key) {
case 'eventTime':
- return formatTime(item[key]);
+ return formatDate(item[key]);
case 'type':
return t(prefixString('event', item[key]));
case 'geofenceId':
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index a0141b68..c9d620e8 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
-import { DataGrid } from '@material-ui/data-grid';
-import { useTheme } from '@material-ui/core/styles';
+import {
+ Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
+} from '@material-ui/core';
import {
formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
} from '../common/util/formatter';
@@ -9,8 +10,35 @@ import { useAttributePreference } from '../common/util/preferences';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
import ReportsMenu from './components/ReportsMenu';
+import ColumnSelect from './components/ColumnSelect';
+import usePersistedState from '../common/util/usePersistedState';
+
+const columnsArray = [
+ ['startTime', 'reportStartTime'],
+ ['startOdometer', 'reportStartOdometer'],
+ ['startAddress', 'reportStartAddress'],
+ ['endTime', 'reportEndTime'],
+ ['endOdometer', 'reportEndOdometer'],
+ ['endAddress', 'reportEndAddress'],
+ ['distance', 'sharedDistance'],
+ ['averageSpeed', 'reportAverageSpeed'],
+ ['maxSpeed', 'reportMaximumSpeed'],
+ ['duration', 'reportDuration'],
+ ['spentFuel', 'reportSpentFuel'],
+ ['driverName', 'sharedDriver'],
+];
+const columnsMap = new Map(columnsArray);
+
+const TripReportPage = () => {
+ const t = useTranslation();
+
+ const distanceUnit = useAttributePreference('distanceUnit');
+ const speedUnit = useAttributePreference('speedUnit');
+ const volumeUnit = useAttributePreference('volumeUnit');
+
+ const [columns, setColumns] = usePersistedState('tripColumns', ['startTime', 'endTime', 'distance', 'averageSpeed']);
+ const [items, setItems] = useState([]);
-const Filter = ({ setItems }) => {
const handleSubmit = async (deviceId, from, to, mail, headers) => {
const query = new URLSearchParams({
deviceId, from, to, mail,
@@ -28,104 +56,52 @@ const Filter = ({ setItems }) => {
}
};
- return <ReportFilter handleSubmit={handleSubmit} />;
-};
-
-const TripReportPage = () => {
- const theme = useTheme();
- const t = useTranslation();
-
- const distanceUnit = useAttributePreference('distanceUnit');
- const speedUnit = useAttributePreference('speedUnit');
- const volumeUnit = useAttributePreference('volumeUnit');
-
- const [items, setItems] = useState([]);
-
- const columns = [{
- headerName: t('reportStartTime'),
- field: 'startTime',
- type: 'dateTime',
- width: theme.dimensions.columnWidthDate,
- valueFormatter: ({ value }) => formatDate(value),
- }, {
- headerName: t('reportStartOdometer'),
- field: 'startOdometer',
- type: 'number',
- width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
- }, {
- headerName: t('reportStartAddress'),
- field: 'startAddress',
- type: 'string',
- hide: true,
- width: theme.dimensions.columnWidthString,
- }, {
- headerName: t('reportEndTime'),
- field: 'endTime',
- type: 'dateTime',
- width: theme.dimensions.columnWidthDate,
- valueFormatter: ({ value }) => formatDate(value),
- }, {
- headerName: t('reportEndOdometer'),
- field: 'endOdometer',
- type: 'number',
- width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
- }, {
- headerName: t('reportEndAddress'),
- field: 'endAddress',
- type: 'string',
- hide: true,
- width: theme.dimensions.columnWidthString,
- }, {
- headerName: t('sharedDistance'),
- field: 'distance',
- type: 'number',
- width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
- }, {
- headerName: t('reportAverageSpeed'),
- field: 'averageSpeed',
- type: 'number',
- width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
- }, {
- headerName: t('reportMaximumSpeed'),
- field: 'maxSpeed',
- type: 'number',
- width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
- }, {
- headerName: t('reportDuration'),
- field: 'duration',
- type: 'string',
- width: theme.dimensions.columnWidthString,
- valueFormatter: ({ value }) => formatHours(value),
- }, {
- headerName: t('reportSpentFuel'),
- field: 'spentFuel',
- type: 'number',
- width: theme.dimensions.columnWidthNumber,
- hide: true,
- valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
- }, {
- headerName: t('sharedDriver'),
- field: 'driverName',
- type: 'string',
- width: theme.dimensions.columnWidthString,
- hide: true,
- }];
+ const formatValue = (item, key) => {
+ switch (key) {
+ case 'startTime':
+ case 'endTime':
+ return formatDate(item[key]);
+ case 'startOdometer':
+ case 'endOdometer':
+ case 'distance':
+ return formatDistance(item[key], distanceUnit, t);
+ case 'averageSpeed':
+ case 'maxSpeed':
+ return formatSpeed(item[key], speedUnit, t);
+ case 'duration':
+ return formatHours(item[key]);
+ case 'spentFuel':
+ return formatVolume(item[key], volumeUnit, t);
+ default:
+ return item[key];
+ }
+ };
return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportTrips']}>
- <Filter setItems={setItems} />
- <DataGrid
- rows={items}
- columns={columns}
- hideFooter
- autoHeight
- getRowId={() => Math.random()}
- />
+ <ReportFilter handleSubmit={handleSubmit}>
+ <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+ </ReportFilter>
+ <TableContainer>
+ <Table>
+ <TableHead>
+ <TableRow>
+ {columns.map((key) => (<TableCell>{t(columnsMap.get(key))}</TableCell>))}
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ {columns.map((key) => (
+ <TableCell>
+ {formatValue(item, key)}
+ </TableCell>
+ ))}
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
</PageLayout>
);
};