aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-03-15 14:32:28 +0530
committerAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-03-15 14:32:28 +0530
commit8de3b938369ea1e9437b4345d83a50e974f8a606 (patch)
tree93b7d024d154e032ca26eae12108530d64a3abdd /modern/src
parentcdb873bef8bfc951a7d95e55c995ac0d186c3143 (diff)
downloadtrackermap-web-8de3b938369ea1e9437b4345d83a50e974f8a606.tar.gz
trackermap-web-8de3b938369ea1e9437b4345d83a50e974f8a606.tar.bz2
trackermap-web-8de3b938369ea1e9437b4345d83a50e974f8a606.zip
Initial draft of cutome route table
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/reports/RouteReportPage.js77
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>
);
};