mirror of
https://github.com/binwiederhier/ntfy.git
synced 2024-08-24 20:13:51 +02:00
137 lines
4.5 KiB
JavaScript
137 lines
4.5 KiB
JavaScript
![]() |
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;
|