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 | |
parent | 2ead5e0a6ab859ac3436f378a1fec126e493c69b (diff) | |
parent | 37ff59bbdc540bf2293a96ecbedcf210f6b4548a (diff) | |
download | trackermap-web-ad304bdb881bf2abc0ad477482b321208f343c43.tar.gz trackermap-web-ad304bdb881bf2abc0ad477482b321208f343c43.tar.bz2 trackermap-web-ad304bdb881bf2abc0ad477482b321208f343c43.zip |
Merge pull request #792 from mail2bishnoi/trip-stop-summary-dailysummary-reports
Implementing Trip Report with attribute formating
-rw-r--r-- | modern/src/App.js | 6 | ||||
-rw-r--r-- | modern/src/MainToolbar.js | 8 | ||||
-rw-r--r-- | modern/src/common/formatter.js | 48 | ||||
-rw-r--r-- | modern/src/reports/DailySummaryReportPage.js | 68 | ||||
-rw-r--r-- | modern/src/reports/StopReportPage.js | 62 | ||||
-rw-r--r-- | modern/src/reports/SummaryReportPage.js | 76 | ||||
-rw-r--r-- | modern/src/reports/TripReportPage.js | 67 |
7 files changed, 329 insertions, 6 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index f4de837b..8a308c17 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -18,6 +18,9 @@ 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'; +import StopReportPage from './reports/StopReportPage'; +import SummaryReportPage from './reports/SummaryReportPage'; const App = () => { const initialized = useSelector(state => !!state.session.server && !!state.session.user); @@ -44,6 +47,9 @@ 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} /> + <Route exact path='/reports/stop' component={StopReportPage} /> + <Route exact path='/reports/summary' component={SummaryReportPage} /> </Switch> )} </Route> diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index b853dc47..a8999500 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -123,24 +123,24 @@ 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> <ListItemText primary={t('reportSummary')} /> - </ListItem> + </ListItem> <ListItem button disabled> <ListItemIcon> <TrendingUpIcon /> diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index f04bb434..e41e591e 100644 --- a/modern/src/common/formatter.js +++ b/modern/src/common/formatter.js @@ -27,12 +27,56 @@ 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 formatDate = (value, format = 'YYYY-MM-DD HH:mm') => { + return moment(value).format(format); +}; + +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 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/DailySummaryReportPage.js b/modern/src/reports/DailySummaryReportPage.js new file mode 100644 index 00000000..c628a9bc --- /dev/null +++ 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; diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js new file mode 100644 index 00000000..c9e50c82 --- /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; diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js new file mode 100644 index 00000000..c90ddb4a --- /dev/null +++ b/modern/src/reports/SummaryReportPage.js @@ -0,0 +1,76 @@ +import React, { useState } from 'react'; +import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, FormControlLabel, Checkbox } 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 [daily, setDaily] = useState(false); + + const handleSubmit = async (deviceId, from, to) => { + const query = new URLSearchParams({ + deviceId, + from: from.toISOString(), + to: to.toISOString(), + daily + }); + const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers: { Accept: 'application/json' } }); + if (response.ok) { + onResult(await response.json()); + } + } + return ( + <ReportFilter handleSubmit={handleSubmit}> + <FormControlLabel + control={<Checkbox checked={daily} onChange={event => setDaily(event.target.checked)} />} + label={t('reportDaily')} /> + </ReportFilter> + ); +} + +const SummaryReportPage = () => { + + 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 SummaryReportPage; diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js new file mode 100644 index 00000000..15e21f5f --- /dev/null +++ b/modern/src/reports/TripReportPage.js @@ -0,0 +1,67 @@ +import React, { useState } from 'react'; +import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; +import t from '../common/localization'; +import { formatDistance, formatSpeed, formatHours, formatDate } 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>{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> + </ReportLayoutPage> + ); +} + +export default TripReportPage; |