From d7bfb9ac6fabf09f4675ea58bc58e12dbd04eee9 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Thu, 12 Nov 2020 16:03:33 +0530 Subject: Implementing Trip Report with attribute formating --- modern/src/common/formatter.js | 40 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) (limited to 'modern/src/common/formatter.js') diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index f04bb43..6705221 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')}`; +}; -- cgit v1.2.3 From 651dfa0ca0626a47c684077ab39feeade177a28d Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 13 Nov 2020 12:19:51 +0530 Subject: Minor bug fixes and improvements in Trips report --- modern/src/common/formatter.js | 10 +++++----- modern/src/reports/TripReportPage.js | 9 +++++---- 2 files changed, 10 insertions(+), 9 deletions(-) (limited to 'modern/src/common/formatter.js') diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index 6705221..52c05c0 100644 --- a/modern/src/common/formatter.js +++ b/modern/src/common/formatter.js @@ -39,6 +39,10 @@ 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': @@ -64,9 +68,5 @@ export const formatSpeed = (value, unit) => { }; 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')}`; + return moment.duration(value).humanize(); }; diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index 89f2240..71b9596 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 } from '../common/formatter'; +import { formatPosition, formatDistance, formatSpeed, formatHours, formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; @@ -15,7 +15,7 @@ const ReportFilterForm = ({ onResult }) => { to: to.toISOString(), }); const response = await fetch(`/api/reports/trips?${query.toString()}`, { headers: { Accept: 'application/json' } }); - if(response.ok) { + if (response.ok) { onResult(await response.json()); } } @@ -26,6 +26,7 @@ const TripReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const [items, setItems] = useState([]); + return ( @@ -45,9 +46,9 @@ const TripReportPage = () => { {items.map((item) => ( - {formatPosition(item, 'startTime')} + {formatDate(item.startTime)} {formatDistance(item.startOdometer, distanceUnit)} - {formatPosition(item, 'endTime')} + {formatDate(item.endTime)} {formatDistance(item.endOdometer, distanceUnit)} {formatDistance(item.distance, distanceUnit)} {formatSpeed(item.averageSpeed, speedUnit)} -- cgit v1.2.3 From 2ef17f32bf99e4e823ad3622227a8f41af798d65 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 13 Nov 2020 12:49:51 +0530 Subject: Implementing Stops Report --- modern/src/App.js | 2 ++ modern/src/common/formatter.js | 12 +++++++ modern/src/reports/StopReportPage.js | 62 ++++++++++++++++++++++++++++++++++++ modern/src/reports/TripReportPage.js | 5 +-- 4 files changed, 79 insertions(+), 2 deletions(-) (limited to 'modern/src/common/formatter.js') 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 = () => { + )} 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 ; +} + +const StopReportPage = () => { + + const distanceUnit = useAttributePreference('distanceUnit'); + const [items, setItems] = useState([]); + + return ( + + + + + + {t('reportStartTime')} + {t('positionOdometer')} + {t('reportEndTime')} + {t('reportDuration')} + {t('reportEngineHours')} + {t('reportSpentFuel')} + + + + {items.map((item) => ( + + {formatDate(item.startTime)} + {formatDistance(item.startOdometer, distanceUnit)} + {formatDate(item.endTime)} + {formatHours(item.duration)} + {formatHours(item.engineHours)} + {formatVolume(item.spentFuel)} + + ))} + +
+ + + ); +} + +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 ( -- cgit v1.2.3 From 37ff59bbdc540bf2293a96ecbedcf210f6b4548a Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Sat, 14 Nov 2020 09:02:34 +0530 Subject: Adding DailySummary param to summary report and minor code improvements --- modern/src/App.js | 2 -- modern/src/MainToolbar.js | 6 ------ modern/src/common/formatter.js | 2 -- modern/src/reports/SummaryReportPage.js | 13 +++++++++++-- 4 files changed, 11 insertions(+), 12 deletions(-) (limited to 'modern/src/common/formatter.js') diff --git a/modern/src/App.js b/modern/src/App.js index c54e648..8a308c1 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -21,7 +21,6 @@ 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); @@ -51,7 +50,6 @@ const App = () => { - )} diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index a2a9c9f..a899950 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -140,12 +140,6 @@ const MainToolbar = () => { - - history.push('/reports/daily-summary')}> - - - - diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index 7221618..e41e591 100644 --- a/modern/src/common/formatter.js +++ b/modern/src/common/formatter.js @@ -9,8 +9,6 @@ export const formatPosition = (value, key) => { case 'fixTime': case 'deviceTime': case 'serverTime': - case 'startTime': - case 'endTime': return moment(value).format('LLL'); case 'latitude': case 'longitude': diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index e482d0f..c90ddb4 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; +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'; @@ -8,18 +8,27 @@ 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 ; + return ( + + setDaily(event.target.checked)} />} + label={t('reportDaily')} /> + + ); } const SummaryReportPage = () => { -- cgit v1.2.3