diff options
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/reports/RouteReportPage.js | 77 |
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> ); }; |