5 files changed, 56 insertions, 1 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index a01451b4..5fd10deb 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -29,6 +29,7 @@ import ComputedAttributePage from './settings/ComputedAttributePage';
 import MaintenancesPage from './settings/MaintenancesPage';
 import MaintenancePage from './settings/MaintenancePage';
 import StatisticsPage from './admin/StatisticsPage';
+import CachingController from './CachingController';
 
 const App = () => {
   const initialized = useSelector(state => !!state.session.server && !!state.session.user);
@@ -37,6 +38,7 @@ const App = () => {
     <>
       <CssBaseline />
       <SocketController />
+      <CachingController />
       <Switch>
         <Route exact path='/login' component={LoginPage} />
         <Route>
diff --git a/modern/src/CachingController.js b/modern/src/CachingController.js
new file mode 100644
index 00000000..fa3b9f6b
--- /dev/null
+++ b/modern/src/CachingController.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 CachingController = () => {
+  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()(CachingController);
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index cbe2ced5..a14fc930 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 });