astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Emojis, formatting, clear all

Browse source
This commit is contained in:
Philipp Heckel 2022-02-24 12:26:07 -05:00
parent 202c4ac4b3
commit 48523a2269
14 changed files with 313 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/src/components/App.js
View file

@ -130,6 +130,13 @@ const App = () => {
console.log(`[App] Cancel clicked`);
setSubscribeDialogOpen(false);
};
const handleClearAll = (subscriptionId) => {
console.log(`[App] Deleting all notifications from ${subscriptionId}`);
setSubscriptions(prev => {
const newSubscription = prev.get(subscriptionId).deleteAllNotifications();
return prev.update(newSubscription).clone();
});
};
const handleUnsubscribe = (subscriptionId) => {
console.log(`[App] Unsubscribing from ${subscriptionId}`);
setSubscriptions(prev => {
@ -179,6 +186,7 @@ const App = () => {
</Typography>
{selectedSubscription !== null && <DetailSettingsIcon
subscription={selectedSubscription}
onClearAll={handleClearAll}
onUnsubscribe={handleUnsubscribe}
/>}
</Toolbar>

6
web/src/components/DetailSettingsIcon.js
View file

@ -26,6 +26,11 @@ const DetailSettingsIcon = (props) => {
setOpen(false);
};
const handleClearAll = (event) => {
handleClose(event);
props.onClearAll(props.subscription.id);
};
const handleUnsubscribe = (event) => {
handleClose(event);
props.onUnsubscribe(props.subscription.id);
@ -97,6 +102,7 @@ const DetailSettingsIcon = (props) => {
onKeyDown={handleListKeyDown}
>
<MenuItem onClick={handleSendTestMessage}>Send test notification</MenuItem>
<MenuItem onClick={handleClearAll}>Clear all notifications</MenuItem>
<MenuItem onClick={handleUnsubscribe}>Unsubscribe</MenuItem>
</MenuList>
</ClickAwayListener>

22
web/src/components/NotificationList.js
View file

@ -3,12 +3,13 @@ import {CardContent, Stack} from "@mui/material";
import Card from "@mui/material/Card";
import Typography from "@mui/material/Typography";
import * as React from "react";
import {formatTitle, formatMessage, unmatchedTags} from "../app/utils";
const NotificationList = (props) => {
const sortedNotifications = props.notifications.sort((a, b) => a.time < b.time);
return (
<Container maxWidth="lg" sx={{ marginTop: 3 }}>
<Stack container spacing={3}>
<Container maxWidth="lg" sx={{ marginTop: 3, marginBottom: 3 }}>
<Stack spacing={3}>
{sortedNotifications.map(notification =>
<NotificationItem key={notification.id} notification={notification}/>)}
</Stack>
@ -20,13 +21,22 @@ const NotificationItem = (props) => {
const notification = props.notification;
const date = new Intl.DateTimeFormat('default', {dateStyle: 'short', timeStyle: 'short'})
.format(new Date(notification.time * 1000));
const tags = (notification.tags && notification.tags.length > 0) ? notification.tags.join(', ') : null;
const otherTags = unmatchedTags(notification.tags);
const tags = (otherTags.length > 0) ? otherTags.join(', ') : null;
return (
<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} color="text.secondary">{date}</Typography>
{notification.title && <Typography variant="h5" component="div">{notification.title}</Typography>}
<Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>{notification.message}</Typography>
<Typography sx={{ fontSize: 14 }} color="text.secondary">
{date}
{[1,2,4,5].includes(notification.priority) &&
<img
src={`static/img/priority-${notification.priority}.svg`}
alt={`Priority ${notification.priority}`}
style={{ verticalAlign: 'bottom' }}
/>}
</Typography>
{notification.title && <Typography variant="h5" component="div">{formatTitle(notification)}</Typography>}
<Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>{formatMessage(notification)}</Typography>
{tags && <Typography sx={{ fontSize: 14 }} color="text.secondary">Tags: {tags}</Typography>}
</CardContent>
</Card>