diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-04-06 11:43:39 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-04-06 11:43:39 +0530 |
commit | e7245fc142f6aa14e70036c0056c498971944cf9 (patch) | |
tree | 688a96d30e7c6414d42b2189c510239909a0e30d /modern/src/reports/SummaryReportPage.js | |
parent | 11c34f710c75a3d789b603d053e177a226b2f118 (diff) | |
download | trackermap-web-e7245fc142f6aa14e70036c0056c498971944cf9.tar.gz trackermap-web-e7245fc142f6aa14e70036c0056c498971944cf9.tar.bz2 trackermap-web-e7245fc142f6aa14e70036c0056c498971944cf9.zip |
summary report data-grid conversion
Diffstat (limited to 'modern/src/reports/SummaryReportPage.js')
-rw-r--r-- | modern/src/reports/SummaryReportPage.js | 92 |
1 files changed, 61 insertions, 31 deletions
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index 5cfd857d..2af7d3b0 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, FormControlLabel, Checkbox } from '@material-ui/core'; +import { DataGrid } from '@material-ui/data-grid'; +import { FormControlLabel, Checkbox } from '@material-ui/core'; import t from '../common/localization'; import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; @@ -38,40 +39,69 @@ const SummaryReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); + const volumeUnit = useAttributePreference('volumeUnit'); + const [items, setItems] = useState([]); + + const columns = [{ + headerName: t('reportStartDate'), + field: 'startTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value, 'YYYY-MM-DD'), + }, { + headerName: t('sharedDistance'), + field: 'distance', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportStartOdometer'), + field: 'startOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportEndOdometer'), + field: 'endOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportAverageSpeed'), + field: 'averageSpeed', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatSpeed(value, speedUnit), + }, { + headerName: t('reportMaximumSpeed'), + field: 'maxSpeed', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatSpeed(value, speedUnit), + }, { + headerName: t('reportEngineHours'), + field: 'engineHours', + type: 'string', + flex: 1, + valueFormatter: ({ value }) => formatHours(value), + }, { + headerName: t('reportSpentFuel'), + field: 'spentFuel', + type: 'number', + flex: 1, + hide: true, + valueFormatter: ({ value }) => formatVolume(value, volumeUnit), + }] return ( <ReportLayoutPage filter={<Filter setItems={setItems} />}> - <TableContainer component={Paper}> - <Table> - <TableHead> - <TableRow> - <TableCell>{t('reportStartDate')}</TableCell> - <TableCell>{t('sharedDistance')}</TableCell> - <TableCell>{t('reportStartOdometer')}</TableCell> - <TableCell>{t('reportEndOdometer')}</TableCell> - <TableCell>{t('reportAverageSpeed')}</TableCell> - <TableCell>{t('reportMaximumSpeed')}</TableCell> - <TableCell>{t('reportEngineHours')}</TableCell> - <TableCell>{t('reportSpentFuel')}</TableCell> - </TableRow> - </TableHead> - <TableBody> - {items.map((item) => ( - <TableRow key={item.id}> - <TableCell>{formatDate(item.startTime, 'YYYY-MM-DD')}</TableCell> - <TableCell>{formatDistance(item.distance, distanceUnit)}</TableCell> - <TableCell>{formatDistance(item.startOdometer, distanceUnit)}</TableCell> - <TableCell>{formatDistance(item.endOdometer, distanceUnit)}</TableCell> - <TableCell>{formatSpeed(item.averageSpeed, speedUnit)}</TableCell> - <TableCell>{formatSpeed(item.maxSpeed, speedUnit)}</TableCell> - <TableCell>{formatHours(item.engineHours)}</TableCell> - <TableCell>{formatVolume(item.spentFuel)}</TableCell> - </TableRow> - ))} - </TableBody> - </Table> - </TableContainer> + <DataGrid + rows={items} + columns={columns} + hideFooter + autoHeight + getRowId={() => Math.random()} /> </ReportLayoutPage> ); } |