diff options
| -rw-r--r-- | modern/src/App.js | 2 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 6 | ||||
| -rw-r--r-- | modern/src/reports/DailySummaryReportPage.js | 68 |
3 files changed, 76 insertions, 0 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index 8a308c1..c54e648 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -21,6 +21,7 @@ import { LinearProgress } from '@material-ui/core'; import TripReportPage from './reports/TripReportPage'; import StopReportPage from './reports/StopReportPage'; import SummaryReportPage from './reports/SummaryReportPage'; +import DailySummaryReportPage from './reports/DailySummaryReportPage'; const App = () => { const initialized = useSelector(state => !!state.session.server && !!state.session.user); @@ -50,6 +51,7 @@ const App = () => { <Route exact path='/reports/trip' component={TripReportPage} /> <Route exact path='/reports/stop' component={StopReportPage} /> <Route exact path='/reports/summary' component={SummaryReportPage} /> + <Route exact path='/reports/daily-summary' component={DailySummaryReportPage} /> </Switch> )} </Route> diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 5b94b14..a2a9c9f 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -141,6 +141,12 @@ const MainToolbar = () => { </ListItemIcon> <ListItemText primary={t('reportSummary')} /> </ListItem> + <ListItem button onClick={() => history.push('/reports/daily-summary')}> + <ListItemIcon> + <FormatListBulletedIcon /> + </ListItemIcon> + <ListItemText primary={t('reportDaily')} /> + </ListItem> <ListItem button disabled> <ListItemIcon> <TrendingUpIcon /> diff --git a/modern/src/reports/DailySummaryReportPage.js b/modern/src/reports/DailySummaryReportPage.js index e69de29..c628a9b 100644 --- a/modern/src/reports/DailySummaryReportPage.js +++ b/modern/src/reports/DailySummaryReportPage.js @@ -0,0 +1,68 @@ +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, formatSpeed, 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(), + daily: true + }); + const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers: { Accept: 'application/json' } }); + if (response.ok) { + onResult(await response.json()); + } + } + return <ReportFilter handleSubmit={handleSubmit} />; +} + +const DailySummaryReportPage = () => { + + const distanceUnit = useAttributePreference('distanceUnit'); + const speedUnit = useAttributePreference('speedUnit'); + const [items, setItems] = useState([]); + + return ( + <ReportLayoutPage reportFilterForm={ReportFilterForm} 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> + </ReportLayoutPage> + ); +} + +export default DailySummaryReportPage; |