2 files changed, 22 insertions, 17 deletions

diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 98f2cd5c..e1dd59a0 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -9,21 +9,16 @@ import ReportsMenu from './components/ReportsMenu';
 import usePersistedState from '../common/util/usePersistedState';
 import PositionValue from '../common/components/PositionValue';
 import ColumnSelect from './components/ColumnSelect';
-
-const columnsArray = [
-  ['fixTime', 'positionFixTime'],
-  ['latitude', 'positionLatitude'],
-  ['longitude', 'positionLongitude'],
-  ['speed', 'positionSpeed'],
-  ['address', 'positionAddress'],
-  ['ignition', 'positionIgnition'],
-  ['totalDistance', 'deviceTotalDistance'],
-];
-const columnsMap = new Map(columnsArray);
+import usePositionProperties from '../common/attributes/usePositionProperties';
+import usePositionAttributes from '../common/attributes/usePositionAttributes';
 
 const RouteReportPage = () => {
   const t = useTranslation();
 
+  const positionProperties = usePositionProperties(t);
+  const positionAttributes = usePositionAttributes(t);
+  const columnsObject = { ...positionProperties, ...positionAttributes };
+
   const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']);
   const [items, setItems] = useState([]);
 
@@ -47,13 +42,17 @@ const RouteReportPage = () => {
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}>
       <ReportFilter handleSubmit={handleSubmit}>
-        <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+        <ColumnSelect
+          columns={columns}
+          setColumns={setColumns}
+          columnsObject={columnsObject}
+        />
       </ReportFilter>
       <TableContainer>
         <Table>
           <TableHead>
             <TableRow>
-              {columns.map((key) => (<TableCell>{t(columnsMap.get(key))}</TableCell>))}
+              {columns.map((key) => (<TableCell>{columnsObject[key].name}</TableCell>))}
             </TableRow>
           </TableHead>
           <TableBody>
diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js
index 991f21e7..d7306c58 100644
--- a/modern/src/reports/components/ColumnSelect.js
+++ b/modern/src/reports/components/ColumnSelect.js
@@ -5,7 +5,9 @@ import {
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import { useFilterStyles } from './ReportFilter';
 
-const ColumnSelect = ({ columns, setColumns, columnsArray }) => {
+const ColumnSelect = ({
+  columns, setColumns, columnsArray, columnsObject,
+}) => {
   const classes = useFilterStyles();
   const t = useTranslation();
 
@@ -19,9 +21,13 @@ const ColumnSelect = ({ columns, setColumns, columnsArray }) => {
           renderValue={(it) => it.length}
           multiple
         >
-          {columnsArray.map(([key, string]) => (
-            <MenuItem value={key}>{t(string)}</MenuItem>
-          ))}
+          {columnsArray
+            ? columnsArray.map(([key, string]) => (
+              <MenuItem key={key} value={key}>{t(string)}</MenuItem>
+            ))
+            : Object.keys(columnsObject).map((key) => (
+              <MenuItem key={key} value={key}>{columnsObject[key].name}</MenuItem>
+            ))}
         </Select>
       </FormControl>
     </div>