4 files changed, 135 insertions, 7 deletions
diff --git a/src/other/EmulatorPage.jsx b/src/other/EmulatorPage.jsx
new file mode 100644
index 00000000..9adc129f
--- /dev/null
+++ b/src/other/EmulatorPage.jsx
@@ -0,0 +1,131 @@
+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';
+import { useCatch } from '../reactHelper';
+
+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);
+
+  const handleClick = useCatch(async (latitude, longitude) => {
+    if (deviceId) {
+      const params = new URLSearchParams();
+      params.append('id', devices[deviceId].uniqueId);
+      params.append('lat', latitude);
+      params.append('lon', longitude);
+
+      const response = await fetch(`http://${window.location.hostname}:5055?${params.toString()}`, {
+        method: 'GET',
+        mode: 'no-cors',
+      });
+      if (!response.ok) {
+        throw Error(await response.text());
+      }
+    }
+  });
+
+  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)}
+              onClick={handleClick}
+              showStatus
+            />
+          </MapView>
+          <MapCurrentLocation />
+          <MapGeocoder />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmulatorPage;
diff --git a/src/other/GeofencesPage.jsx b/src/other/GeofencesPage.jsx
index a27a6dca..438d31e5 100644
--- a/src/other/GeofencesPage.jsx
+++ b/src/other/GeofencesPage.jsx
@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
   drawerPaper: {
     position: 'relative',
     [theme.breakpoints.up('sm')]: {
-      width: theme.dimensions.drawerWidthTablet,
+      width: theme.dimensions.drawerWidthDesktop,
     },
     [theme.breakpoints.down('sm')]: {
       height: theme.dimensions.drawerHeightPhone,
diff --git a/src/other/PositionPage.jsx b/src/other/PositionPage.jsx
index f253cd2c..e64ee491 100644
--- a/src/other/PositionPage.jsx
+++ b/src/other/PositionPage.jsx
@@ -87,14 +87,14 @@ const PositionPage = () => {
                 {item && Object.getOwnPropertyNames(item).filter((it) => it !== 'attributes').map((property) => (
                   <TableRow key={property}>
                     <TableCell>{property}</TableCell>
-                    <TableCell><strong>{positionAttributes[property]?.name || property}</strong></TableCell>
+                    <TableCell><strong>{positionAttributes[property]?.name}</strong></TableCell>
                     <TableCell><PositionValue position={item} property={property} /></TableCell>
                   </TableRow>
                 ))}
                 {item && Object.getOwnPropertyNames(item.attributes).map((attribute) => (
                   <TableRow key={attribute}>
                     <TableCell>{attribute}</TableCell>
-                    <TableCell><strong>{positionAttributes[attribute]?.name || attribute}</strong></TableCell>
+                    <TableCell><strong>{positionAttributes[attribute]?.name}</strong></TableCell>
                     <TableCell><PositionValue position={item} attribute={attribute} /></TableCell>
                   </TableRow>
                 ))}
diff --git a/src/other/ReplayPage.jsx b/src/other/ReplayPage.jsx
index 1050b976..1425c495 100644
--- a/src/other/ReplayPage.jsx
+++ b/src/other/ReplayPage.jsx
@@ -25,7 +25,6 @@ import { useCatch } from '../reactHelper';
 import MapCamera from '../map/MapCamera';
 import MapGeofence from '../map/MapGeofence';
 import StatusCard from '../common/components/StatusCard';
-import { usePreference } from '../common/util/preferences';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -82,8 +81,6 @@ const ReplayPage = () => {
   const navigate = useNavigate();
   const timerRef = useRef();
 
-  const hours12 = usePreference('twelveHourFormat');
-
   const defaultDeviceId = useSelector((state) => state.devices.selectedId);
 
   const [positions, setPositions] = useState([]);
@@ -210,7 +207,7 @@ const ReplayPage = () => {
                 <IconButton onClick={() => setIndex((index) => index + 1)} disabled={playing || index >= positions.length - 1}>
                   <FastForwardIcon />
                 </IconButton>
-                {formatTime(positions[index].fixTime, 'seconds', hours12)}
+                {formatTime(positions[index].fixTime, 'seconds')}
               </div>
             </>
           ) : (