diff options
| -rw-r--r-- | modern/src/App.js | 2 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 6 | ||||
| -rw-r--r-- | modern/src/common/formatter.js | 40 | ||||
| -rw-r--r-- | modern/src/reports/DailySummaryReportPage.js | 0 | ||||
| -rw-r--r-- | modern/src/reports/StopReportPage.js | 0 | ||||
| -rw-r--r-- | modern/src/reports/SummaryReportPage.js | 0 | ||||
| -rw-r--r-- | modern/src/reports/TripReportPage.js | 65 |
7 files changed, 107 insertions, 6 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index f4de837b..afa03aa9 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -18,6 +18,7 @@ import EventReportPage from './reports/EventReportPage'; import ReplayPage from './reports/ReplayPage'; import { useSelector } from 'react-redux'; import { LinearProgress } from '@material-ui/core'; +import TripReportPage from './reports/TripReportPage'; const App = () => { const initialized = useSelector(state => !!state.session.server && !!state.session.user); @@ -44,6 +45,7 @@ const App = () => { <Route exact path='/admin/server' component={ServerPage} /> <Route exact path='/admin/users' component={UsersPage} /> <Route exact path='/reports/event' component={EventReportPage} /> + <Route exact path='/reports/trip' component={TripReportPage} /> </Switch> )} </Route> diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index b853dc47..5b94b147 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -123,19 +123,19 @@ const MainToolbar = () => { </ListItemIcon> <ListItemText primary={t('reportEvents')} /> </ListItem> - <ListItem button disabled> + <ListItem button onClick={() => history.push('/reports/trip')}> <ListItemIcon> <PlayCircleFilledIcon /> </ListItemIcon> <ListItemText primary={t('reportTrips')} /> </ListItem> - <ListItem button disabled> + <ListItem button onClick={() => history.push('/reports/stop')}> <ListItemIcon> <PauseCircleFilledIcon /> </ListItemIcon> <ListItemText primary={t('reportStops')} /> </ListItem> - <ListItem button disabled> + <ListItem button onClick={() => history.push('/reports/summary')}> <ListItemIcon> <FormatListBulletedIcon /> </ListItemIcon> diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index f04bb434..6705221a 100644 --- a/modern/src/common/formatter.js +++ b/modern/src/common/formatter.js @@ -9,6 +9,8 @@ export const formatPosition = (value, key) => { case 'fixTime': case 'deviceTime': case 'serverTime': + case 'startTime': + case 'endTime': return moment(value).format('LLL'); case 'latitude': case 'longitude': @@ -27,12 +29,44 @@ export const formatPosition = (value, key) => { return value; } } -} +}; export const formatBoolean = (value) => { return value ? t('sharedYes') : t('sharedNo'); -} +}; export const formatNumber = (value, precision = 1) => { return Number(value.toFixed(precision)); -} +}; + +export const formatDistance = (value, unit) => { + switch (unit) { + case 'mi': + return `${(value * 0.000621371).toFixed(2)} ${t('sharedMi')}`; + case 'nmi': + return `${(value * 0.000539957).toFixed(2)} ${t('sharedNmi')}`; + case 'km': + default: + return `${(value * 0.001).toFixed(2)} ${t('sharedKm')}`; + } +}; + +export const formatSpeed = (value, unit) => { + switch (unit) { + case 'kmh': + return `${(value * 1.852).toFixed(2)} ${t('sharedKmh')}`; + case 'mph': + return `${(value * 1.15078).toFixed(2)} ${t('sharedMph')}`; + case 'kn': + default: + return `${(value * 1).toFixed(2)} ${t('sharedKn')}`; + } +}; + +export const formatHours = (value) => { + let hours, minutes; + hours = Math.floor(value / 3600000); + minutes = Math.floor(value % 3600000 / 60000); + + return `${hours} ${t('sharedHourAbbreviation')} ${minutes} ${t('sharedMinuteAbbreviation')}`; +}; diff --git a/modern/src/reports/DailySummaryReportPage.js b/modern/src/reports/DailySummaryReportPage.js new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/modern/src/reports/DailySummaryReportPage.js diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/modern/src/reports/StopReportPage.js diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/modern/src/reports/SummaryReportPage.js diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js new file mode 100644 index 00000000..89f22408 --- /dev/null +++ b/modern/src/reports/TripReportPage.js @@ -0,0 +1,65 @@ +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 } 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/trips?${query.toString()}`, { headers: { Accept: 'application/json' } }); + if(response.ok) { + onResult(await response.json()); + } + } + return <ReportFilter handleSubmit={handleSubmit} />; +} + +const TripReportPage = () => { + 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('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>{formatPosition(item, 'startTime')}</TableCell> + <TableCell>{formatDistance(item.startOdometer, distanceUnit)}</TableCell> + <TableCell>{formatPosition(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> + </ReportLayoutPage> + ); +} + +export default TripReportPage; |