diff options
| -rw-r--r-- | modern/src/MainToolbar.js | 4 | ||||
| -rw-r--r-- | modern/src/SocketController.js | 57 | ||||
| -rw-r--r-- | web/l10n/en.json | 1 |
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", |