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/App.js | 2 + modern/src/MainToolbar.js | 6 +-- modern/src/common/formatter.js | 40 +++++++++++++++-- modern/src/reports/DailySummaryReportPage.js | 0 modern/src/reports/StopReportPage.js | 0 modern/src/reports/SummaryReportPage.js | 0 modern/src/reports/TripReportPage.js | 65 ++++++++++++++++++++++++++++ 7 files changed, 107 insertions(+), 6 deletions(-) create mode 100644 modern/src/reports/DailySummaryReportPage.js create mode 100644 modern/src/reports/StopReportPage.js create mode 100644 modern/src/reports/SummaryReportPage.js create mode 100644 modern/src/reports/TripReportPage.js (limited to 'modern/src') 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 = () => { + )} 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 = () => { - + history.push('/reports/trip')}> - + history.push('/reports/stop')}> - + history.push('/reports/summary')}> 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 diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js new file mode 100644 index 00000000..e69de29b diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js new file mode 100644 index 00000000..e69de29b 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 ; +} + +const TripReportPage = () => { + const distanceUnit = useAttributePreference('distanceUnit'); + const speedUnit = useAttributePreference('speedUnit'); + const [items, setItems] = useState([]); + return ( + + + + + + {t('reportStartTime')} + {t('reportStartOdometer')} + {t('reportEndTime')} + {t('reportEndOdometer')} + {t('sharedDistance')} + {t('reportAverageSpeed')} + {t('reportMaximumSpeed')} + {t('reportDuration')} + + + + {items.map((item) => ( + + {formatPosition(item, 'startTime')} + {formatDistance(item.startOdometer, distanceUnit)} + {formatPosition(item, 'endTime')} + {formatDistance(item.endOdometer, distanceUnit)} + {formatDistance(item.distance, distanceUnit)} + {formatSpeed(item.averageSpeed, speedUnit)} + {formatSpeed(item.maxSpeed, speedUnit)} + {formatHours(item.duration)} + + ))} + +
+ + + ); +} + +export default TripReportPage; -- 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') diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index 6705221a..52c05c0d 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 89f22408..71b95965 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') diff --git a/modern/src/App.js b/modern/src/App.js index afa03aa9..bbcab3e6 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 52c05c0d..72216186 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 e69de29b..c9e50c82 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 71b95965..15e21f5f 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 42cf49c219f0455537eccaf76cf8febf2dae6730 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 13 Nov 2020 14:39:34 +0530 Subject: Implementing Summary Report --- modern/src/App.js | 2 + modern/src/reports/SummaryReportPage.js | 67 +++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+) (limited to 'modern/src') diff --git a/modern/src/App.js b/modern/src/App.js index bbcab3e6..8a308c17 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -20,6 +20,7 @@ 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); @@ -48,6 +49,7 @@ const App = () => { + )} diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index e69de29b..e482d0fa 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.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, 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(), + }); + const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers: { Accept: 'application/json' } }); + if (response.ok) { + onResult(await response.json()); + } + } + return ; +} + +const SummaryReportPage = () => { + + const distanceUnit = useAttributePreference('distanceUnit'); + const speedUnit = useAttributePreference('speedUnit'); + const [items, setItems] = useState([]); + + return ( + + + + + + {t('reportStartDate')} + {t('sharedDistance')} + {t('reportStartOdometer')} + {t('reportEndOdometer')} + {t('reportAverageSpeed')} + {t('reportMaximumSpeed')} + {t('reportEngineHours')} + {t('reportSpentFuel')} + + + + {items.map((item) => ( + + {formatDate(item.startTime, 'YYYY-MM-DD')} + {formatDistance(item.distance, distanceUnit)} + {formatDistance(item.startOdometer, distanceUnit)} + {formatDistance(item.endOdometer, distanceUnit)} + {formatSpeed(item.averageSpeed, speedUnit)} + {formatSpeed(item.maxSpeed, speedUnit)} + {formatHours(item.engineHours)} + {formatVolume(item.spentFuel)} + + ))} + +
+ + + ); +} + +export default SummaryReportPage; -- cgit v1.2.3 From 28d1fc9ce25922467498df1a0b602afc37ca89af Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 13 Nov 2020 15:01:01 +0530 Subject: Implementing Daily Summary Report --- modern/src/App.js | 2 + modern/src/MainToolbar.js | 6 +++ modern/src/reports/DailySummaryReportPage.js | 68 ++++++++++++++++++++++++++++ 3 files changed, 76 insertions(+) (limited to 'modern/src') diff --git a/modern/src/App.js b/modern/src/App.js index 8a308c17..c54e6485 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 = () => { + )} diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 5b94b147..a2a9c9fb 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -141,6 +141,12 @@ const MainToolbar = () => { + history.push('/reports/daily-summary')}> + + + + + diff --git a/modern/src/reports/DailySummaryReportPage.js b/modern/src/reports/DailySummaryReportPage.js index e69de29b..c628a9bc 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 ; +} + +const DailySummaryReportPage = () => { + + const distanceUnit = useAttributePreference('distanceUnit'); + const speedUnit = useAttributePreference('speedUnit'); + const [items, setItems] = useState([]); + + return ( + + + + + + {t('reportStartDate')} + {t('sharedDistance')} + {t('reportStartOdometer')} + {t('reportEndOdometer')} + {t('reportAverageSpeed')} + {t('reportMaximumSpeed')} + {t('reportEngineHours')} + {t('reportSpentFuel')} + + + + {items.map((item) => ( + + {formatDate(item.startTime, 'YYYY-MM-DD')} + {formatDistance(item.distance, distanceUnit)} + {formatDistance(item.startOdometer, distanceUnit)} + {formatDistance(item.endOdometer, distanceUnit)} + {formatSpeed(item.averageSpeed, speedUnit)} + {formatSpeed(item.maxSpeed, speedUnit)} + {formatHours(item.engineHours)} + {formatVolume(item.spentFuel)} + + ))} + +
+ + + ); +} + +export default DailySummaryReportPage; -- 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') diff --git a/modern/src/App.js b/modern/src/App.js index c54e6485..8a308c17 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 a2a9c9fb..a8999500 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 72216186..e41e591e 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 e482d0fa..c90ddb4a 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