diff options
| -rw-r--r-- | modern/src/App.js | 2 | ||||
| -rw-r--r-- | modern/src/common/formatter.js | 12 | ||||
| -rw-r--r-- | modern/src/reports/StopReportPage.js | 62 | ||||
| -rw-r--r-- | modern/src/reports/TripReportPage.js | 5 |
4 files changed, 79 insertions, 2 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index afa03aa..bbcab3e 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -19,6 +19,7 @@ import ReplayPage from './reports/ReplayPage'; import { useSelector } from 'react-redux'; import { LinearProgress } from '@material-ui/core'; import TripReportPage from './reports/TripReportPage'; +import StopReportPage from './reports/StopReportPage'; const App = () => { const initialized = useSelector(state => !!state.session.server && !!state.session.user); @@ -46,6 +47,7 @@ const App = () => { <Route exact path='/admin/users' component={UsersPage} /> <Route exact path='/reports/event' component={EventReportPage} /> <Route exact path='/reports/trip' component={TripReportPage} /> + <Route exact path='/reports/stop' component={StopReportPage} /> </Switch> )} </Route> diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index 52c05c0..7221618 100644 --- a/modern/src/common/formatter.js +++ b/modern/src/common/formatter.js @@ -67,6 +67,18 @@ export const formatSpeed = (value, unit) => { } }; +export const formatVolume = (value, unit) => { + switch (unit) { + case 'impGal': + return `${(value / 4.546).toFixed(2)} ${t('sharedGallonAbbreviation')}`; + case 'usGal': + return `${(value / 3.785).toFixed(2)} ${t('sharedGallonAbbreviation')}`; + case 'ltr': + default: + return `${(value / 1).toFixed(2)} ${t('sharedLiterAbbreviation')}`; + } +} + export const formatHours = (value) => { return moment.duration(value).humanize(); }; diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index e69de29..c9e50c8 100644 --- a/modern/src/reports/StopReportPage.js +++ 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; diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index 71b9596..15e21f5 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 t from '../common/localization'; -import { formatPosition, formatDistance, formatSpeed, formatHours, formatDate } from '../common/formatter'; +import { formatDistance, formatSpeed, formatHours, formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; @@ -23,10 +23,11 @@ const ReportFilterForm = ({ onResult }) => { } const TripReportPage = () => { + const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const [items, setItems] = useState([]); - + return ( <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}> <TableContainer component={Paper}> |