aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/package.json1
-rw-r--r--modern/src/reports/RouteReportPage.js77
2 files changed, 52 insertions, 26 deletions
diff --git a/modern/package.json b/modern/package.json
index 2c30c9fd..a2493f3a 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -6,6 +6,7 @@
"@craco/craco": "^5.6.4",
"@mapbox/mapbox-gl-draw": "^1.2.0",
"@material-ui/core": "^4.11.0",
+ "@material-ui/data-grid": "^4.0.0-alpha.22",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@reduxjs/toolkit": "^1.4.0",
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index f2b03616..ff4a0033 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,9 +1,10 @@
import React, { useState } from 'react';
-import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core';
+import { DataGrid } from '@material-ui/data-grid';
import t from '../common/localization';
-import { formatPosition } from '../common/formatter';
+import { formatPosition, formatDistance } from '../common/formatter';
import ReportFilter from './ReportFilter';
import ReportLayoutPage from './ReportLayoutPage';
+import { useAttributePreference } from '../common/preferences';
const Filter = ({ setItems }) => {
@@ -26,35 +27,59 @@ const Filter = ({ setItems }) => {
};
const RouteReportPage = () => {
+ const distanceUnit = useAttributePreference('distanceUnit');
+
+ const columns = [
+ {
+ headerName: t('positionFixTime'),
+ field: 'fixTime',
+ width: 200,
+ valueFormatter: params => formatPosition(params.value, 'fixTime'),
+ },
+ {
+ headerName: t('positionLatitude'),
+ field: 'latitude',
+ width: 130,
+ valueFormatter: params => formatPosition(params.value, 'latitude'),
+ },
+ {
+ headerName: t('positionLongitude'),
+ field: 'longitude',
+ width: 130,
+ valueFormatter: params => formatPosition(params.value, 'longitude'),
+ },
+ {
+ headerName: t('positionSpeed'),
+ field: 'speed',
+ width: 130,
+ valueFormatter: params => formatPosition(params.value, 'speed'),
+ },
+ {
+ headerName: t('positionAddress'),
+ field: 'address',
+ width: 130,
+ valueFormatter: params => formatPosition(params.value, 'address'),
+ },
+ {
+ headerName: t('positionIgnition'),
+ field: 'ignition',
+ width: 130,
+ valueFormatter: params => params.getValue('attributes').ignition ? 'Yes' : 'No',
+ },
+ {
+ headerName: t('deviceTotalDistance'),
+ hide: true,
+ field: 'totalDistance',
+ width: 160,
+ valueFormatter: params => formatDistance(params.getValue('attributes').totalDistance, distanceUnit),
+ },
+ ]
const [items, setItems] = useState([]);
return (
<ReportLayoutPage filter={<Filter setItems={setItems} />}>
- <TableContainer component={Paper}>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('positionFixTime')}</TableCell>
- <TableCell>{t('positionLatitude')}</TableCell>
- <TableCell>{t('positionLongitude')}</TableCell>
- <TableCell>{t('positionSpeed')}</TableCell>
- <TableCell>{t('positionAddress')}</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{formatPosition(item, 'fixTime')}</TableCell>
- <TableCell>{formatPosition(item, 'latitude')}</TableCell>
- <TableCell>{formatPosition(item, 'longitude')}</TableCell>
- <TableCell>{formatPosition(item, 'speed')}</TableCell>
- <TableCell>{formatPosition(item, 'address')}</TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ <DataGrid rows={items} columns={columns} pageSize={25}/>
</ReportLayoutPage>
);
};