diff options
Diffstat (limited to 'modern')
| -rw-r--r-- | modern/src/main/MainMap.js | 69 | ||||
| -rw-r--r-- | modern/src/main/MainPage.js | 59 |
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} /> |