diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-03-15 14:32:28 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-03-15 14:32:28 +0530 |
commit | 8de3b938369ea1e9437b4345d83a50e974f8a606 (patch) | |
tree | 93b7d024d154e032ca26eae12108530d64a3abdd /modern/src/reports | |
parent | cdb873bef8bfc951a7d95e55c995ac0d186c3143 (diff) | |
download | trackermap-web-8de3b938369ea1e9437b4345d83a50e974f8a606.tar.gz trackermap-web-8de3b938369ea1e9437b4345d83a50e974f8a606.tar.bz2 trackermap-web-8de3b938369ea1e9437b4345d83a50e974f8a606.zip |
Initial draft of cutome route table
Diffstat (limited to 'modern/src/reports')
-rw-r--r-- | modern/src/reports/RouteReportPage.js | 77 |
1 files changed, 51 insertions, 26 deletions
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> ); }; |