diff options
Diffstat (limited to 'src/settings/NotificationsPage.jsx')
-rw-r--r-- | src/settings/NotificationsPage.jsx | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/src/settings/NotificationsPage.jsx b/src/settings/NotificationsPage.jsx new file mode 100644 index 00000000..f1e70a85 --- /dev/null +++ b/src/settings/NotificationsPage.jsx @@ -0,0 +1,83 @@ +import React, { useState } from 'react'; +import { + Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import { useEffectAsync } from '../reactHelper'; +import { prefixString } from '../common/util/stringUtils'; +import { formatBoolean } from '../common/util/formatter'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import PageLayout from '../common/components/PageLayout'; +import SettingsMenu from './components/SettingsMenu'; +import CollectionFab from './components/CollectionFab'; +import CollectionActions from './components/CollectionActions'; +import TableShimmer from '../common/components/TableShimmer'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; +import useSettingsStyles from './common/useSettingsStyles'; + +const NotificationsPage = () => { + const classes = useSettingsStyles(); + const t = useTranslation(); + + const [timestamp, setTimestamp] = useState(Date.now()); + const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); + const [loading, setLoading] = useState(false); + + useEffectAsync(async () => { + setLoading(true); + try { + const response = await fetch('/api/notifications'); + if (response.ok) { + setItems(await response.json()); + } else { + throw Error(await response.text()); + } + } finally { + setLoading(false); + } + }, [timestamp]); + + const formatList = (prefix, value) => { + if (value) { + return value + .split(/[, ]+/) + .filter(Boolean) + .map((it) => t(prefixString(prefix, it))) + .join(', '); + } + return ''; + }; + + return ( + <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedNotifications']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> + <Table className={classes.table}> + <TableHead> + <TableRow> + <TableCell>{t('notificationType')}</TableCell> + <TableCell>{t('notificationAlways')}</TableCell> + <TableCell>{t('sharedAlarms')}</TableCell> + <TableCell>{t('notificationNotificators')}</TableCell> + <TableCell className={classes.columnAction} /> + </TableRow> + </TableHead> + <TableBody> + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( + <TableRow key={item.id}> + <TableCell>{t(prefixString('event', item.type))}</TableCell> + <TableCell>{formatBoolean(item.always, t)}</TableCell> + <TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell> + <TableCell>{formatList('notificator', item.notificators)}</TableCell> + <TableCell className={classes.columnAction} padding="none"> + <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" setTimestamp={setTimestamp} /> + </TableCell> + </TableRow> + )) : (<TableShimmer columns={5} endAction />)} + </TableBody> + </Table> + <CollectionFab editPath="/settings/notification" /> + </PageLayout> + ); +}; + +export default NotificationsPage; |