aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-10-19 18:17:49 -0700
committerAnton Tananaev <anton@traccar.org>2022-10-19 18:17:49 -0700
commitb3b724dd8ccd7b2e6a7bb88465165b1ca54fe50d (patch)
tree315522f7d9188892643798b3b25d329bc7572fbb /modern
parent6d733a77314eb2877689e652dd5a0da2737c42b0 (diff)
downloadtrackermap-web-b3b724dd8ccd7b2e6a7bb88465165b1ca54fe50d.tar.gz
trackermap-web-b3b724dd8ccd7b2e6a7bb88465165b1ca54fe50d.tar.bz2
trackermap-web-b3b724dd8ccd7b2e6a7bb88465165b1ca54fe50d.zip
Extract main map
Diffstat (limited to 'modern')
-rw-r--r--modern/src/main/MainMap.js69
-rw-r--r--modern/src/main/MainPage.js59
2 files changed, 83 insertions, 45 deletions
diff --git a/modern/src/main/MainMap.js b/modern/src/main/MainMap.js
new file mode 100644
index 00000000..81d214f9
--- /dev/null
+++ b/modern/src/main/MainMap.js
@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useDispatch, useSelector } from 'react-redux';
+import MapView from '../map/core/MapView';
+import MapSelectedDevice from '../map/main/MapSelectedDevice';
+import MapAccuracy from '../map/main/MapAccuracy';
+import MapGeofence from '../map/MapGeofence';
+import MapCurrentLocation from '../map/MapCurrentLocation';
+import PoiMap from '../map/main/PoiMap';
+import MapPadding from '../map/MapPadding';
+import { devicesActions } from '../store';
+import MapDefaultCamera from '../map/main/MapDefaultCamera';
+import usePersistedState from '../common/util/usePersistedState';
+import MapLiveRoutes from '../map/main/MapLiveRoutes';
+import MapPositions from '../map/MapPositions';
+import MapOverlay from '../map/overlay/MapOverlay';
+import MapGeocoder from '../map/geocoder/MapGeocoder';
+import MapScale from '../map/MapScale';
+import MapNotification from '../map/notification/MapNotification';
+import useFeatures from '../common/util/useFeatures';
+
+const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
+ const theme = useTheme();
+ const dispatch = useDispatch();
+
+ const desktop = useMediaQuery(theme.breakpoints.up('md'));
+
+ const eventsAvailable = useSelector((state) => !!state.events.items.length);
+
+ const features = useFeatures();
+
+ const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
+
+ const onMarkerClick = useCallback((_, deviceId) => {
+ dispatch(devicesActions.select(deviceId));
+ }, [dispatch]);
+
+ return (
+ <>
+ <MapView>
+ <MapOverlay />
+ <MapGeofence />
+ <MapAccuracy positions={filteredPositions} />
+ {mapLiveRoutes && <MapLiveRoutes />}
+ <MapPositions
+ positions={filteredPositions}
+ onClick={onMarkerClick}
+ selectedPosition={selectedPosition}
+ showStatus
+ />
+ <MapDefaultCamera />
+ <MapSelectedDevice />
+ <PoiMap />
+ </MapView>
+ <MapScale />
+ <MapCurrentLocation />
+ <MapGeocoder />
+ {!features.disableEvents && (
+ <MapNotification enabled={eventsAvailable} onClick={onEventsClick} />
+ )}
+ {desktop && (
+ <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />
+ )}
+ </>
+ );
+};
+
+export default MainMap;
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index ec941323..14e6ebf8 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -10,33 +10,21 @@ import useMediaQuery from '@mui/material/useMediaQuery';
import ListIcon from '@mui/icons-material/ViewList';
import { useDispatch, useSelector } from 'react-redux';
import DevicesList from './DevicesList';
-import MapView from '../map/core/MapView';
-import MapSelectedDevice from '../map/main/MapSelectedDevice';
-import MapAccuracy from '../map/main/MapAccuracy';
-import MapGeofence from '../map/MapGeofence';
-import MapCurrentLocation from '../map/MapCurrentLocation';
import BottomMenu from '../common/components/BottomMenu';
import { useTranslation } from '../common/components/LocalizationProvider';
-import PoiMap from '../map/main/PoiMap';
-import MapPadding from '../map/MapPadding';
import StatusCard from '../common/components/StatusCard';
import { devicesActions } from '../store';
-import MapDefaultCamera from '../map/main/MapDefaultCamera';
import usePersistedState from '../common/util/usePersistedState';
-import MapLiveRoutes from '../map/main/MapLiveRoutes';
-import MapPositions from '../map/MapPositions';
-import MapOverlay from '../map/overlay/MapOverlay';
-import MapGeocoder from '../map/geocoder/MapGeocoder';
-import MapScale from '../map/MapScale';
-import MapNotification from '../map/notification/MapNotification';
import EventsDrawer from './EventsDrawer';
-import useFeatures from '../common/util/useFeatures';
import useFilter from './useFilter';
import MainToolbar from './MainToolbar';
+import MainMap from './MainMap';
const useStyles = makeStyles((theme) => ({
root: {
height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
},
sidebar: {
display: 'flex',
@@ -62,8 +50,8 @@ const useStyles = makeStyles((theme) => ({
transform: 'translateX(-100vw)',
},
},
- toolbarContainer: {
- zIndex: 4,
+ toolbar: {
+ zIndex: 1,
},
deviceList: {
flex: 1,
@@ -109,12 +97,8 @@ const MainPage = () => {
const desktop = useMediaQuery(theme.breakpoints.up('md'));
const phone = useMediaQuery(theme.breakpoints.down('sm'));
- const features = useFeatures();
-
const [mapOnSelect] = usePersistedState('mapOnSelect', false);
- const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
-
const selectedDeviceId = useSelector((state) => state.devices.selectedId);
const positions = useSelector((state) => state.positions.items);
const [filteredPositions, setFilteredPositions] = useState([]);
@@ -133,8 +117,7 @@ const MainPage = () => {
const [devicesOpen, setDevicesOpen] = useState(false);
const [eventsOpen, setEventsOpen] = useState(false);
- const eventHandler = useCallback(() => setEventsOpen(true), [setEventsOpen]);
- const eventsAvailable = useSelector((state) => !!state.events.items.length);
+ const onEventsClick = useCallback(() => setEventsOpen(true), [setEventsOpen]);
useEffect(() => setDevicesOpen(desktop), [desktop]);
@@ -144,29 +127,15 @@ const MainPage = () => {
}
}, [desktop, mapOnSelect, selectedDeviceId]);
- const onClick = useCallback((_, deviceId) => {
- dispatch(devicesActions.select(deviceId));
- }, [dispatch]);
-
useFilter(filter, filterSort, filterMap, positions, setFilteredDevices, setFilteredPositions);
return (
<div className={classes.root}>
- <MapView>
- <MapOverlay />
- <MapGeofence />
- <MapAccuracy positions={filteredPositions} />
- {mapLiveRoutes && <MapLiveRoutes />}
- <MapPositions positions={filteredPositions} onClick={onClick} selectedPosition={selectedPosition} showStatus />
- <MapDefaultCamera />
- <MapSelectedDevice />
- <PoiMap />
- </MapView>
- <MapScale />
- <MapCurrentLocation />
- <MapGeocoder />
- {!features.disableEvents && <MapNotification enabled={eventsAvailable} onClick={eventHandler} />}
- {desktop && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
+ <MainMap
+ filteredPositions={filteredPositions}
+ selectedPosition={selectedPosition}
+ onEventsClick={onEventsClick}
+ />
<Button
variant="contained"
color={phone ? 'secondary' : 'primary'}
@@ -179,7 +148,7 @@ const MainPage = () => {
<div className={classes.sidebarToggleText}>{t('deviceTitle')}</div>
</Button>
<Paper square elevation={3} className={`${classes.sidebar} ${!devicesOpen && classes.sidebarCollapsed}`}>
- <Paper square elevation={3} className={classes.toolbarContainer}>
+ <Paper square elevation={3} className={classes.toolbar}>
<MainToolbar
filter={filter}
setFilter={setFilter}
@@ -198,11 +167,11 @@ const MainPage = () => {
<BottomMenu />
</div>
)}
- {!features.disableEvents && <EventsDrawer open={eventsOpen} onClose={() => setEventsOpen(false)} />}
+ <EventsDrawer open={eventsOpen} onClose={() => setEventsOpen(false)} />
{selectedDeviceId && (
<StatusCard
deviceId={selectedDeviceId}
- position={positions[selectedDeviceId]}
+ position={selectedPosition}
onClose={() => dispatch(devicesActions.select(null))}
desktopPadding={theme.dimensions.drawerWidthDesktop}
/>