diff options
| -rw-r--r-- | modern/src/reports/RouteReportPage.js | 130 | ||||
| -rw-r--r-- | web/l10n/en.json | 1 |
2 files changed, 57 insertions, 74 deletions
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index dfce525f..edb15af4 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -1,16 +1,30 @@ import React, { useState } from 'react'; -import { DataGrid } from '@material-ui/data-grid'; -import { useTheme } from '@material-ui/core/styles'; -import { - formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate, -} from '../common/util/formatter'; -import ReportFilter from './components/ReportFilter'; -import { useAttributePreference, usePreference } from '../common/util/preferences'; +import ReportFilter, { useFilterStyles } from './components/ReportFilter'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; +import usePersistedState from '../common/util/usePersistedState'; +import { FormControl, InputLabel, MenuItem, Select, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core'; +import PositionValue from '../common/components/PositionValue'; + +const columnsArray = [ + ['fixTime', 'positionFixTime'], + ['latitude', 'positionLatitude'], + ['longitude', 'positionLongitude'], + ['speed', 'positionSpeed'], + ['address', 'positionAddress'], + ['ignition', 'positionIgnition'], + ['totalDistance', 'deviceTotalDistance'], +]; +const columnsMap = new Map(columnsArray); + +const RouteReportPage = () => { + const classes = useFilterStyles(); + const t = useTranslation(); + + const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']); + const [items, setItems] = useState([]); -const Filter = ({ setItems }) => { const handleSubmit = async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ deviceId, from, to, mail, @@ -28,74 +42,42 @@ const Filter = ({ setItems }) => { } }; - return <ReportFilter handleSubmit={handleSubmit} />; -}; - -const RouteReportPage = () => { - const theme = useTheme(); - const t = useTranslation(); - - const distanceUnit = useAttributePreference('distanceUnit'); - const speedUnit = useAttributePreference('speedUnit'); - const coordinateFormat = usePreference('coordinateFormat'); - - const columns = [{ - headerName: t('positionFixTime'), - field: 'fixTime', - type: 'dateTime', - width: theme.dimensions.columnWidthDate, - valueFormatter: ({ value }) => formatDate(value), - }, { - headerName: t('positionLatitude'), - field: 'latitude', - type: 'number', - width: theme.dimensions.columnWidthNumber, - valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat), - }, { - headerName: t('positionLongitude'), - field: 'longitude', - type: 'number', - width: theme.dimensions.columnWidthNumber, - valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat), - }, { - headerName: t('positionSpeed'), - field: 'speed', - type: 'number', - width: theme.dimensions.columnWidthString, - 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', - type: 'number', - hide: true, - width: theme.dimensions.columnWidthNumber, - valueGetter: ({ row }) => row.attributes.totalDistance, - valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t), - }]; - - const [items, setItems] = useState([]); - return ( <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}> - <Filter setItems={setItems} /> - <DataGrid - rows={items} - columns={columns} - hideFooter - autoHeight - /> + <ReportFilter handleSubmit={handleSubmit}> + <div className={classes.item}> + <FormControl variant="filled" fullWidth> + <InputLabel>{t('sharedColumns')}</InputLabel> + <Select value={columns} onChange={(e) => setColumns(e.target.value)} renderValue={(it) => it.length} multiple> + {columnsArray.map(([key, string]) => ( + <MenuItem value={key}>{t(string)}</MenuItem> + ))} + </Select> + </FormControl> + </div> + </ReportFilter> + <Table> + <TableHead> + <TableRow> + {columns.map((key) => (<TableCell>{t(columnsMap.get(key))}</TableCell>))} + </TableRow> + </TableHead> + <TableBody> + {items.map((item) => ( + <TableRow key={item.id}> + {columns.map((key) => ( + <TableCell> + <PositionValue + position={item} + property={item.hasOwnProperty(key) ? key : null} + attribute={item.hasOwnProperty(key) ? null : key} + /> + </TableCell> + ))} + </TableRow> + ))} + </TableBody> + </Table> </PageLayout> ); }; diff --git a/web/l10n/en.json b/web/l10n/en.json index cd8b39b9..5e9a2619 100644 --- a/web/l10n/en.json +++ b/web/l10n/en.json @@ -84,6 +84,7 @@ "sharedAlarms": "Alarms", "sharedLocation": "Location", "sharedImport": "Import", + "sharedColumns": "Columns", "attributeSpeedLimit": "Speed Limit", "attributePolylineDistance": "Polyline Distance", "attributeReportIgnoreOdometer": "Report: Ignore Odometer", |