From 4a83ce2436bb95b897e5515c496f9dc7e5a6396e Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Thu, 25 May 2023 17:21:03 -0700
Subject: Route custom attributes

---
 modern/src/reports/RouteReportPage.js         | 25 +++++++++++++++++++++----
 modern/src/reports/components/ColumnSelect.js | 13 +++++--------
 2 files changed, 26 insertions(+), 12 deletions(-)

(limited to 'modern/src')

diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index ebd4547a..5003ff31 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -10,7 +10,6 @@ import ReportFilter 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 PositionValue from '../common/components/PositionValue';
 import ColumnSelect from './components/ColumnSelect';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
@@ -34,7 +33,8 @@ const RouteReportPage = () => {
 
   const devices = useSelector((state) => state.devices.items);
 
-  const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']);
+  const [available, setAvailable] = useState([]);
+  const [columns, setColumns] = useState(['fixTime', 'latitude', 'longitude', 'speed', 'address']);
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(false);
   const [selectedItem, setSelectedItem] = useState(null);
@@ -60,7 +60,22 @@ const RouteReportPage = () => {
           headers: { Accept: 'application/json' },
         });
         if (response.ok) {
-          setItems(await response.json());
+          const data = await response.json();
+          const keySet = new Set();
+          const keyList = [];
+          data.forEach((position) => {
+            Object.keys(position).forEach((it) => keySet.add(it));
+            Object.keys(position.attributes).forEach((it) => keySet.add(it));
+          });
+          ['id', 'deviceId', 'outdated', 'network', 'attributes'].forEach((key) => keySet.delete(key));
+          Object.keys(positionAttributes).forEach((key) => {
+            if (keySet.has(key)) {
+              keyList.push(key);
+              keySet.delete(key);
+            }
+          });
+          setAvailable([...keyList, ...keySet].map((key) => [key, positionAttributes[key]?.name || key]));
+          setItems(data);
         } else {
           throw Error(await response.text());
         }
@@ -107,7 +122,9 @@ const RouteReportPage = () => {
               <ColumnSelect
                 columns={columns}
                 setColumns={setColumns}
-                columnsObject={positionAttributes}
+                columnsArray={available}
+                rawValues
+                disabled={!items.length}
               />
             </ReportFilter>
           </div>
diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js
index 09932ee3..d08394ea 100644
--- a/modern/src/reports/components/ColumnSelect.js
+++ b/modern/src/reports/components/ColumnSelect.js
@@ -6,7 +6,7 @@ import { useTranslation } from '../../common/components/LocalizationProvider';
 import useReportStyles from '../common/useReportStyles';
 
 const ColumnSelect = ({
-  columns, setColumns, columnsArray, columnsObject,
+  columns, setColumns, columnsArray, rawValues, disabled,
 }) => {
   const classes = useReportStyles();
   const t = useTranslation();
@@ -20,14 +20,11 @@ const ColumnSelect = ({
           value={columns}
           onChange={(e) => setColumns(e.target.value)}
           multiple
+          disabled={disabled}
         >
-          {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>
-            ))}
+          {columnsArray.map(([key, string]) => (
+            <MenuItem key={key} value={key}>{rawValues ? string : t(string)}</MenuItem>
+          ))}
         </Select>
       </FormControl>
     </div>
-- 
cgit v1.2.3