diff options
Diffstat (limited to 'modern')
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/App.js | 94 | ||||
| -rw-r--r-- | modern/src/SocketController.js | 36 |
3 files changed, 72 insertions, 59 deletions
diff --git a/modern/package.json b/modern/package.json index 66e13bd8..4ac91845 100644 --- a/modern/package.json +++ b/modern/package.json @@ -17,7 +17,6 @@ "maplibre-gl": "^1.15.0", "material-ui-dropzone": "^3.5.0", "moment": "^2.29.1", - "notistack": "^1.0.10", "react": "^17.0.2", "react-container-dimensions": "^1.4.1", "react-dom": "^17.0.2", diff --git a/modern/src/App.js b/modern/src/App.js index 67c74b30..a53ffc6c 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,6 +1,4 @@ import React from 'react'; -import Slide from '@material-ui/core/Slide'; -import { SnackbarProvider } from 'notistack'; import { ThemeProvider } from '@material-ui/core/styles'; import { Switch, Route } from 'react-router-dom'; import CssBaseline from '@material-ui/core/CssBaseline'; @@ -50,56 +48,48 @@ const App = () => { return ( <LocalizationProvider> <ThemeProvider theme={theme}> - <SnackbarProvider - anchorOrigin={{ - vertical: 'bottom', - horizontal: 'right', - }} - TransitionComponent={Slide} - > - <CssBaseline /> - <SocketController /> - <CachingController /> - <Switch> - <Route exact path="/login" component={LoginForm} /> - <Route exact path="/register" component={RegisterForm} /> - <Route exact path="/reset-password" component={ResetPasswordForm} /> - <Route> - {!initialized ? (<LinearProgress />) : ( - <Switch> - <Route exact path="/" component={MainPage} /> - <Route exact path="/replay" component={ReplayPage} /> - <Route exact path="/position/:id?" component={PositionPage} /> - <Route exact path="/user/:id?" component={UserPage} /> - <Route exact path="/device/:id?" component={DevicePage} /> - <Route exact path="/geofence/:id?" component={GeofencePage} /> - <Route exact path="/geofences" component={GeofencesPage} /> - <Route exact path="/settings/notifications" component={NotificationsPage} /> - <Route exact path="/settings/notification/:id?" component={NotificationPage} /> - <Route exact path="/settings/groups" component={GroupsPage} /> - <Route exact path="/settings/group/:id?" component={GroupPage} /> - <Route exact path="/settings/drivers" component={DriversPage} /> - <Route exact path="/settings/driver/:id?" component={DriverPage} /> - <Route exact path="/settings/calendars" component={CalendarsPage} /> - <Route exact path="/settings/calendar/:id?" component={CalendarPage} /> - <Route exact path="/settings/attributes" component={ComputedAttributesPage} /> - <Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} /> - <Route exact path="/settings/maintenances" component={MaintenancesPage} /> - <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} /> - <Route exact path="/admin/server" component={ServerPage} /> - <Route exact path="/admin/users" component={UsersPage} /> - <Route exact path="/admin/statistics" component={StatisticsPage} /> - <Route exact path="/reports/route" component={RouteReportPage} /> - <Route exact path="/reports/event" component={EventReportPage} /> - <Route exact path="/reports/trip" component={TripReportPage} /> - <Route exact path="/reports/stop" component={StopReportPage} /> - <Route exact path="/reports/summary" component={SummaryReportPage} /> - <Route exact path="/reports/chart" component={ChartReportPage} /> - </Switch> - )} - </Route> - </Switch> - </SnackbarProvider> + <CssBaseline /> + <SocketController /> + <CachingController /> + <Switch> + <Route exact path="/login" component={LoginForm} /> + <Route exact path="/register" component={RegisterForm} /> + <Route exact path="/reset-password" component={ResetPasswordForm} /> + <Route> + {!initialized ? (<LinearProgress />) : ( + <Switch> + <Route exact path="/" component={MainPage} /> + <Route exact path="/replay" component={ReplayPage} /> + <Route exact path="/position/:id?" component={PositionPage} /> + <Route exact path="/user/:id?" component={UserPage} /> + <Route exact path="/device/:id?" component={DevicePage} /> + <Route exact path="/geofence/:id?" component={GeofencePage} /> + <Route exact path="/geofences" component={GeofencesPage} /> + <Route exact path="/settings/notifications" component={NotificationsPage} /> + <Route exact path="/settings/notification/:id?" component={NotificationPage} /> + <Route exact path="/settings/groups" component={GroupsPage} /> + <Route exact path="/settings/group/:id?" component={GroupPage} /> + <Route exact path="/settings/drivers" component={DriversPage} /> + <Route exact path="/settings/driver/:id?" component={DriverPage} /> + <Route exact path="/settings/calendars" component={CalendarsPage} /> + <Route exact path="/settings/calendar/:id?" component={CalendarPage} /> + <Route exact path="/settings/attributes" component={ComputedAttributesPage} /> + <Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} /> + <Route exact path="/settings/maintenances" component={MaintenancesPage} /> + <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} /> + <Route exact path="/admin/server" component={ServerPage} /> + <Route exact path="/admin/users" component={UsersPage} /> + <Route exact path="/admin/statistics" component={StatisticsPage} /> + <Route exact path="/reports/route" component={RouteReportPage} /> + <Route exact path="/reports/event" component={EventReportPage} /> + <Route exact path="/reports/trip" component={TripReportPage} /> + <Route exact path="/reports/stop" component={StopReportPage} /> + <Route exact path="/reports/summary" component={SummaryReportPage} /> + <Route exact path="/reports/chart" component={ChartReportPage} /> + </Switch> + )} + </Route> + </Switch> </ThemeProvider> </LocalizationProvider> ); diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index 78119494..4b1f5733 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -1,6 +1,6 @@ -import { useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useDispatch, useSelector, connect } from 'react-redux'; -import { useSnackbar } from 'notistack'; +import { Snackbar } from '@material-ui/core'; import { useHistory } from 'react-router-dom'; import { positionsActions, devicesActions, sessionActions } from './store'; @@ -12,13 +12,14 @@ const SocketController = () => { const dispatch = useDispatch(); const history = useHistory(); const t = useTranslation(); - const { enqueueSnackbar } = useSnackbar(); const authenticated = useSelector((state) => !!state.session.user); + const devices = useSelector((state) => state.devices.items); const socketRef = useRef(); - const enqueueEvents = (events) => events.forEach((event) => enqueueSnackbar(t(prefixString('event', event.type)))); + const [events, setEvents] = useState([]); + const [notifications, setNotifications] = useState([]); const connectSocket = () => { const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; @@ -38,7 +39,7 @@ const SocketController = () => { dispatch(positionsActions.update(data.positions)); } if (data.events) { - enqueueEvents(data.events); + setEvents(data.events); } }; }; @@ -73,7 +74,30 @@ const SocketController = () => { return null; }, [authenticated]); - return null; + useEffect(() => { + setNotifications(events.map((event) => { + event.message = `${devices[event.deviceId]?.name}: ${t(prefixString('event', event.type))}`; + event.show = true; + setTimeout(() => event.show = false, 5000); + return event; + })); + }, [events]); + + return ( + <> + {notifications.map((notification) => ( + <Snackbar + key={notification.id} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'right', + }} + open={notification.show} + message={notification.message} + /> + ))} + </> + ); }; export default connect()(SocketController); |