import React, { useState } from 'react'; import { Accordion, AccordionSummary, AccordionDetails, Typography, FormControlLabel, Checkbox, FormGroup, Button, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation, useTranslationKeys } from '../common/components/LocalizationProvider'; import EditItemView from './components/EditItemView'; import { prefixString, unprefixString } from '../common/util/stringUtils'; import SelectField from '../common/components/SelectField'; import SettingsMenu from './components/SettingsMenu'; import { useCatch } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ details: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), paddingBottom: theme.spacing(3), }, })); const NotificationPage = () => { const classes = useStyles(); const t = useTranslation(); const [item, setItem] = useState(); const alarms = useTranslationKeys((it) => it.startsWith('alarm')).map((it) => ({ key: unprefixString('alarm', it), name: t(it), })); const testNotificators = useCatch(async () => { await Promise.all(item.notificators.split(/[, ]+/).map(async (notificator) => { const response = await fetch(`/api/notifications/test/${notificator}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(item), }); if (!response.ok) { throw Error(await response.text()); } })); }); const validate = () => item && item.type && item.notificators; return ( } breadcrumbs={['settingsTitle', 'sharedNotification']} > {item && ( <> }> {t('sharedRequired')} setItem({ ...item, type: e.target.value })} endpoint="/api/notifications/types" keyGetter={(it) => it.type} titleGetter={(it) => t(prefixString('event', it.type))} label={t('sharedType')} /> {item.type === 'alarm' && ( setItem({ ...item, attributes: { ...item.attributes, alarms: e.target.value.join() } })} data={alarms} keyGetter={(it) => it.key} label={t('sharedAlarms')} /> )} setItem({ ...item, notificators: e.target.value.join() })} endpoint="/api/notifications/notificators" keyGetter={(it) => it.type} titleGetter={(it) => t(prefixString('notificator', it.type))} label={t('notificationNotificators')} /> setItem({ ...item, always: event.target.checked })} /> )} label={t('notificationAlways')} /> }> {t('sharedExtra')} setItem({ ...item, calendarId: Number(event.target.value) })} endpoint="/api/calendars" label={t('sharedCalendar')} /> )} ); }; export default NotificationPage;