diff options
author | Anton Tananaev <anton@traccar.org> | 2023-08-19 13:58:45 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2023-08-19 13:59:07 -0700 |
commit | d3c7705bedebd65c94f9eea691aaf2fe03b0cafe (patch) | |
tree | 5f98b3d9bbbd4fe8067b5a334e84aff008b8db22 /modern/src/main/EventsDrawer.jsx | |
parent | 0161ae449d4a7bd0781c0665d663353663ab0faf (diff) | |
download | trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.tar.gz trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.tar.bz2 trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.zip |
Move to Vite
Diffstat (limited to 'modern/src/main/EventsDrawer.jsx')
-rw-r--r-- | modern/src/main/EventsDrawer.jsx | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/modern/src/main/EventsDrawer.jsx b/modern/src/main/EventsDrawer.jsx new file mode 100644 index 00000000..67700fc4 --- /dev/null +++ b/modern/src/main/EventsDrawer.jsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; +import { + Drawer, IconButton, List, ListItemButton, ListItemText, Toolbar, Typography, +} from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import DeleteIcon from '@mui/icons-material/Delete'; +import { formatNotificationTitle, formatTime } from '../common/util/formatter'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import { eventsActions } from '../store'; +import { usePreference } from '../common/util/preferences'; + +const useStyles = makeStyles((theme) => ({ + drawer: { + width: theme.dimensions.eventsDrawerWidth, + }, + toolbar: { + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + }, +})); + +const EventsDrawer = ({ open, onClose }) => { + const classes = useStyles(); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const t = useTranslation(); + + const hours12 = usePreference('twelveHourFormat'); + + const devices = useSelector((state) => state.devices.items); + + const events = useSelector((state) => state.events.items); + + const formatType = (event) => formatNotificationTitle(t, { + type: event.type, + attributes: { + alarms: event.attributes.alarm, + }, + }); + + return ( + <Drawer + anchor="right" + open={open} + onClose={onClose} + > + <Toolbar className={classes.toolbar} disableGutters> + <Typography variant="h6" className={classes.title}> + {t('reportEvents')} + </Typography> + <IconButton size="small" color="inherit" onClick={() => dispatch(eventsActions.deleteAll())}> + <DeleteIcon fontSize="small" /> + </IconButton> + </Toolbar> + <List className={classes.drawer} dense> + {events.map((event) => ( + <ListItemButton + key={event.id} + onClick={() => navigate(`/event/${event.id}`)} + disabled={!event.id} + > + <ListItemText + primary={`${devices[event.deviceId]?.name} • ${formatType(event)}`} + secondary={formatTime(event.eventTime, 'seconds', hours12)} + /> + <IconButton size="small" onClick={() => dispatch(eventsActions.delete(event))}> + <DeleteIcon fontSize="small" className={classes.negative} /> + </IconButton> + </ListItemButton> + ))} + </List> + </Drawer> + ); +}; + +export default EventsDrawer; |