Showing status view on device click

3 files changed, 58 insertions, 13 deletions

diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index e6c5f58f..e55ee10c 100644
--- a/modern/src/map/SelectedDeviceMap.js
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -1,21 +1,63 @@
-import { useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
 
+import { ThemeProvider } from '@material-ui/core/styles';
+import maplibregl from 'maplibre-gl';
+import { Provider, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import { map } from './Map';
+import store from '../store';
+import StatusView from './StatusView';
+import theme from '../theme';
+
+let popup;
 
 const SelectedDeviceMap = () => {
+  const history = useHistory();
+
   const mapCenter = useSelector((state) => {
     if (state.devices.selectedId) {
       const position = state.positions.items[state.devices.selectedId] || null;
       if (position) {
-        return [position.longitude, position.latitude];
+        return { deviceId: state.devices.selectedId, position: [position.longitude, position.latitude] };
       }
     }
     return null;
   });
 
+  const showStatus = (deviceId, coordinates) => {
+    const placeholder = document.createElement('div');
+    ReactDOM.render(
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <StatusView
+            deviceId={deviceId}
+            onShowDetails={(positionId) => history.push(`/position/${positionId}`)}
+            onShowHistory={() => history.push('/replay')}
+            onEditClick={(deviceId) => history.push(`/device/${deviceId}`)}
+          />
+        </ThemeProvider>
+      </Provider>,
+      placeholder,
+    );
+
+    if (popup) {
+      popup.remove();
+    }
+    popup = new maplibregl.Popup({
+      offset: 25,
+      anchor: 'top',
+      closeOnClick: true,
+    });
+
+    popup.setDOMContent(placeholder).setLngLat(coordinates).addTo(map);
+  };
+
   useEffect(() => {
-    map.easeTo({ center: mapCenter });
+    if (mapCenter) {
+      map.easeTo({ center: mapCenter.position });
+      showStatus(mapCenter.deviceId, mapCenter.position);
+    }
   }, [mapCenter]);
 
   return null;
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index e37699a0..00d36c50 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -25,15 +25,7 @@ const useStyles = makeStyles((theme) => ({
   paper: {
     width: '300px',
   },
-  green: {
-    color: theme.palette.common.green,
-  },
-  red: {
-    color: theme.palette.common.red,
-  },
-  gray: {
-    color: theme.palette.common.gray,
-  },
+  ...theme.palette.colors,
   listItemContainer: {
     maxWidth: '240px',
   },
diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js
index ac26e57b..622e49b0 100644
--- a/modern/src/theme/palette.js
+++ b/modern/src/theme/palette.js
@@ -18,4 +18,15 @@ export default {
     main: traccarGreen,
     contrastText: traccarWhite,
   },
+  colors: {
+    red: {
+      color: traccarRed,
+    },
+    green: {
+      color: traccarGreen,
+    },
+    gray: {
+      color: traccarGray,
+    },
+  },
 };