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