From 696a404d549eb1ac6ee8b641d507fa29a4ff1153 Mon Sep 17 00:00:00 2001 From: Iván Ávalos Date: Wed, 22 Dec 2021 00:32:44 -0600 Subject: Improved reports, changed/hidden/deleted columns and sizes --- modern/src/LocalizationProvider.js | 1 - modern/src/reports/EventReportPage.js | 54 +++++++++++++++++++++++++++-------- modern/src/reports/RouteReportPage.js | 18 ++++++------ modern/src/reports/StopReportPage.js | 4 +-- modern/src/reports/TripReportPage.js | 2 +- modern/src/theme/dimensions.js | 4 +-- 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 ( }> - + ); }; 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 @@ -48,36 +48,38 @@ const RouteReportPage = () => { type: 'dateTime', 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'), field: 'address', 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', 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, }; -- cgit v1.2.3