From cdfa3e5a8fca1b3b8ed59881adcaa8c3d686de50 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Thu, 2 Feb 2023 11:41:55 -0800
Subject: Unified device selection

---
 modern/src/Navigation.js                      |  2 +-
 modern/src/main/DeviceRow.js                  |  2 +-
 modern/src/main/MainMap.js                    |  2 +-
 modern/src/main/MainPage.js                   |  2 +-
 modern/src/reports/components/ReportFilter.js | 16 +++++-----------
 modern/src/store/devices.js                   |  9 +++++++++
 modern/src/store/reports.js                   |  8 --------
 7 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/modern/src/Navigation.js b/modern/src/Navigation.js
index 1e3a37b2..f5b21dd9 100644
--- a/modern/src/Navigation.js
+++ b/modern/src/Navigation.js
@@ -70,7 +70,7 @@ const Navigation = () => {
       if (response.ok) {
         const items = await response.json();
         if (items.length > 0) {
-          dispatch(devicesActions.select(items[0].id));
+          dispatch(devicesActions.selectId(items[0].id));
         }
       } else {
         throw Error(await response.text());
diff --git a/modern/src/main/DeviceRow.js b/modern/src/main/DeviceRow.js
index dbe5df6e..bf5aec3e 100644
--- a/modern/src/main/DeviceRow.js
+++ b/modern/src/main/DeviceRow.js
@@ -92,7 +92,7 @@ const DeviceRow = ({ data, index, style }) => {
     <div style={style}>
       <ListItemButton
         key={item.id}
-        onClick={() => dispatch(devicesActions.select(item.id))}
+        onClick={() => dispatch(devicesActions.selectId(item.id))}
         disabled={!admin && item.disabled}
       >
         <ListItemAvatar>
diff --git a/modern/src/main/MainMap.js b/modern/src/main/MainMap.js
index 273a7787..3b57c745 100644
--- a/modern/src/main/MainMap.js
+++ b/modern/src/main/MainMap.js
@@ -30,7 +30,7 @@ const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
   const features = useFeatures();
 
   const onMarkerClick = useCallback((_, deviceId) => {
-    dispatch(devicesActions.select(deviceId));
+    dispatch(devicesActions.selectId(deviceId));
   }, [dispatch]);
 
   return (
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 1040002a..8369ba97 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -149,7 +149,7 @@ const MainPage = () => {
         <StatusCard
           deviceId={selectedDeviceId}
           position={selectedPosition}
-          onClose={() => dispatch(devicesActions.select(null))}
+          onClose={() => dispatch(devicesActions.selectId(null))}
           desktopPadding={theme.dimensions.drawerWidthDesktop}
         />
       )}
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index de86b7af..de692613 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import useReportStyles from '../common/useReportStyles';
-import { reportsActions } from '../../store';
+import { devicesActions, reportsActions } from '../../store';
 import SplitButton from '../../common/components/SplitButton';
 import SelectField from '../../common/components/SelectField';
 import { useRestriction } from '../../common/util/permissions';
@@ -20,15 +20,9 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
 
   const devices = useSelector((state) => state.devices.items);
   const groups = useSelector((state) => state.groups.items);
-  const selectedDeviceId = useSelector((state) => state.devices.selectedId);
 
-  const deviceId = useSelector((state) => state.reports.deviceId || selectedDeviceId);
-  const deviceIds = useSelector((state) => (
-    state.reports.deviceIds.length
-      ? state.reports.deviceIds : state.reports.deviceId
-        ? [state.reports.deviceId] : selectedDeviceId
-          ? [selectedDeviceId] : []
-  ));
+  const deviceId = useSelector((state) => state.devices.selectedId);
+  const deviceIds = useSelector((state) => state.devices.selectedIds);
   const groupIds = useSelector((state) => state.reports.groupIds);
   const period = useSelector((state) => state.reports.period);
   const from = useSelector((state) => state.reports.from);
@@ -39,7 +33,7 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
   const [calendarId, setCalendarId] = useState();
 
   const scheduleDisabled = button === 'schedule' && (!description || !calendarId);
-  const disabled = (!ignoreDevice && !selectedDeviceId && !deviceId && !deviceIds.length && !groupIds.length) || scheduleDisabled;
+  const disabled = (!ignoreDevice && !deviceId && !deviceIds.length && !groupIds.length) || scheduleDisabled;
 
   const handleClick = (type) => {
     if (type === 'schedule') {
@@ -103,7 +97,7 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
             <Select
               label={t(multiDevice ? 'deviceTitle' : 'reportDevice')}
               value={multiDevice ? deviceIds : deviceId || ''}
-              onChange={(e) => dispatch(multiDevice ? reportsActions.updateDeviceIds(e.target.value) : reportsActions.updateDeviceId(e.target.value))}
+              onChange={(e) => dispatch(multiDevice ? devicesActions.selectIds(e.target.value) : devicesActions.selectId(e.target.value))}
               multiple={multiDevice}
             >
               {Object.values(devices).sort((a, b) => a.name.localeCompare(b.name)).map((device) => (
diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js
index 9cfde0a8..1bae6d91 100644
--- a/modern/src/store/devices.js
+++ b/modern/src/store/devices.js
@@ -5,6 +5,7 @@ const { reducer, actions } = createSlice({
   initialState: {
     items: {},
     selectedId: null,
+    selectedIds: [],
   },
   reducers: {
     refresh(state, action) {
@@ -17,6 +18,14 @@ const { reducer, actions } = createSlice({
     select(state, action) {
       state.selectedId = action.payload;
     },
+    selectId(state, action) {
+      state.selectedId = action.payload;
+      state.selectedIds = [state.selectedId];
+    },
+    selectIds(state, action) {
+      state.selectedIds = action.payload;
+      [state.selectedId] = state.selectedIds;
+    },
     remove(state, action) {
       delete state.items[action.payload];
     },
diff --git a/modern/src/store/reports.js b/modern/src/store/reports.js
index 540c4d4e..870a0420 100644
--- a/modern/src/store/reports.js
+++ b/modern/src/store/reports.js
@@ -4,8 +4,6 @@ import moment from 'moment';
 const { reducer, actions } = createSlice({
   name: 'reports',
   initialState: {
-    deviceId: null,
-    deviceIds: [],
     groupIds: [],
     period: 'today',
     from: moment().subtract(1, 'hour').locale('en').format(moment.HTML5_FMT.DATETIME_LOCAL),
@@ -13,12 +11,6 @@ const { reducer, actions } = createSlice({
     button: 'json',
   },
   reducers: {
-    updateDeviceId(state, action) {
-      state.deviceId = action.payload;
-    },
-    updateDeviceIds(state, action) {
-      state.deviceIds = action.payload;
-    },
     updateGroupIds(state, action) {
       state.groupIds = action.payload;
     },
-- 
cgit v1.2.3