aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2024-02-25 07:18:45 -0800
committerAnton Tananaev <anton@traccar.org>2024-02-25 07:18:45 -0800
commit4aa3a83b31bc329e03928d6492e22834a59aa083 (patch)
treee18cec42311cdb504a2579302f895a15ffe4810c /modern/src/settings
parent8bd7cba6f5ce56bcccda1459cdd953b3add799d6 (diff)
downloadtrackermap-web-4aa3a83b31bc329e03928d6492e22834a59aa083.tar.gz
trackermap-web-4aa3a83b31bc329e03928d6492e22834a59aa083.tar.bz2
trackermap-web-4aa3a83b31bc329e03928d6492e22834a59aa083.zip
Add announcements page
Diffstat (limited to 'modern/src/settings')
-rw-r--r--modern/src/settings/AnnouncementPage.jsx106
-rw-r--r--modern/src/settings/components/SettingsMenu.jsx21
2 files changed, 121 insertions, 6 deletions
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')}