5 files changed, 57 insertions, 1 deletions
diff --git a/modern/src/App.js b/modern/src/App.js
index a01451b4..ef5fd204 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -30,6 +30,8 @@ import MaintenancesPage from './settings/MaintenancesPage';
 import MaintenancePage from './settings/MaintenancePage';
 import StatisticsPage from './admin/StatisticsPage';
 
+import MainController from './MainController';
+
 const App = () => {
   const initialized = useSelector(state => !!state.session.server && !!state.session.user);
 
@@ -37,6 +39,7 @@ const App = () => {
     <>
       <CssBaseline />
       <SocketController />
+      <MainController />
       <Switch>
         <Route exact path='/login' component={LoginPage} />
         <Route>
diff --git a/modern/src/MainController.js b/modern/src/MainController.js
new file mode 100644
index 00000000..6ae98fdf
--- /dev/null
+++ b/modern/src/MainController.js
@@ -0,0 +1,22 @@
+import {  useDispatch, useSelector } from 'react-redux';
+import { connect } from 'react-redux';
+import { geofencesActions } from './store';
+import { useEffectAsync } from './reactHelper';
+
+
+const MainController = () => {
+  const authenticated = useSelector(state => !!state.session.user);
+  const dispatch = useDispatch();
+
+  useEffectAsync(async () => {
+    if (authenticated) {
+      const response = await fetch('/api/geofences');
+      if (response.ok) {
+        dispatch(geofencesActions.update(await response.json()));
+      }
+    }
+  }, [authenticated]);
+  return null;
+}
+
+export default connect()(MainController);
+\ No newline at end of file
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index cbe2ced5..2478cad0 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -5,6 +5,8 @@ import t from '../common/localization';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
+import { prefixString } from '../common/stringUtils';
+import { useSelector } from 'react-redux';
 
 const Filter = ({ setItems }) => {
 
@@ -57,8 +59,17 @@ const Filter = ({ setItems }) => {
 
 const EventReportPage = () => {
 
+  const geofences = useSelector(state => state.geofences.items);
   const [items, setItems] = useState([]);
 
+  const formatGeofence = value => {
+    if (value !== 0) {
+        const geofence = geofences[value];
+        return geofence ? geofence.name : '';
+    }
+    return null;
+  }
+
   const columns = [{
     headerName: t('positionFixTime'),
     field: 'serverTime',
@@ -70,11 +81,12 @@ const EventReportPage = () => {
     field: 'type',
     type: 'string',
     flex:1,
+    valueFormatter: ({ value }) => t(prefixString('event', value)),
   }, {
     headerName: t('sharedGeofence'),
     field: 'geofenceId',
-    type: 'number',
     flex: 1,
+    valueFormatter: ({ value }) => formatGeofence(value),
   }, {
     headerName: t('sharedMaintenance'),
     field: 'maintenanceId',
diff --git a/modern/src/store/geofences.js b/modern/src/store/geofences.js
new file mode 100644
index 00000000..c5e58147
--- /dev/null
+++ b/modern/src/store/geofences.js
@@ -0,0 +1,16 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const { reducer, actions } = createSlice({
+  name: 'geofences',
+  initialState: {
+    items: {},
+  },
+  reducers: {
+    update(state, action) {
+      action.payload.forEach(item => state.items[item['id']] = item);
+    },
+  }
+});
+
+export { actions as geofencesActions };
+export { reducer as geofencesReducer };
diff --git a/modern/src/store/index.js b/modern/src/store/index.js
index 432ef78e..1fddae99 100644
--- a/modern/src/store/index.js
+++ b/modern/src/store/index.js
@@ -3,15 +3,18 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { sessionReducer as session } from './session';
 import { devicesReducer as devices } from './devices';
 import { positionsReducer as positions } from './positions';
+import { geofencesReducer as geofences } from './geofences';
 
 const reducer = combineReducers({
   session,
   devices,
   positions,
+  geofences,
 });
 
 export { sessionActions } from './session';
 export { devicesActions } from './devices';
 export { positionsActions } from './positions';
+export { geofencesActions } from './geofences';
 
 export default configureStore({ reducer });