diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2021-04-08 09:41:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-08 09:41:42 -0700 |
commit | bfe5b547bc7c6dee70fc95034a175a5c9d8012af (patch) | |
tree | 0e8c7fab8bf99219efa5dcfff8f06f52a4753d40 /modern/src | |
parent | dbd9a093caf6df8f5ed50801c40b5e15e7726f59 (diff) | |
parent | 758647d372df2d633354fb64038d34246531aafb (diff) | |
download | trackermap-web-bfe5b547bc7c6dee70fc95034a175a5c9d8012af.tar.gz trackermap-web-bfe5b547bc7c6dee70fc95034a175a5c9d8012af.tar.bz2 trackermap-web-bfe5b547bc7c6dee70fc95034a175a5c9d8012af.zip |
Merge pull request #832 from mail2bishnoi/data_grid
Data grid implementations for remaining reports
Diffstat (limited to 'modern/src')
-rw-r--r-- | modern/src/reports/EventReportPage.js | 54 | ||||
-rw-r--r-- | modern/src/reports/ReportLayoutPage.js | 4 | ||||
-rw-r--r-- | modern/src/reports/StopReportPage.js | 81 | ||||
-rw-r--r-- | modern/src/reports/SummaryReportPage.js | 92 | ||||
-rw-r--r-- | modern/src/reports/TripReportPage.js | 117 |
5 files changed, 233 insertions, 115 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 459383e9..cbe2ced5 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,8 +1,8 @@ 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 { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; import t from '../common/localization'; -import { formatPosition } from '../common/formatter'; +import { formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; @@ -59,30 +59,36 @@ const EventReportPage = () => { const [items, setItems] = useState([]); + const columns = [{ + headerName: t('positionFixTime'), + field: 'serverTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('sharedType'), + field: 'type', + type: 'string', + flex:1, + }, { + headerName: t('sharedGeofence'), + field: 'geofenceId', + type: 'number', + flex: 1, + }, { + headerName: t('sharedMaintenance'), + field: 'maintenanceId', + type: 'number', + flex: 1 + }]; + return ( <ReportLayoutPage filter={<Filter setItems={setItems} />}> - <TableContainer component={Paper}> - <Table> - <TableHead> - <TableRow> - <TableCell>{t('positionFixTime')}</TableCell> - <TableCell>{t('sharedType')}</TableCell> - <TableCell>{t('sharedGeofence')}</TableCell> - <TableCell>{t('sharedMaintenance')}</TableCell> - </TableRow> - </TableHead> - <TableBody> - {items.map(item => ( - <TableRow key={item.id}> - <TableCell>{formatPosition(item, 'eventTime')}</TableCell> - <TableCell>{item.type}</TableCell> - <TableCell>{}</TableCell> - <TableCell>{}</TableCell> - </TableRow> - ))} - </TableBody> - </Table> - </TableContainer> + <DataGrid + rows={items} + columns={columns} + hideFooter + autoHeight /> </ReportLayoutPage> ); } diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js index d6fac051..e5eda05e 100644 --- a/modern/src/reports/ReportLayoutPage.js +++ b/modern/src/reports/ReportLayoutPage.js @@ -31,7 +31,9 @@ const ReportLayoutPage = ({ children, filter }) => { </Paper> </Grid> <Grid item xs={12} md={9} lg={10}> - {children} + <Paper> + {children} + </Paper> </Grid> </Grid> </div> diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index d06997e2..78731510 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -1,5 +1,5 @@ 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 { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; @@ -29,36 +29,63 @@ const Filter = ({ setItems }) => { const StopReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); + const volumeUnit = useAttributePreference('volumeUnit'); + const [items, setItems] = useState([]); + + const columns = [{ + headerName: t('reportStartTime'), + field: 'startTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('positionOdometer'), + field: 'startOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('positionAddress'), + field: 'address', + type: 'string', + hide: true, + flex: 1, + }, { + headerName: t('reportEndTime'), + field: 'endTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('reportDuration'), + field: 'duration', + type: 'string', + flex: 1, + valueFormatter: ({ value }) => formatHours(value), + }, { + 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('reportStartTime')}</TableCell> - <TableCell>{t('positionOdometer')}</TableCell> - <TableCell>{t('reportEndTime')}</TableCell> - <TableCell>{t('reportDuration')}</TableCell> - <TableCell>{t('reportEngineHours')}</TableCell> - <TableCell>{t('reportSpentFuel')}</TableCell> - </TableRow> - </TableHead> - <TableBody> - {items.map((item) => ( - <TableRow key={item.id}> - <TableCell>{formatDate(item.startTime)}</TableCell> - <TableCell>{formatDistance(item.startOdometer, distanceUnit)}</TableCell> - <TableCell>{formatDate(item.endTime)}</TableCell> - <TableCell>{formatHours(item.duration)}</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> ); }; 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> ); } diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index c1ba6646..45a7786c 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -1,7 +1,7 @@ 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 { formatDistance, formatSpeed, formatHours, formatDate } from '../common/formatter'; +import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; @@ -30,40 +30,93 @@ const TripReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); + const volumeUnit = useAttributePreference('volumeUnit'); + const [items, setItems] = useState([]); + const columns = [{ + headerName: t('reportStartTime'), + field: 'startTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('reportStartOdometer'), + field: 'startOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportStartAddress'), + field: 'startAddress', + type: 'string', + hide: true, + flex: 1, + }, { + headerName: t('reportEndTime'), + field: 'endTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('reportEndOdometer'), + field: 'endOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportEndAddress'), + field: 'endAddress', + type: 'string', + hide: true, + flex: 1, + }, { + headerName: t('sharedDistance'), + field: 'distance', + 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('reportDuration'), + field: 'duration', + type: 'string', + flex: 1, + valueFormatter: ({ value }) => formatHours(value), + }, { + headerName: t('reportSpentFuel'), + field: 'spentFuel', + type: 'number', + flex: 1, + hide: true, + valueFormatter: ({ value }) => formatVolume(value, volumeUnit), + }, { + headerName: t('sharedDriver'), + field: 'driverName', + type: 'string', + flex: 1, + hide: true + }] + return ( <ReportLayoutPage filter={<Filter setItems={setItems} />}> - <TableContainer component={Paper}> - <Table> - <TableHead> - <TableRow> - <TableCell>{t('reportStartTime')}</TableCell> - <TableCell>{t('reportStartOdometer')}</TableCell> - <TableCell>{t('reportEndTime')}</TableCell> - <TableCell>{t('reportEndOdometer')}</TableCell> - <TableCell>{t('sharedDistance')}</TableCell> - <TableCell>{t('reportAverageSpeed')}</TableCell> - <TableCell>{t('reportMaximumSpeed')}</TableCell> - <TableCell>{t('reportDuration')}</TableCell> - </TableRow> - </TableHead> - <TableBody> - {items.map((item) => ( - <TableRow key={item.id}> - <TableCell>{formatDate(item.startTime)}</TableCell> - <TableCell>{formatDistance(item.startOdometer, distanceUnit)}</TableCell> - <TableCell>{formatDate(item.endTime)}</TableCell> - <TableCell>{formatDistance(item.endOdometer, distanceUnit)}</TableCell> - <TableCell>{formatDistance(item.distance, distanceUnit)}</TableCell> - <TableCell>{formatSpeed(item.averageSpeed, speedUnit)}</TableCell> - <TableCell>{formatSpeed(item.maxSpeed, speedUnit)}</TableCell> - <TableCell>{formatHours(item.duration)}</TableCell> - </TableRow> - ))} - </TableBody> - </Table> - </TableContainer> + <DataGrid + rows={items} + columns={columns} + hideFooter + autoHeight + getRowId={() => Math.random()} /> </ReportLayoutPage> ); } |