1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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;
|
