Rebase replay_screen pr

Close socket on logout (fix #896)

Fix lint

Add calendar menu

Add calendar file upload

Disable icon tinting in Firefox

Move ignition icon

Specify icon sizes

Fix lint issues

Add accuracy button

Merge shock and vibration alarms

Add events alarm column

Enable LocationIQ by default

Update LocationIQ keys

Fix selector style

Support server change

Update localization script

Update localization

Command to install dependency

Update JavaScript libraries

Fix modern app issues

Fix image URL

Fix user list (fix #898)

Fix formatting issue

Add option to disable reports

Fix add button position

Select device based on uniqueId

Update devices list search

Fix lint problems

Changed devices list search

Changed device list search

Update translation for Search Devices

Changed translation for Update Devices

Changed translation for Update Devices

Fix MainToolbar settings icon

Resolves traccar/traccar-web#892

Fix multiple events issue

Changed notification approach

Changed notification approach

Changed notification approach

3 files changed, 39 insertions, 23 deletions

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 1e4dabe4..b98f2224 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -14,7 +14,7 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import MapIcon from '@material-ui/icons/Map';
-import PersonIcon from '@material-ui/icons/Person';
+import ShuffleIcon from '@material-ui/icons/Shuffle';
 import DescriptionIcon from '@material-ui/icons/Description';
 import ReplayIcon from '@material-ui/icons/Replay';
 import { sessionActions } from './store';
@@ -108,7 +108,7 @@ const MainToolbar = () => {
               onClick={() => history.push('/settings/notifications')}
             >
               <ListItemIcon>
-                <PersonIcon />
+                <ShuffleIcon />
               </ListItemIcon>
               <ListItemText primary={t('settingsTitle')} />
             </ListItem>
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index ac950190..e178abb6 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -1,35 +1,26 @@
-import { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector, connect } from 'react-redux';
-
+import { Snackbar } from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
+
 import { positionsActions, devicesActions, sessionActions } from './store';
 import { useEffectAsync } from './reactHelper';
-
-const displayNotifications = (events) => {
-  if ('Notification' in window) {
-    if (Notification.permission === 'granted') {
-      events.forEach((event) => {
-        const notification = new Notification(`Event: ${event.type}`);
-        setTimeout(notification.close.bind(notification), 4 * 1000);
-      });
-    } else if (Notification.permission !== 'denied') {
-      Notification.requestPermission((permission) => {
-        if (permission === 'granted') {
-          displayNotifications(events);
-        }
-      });
-    }
-  }
-};
+import { useTranslation } from './LocalizationProvider';
+import { prefixString } from './common/stringUtils';
 
 const SocketController = () => {
   const dispatch = useDispatch();
   const history = useHistory();
+  const t = useTranslation();
 
   const authenticated = useSelector((state) => !!state.session.user);
+  const devices = useSelector((state) => state.devices.items);
 
   const socketRef = useRef();
 
+  const [events, setEvents] = useState([]);
+  const [notifications, setNotifications] = useState([]);
+
   const connectSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(`${protocol}//${window.location.host}/api/socket`);
@@ -48,7 +39,7 @@ const SocketController = () => {
         dispatch(positionsActions.update(data.positions));
       }
       if (data.events) {
-        displayNotifications(data.events);
+        setEvents(data.events);
       }
     };
   };
@@ -83,7 +74,31 @@ const SocketController = () => {
     return null;
   }, [authenticated]);
 
-  return null;
+  useEffect(() => {
+    setNotifications(events.map((event) => ({
+      id: event.id,
+      message: `${devices[event.deviceId]?.name}: ${t(prefixString('event', event.type))}`,
+      show: true,
+    })));
+  }, [events, devices]);
+
+  return (
+    <>
+      {notifications.map((notification) => (
+        <Snackbar
+          key={notification.id}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          open={notification.show}
+          message={notification.message}
+          autoHideDuration={5000}
+          onClose={() => setEvents(events.filter((e) => e.id !== notification.id))}
+        />
+      ))}
+    </>
+  );
 };
 
 export default connect()(SocketController);
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 6f1cbc4c..301751cd 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -60,6 +60,7 @@
     "sharedCalendar": "Calendar",
     "sharedCalendars": "Calendars",
     "sharedFile": "File",
+    "sharedSearchDevices": "Search Devices",
     "sharedSelectFile": "Select File",
     "sharedPhone": "Phone",
     "sharedRequired": "Required",