Initial draft of cutome route table

2 files changed, 52 insertions, 26 deletions

diff --git a/modern/package.json b/modern/package.json
index 2c30c9f..a2493f3 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 f2b0361..ff4a003 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>
   );
 };