Better notification title

4 files changed, 25 insertions, 6 deletions

diff --git a/modern/src/common/util/formatter.js b/modern/src/common/util/formatter.js
index 47bd2cd0..ea18713d 100644
--- a/modern/src/common/util/formatter.js
+++ b/modern/src/common/util/formatter.js
@@ -97,3 +97,22 @@ export const getBatteryStatus = (batteryLevel) => {
   }
   return 'negative';
 };
+
+export const formatNotificationTitle = (t, notification, includeId) => {
+  let title = t(prefixString('event', notification.type));
+  if (notification.type === 'alarm') {
+    const alarmString = notification.attributes.alarms;
+    if (alarmString) {
+      const alarms = alarmString.split(',');
+      if (alarms.length > 1) {
+        title += ` (${alarms.length})`;
+      } else {
+        title += ` ${formatAlarm(alarms[0], t)}`;
+      }
+    }
+  }
+  if (includeId) {
+    title += ` [${notification.id}]`;
+  }
+  return title;
+};
diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js
index bf79109b..b54c7c81 100644
--- a/modern/src/settings/DevicePage.js
+++ b/modern/src/settings/DevicePage.js
@@ -17,7 +17,6 @@ import EditAttributesAccordion from './components/EditAttributesAccordion';
 import SelectField from '../common/components/SelectField';
 import deviceCategories from '../common/util/deviceCategories';
 import LinkField from '../common/components/LinkField';
-import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import useDeviceAttributes from '../common/attributes/useDeviceAttributes';
 import { useAdministrator } from '../common/util/permissions';
@@ -25,6 +24,7 @@ import SettingsMenu from './components/SettingsMenu';
 import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes';
 import useFeatures from '../common/util/useFeatures';
 import { useCatch } from '../reactHelper';
+import { formatNotificationTitle } from '../common/util/formatter';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -185,7 +185,7 @@ const DevicePage = () => {
                   baseId={item.id}
                   keyBase="deviceId"
                   keyLink="notificationId"
-                  titleGetter={(it) => t(prefixString('event', it.type))}
+                  titleGetter={(it) => formatNotificationTitle(t, it)}
                   label={t('sharedNotifications')}
                 />
                 {!features.disableDrivers && (
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index b4b0a92a..0bf66c69 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -14,8 +14,8 @@ import { useTranslation } from '../common/components/LocalizationProvider';
 import SettingsMenu from './components/SettingsMenu';
 import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes';
 import useGroupAttributes from '../common/attributes/useGroupAttributes';
-import { prefixString } from '../common/util/stringUtils';
 import useFeatures from '../common/util/useFeatures';
+import { formatNotificationTitle } from '../common/util/formatter';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -106,7 +106,7 @@ const GroupPage = () => {
                   baseId={item.id}
                   keyBase="groupId"
                   keyLink="notificationId"
-                  titleGetter={(it) => t(prefixString('event', it.type))}
+                  titleGetter={(it) => formatNotificationTitle(t, it)}
                   label={t('sharedNotifications')}
                 />
                 {!features.disableDrivers && (
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js
index a91dfe71..65a18be1 100644
--- a/modern/src/settings/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -34,9 +34,9 @@ import SelectField from '../common/components/SelectField';
 import SettingsMenu from './components/SettingsMenu';
 import useCommonUserAttributes from '../common/attributes/useCommonUserAttributes';
 import { useAdministrator, useRestriction, useManager } from '../common/util/permissions';
-import { prefixString } from '../common/util/stringUtils';
 import useQuery from '../common/util/useQuery';
 import { useCatch } from '../reactHelper';
+import { formatNotificationTitle } from '../common/util/formatter';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -413,7 +413,7 @@ const UserPage = () => {
                   baseId={item.id}
                   keyBase="userId"
                   keyLink="notificationId"
-                  titleGetter={(it) => `${t(prefixString('event', it.type))} (${it.id})`}
+                  titleGetter={(it) => formatNotificationTitle(t, it, true)}
                   label={t('sharedNotifications')}
                 />
                 <LinkField