diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-08-07 17:14:47 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-08-07 17:14:47 +0530 |
commit | 27f718e72df9300f013a6db78fc2982622772792 (patch) | |
tree | acda3546854a4c5a4910f45a177ad91fd3921a79 | |
parent | 8deaba8e1f7511348d734f173b238271fd7b84be (diff) | |
download | trackermap-web-27f718e72df9300f013a6db78fc2982622772792.tar.gz trackermap-web-27f718e72df9300f013a6db78fc2982622772792.tar.bz2 trackermap-web-27f718e72df9300f013a6db78fc2982622772792.zip |
Showing status view on device click
-rw-r--r-- | modern/src/map/SelectedDeviceMap.js | 50 | ||||
-rw-r--r-- | modern/src/map/StatusView.js | 10 | ||||
-rw-r--r-- | modern/src/theme/palette.js | 11 |
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, + }, + }, }; |