aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/map')
-rw-r--r--modern/src/map/SelectedDeviceMap.js50
-rw-r--r--modern/src/map/StatusView.js10
2 files changed, 47 insertions, 13 deletions
diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index e6c5f58..e55ee10 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 e37699a..00d36c5 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',
},