aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-26 17:20:46 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-26 17:20:46 -0700
commitaab97ae5551995f940abb302d33f882b1a13a3fc (patch)
tree0f28e1ed52e1229a4e2170645ff915a99607b065
parent9e0e45c495f5db70f29c05d8a6ff8e9166cbf318 (diff)
downloadtrackermap-web-aab97ae5551995f940abb302d33f882b1a13a3fc.tar.gz
trackermap-web-aab97ae5551995f940abb302d33f882b1a13a3fc.tar.bz2
trackermap-web-aab97ae5551995f940abb302d33f882b1a13a3fc.zip
Collapse filter on mobile
-rw-r--r--modern/src/common/components/PageLayout.js1
-rw-r--r--modern/src/reports/components/ReportFilter.js151
2 files changed, 90 insertions, 62 deletions
diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js
index 43fd68ea..10ee8a11 100644
--- a/modern/src/common/components/PageLayout.js
+++ b/modern/src/common/components/PageLayout.js
@@ -42,6 +42,7 @@ const useStyles = makeStyles((theme) => ({
alignItems: 'stretch',
display: 'flex',
flexDirection: 'column',
+ overflow: 'auto',
},
}));
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 586ccc37..ccaaf1a6 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -1,12 +1,14 @@
import React, { useState } from 'react';
import {
- FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
+ FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography, useMediaQuery,
} from '@mui/material';
+import OpenInFullIcon from '@mui/icons-material/OpenInFull';
import makeStyles from '@mui/styles/makeStyles';
import { useSelector } from 'react-redux';
import moment from 'moment';
import { useTranslation } from '../../common/components/LocalizationProvider';
import dimensions from '../../common/theme/dimensions';
+import { useTheme } from '@mui/styles';
export const useFilterStyles = makeStyles((theme) => ({
filter: {
@@ -32,9 +34,12 @@ export const useFilterStyles = makeStyles((theme) => ({
const ReportFilter = ({
children, handleSubmit, showOnly, ignoreDevice,
}) => {
+ const theme = useTheme();
const classes = useFilterStyles();
const t = useTranslation();
+ const phone = useMediaQuery(theme.breakpoints.down('sm'));
+
const devices = useSelector((state) => state.devices.items);
const selectedDeviceId = useSelector((state) => state.devices.selectedId);
@@ -43,6 +48,8 @@ const ReportFilter = ({
const [from, setFrom] = useState(moment().subtract(1, 'hour'));
const [to, setTo] = useState(moment());
+ const [collapsed, setCollapsed] = useState(false);
+
const handleClick = (mail, json) => {
let selectedFrom;
let selectedTo;
@@ -85,59 +92,67 @@ const ReportFilter = ({
mail,
{ Accept: accept },
);
+
+ if (phone) {
+ setCollapsed(true);
+ }
};
return (
<div className={classes.filter}>
- {!ignoreDevice && (
- <div className={classes.item}>
- <FormControl fullWidth>
- <InputLabel>{t('reportDevice')}</InputLabel>
- <Select label={t('reportDevice')} value={deviceId || ''} onChange={(e) => setDeviceId(e.target.value)}>
- {Object.values(devices).map((device) => (
- <MenuItem key={device.id} value={device.id}>{device.name}</MenuItem>
- ))}
- </Select>
- </FormControl>
- </div>
- )}
- <div className={classes.item}>
- <FormControl fullWidth>
- <InputLabel>{t('reportPeriod')}</InputLabel>
- <Select label={t('reportPeriod')} value={period} onChange={(e) => setPeriod(e.target.value)}>
- <MenuItem value="today">{t('reportToday')}</MenuItem>
- <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
- <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
- <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
- <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
- <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
- <MenuItem value="custom">{t('reportCustom')}</MenuItem>
- </Select>
- </FormControl>
- </div>
- {period === 'custom' && (
- <div className={classes.item}>
- <TextField
- label={t('reportFrom')}
- type="datetime-local"
- value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
- onChange={(e) => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
- fullWidth
- />
- </div>
- )}
- {period === 'custom' && (
- <div className={classes.item}>
- <TextField
- label={t('reportTo')}
- type="datetime-local"
- value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
- onChange={(e) => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
- fullWidth
- />
- </div>
+ {!collapsed && (
+ <>
+ {!ignoreDevice && (
+ <div className={classes.item}>
+ <FormControl fullWidth>
+ <InputLabel>{t('reportDevice')}</InputLabel>
+ <Select label={t('reportDevice')} value={deviceId || ''} onChange={(e) => setDeviceId(e.target.value)}>
+ {Object.values(devices).map((device) => (
+ <MenuItem key={device.id} value={device.id}>{device.name}</MenuItem>
+ ))}
+ </Select>
+ </FormControl>
+ </div>
+ )}
+ <div className={classes.item}>
+ <FormControl fullWidth>
+ <InputLabel>{t('reportPeriod')}</InputLabel>
+ <Select label={t('reportPeriod')} value={period} onChange={(e) => setPeriod(e.target.value)}>
+ <MenuItem value="today">{t('reportToday')}</MenuItem>
+ <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
+ <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
+ <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
+ <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
+ <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
+ <MenuItem value="custom">{t('reportCustom')}</MenuItem>
+ </Select>
+ </FormControl>
+ </div>
+ {period === 'custom' && (
+ <>
+ <div className={classes.item}>
+ <TextField
+ label={t('reportFrom')}
+ type="datetime-local"
+ value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+ onChange={(e) => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+ fullWidth
+ />
+ </div>
+ <div className={classes.item}>
+ <TextField
+ label={t('reportTo')}
+ type="datetime-local"
+ value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+ onChange={(e) => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+ fullWidth
+ />
+ </div>
+ </>
+ )}
+ {children}
+ </>
)}
- {children}
<div className={classes.buttons}>
<Button
onClick={() => handleClick(false, true)}
@@ -148,27 +163,39 @@ const ReportFilter = ({
>
{t('reportShow')}
</Button>
- {!showOnly && (
+ {collapsed && (
<Button
- onClick={() => handleClick(false, false)}
+ onClick={() => setCollapsed(false)}
variant="outlined"
color="secondary"
className={classes.button}
disabled={!ignoreDevice && !deviceId}
+ startIcon={<OpenInFullIcon />}
>
- {t('reportExport')}
+ {t('reportConfigure')}
</Button>
)}
- {!showOnly && (
- <Button
- onClick={() => handleClick(true, false)}
- variant="outlined"
- color="secondary"
- className={classes.button}
- disabled={!ignoreDevice && !deviceId}
- >
- <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
- </Button>
+ {!showOnly && !collapsed && (
+ <>
+ <Button
+ onClick={() => handleClick(false, false)}
+ variant="outlined"
+ color="secondary"
+ className={classes.button}
+ disabled={!ignoreDevice && !deviceId}
+ >
+ {t('reportExport')}
+ </Button>
+ <Button
+ onClick={() => handleClick(true, false)}
+ variant="outlined"
+ color="secondary"
+ className={classes.button}
+ disabled={!ignoreDevice && !deviceId}
+ >
+ <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
+ </Button>
+ </>
)}
</div>
</div>