From cee6b4ed848f5178881f5d48a4092fb2bec2bd6b Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Tue, 30 Mar 2021 12:09:16 +0530 Subject: event report data-grid implementation --- modern/src/reports/EventReportPage.js | 54 +++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 24 deletions(-) (limited to 'modern/src') diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 459383e..cbe2ced 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,8 +1,8 @@ import React, { useState } from 'react'; -import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; +import { DataGrid } from '@material-ui/data-grid'; import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; import t from '../common/localization'; -import { formatPosition } from '../common/formatter'; +import { formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; @@ -59,30 +59,36 @@ const EventReportPage = () => { const [items, setItems] = useState([]); + const columns = [{ + headerName: t('positionFixTime'), + field: 'serverTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('sharedType'), + field: 'type', + type: 'string', + flex:1, + }, { + headerName: t('sharedGeofence'), + field: 'geofenceId', + type: 'number', + flex: 1, + }, { + headerName: t('sharedMaintenance'), + field: 'maintenanceId', + type: 'number', + flex: 1 + }]; + return ( }> - - - - - {t('positionFixTime')} - {t('sharedType')} - {t('sharedGeofence')} - {t('sharedMaintenance')} - - - - {items.map(item => ( - - {formatPosition(item, 'eventTime')} - {item.type} - {} - {} - - ))} - -
- + ); } -- cgit v1.2.3 From f8a35be5076e44b7c7e37978bf9c6822be965475 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Thu, 1 Apr 2021 12:35:05 +0530 Subject: trip data-grid implementation --- modern/src/reports/TripReportPage.js | 117 +++++++++++++++++++++++++---------- 1 file changed, 85 insertions(+), 32 deletions(-) (limited to 'modern/src') diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index c1ba664..82c5439 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 { DataGrid } from '@material-ui/data-grid'; import t from '../common/localization'; -import { formatDistance, formatSpeed, formatHours, formatDate } from '../common/formatter'; +import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; @@ -30,40 +30,93 @@ const TripReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); + const volumeUnit = useAttributePreference('volumeUnit'); + const [items, setItems] = useState([]); + const columns = [{ + headerName: t('reportStartTime'), + field: 'startTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('reportStartOdometer'), + field: 'startOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportStartAddress'), + field: 'startAddress', + type: 'string', + hide: true, + flex: 1, + }, { + headerName: t('reportEndTime'), + field: 'endTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('reportStartOdometer'), + field: 'endOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportEndAddress'), + field: 'endAddress', + type: 'string', + hide: true, + flex: 1, + }, { + headerName: t('sharedDistance'), + field: 'distance', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportAverageSpeed'), + field: 'averageSpeed', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatSpeed(value, speedUnit), + }, { + headerName: t('reportMaximumSpeed'), + field: 'maxSpeed', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatSpeed(value, speedUnit), + }, { + headerName: t('reportDuration'), + field: 'duration', + type: 'string', + flex: 1, + valueFormatter: ({ value }) => formatHours(value), + }, { + headerName: t('reportSpentFuel'), + field: 'spentFuel', + type: 'number', + flex: 1, + hide: true, + valueFormatter: ({ value }) => formatVolume(value, volumeUnit), + }, { + headerName: t('sharedDriver'), + field: 'driverName', + type: 'string', + flex: 1, + hide: true + }] + return ( }> - - - - - {t('reportStartTime')} - {t('reportStartOdometer')} - {t('reportEndTime')} - {t('reportEndOdometer')} - {t('sharedDistance')} - {t('reportAverageSpeed')} - {t('reportMaximumSpeed')} - {t('reportDuration')} - - - - {items.map((item) => ( - - {formatDate(item.startTime)} - {formatDistance(item.startOdometer, distanceUnit)} - {formatDate(item.endTime)} - {formatDistance(item.endOdometer, distanceUnit)} - {formatDistance(item.distance, distanceUnit)} - {formatSpeed(item.averageSpeed, speedUnit)} - {formatSpeed(item.maxSpeed, speedUnit)} - {formatHours(item.duration)} - - ))} - -
- + Math.random()} /> ); } -- cgit v1.2.3 From 11c34f710c75a3d789b603d053e177a226b2f118 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Tue, 6 Apr 2021 11:23:22 +0530 Subject: stoppage report data-grid conversion --- modern/src/reports/StopReportPage.js | 81 ++++++++++++++++++++++++------------ 1 file changed, 54 insertions(+), 27 deletions(-) (limited to 'modern/src') diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index d06997e..7873151 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; +import { DataGrid } from '@material-ui/data-grid'; import t from '../common/localization'; import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; @@ -29,36 +29,63 @@ const Filter = ({ setItems }) => { const StopReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); + const volumeUnit = useAttributePreference('volumeUnit'); + const [items, setItems] = useState([]); + + const columns = [{ + headerName: t('reportStartTime'), + field: 'startTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('positionOdometer'), + field: 'startOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('positionAddress'), + field: 'address', + type: 'string', + hide: true, + flex: 1, + }, { + headerName: t('reportEndTime'), + field: 'endTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('reportDuration'), + field: 'duration', + type: 'string', + flex: 1, + valueFormatter: ({ value }) => formatHours(value), + }, { + headerName: t('reportEngineHours'), + field: 'engineHours', + type: 'string', + flex: 1, + valueFormatter: ({ value }) => formatHours(value), + }, { + headerName: t('reportSpentFuel'), + field: 'spentFuel', + type: 'number', + flex: 1, + hide: true, + valueFormatter: ({ value }) => formatVolume(value, volumeUnit), + }] 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)} - - ))} - -
- + Math.random()} /> ); }; -- cgit v1.2.3 From e7245fc142f6aa14e70036c0056c498971944cf9 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Tue, 6 Apr 2021 11:43:39 +0530 Subject: summary report data-grid conversion --- modern/src/reports/SummaryReportPage.js | 92 ++++++++++++++++++++++----------- modern/src/reports/TripReportPage.js | 2 +- 2 files changed, 62 insertions(+), 32 deletions(-) (limited to 'modern/src') diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index 5cfd857..2af7d3b 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, FormControlLabel, Checkbox } from '@material-ui/core'; +import { DataGrid } from '@material-ui/data-grid'; +import { FormControlLabel, Checkbox } from '@material-ui/core'; import t from '../common/localization'; import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; @@ -38,40 +39,69 @@ const SummaryReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); + const volumeUnit = useAttributePreference('volumeUnit'); + const [items, setItems] = useState([]); + + const columns = [{ + headerName: t('reportStartDate'), + field: 'startTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value, 'YYYY-MM-DD'), + }, { + headerName: t('sharedDistance'), + field: 'distance', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportStartOdometer'), + field: 'startOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportEndOdometer'), + field: 'endOdometer', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatDistance(value, distanceUnit), + }, { + headerName: t('reportAverageSpeed'), + field: 'averageSpeed', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatSpeed(value, speedUnit), + }, { + headerName: t('reportMaximumSpeed'), + field: 'maxSpeed', + type: 'number', + flex: 1, + valueFormatter: ({ value }) => formatSpeed(value, speedUnit), + }, { + headerName: t('reportEngineHours'), + field: 'engineHours', + type: 'string', + flex: 1, + valueFormatter: ({ value }) => formatHours(value), + }, { + headerName: t('reportSpentFuel'), + field: 'spentFuel', + type: 'number', + flex: 1, + hide: true, + valueFormatter: ({ value }) => formatVolume(value, volumeUnit), + }] 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)} - - ))} - -
- + Math.random()} /> ); } diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index 82c5439..45a7786 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -59,7 +59,7 @@ const TripReportPage = () => { flex: 1, valueFormatter: ({ value }) => formatDate(value), }, { - headerName: t('reportStartOdometer'), + headerName: t('reportEndOdometer'), field: 'endOdometer', type: 'number', flex: 1, -- cgit v1.2.3 From 63f25d26f42f41492a3addea856fc81d3fe73896 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Wed, 7 Apr 2021 16:07:03 +0530 Subject: Adding background paper components to reports --- modern/src/reports/EventReportPage.js | 14 ++++++++------ modern/src/reports/RouteReportPage.js | 13 ++++++++----- modern/src/reports/StopReportPage.js | 15 +++++++++------ modern/src/reports/SummaryReportPage.js | 16 +++++++++------- modern/src/reports/TripReportPage.js | 15 +++++++++------ 5 files changed, 43 insertions(+), 30 deletions(-) (limited to 'modern/src') diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index cbe2ced..890af34 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; +import { FormControl, InputLabel, Select, MenuItem, Paper } from '@material-ui/core'; import t from '../common/localization'; import { formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; @@ -84,11 +84,13 @@ const EventReportPage = () => { return ( }> - + + + ); } diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index b8bad00..02d41a2 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -5,6 +5,7 @@ import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinat import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference, usePreference } from '../common/preferences'; +import { Paper } from '@material-ui/core'; const Filter = ({ setItems }) => { @@ -81,11 +82,13 @@ const RouteReportPage = () => { return ( }> - + + + ); }; diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index 7873151..d5a2503 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -5,6 +5,7 @@ import { formatDistance, formatHours, formatDate, formatVolume } from '../common import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; +import { Paper } from '@material-ui/core'; const Filter = ({ setItems }) => { @@ -80,12 +81,14 @@ const StopReportPage = () => { return ( }> - Math.random()} /> + + Math.random()} /> + ); }; diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index 2af7d3b..ff59a1f 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import { FormControlLabel, Checkbox } from '@material-ui/core'; +import { FormControlLabel, Checkbox, Paper } from '@material-ui/core'; import t from '../common/localization'; import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; @@ -96,12 +96,14 @@ const SummaryReportPage = () => { return ( }> - Math.random()} /> + + Math.random()} /> + ); } diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index 45a7786..5360e73 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -5,6 +5,7 @@ import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } fr import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; +import { Paper } from '@material-ui/core'; const Filter = ({ setItems }) => { @@ -111,12 +112,14 @@ const TripReportPage = () => { return ( }> - Math.random()} /> + + Math.random()} /> + ); } -- cgit v1.2.3 From 758647d372df2d633354fb64038d34246531aafb Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Thu, 8 Apr 2021 13:26:23 +0530 Subject: moving paper component to ReportLayout page --- modern/src/reports/EventReportPage.js | 14 ++++++-------- modern/src/reports/ReportLayoutPage.js | 4 +++- modern/src/reports/RouteReportPage.js | 13 +++++-------- modern/src/reports/StopReportPage.js | 15 ++++++--------- modern/src/reports/SummaryReportPage.js | 16 +++++++--------- modern/src/reports/TripReportPage.js | 15 ++++++--------- 6 files changed, 33 insertions(+), 44 deletions(-) (limited to 'modern/src') diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 890af34..cbe2ced 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import { FormControl, InputLabel, Select, MenuItem, Paper } from '@material-ui/core'; +import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; import t from '../common/localization'; import { formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; @@ -84,13 +84,11 @@ const EventReportPage = () => { return ( }> - - - + ); } diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js index d6fac05..e5eda05 100644 --- a/modern/src/reports/ReportLayoutPage.js +++ b/modern/src/reports/ReportLayoutPage.js @@ -31,7 +31,9 @@ const ReportLayoutPage = ({ children, filter }) => { - {children} + + {children} + diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index 02d41a2..b8bad00 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -5,7 +5,6 @@ import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinat import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference, usePreference } from '../common/preferences'; -import { Paper } from '@material-ui/core'; const Filter = ({ setItems }) => { @@ -82,13 +81,11 @@ const RouteReportPage = () => { return ( }> - - - + ); }; diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index d5a2503..7873151 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -5,7 +5,6 @@ import { formatDistance, formatHours, formatDate, formatVolume } from '../common import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; -import { Paper } from '@material-ui/core'; const Filter = ({ setItems }) => { @@ -81,14 +80,12 @@ const StopReportPage = () => { return ( }> - - Math.random()} /> - + Math.random()} /> ); }; diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index ff59a1f..2af7d3b 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import { FormControlLabel, Checkbox, Paper } from '@material-ui/core'; +import { FormControlLabel, Checkbox } from '@material-ui/core'; import t from '../common/localization'; import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; @@ -96,14 +96,12 @@ const SummaryReportPage = () => { return ( }> - - Math.random()} /> - + Math.random()} /> ); } diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index 5360e73..45a7786 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -5,7 +5,6 @@ import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } fr import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; -import { Paper } from '@material-ui/core'; const Filter = ({ setItems }) => { @@ -112,14 +111,12 @@ const TripReportPage = () => { return ( }> - - Math.random()} /> - + Math.random()} /> ); } -- cgit v1.2.3