From 6f2b4b429eda9a22771cc5bd0272fd2b62f86275 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Wed, 18 Sep 2024 14:30:22 -0700
Subject: [PATCH] Add notification description

---
 src/common/util/formatter.js       |  3 +++
 src/settings/NotificationPage.jsx  | 12 +++++++++---
 src/settings/NotificationsPage.jsx |  2 ++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/common/util/formatter.js b/src/common/util/formatter.js
index f8f2df7529..60aca0cdfd 100644
--- a/src/common/util/formatter.js
+++ b/src/common/util/formatter.js
@@ -137,6 +137,9 @@ export const getBatteryStatus = (batteryLevel) => {
 };
 
 export const formatNotificationTitle = (t, notification, includeId) => {
+  if (notification.description) {
+    return notification.description;
+  }
   let title = t(prefixString('event', notification.type));
   if (notification.type === 'alarm') {
     const alarmString = notification.attributes.alarms;
diff --git a/src/settings/NotificationPage.jsx b/src/settings/NotificationPage.jsx
index 63aa9b9585..c420c6cc87 100644
--- a/src/settings/NotificationPage.jsx
+++ b/src/settings/NotificationPage.jsx
@@ -9,6 +9,7 @@ import {
   Checkbox,
   FormGroup,
   Button,
+  TextField,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useTranslation, useTranslationKeys } from '../common/components/LocalizationProvider';
@@ -93,7 +94,7 @@ const NotificationPage = () => {
               {item.notificators?.includes('command') && (
                 <SelectField
                   value={item.commandId}
-                  onChange={(event) => setItem({ ...item, commandId: Number(event.target.value) })}
+                  onChange={(e) => setItem({ ...item, commandId: Number(e.target.value) })}
                   endpoint="/api/commands"
                   titleGetter={(it) => it.description}
                   label={t('sharedSavedCommand')}
@@ -112,7 +113,7 @@ const NotificationPage = () => {
                   control={(
                     <Checkbox
                       checked={item.always}
-                      onChange={(event) => setItem({ ...item, always: event.target.checked })}
+                      onChange={(e) => setItem({ ...item, always: e.target.checked })}
                     />
                     )}
                   label={t('notificationAlways')}
@@ -127,9 +128,14 @@ const NotificationPage = () => {
               </Typography>
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
+              <TextField
+                value={item.description || ''}
+                onChange={(e) => setItem({ ...item, description: e.target.value })}
+                label={t('sharedDescription')}
+              />
               <SelectField
                 value={item.calendarId}
-                onChange={(event) => setItem({ ...item, calendarId: Number(event.target.value) })}
+                onChange={(e) => setItem({ ...item, calendarId: Number(e.target.value) })}
                 endpoint="/api/calendars"
                 label={t('sharedCalendar')}
               />
diff --git a/src/settings/NotificationsPage.jsx b/src/settings/NotificationsPage.jsx
index f1e70a8507..c5617ee007 100644
--- a/src/settings/NotificationsPage.jsx
+++ b/src/settings/NotificationsPage.jsx
@@ -54,6 +54,7 @@ const NotificationsPage = () => {
       <Table className={classes.table}>
         <TableHead>
           <TableRow>
+            <TableCell>{t('sharedDescription')}</TableCell>
             <TableCell>{t('notificationType')}</TableCell>
             <TableCell>{t('notificationAlways')}</TableCell>
             <TableCell>{t('sharedAlarms')}</TableCell>
@@ -64,6 +65,7 @@ const NotificationsPage = () => {
         <TableBody>
           {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => (
             <TableRow key={item.id}>
+              <TableCell>{item.description}</TableCell>
               <TableCell>{t(prefixString('event', item.type))}</TableCell>
               <TableCell>{formatBoolean(item.always, t)}</TableCell>
               <TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell>