aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-08-07 17:14:47 +0530
committerAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-08-07 17:14:47 +0530
commit27f718e72df9300f013a6db78fc2982622772792 (patch)
treeacda3546854a4c5a4910f45a177ad91fd3921a79 /modern
parent8deaba8e1f7511348d734f173b238271fd7b84be (diff)
downloadetbsa-traccar-web-27f718e72df9300f013a6db78fc2982622772792.tar.gz
etbsa-traccar-web-27f718e72df9300f013a6db78fc2982622772792.tar.bz2
etbsa-traccar-web-27f718e72df9300f013a6db78fc2982622772792.zip
Showing status view on device click
Diffstat (limited to 'modern')
-rw-r--r--modern/src/map/SelectedDeviceMap.js50
-rw-r--r--modern/src/map/StatusView.js10
-rw-r--r--modern/src/theme/palette.js11
3 files changed, 58 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',
},
diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js
index ac26e57..622e49b 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,
+ },
+ },
};