3 files changed, 83 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/common/formatter.js b/modern/src/common/formatter.js
index 289a6d94..0d8ac4c9 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -81,3 +81,28 @@ export const formatVolume = (value, unit) => {
 export const formatHours = (value) => {
   return moment.duration(value).humanize();
 };
+
+export const formatCoordinate = (key, value, unit) => {
+  var hemisphere, degrees, minutes, seconds;
+  if (key === 'latitude') {
+    hemisphere = value >= 0 ? 'N' : 'S';
+  } else {
+    hemisphere = value >= 0 ? 'E' : 'W';
+  }
+
+  switch (unit) {
+    case 'ddm':
+      value = Math.abs(value);
+      degrees = Math.floor(value);
+      minutes = (value - degrees) * 60;
+      return degrees + '° ' + minutes.toFixed(6) + '\' ' + hemisphere;
+    case 'dms':
+      value = Math.abs(value);
+      degrees = Math.floor(value);
+      minutes = Math.floor((value - degrees) * 60);
+      seconds = Math.round((value - degrees - minutes / 60) * 3600);
+      return degrees + '° ' + minutes + '\' ' + seconds + '" ' + hemisphere;
+    default:
+      return value.toFixed(6) + '°';
+  }  
+};
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index f2b03616..b8bad00d 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 { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
+import { useAttributePreference, usePreference } from '../common/preferences';
 
 const Filter = ({ setItems }) => {
 
@@ -26,35 +27,65 @@ const Filter = ({ setItems }) => {
 };
 
 const RouteReportPage = () => {
+  const distanceUnit = useAttributePreference('distanceUnit');
+  const speedUnit = useAttributePreference('speedUnit');
+  const coordinateFormat = usePreference('coordinateFormat');
+
+  const columns = [{
+    headerName: t('positionFixTime'),
+    field: 'fixTime',
+    type: 'dateTime',
+    flex: 1,
+    valueFormatter: ({ value }) => formatDate(value),
+  }, {
+    headerName: t('positionLatitude'),
+    field: 'latitude',
+    type: 'number',
+    flex: 1,
+    valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat),
+  }, {
+    headerName: t('positionLongitude'),
+    field: 'longitude',
+    type: 'number',
+    flex: 1,
+    valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat),
+  }, {
+    headerName: t('positionSpeed'),
+    field: 'speed',
+    type: 'number',
+    flex: 1,
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+  }, {
+    headerName: t('positionAddress'),
+    field: 'address',
+    type: 'string',
+    flex: 1,
+  }, {
+    headerName: t('positionIgnition'),
+    field: 'ignition',
+    type: 'boolean',
+    flex: 1,
+    valueGetter: ({ row }) => row.attributes.ignition,
+    valueFormatter: ({ value }) => formatBoolean(value),
+  }, {
+    headerName: t('deviceTotalDistance'),
+    field: 'totalDistance',
+    type: 'number',
+    hide: true,
+    flex: 1,
+    valueGetter: ({ row }) => row.attributes.totalDistance,
+    valueFormatter: ({ value }) => formatDistance(value, 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} 
+        hideFooter 
+        autoHeight />
     </ReportLayoutPage>
   );
 };