Convert route report to table

1 files changed, 56 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>
   );
 };