Minor bug fixes and improvements in Trips report

2 files changed, 10 insertions, 9 deletions

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 (
     <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}>
       <TableContainer component={Paper}>
@@ -45,9 +46,9 @@ const TripReportPage = () => {
           <TableBody>
             {items.map((item) => (
               <TableRow key={item.id}>
-                <TableCell>{formatPosition(item, 'startTime')}</TableCell>
+                <TableCell>{formatDate(item.startTime)}</TableCell>
                 <TableCell>{formatDistance(item.startOdometer, distanceUnit)}</TableCell>
-                <TableCell>{formatPosition(item, 'endTime')}</TableCell>
+                <TableCell>{formatDate(item.endTime)}</TableCell>
                 <TableCell>{formatDistance(item.endOdometer, distanceUnit)}</TableCell>
                 <TableCell>{formatDistance(item.distance, distanceUnit)}</TableCell>
                 <TableCell>{formatSpeed(item.averageSpeed, speedUnit)}</TableCell>