aboutsummaryrefslogtreecommitdiff
path: root/modern/src/main
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-10-20 22:40:45 -0700
committerAnton Tananaev <anton@traccar.org>2022-10-20 22:40:45 -0700
commit52421e5f09687d4ae57386a69f9ffc69c011f9bb (patch)
tree933fac65e475eccbbfd6798c4b547d12d0a592c1 /modern/src/main
parent31a3c0964dde50a083c4b60d81a1bdaef34f3086 (diff)
downloadtrackermap-web-52421e5f09687d4ae57386a69f9ffc69c011f9bb.tar.gz
trackermap-web-52421e5f09687d4ae57386a69f9ffc69c011f9bb.tar.bz2
trackermap-web-52421e5f09687d4ae57386a69f9ffc69c011f9bb.zip
Update main screen
Diffstat (limited to 'modern/src/main')
-rw-r--r--modern/src/main/MainPage.js138
-rw-r--r--modern/src/main/MainToolbar.js16
2 files changed, 63 insertions, 91 deletions
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 14e6ebf8..2713c81e 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -1,17 +1,13 @@
import React, {
- useState, useEffect, useCallback,
+ useState, useCallback, useEffect,
} from 'react';
-import {
- Paper, Button,
-} from '@mui/material';
+import { Paper } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
-import ListIcon from '@mui/icons-material/ViewList';
import { useDispatch, useSelector } from 'react-redux';
import DevicesList from './DevicesList';
import BottomMenu from '../common/components/BottomMenu';
-import { useTranslation } from '../common/components/LocalizationProvider';
import StatusCard from '../common/components/StatusCard';
import { devicesActions } from '../store';
import usePersistedState from '../common/util/usePersistedState';
@@ -23,68 +19,40 @@ import MainMap from './MainMap';
const useStyles = makeStyles((theme) => ({
root: {
height: '100%',
- display: 'flex',
- flexDirection: 'column',
},
sidebar: {
display: 'flex',
flexDirection: 'column',
- position: 'fixed',
- left: 0,
- top: 0,
- zIndex: 3,
- margin: theme.spacing(1.5),
- width: theme.dimensions.drawerWidthDesktop,
- bottom: theme.dimensions.bottomBarHeight,
- transition: 'transform .5s ease',
- backgroundColor: 'white',
+ [theme.breakpoints.up('md')]: {
+ position: 'fixed',
+ left: 0,
+ top: 0,
+ height: `calc(100% - ${theme.spacing(3)})`,
+ width: theme.dimensions.drawerWidthDesktop,
+ margin: theme.spacing(1.5),
+ zIndex: 3,
+ },
[theme.breakpoints.down('md')]: {
+ height: '100%',
width: '100%',
- margin: 0,
},
},
- sidebarCollapsed: {
- transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`,
- marginLeft: 0,
- [theme.breakpoints.down('md')]: {
- transform: 'translateX(-100vw)',
- },
+ header: {
+ zIndex: 6,
},
- toolbar: {
- zIndex: 1,
+ footer: {
+ zIndex: 5,
},
- deviceList: {
+ middle: {
flex: 1,
+ display: 'grid',
},
- sidebarToggle: {
- position: 'fixed',
- left: theme.spacing(1.5),
- top: theme.spacing(3),
- borderRadius: '0px',
- minWidth: 0,
- [theme.breakpoints.down('md')]: {
- left: 0,
- },
- },
- sidebarToggleText: {
- marginLeft: theme.spacing(1),
- [theme.breakpoints.only('xs')]: {
- display: 'none',
- },
- },
- sidebarToggleBg: {
- backgroundColor: 'white',
- color: 'rgba(0, 0, 0, 0.6)',
- '&:hover': {
- backgroundColor: 'white',
- },
+ contentMap: {
+ gridArea: '1 / 1',
},
- bottomMenu: {
- position: 'fixed',
- left: theme.spacing(1.5),
- bottom: theme.spacing(1.5),
+ contentList: {
+ gridArea: '1 / 1',
zIndex: 4,
- width: theme.dimensions.drawerWidthDesktop,
},
}));
@@ -92,10 +60,8 @@ const MainPage = () => {
const classes = useStyles();
const dispatch = useDispatch();
const theme = useTheme();
- const t = useTranslation();
const desktop = useMediaQuery(theme.breakpoints.up('md'));
- const phone = useMediaQuery(theme.breakpoints.down('sm'));
const [mapOnSelect] = usePersistedState('mapOnSelect', false);
@@ -114,13 +80,11 @@ const MainPage = () => {
const [filterSort, setFilterSort] = usePersistedState('filterSort', '');
const [filterMap, setFilterMap] = usePersistedState('filterMap', false);
- const [devicesOpen, setDevicesOpen] = useState(false);
+ const [devicesOpen, setDevicesOpen] = useState(desktop);
const [eventsOpen, setEventsOpen] = useState(false);
const onEventsClick = useCallback(() => setEventsOpen(true), [setEventsOpen]);
- useEffect(() => setDevicesOpen(desktop), [desktop]);
-
useEffect(() => {
if (!desktop && mapOnSelect && selectedDeviceId) {
setDevicesOpen(false);
@@ -131,25 +95,18 @@ const MainPage = () => {
return (
<div className={classes.root}>
- <MainMap
- filteredPositions={filteredPositions}
- selectedPosition={selectedPosition}
- onEventsClick={onEventsClick}
- />
- <Button
- variant="contained"
- color={phone ? 'secondary' : 'primary'}
- classes={{ containedPrimary: classes.sidebarToggleBg }}
- className={classes.sidebarToggle}
- onClick={() => setDevicesOpen(!devicesOpen)}
- disableElevation
- >
- <ListIcon />
- <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div>
- </Button>
- <Paper square elevation={3} className={`${classes.sidebar} ${!devicesOpen && classes.sidebarCollapsed}`}>
- <Paper square elevation={3} className={classes.toolbar}>
+ {desktop && (
+ <MainMap
+ filteredPositions={filteredPositions}
+ selectedPosition={selectedPosition}
+ onEventsClick={onEventsClick}
+ />
+ )}
+ <div className={classes.sidebar}>
+ <Paper square elevation={3} className={classes.header}>
<MainToolbar
+ devicesOpen={devicesOpen}
+ setDevicesOpen={setDevicesOpen}
filter={filter}
setFilter={setFilter}
filterSort={filterSort}
@@ -158,15 +115,26 @@ const MainPage = () => {
setFilterMap={setFilterMap}
/>
</Paper>
- <div className={classes.deviceList}>
- <DevicesList devices={filteredDevices} />
+ <div className={classes.middle}>
+ {!desktop && (
+ <div className={classes.contentMap}>
+ <MainMap
+ filteredPositions={filteredPositions}
+ selectedPosition={selectedPosition}
+ onEventsClick={onEventsClick}
+ />
+ </div>
+ )}
+ <Paper square className={classes.contentList} style={devicesOpen ? {} : { visibility: 'hidden' }}>
+ <DevicesList devices={filteredDevices} />
+ </Paper>
</div>
- </Paper>
- {desktop && (
- <div className={classes.bottomMenu}>
- <BottomMenu />
- </div>
- )}
+ {desktop && (
+ <div className={classes.footer}>
+ <BottomMenu />
+ </div>
+ )}
+ </div>
<EventsDrawer open={eventsOpen} onClose={() => setEventsOpen(false)} />
{selectedDeviceId && (
<StatusCard
diff --git a/modern/src/main/MainToolbar.js b/modern/src/main/MainToolbar.js
index 67a8a731..015e86ba 100644
--- a/modern/src/main/MainToolbar.js
+++ b/modern/src/main/MainToolbar.js
@@ -5,6 +5,8 @@ import {
Toolbar, IconButton, OutlinedInput, InputAdornment, Popover, FormControl, InputLabel, Select, MenuItem, FormGroup, FormControlLabel, Checkbox, Badge,
} from '@mui/material';
import { makeStyles } from '@mui/styles';
+import MapIcon from '@mui/icons-material/Map';
+import ViewListIcon from '@mui/icons-material/ViewList';
import AddIcon from '@mui/icons-material/Add';
import TuneIcon from '@mui/icons-material/Tune';
import { useTranslation } from '../common/components/LocalizationProvider';
@@ -13,10 +15,7 @@ import { useDeviceReadonly } from '../common/util/permissions';
const useStyles = makeStyles((theme) => ({
toolbar: {
display: 'flex',
- padding: theme.spacing(0, 1),
- '& > *': {
- margin: theme.spacing(0, 1),
- },
+ gap: theme.spacing(1),
},
filterPanel: {
display: 'flex',
@@ -28,6 +27,8 @@ const useStyles = makeStyles((theme) => ({
}));
const MainToolbar = ({
+ devicesOpen,
+ setDevicesOpen,
filter,
setFilter,
filterSort,
@@ -50,7 +51,10 @@ const MainToolbar = ({
const deviceStatusCount = (status) => Object.values(devices).filter((d) => d.status === status).length;
return (
- <Toolbar className={classes.toolbar} disableGutters>
+ <Toolbar className={classes.toolbar}>
+ <IconButton edge="start" onClick={() => setDevicesOpen(!devicesOpen)}>
+ {devicesOpen ? <MapIcon /> : <ViewListIcon />}
+ </IconButton>
<OutlinedInput
ref={filterRef}
placeholder={t('sharedSearchDevices')}
@@ -125,7 +129,7 @@ const MainToolbar = ({
</FormGroup>
</div>
</Popover>
- <IconButton onClick={() => navigate('/settings/device')} disabled={deviceReadonly}>
+ <IconButton edge="end" onClick={() => navigate('/settings/device')} disabled={deviceReadonly}>
<AddIcon />
</IconButton>
</Toolbar>