Resolves traccar/traccar-web#892

1 files changed, 35 insertions, 21 deletions

diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index ac950190..ece6521b 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -1,35 +1,29 @@
-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 [notification, setNotification] = useState({
+    message: '',
+    show: false,
+  });
+
   const connectSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(`${protocol}//${window.location.host}/api/socket`);
@@ -48,7 +42,7 @@ const SocketController = () => {
         dispatch(positionsActions.update(data.positions));
       }
       if (data.events) {
-        displayNotifications(data.events);
+        setEvents(data.events);
       }
     };
   };
@@ -83,7 +77,27 @@ const SocketController = () => {
     return null;
   }, [authenticated]);
 
-  return null;
+  useEffect(() => {
+    events.forEach((event) => {
+      setNotification({
+        message: `${devices[event.deviceId]?.name}: ${t(prefixString('event', `${event.type}`))}`,
+        show: true,
+      });
+      setTimeout(() => setNotification({ message: '', show: false }), 6000);
+    });
+  }, [events]);
+
+  return (
+    <Snackbar
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      open={notification.show}
+      autoHideDuration={5000}
+      message={notification.message}
+    />
+  );
 };
 
 export default connect()(SocketController);