diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json index b9d261a3..e4982fe7 100644 --- a/web/public/static/langs/en.json +++ b/web/public/static/langs/en.json @@ -250,6 +250,10 @@ "prefs_access_table_perms_private": "Only I can publish and subscribe", "prefs_access_table_perms_public_read": "I can publish, everyone can subscribe", "prefs_access_table_perms_public": "Everyone can publish and subscribe", + "prefs_access_dialog_title_add": "Reserve topic", + "prefs_access_dialog_title_edit": "Edit reserved topic", + "prefs_access_dialog_topic_label": "Topic", + "prefs_access_dialog_access_label": "Access", "priority_min": "min", "priority_low": "low", "priority_default": "default", diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js index 54628fcd..49d54889 100644 --- a/web/src/components/Preferences.js +++ b/web/src/components/Preferences.js @@ -5,7 +5,7 @@ import { CardContent, FormControl, Select, - Stack, + Stack, styled, Table, TableBody, TableCell, @@ -41,6 +41,9 @@ import accountApi, {UnauthorizedError} from "../app/AccountApi"; import {Pref, PrefGroup} from "./Pref"; import {useOutletContext} from "react-router-dom"; import LockIcon from "@mui/icons-material/Lock"; +import {Public, PublicOff} from "@mui/icons-material"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; const Preferences = () => { return ( @@ -515,14 +518,14 @@ const Access = () => { - {/**/} + ); @@ -532,11 +535,11 @@ const AccessTable = (props) => { const { t } = useTranslation(); const [dialogKey, setDialogKey] = useState(0); const [dialogOpen, setDialogOpen] = useState(false); - const [dialogUser, setDialogUser] = useState(null); + const [dialogEntry, setDialogEntry] = useState(null); - const handleEditClick = (user) => { + const handleEditClick = (entry) => { setDialogKey(prev => prev+1); - setDialogUser(user); + setDialogEntry(entry); setDialogOpen(true); }; @@ -584,18 +587,91 @@ const AccessTable = (props) => { ))} - {/**/} + /> ); }; +const AccessDialog = (props) => { + const { t } = useTranslation(); + const [topic, setTopic] = useState(""); + const [access, setAccess] = useState("private"); + const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); + const editMode = props.entry !== null; + const addButtonEnabled = (() => { + // FIXME + })(); + const handleSubmit = async () => { + props.onSubmit({ + topic: topic, + // FIXME + }) + }; + useEffect(() => { + if (editMode) { + setTopic(props.topic); + //setAccess(props.access); + } + }, [editMode, props]); + return ( + + {editMode ? t("prefs_access_dialog_title_edit") : t("prefs_access_dialog_title_add")} + + {!editMode && setTopic(ev.target.value)} + type="url" + fullWidth + variant="standard" + />} + + + + + + + + + + ); +}; + const maybeUpdateAccountSettings = async (payload) => { if (!session.exists()) { return;