diff options
| -rw-r--r-- | modern/src/Navigation.jsx | 2 | ||||
| -rw-r--r-- | modern/src/resources/l10n/en.json | 1 | ||||
| -rw-r--r-- | modern/src/settings/AnnouncementPage.jsx | 106 | ||||
| -rw-r--r-- | modern/src/settings/components/SettingsMenu.jsx | 21 |
4 files changed, 124 insertions, 6 deletions
diff --git a/modern/src/Navigation.jsx b/modern/src/Navigation.jsx index 2bec6456..37a6ddb5 100644 --- a/modern/src/Navigation.jsx +++ b/modern/src/Navigation.jsx @@ -56,6 +56,7 @@ import GroupConnectionsPage from './settings/GroupConnectionsPage'; import UserConnectionsPage from './settings/UserConnectionsPage'; import LogsPage from './reports/LogsPage'; import SharePage from './settings/SharePage'; +import AnnouncementPage from './settings/AnnouncementPage'; const Navigation = () => { const navigate = useNavigate(); @@ -111,6 +112,7 @@ const Navigation = () => { <Route path="settings"> <Route path="accumulators/:deviceId" element={<AccumulatorsPage />} /> + <Route path="announcement" element={<AnnouncementPage />} /> <Route path="calendars" element={<CalendarsPage />} /> <Route path="calendar/:id" element={<CalendarPage />} /> <Route path="calendar" element={<CalendarPage />} /> diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json index b91312c7..39fb219b 100644 --- a/modern/src/resources/l10n/en.json +++ b/modern/src/resources/l10n/en.json @@ -11,6 +11,7 @@ "sharedRemove": "Remove", "sharedRemoveConfirm": "Remove item?", "sharedNoData": "No data", + "sharedSubject": "Subject", "sharedYes": "Yes", "sharedNo": "No", "sharedKm": "km", diff --git a/modern/src/settings/AnnouncementPage.jsx b/modern/src/settings/AnnouncementPage.jsx new file mode 100644 index 00000000..39488f02 --- /dev/null +++ b/modern/src/settings/AnnouncementPage.jsx @@ -0,0 +1,106 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + Container, + TextField, + Button, +} from '@mui/material'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import PageLayout from '../common/components/PageLayout'; +import SettingsMenu from './components/SettingsMenu'; +import { useCatchCallback } from '../reactHelper'; +import useSettingsStyles from './common/useSettingsStyles'; +import SelectField from '../common/components/SelectField'; +import { prefixString } from '../common/util/stringUtils'; + +const AnnouncementPage = () => { + const navigate = useNavigate(); + const classes = useSettingsStyles(); + const t = useTranslation(); + + const [users, setUsers] = useState([]); + const [notificator, setNotificator] = useState(); + const [message, setMessage] = useState({}); + + const handleSend = useCatchCallback(async () => { + const query = new URLSearchParams(); + users.forEach((userId) => query.append('userId', userId)); + const response = await fetch(`/api/notifications/send/${notificator}?${query.toString()}`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(message), + }); + if (response.ok) { + navigate(-1); + } else { + throw Error(await response.text()); + } + }, [users, notificator, message, navigate]); + + return ( + <PageLayout menu={<SettingsMenu />} breadcrumbs={['serverAnnouncement']}> + <Container maxWidth="xs" className={classes.container}> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <SelectField + multiple + value={users} + onChange={(e) => setUsers(e.target.value)} + endpoint="/api/users" + label={t('settingsUsers')} + /> + <SelectField + value={notificator} + onChange={(e) => setNotificator(e.target.value)} + endpoint="/api/notifications/notificators" + keyGetter={(it) => it.type} + titleGetter={(it) => t(prefixString('notificator', it.type))} + label={t('notificationNotificators')} + /> + <TextField + value={message.subject} + onChange={(e) => setMessage({ ...message, subject: e.target.value })} + label={t('sharedSubject')} + /> + <TextField + value={message.body} + onChange={(e) => setMessage({ ...message, body: e.target.value })} + label={t('commandMessage')} + /> + </AccordionDetails> + </Accordion> + <div className={classes.buttons}> + <Button + type="button" + color="primary" + variant="outlined" + onClick={() => navigate(-1)} + > + {t('sharedCancel')} + </Button> + <Button + type="button" + color="primary" + variant="contained" + onClick={handleSend} + disabled={!notificator || !message.subject || !message.body} + > + {t('commandSend')} + </Button> + </div> + </Container> + </PageLayout> + ); +}; + +export default AnnouncementPage; diff --git a/modern/src/settings/components/SettingsMenu.jsx b/modern/src/settings/components/SettingsMenu.jsx index 0f3ebbe5..6d8c0fd7 100644 --- a/modern/src/settings/components/SettingsMenu.jsx +++ b/modern/src/settings/components/SettingsMenu.jsx @@ -14,6 +14,7 @@ import TodayIcon from '@mui/icons-material/Today'; import PublishIcon from '@mui/icons-material/Publish'; import SmartphoneIcon from '@mui/icons-material/Smartphone'; import HelpIcon from '@mui/icons-material/Help'; +import CampaignIcon from '@mui/icons-material/Campaign'; import { Link, useLocation } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { useTranslation } from '../../common/components/LocalizationProvider'; @@ -139,12 +140,20 @@ const SettingsMenu = () => { <Divider /> <List> {admin && ( - <MenuItem - title={t('settingsServer')} - link="/settings/server" - icon={<StorageIcon />} - selected={location.pathname === '/settings/server'} - /> + <> + <MenuItem + title={t('serverAnnouncement')} + link="/settings/announcement" + icon={<CampaignIcon />} + selected={location.pathname === '/settings/announcement'} + /> + <MenuItem + title={t('settingsServer')} + link="/settings/server" + icon={<StorageIcon />} + selected={location.pathname === '/settings/server'} + /> + </> )} <MenuItem title={t('settingsUsers')} |