Continued work on publishing from the web app

web/src/components/SendDialog.js

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import {useState} from 'react';
+import {NotificationItem} from "./Notifications";
+import theme from "./theme";
+import {Link, Rating, useMediaQuery} from "@mui/material";
+import TextField from "@mui/material/TextField";
+import priority1 from "../img/priority-1.svg";
+import priority2 from "../img/priority-2.svg";
+import priority3 from "../img/priority-3.svg";
+import priority4 from "../img/priority-4.svg";
+import priority5 from "../img/priority-5.svg";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+
+const priorityFiles = {
+    1: priority1,
+    2: priority2,
+    3: priority3,
+    4: priority4,
+    5: priority5
+};
+
+function IconContainer(props) {
+    const { value, ...other } = props;
+    return <span {...other}><img src={priorityFiles[value]}/></span>;
+}
+
+const PrioritySelect = () => {
+    return (
+        <Rating
+            defaultValue={3}
+            IconContainerComponent={IconContainer}
+            highlightSelectedOnly
+        />
+    );
+}
+
+const SendDialog = (props) => {
+    const [topicUrl, setTopicUrl] = useState(props.topicUrl);
+    const [message, setMessage] = useState(props.message || "");
+    const [title, setTitle] = useState("");
+    const [tags, setTags] = useState("");
+    const [click, setClick] = useState("");
+    const [email, setEmail] = useState("");
+    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const sendButtonEnabled = (() => {
+        return true;
+    })();
+    const handleSubmit = async () => {
+        props.onSubmit({
+            baseUrl: "xx",
+            username: username,
+            password: password
+        })
+    };
+    return (
+        <Dialog open={props.open} onClose={props.onCancel} fullScreen={fullScreen}>
+            <DialogTitle>Publish notification</DialogTitle>
+            <DialogContent>
+                <TextField
+                    margin="dense"
+                    label="Topic URL"
+                    value={topicUrl}
+                    onChange={ev => setTopicUrl(ev.target.value)}
+                    type="text"
+                    variant="standard"
+                    fullWidth
+                    required
+                />
+                <TextField
+                    margin="dense"
+                    label="Message"
+                    value={message}
+                    onChange={ev => setMessage(ev.target.value)}
+                    type="text"
+                    variant="standard"
+                    fullWidth
+                    required
+                    autoFocus
+                    multiline
+                />
+                <TextField
+                    margin="dense"
+                    label="Title"
+                    value={title}
+                    onChange={ev => setTitle(ev.target.value)}
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                />
+                <TextField
+                    margin="dense"
+                    label="Tags"
+                    value={tags}
+                    onChange={ev => setTags(ev.target.value)}
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                />
+                <TextField
+                    margin="dense"
+                    label="Click URL"
+                    value={click}
+                    onChange={ev => setClick(ev.target.value)}
+                    type="url"
+                    fullWidth
+                    variant="standard"
+                />
+                <TextField
+                    margin="dense"
+                    label="Email"
+                    value={email}
+                    onChange={ev => setEmail(ev.target.value)}
+                    type="email"
+                    fullWidth
+                    variant="standard"
+                />
+                <PrioritySelect/>
+                <Typography variant="body1">
+                    For details on what these fields mean, please check out the
+                    {" "}<Link href="/docs">documentation</Link>.
+                </Typography>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.onCancel}>Cancel</Button>
+                <Button onClick={handleSubmit} disabled={!sendButtonEnabled}>Send</Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default SendDialog;