diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-11-13 22:07:43 -0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-11-13 22:07:43 -0800 |
commit | ad304bdb881bf2abc0ad477482b321208f343c43 (patch) | |
tree | 6c316a5c0774ef0b57907dc677c8cb6c0ae02a06 /modern/src/reports/StopReportPage.js | |
parent | 2ead5e0a6ab859ac3436f378a1fec126e493c69b (diff) | |
parent | 37ff59bbdc540bf2293a96ecbedcf210f6b4548a (diff) | |
download | etbsa-traccar-web-ad304bdb881bf2abc0ad477482b321208f343c43.tar.gz etbsa-traccar-web-ad304bdb881bf2abc0ad477482b321208f343c43.tar.bz2 etbsa-traccar-web-ad304bdb881bf2abc0ad477482b321208f343c43.zip |
Merge pull request #792 from mail2bishnoi/trip-stop-summary-dailysummary-reports
Implementing Trip Report with attribute formating
Diffstat (limited to 'modern/src/reports/StopReportPage.js')
-rw-r--r-- | modern/src/reports/StopReportPage.js | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js new file mode 100644 index 0000000..c9e50c8 --- /dev/null +++ b/modern/src/reports/StopReportPage.js @@ -0,0 +1,62 @@ +import React, { useState } from 'react'; +import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; +import t from '../common/localization'; +import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter'; +import ReportFilter from './ReportFilter'; +import ReportLayoutPage from './ReportLayoutPage'; +import { useAttributePreference } from '../common/preferences'; + +const ReportFilterForm = ({ onResult }) => { + + const handleSubmit = async (deviceId, from, to) => { + const query = new URLSearchParams({ + deviceId, + from: from.toISOString(), + to: to.toISOString(), + }); + const response = await fetch(`/api/reports/stops?${query.toString()}`, { headers: { Accept: 'application/json' } }); + if (response.ok) { + onResult(await response.json()); + } + } + return <ReportFilter handleSubmit={handleSubmit} />; +} + +const StopReportPage = () => { + + const distanceUnit = useAttributePreference('distanceUnit'); + const [items, setItems] = useState([]); + + return ( + <ReportLayoutPage reportFilterForm={ReportFilterForm} 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> + </ReportLayoutPage> + ); +} + +export default StopReportPage; |