Add emulator page

3 files changed, 112 insertions, 0 deletions

diff --git a/src/Navigation.jsx b/src/Navigation.jsx
index 37a6ddb5..fa3d9a24 100644
--- a/src/Navigation.jsx
+++ b/src/Navigation.jsx
@@ -57,6 +57,7 @@ import UserConnectionsPage from './settings/UserConnectionsPage';
 import LogsPage from './reports/LogsPage';
 import SharePage from './settings/SharePage';
 import AnnouncementPage from './settings/AnnouncementPage';
+import EmulatorPage from './other/EmulatorPage';
 
 const Navigation = () => {
   const navigate = useNavigate();
@@ -109,6 +110,7 @@ const Navigation = () => {
         <Route path="event/:id" element={<EventPage />} />
         <Route path="replay" element={<ReplayPage />} />
         <Route path="geofences" element={<GeofencesPage />} />
+        <Route path="emulator" element={<EmulatorPage />} />
 
         <Route path="settings">
           <Route path="accumulators/:deviceId" element={<AccumulatorsPage />} />
diff --git a/src/other/EmulatorPage.jsx b/src/other/EmulatorPage.jsx
new file mode 100644
index 00000000..c4dcd843
--- /dev/null
+++ b/src/other/EmulatorPage.jsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Divider, Typography, IconButton, useMediaQuery, Toolbar,
+  List,
+  ListItem,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useTheme } from '@mui/material/styles';
+import Drawer from '@mui/material/Drawer';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { useNavigate } from 'react-router-dom';
+import MapView from '../map/core/MapView';
+import MapCurrentLocation from '../map/MapCurrentLocation';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import MapGeocoder from '../map/geocoder/MapGeocoder';
+import SelectField from '../common/components/SelectField';
+import { devicesActions } from '../store';
+import MapPositions from '../map/MapPositions';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  content: {
+    flexGrow: 1,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'row',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column-reverse',
+    },
+  },
+  drawer: {
+    zIndex: 1,
+  },
+  drawerPaper: {
+    position: 'relative',
+    [theme.breakpoints.up('sm')]: {
+      width: theme.dimensions.drawerWidthDesktop,
+    },
+    [theme.breakpoints.down('sm')]: {
+      height: theme.dimensions.drawerHeightPhone,
+    },
+  },
+  mapContainer: {
+    flexGrow: 1,
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+const EmulatorPage = () => {
+  const theme = useTheme();
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const t = useTranslation();
+
+  const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const devices = useSelector((state) => state.devices.items);
+  const deviceId = useSelector((state) => state.devices.selectedId);
+  const positions = useSelector((state) => state.session.positions);
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.content}>
+        <Drawer
+          className={classes.drawer}
+          anchor={isPhone ? 'bottom' : 'left'}
+          variant="permanent"
+          classes={{ paper: classes.drawerPaper }}
+        >
+          <Toolbar>
+            <IconButton edge="start" sx={{ mr: 2 }} onClick={() => navigate(-1)}>
+              <ArrowBackIcon />
+            </IconButton>
+            <Typography variant="h6" className={classes.title}>{t('sharedEmulator')}</Typography>
+          </Toolbar>
+          <Divider />
+          <List>
+            <ListItem>
+              <SelectField
+                label={t('reportDevice')}
+                data={Object.values(devices).sort((a, b) => a.name.localeCompare(b.name))}
+                value={deviceId}
+                onChange={(e) => dispatch(devicesActions.selectId(e.target.value))}
+                fullWidth
+              />
+            </ListItem>
+          </List>
+        </Drawer>
+        <div className={classes.mapContainer}>
+          <MapView>
+            <MapPositions positions={Object.values(positions)} showStatus />
+          </MapView>
+          <MapCurrentLocation />
+          <MapGeocoder />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmulatorPage;
diff --git a/src/resources/l10n/en.json b/src/resources/l10n/en.json
index 3d5e81f0..d203d130 100644
--- a/src/resources/l10n/en.json
+++ b/src/resources/l10n/en.json
@@ -104,6 +104,7 @@
     "sharedDropzoneText": "Drag and drop a file here or click",
     "sharedLogs": "Logs",
     "sharedLink": "Link",
+    "sharedEmulator": "Emulator",
     "calendarSimple": "Simple",
     "calendarRecurrence": "Recurrence",
     "calendarOnce": "Once",