Improved reports, changed/hidden/deleted columns and sizes

6 files changed, 57 insertions, 26 deletions

diff --git a/modern/src/LocalizationProvider.js b/modern/src/LocalizationProvider.js
index 9b91509..0246e5b 100644
--- a/modern/src/LocalizationProvider.js
+++ b/modern/src/LocalizationProvider.js
@@ -56,7 +56,6 @@ export const useTranslation = () => {
     if (Object.keys(args).length) {
       let str = data[key];
       Object.keys(args).forEach(k => {
-        console.log (`Replacement for ${k} in ${str} is: `, args[k])
         str = str.replace(new RegExp(`\\{${k}\\}`, 'gi'), args[k].toString());
       });
       return str;
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 3ed80e7..7c4a24c 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -41,18 +41,32 @@ const Filter = ({ setItems }) => {
   }
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
+    let items = {};
     const query = new URLSearchParams({
       deviceId, from, to, mail,
     });
+    /* fetch events */
     eventTypes.forEach((it) => query.append('type', it));
     const response = await fetch(`/api/reports/events?${query.toString()}`, { headers });
     if (response.ok) {
       const contentType = response.headers.get('content-type');
       if (contentType) {
         if (contentType === 'application/json') {
-          setItems(await response.json());
+          items['events'] = await response.json();
         } else {
           window.location.assign(window.URL.createObjectURL(await response.blob()));
+          return;
+        }
+      }
+    }
+    /* fetch positions, but only if application/json */
+    const response2 = await fetch(`/api/reports/route?${query.toString()}`, { headers });
+    if (response2.ok) {
+      const contentType = response2.headers.get('content-type');
+      if (contentType) {
+        if (contentType === 'application/json') {
+          items['positions'] = await response2.json();
+          setItems(items);
         }
       }
     }
@@ -95,14 +109,23 @@ const EventReportPage = () => {
 
   const geofences = useSelector((state) => state.geofences.items);
 
-  const [items, setItems] = useState([]);
+  const [items, setItems] = useState({positions: [], events: []});
 
   const formatGeofence = (value) => {
     if (value > 0) {
       const geofence = geofences[value];
       return geofence ? geofence.name : '';
     }
-    return null;
+    return '';
+  };
+
+  const formatAddress = (value) => {
+    if (value > 0) {
+      const position = items.positions.find(p => p.id === value);
+      console.log ('position ' + value + ' is: ', position);
+      return position && position.address ? position.address : '';
+    }
+    return '';
   };
 
   const columns = [{
@@ -126,20 +149,27 @@ const EventReportPage = () => {
     headerName: t('sharedMaintenance'),
     field: 'maintenanceId',
     type: 'number',
+    hide: true,
+    width: theme.dimensions.columnWidthString,
+  }, {
+    headerName: t('positionAddress'),
+    field: 'positionId',
+    type: 'string',
     width: theme.dimensions.columnWidthString,
+    valueFormatter: ({ value }) => formatAddress(value),
   }];
 
   return (
     <ReportLayout filter={<Filter setItems={setItems} />}>
-      <DataGrid
-        rows={items}
-        columns={columns}
-        components={{
-          NoRowsOverlay: NoRowsOverlay,
-        }}
-        hideFooter
-        autoHeight
-      />
+        <DataGrid
+          rows={items.events}
+          columns={columns}
+          components={{
+            NoRowsOverlay: NoRowsOverlay,
+          }}
+          hideFooter
+          autoHeight
+        />
     </ReportLayout>
   );
 };
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index db514e8..02aab79 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -49,22 +49,31 @@ const RouteReportPage = () => {
     width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
+    headerName: t('positionIgnition'),
+    field: 'ignition',
+    type: 'boolean',
+    width: theme.dimensions.columnWidthBoolean,
+    valueGetter: ({ row }) => row.attributes.ignition,
+    valueFormatter: ({ value }) => formatBoolean(value, t),
+  }, {
     headerName: t('positionLatitude'),
     field: 'latitude',
     type: 'number',
+    hide: true,
     width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat),
   }, {
     headerName: t('positionLongitude'),
     field: 'longitude',
     type: 'number',
+    hide: true,
     width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat),
   }, {
     headerName: t('positionSpeed'),
     field: 'speed',
     type: 'number',
-    width: theme.dimensions.columnWidthString,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('positionAddress'),
@@ -72,13 +81,6 @@ const RouteReportPage = () => {
     type: 'string',
     width: theme.dimensions.columnWidthString,
   }, {
-    headerName: t('positionIgnition'),
-    field: 'ignition',
-    type: 'boolean',
-    width: theme.dimensions.columnWidthBoolean,
-    valueGetter: ({ row }) => row.attributes.ignition,
-    valueFormatter: ({ value }) => formatBoolean(value, t),
-  }, {
     headerName: t('deviceTotalDistance'),
     field: 'totalDistance',
     type: 'number',
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 8b3974f..42a3c66 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -68,13 +68,13 @@ const StopReportPage = () => {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    width: theme.dimensions.columnWidthString,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatHours(value, t),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
     type: 'string',
-    width: theme.dimensions.columnWidthString,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatHours(value, t),
   }, {
     headerName: t('reportSpentFuel'),
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 5ea8a19..e47c072 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -99,7 +99,7 @@ const TripReportPage = () => {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    width: theme.dimensions.columnWidthString,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatHours(value, t),
   }, {
     headerName: t('reportSpentFuel'),
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index fcdbaee..c3ba9a3 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -5,8 +5,8 @@ export default {
   sidebarWidthTablet: '52px',
   drawerWidthDesktop: '360px',
   drawerWidthTablet: '320px',
-  columnWidthDate: 160,
+  columnWidthDate: 190,
   columnWidthNumber: 130,
-  columnWidthString: 160,
+  columnWidthString: 350,
   columnWidthBoolean: 130,
 };