From 582af9c53dfa3356bca47f6845f5d15c84af9df9 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Tue, 24 Dec 2024 13:30:58 -0800
Subject: [PATCH] Event report by alarm type

---
 src/reports/EventReportPage.jsx | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/reports/EventReportPage.jsx b/src/reports/EventReportPage.jsx
index b11d4e83e8..f9ef2d82b5 100644
--- a/src/reports/EventReportPage.jsx
+++ b/src/reports/EventReportPage.jsx
@@ -8,8 +8,8 @@ import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
 import { useSelector } from 'react-redux';
 import { formatSpeed, formatTime } from '../common/util/formatter';
 import ReportFilter from './components/ReportFilter';
-import { prefixString } from '../common/util/stringUtils';
-import { useTranslation } from '../common/components/LocalizationProvider';
+import { prefixString, unprefixString } from '../common/util/stringUtils';
+import { useTranslation, useTranslationKeys } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
 import usePersistedState from '../common/util/usePersistedState';
@@ -24,6 +24,7 @@ import MapPositions from '../map/MapPositions';
 import MapCamera from '../map/MapCamera';
 import scheduleReport from './common/scheduleReport';
 import MapScale from '../map/MapScale';
+import SelectField from '../common/components/SelectField';
 
 const columnsArray = [
   ['eventTime', 'positionFixTime'],
@@ -46,8 +47,14 @@ const EventReportPage = () => {
 
   const [allEventTypes, setAllEventTypes] = useState([['allEvents', 'eventAll']]);
 
+  const alarms = useTranslationKeys((it) => it.startsWith('alarm')).map((it) => ({
+    key: unprefixString('alarm', it),
+    name: t(it),
+  }));
+
   const [columns, setColumns] = usePersistedState('eventColumns', ['eventTime', 'type', 'attributes']);
   const [eventTypes, setEventTypes] = useState(['allEvents']);
+  const [alarmTypes, setAlarmTypes] = useState([]);
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(false);
   const [selectedItem, setSelectedItem] = useState(null);
@@ -82,6 +89,9 @@ const EventReportPage = () => {
   const handleSubmit = useCatch(async ({ deviceId, from, to, type }) => {
     const query = new URLSearchParams({ deviceId, from, to });
     eventTypes.forEach((it) => query.append('type', it));
+    if (eventTypes[0] !== 'allEvents' && eventTypes.includes('alarm')) {
+      alarmTypes.forEach((it) => query.append('alarm', it));
+    }
     if (type === 'export') {
       window.location.assign(`/api/reports/events/xlsx?${query.toString()}`);
     } else if (type === 'mail') {
@@ -176,8 +186,8 @@ const EventReportPage = () => {
                   <Select
                     label={t('reportEventTypes')}
                     value={eventTypes}
-                    onChange={(event, child) => {
-                      let values = event.target.value;
+                    onChange={(e, child) => {
+                      let values = e.target.value;
                       const clicked = child.props.value;
                       if (values.includes('allEvents') && values.length > 1) {
                         values = [clicked];
@@ -192,6 +202,19 @@ const EventReportPage = () => {
                   </Select>
                 </FormControl>
               </div>
+              {eventTypes[0] !== 'allEvents' && eventTypes.includes('alarm') && (
+                <div className={classes.filterItem}>
+                  <SelectField
+                    multiple
+                    value={alarmTypes}
+                    onChange={(e) => setAlarmTypes(e.target.value)}
+                    data={alarms}
+                    keyGetter={(it) => it.key}
+                    label={t('sharedAlarms')}
+                    fullWidth
+                  />
+                </div>
+              )}
               <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
             </ReportFilter>
           </div>