Fixes issue #29

backend/reminders.py

@@ -393,3 +393,26 @@ class Reminders:
 
 		# Return info
 		return self.fetchone(id)
+
+def test_reminder(
+	title: str,
+	notification_service: int,
+	text: str = ''
+) -> None:
+	"""Test send a reminder draft
+
+	Args:
+		title (str): Title title of the entry
+		notification_service (int): The id of the notification service to use to send the reminder
+		text (str, optional): The body of the reminder. Defaults to ''.
+	"""
+	a = Apprise()
+	url = get_db(dict).execute(
+		"SELECT url FROM notification_services WHERE id = ?",
+		(notification_service,)
+	).fetchone()
+	if not url:
+		raise NotificationServiceNotFound
+	a.add(url[0])
+	a.notify(title=title, body=text)
+	return

frontend/api.py

@@ -14,7 +14,7 @@ from backend.custom_exceptions import (AccessUnauthorized, InvalidKeyValue,
                                        UsernameTaken, UserNotFound)
 from backend.notification_service import (NotificationService,
                                           NotificationServices)
-from backend.reminders import Reminders, reminder_handler
+from backend.reminders import Reminders, reminder_handler, test_reminder
 from backend.templates import Template, Templates
 from backend.users import User, register_user
 
@@ -459,6 +459,18 @@ def api_reminders_query():
 	result = g.user_data.reminders.search(query)
 	return return_api(result)
 
+@api.route('/reminders/test', methods=['POST'])
+@error_handler
+@auth
+def api_test_reminder():
+	data = request.get_json()
+	title = extract_key(data, 'title')
+	notification_service = extract_key(data, 'notification_service')
+	text = extract_key(data, 'text', check_existence=False)
+
+	test_reminder(title, notification_service, text)
+	return return_api({}, code=201)
+
 @api.route('/reminders/<int:r_id>', methods=['GET','PUT','DELETE'])
 @error_handler
 @auth

frontend/static/css/add_edit.css

@@ -112,6 +112,26 @@ div.options > button {
 	color: var(--color-error);
 }
 
+#test-reminder {
+	display: flex;
+	gap: 1rem;
+	
+	overflow-x: hidden;
+}
+
+#test-reminder > div {
+	width: 100%;
+	flex: 0 0 auto;
+	
+	font-size: inherit;
+	
+	transition: transform .1s linear;
+}
+
+#test-reminder.show-sent > div {
+	transform: translateX(calc(-100% - 1rem));
+}
+
 @media (max-width: 460px) {
 	.sub-inputs > input,
 	.sub-inputs > select {

frontend/static/js/add.js

@@ -74,6 +74,7 @@ function closeAdd() {
 		inputs.notification_service.value = document.querySelector('#notification-service-input option[selected]').value;
 		toggleNormal();
 		inputs.text.value = '';
+		document.getElementById('test-reminder').classList.remove('show-sent');
 	}, 500);
 };
 
@@ -89,11 +90,45 @@ function toggleNormal() {
 function toggleRepeated() {
 	type_buttons['normal-button'].dataset.selected = 'false';
 	type_buttons['repeat-button'].dataset.selected = 'true';
-	
+
 	type_buttons['repeat-bar'].classList.remove('hidden');
 	type_buttons['repeat-interval'].setAttribute('required', '');
 };
 
+function testReminder() {
+	const input = document.getElementById('test-reminder');
+	if (inputs.title.value === '') {
+		input.classList.add('error-input');
+		input.title = 'No title set';
+		return
+	} else {
+		input.classList.remove('error-input');
+		input.removeAttribute('title');
+	};
+	const data = {
+		'title': inputs.title.value,
+		'notification_service': inputs.notification_service.value,
+		'text': inputs.text.value
+	};
+	fetch(`/api/reminders/test?api_key=${api_key}`, {
+		'method': 'POST',
+		'headers': {'Content-Type': 'application/json'},
+		'body': JSON.stringify(data)
+	})
+	.then(response => {
+		// catch errors
+		if (!response.ok) {
+			return Promise.reject(response.status);
+		};
+		input.classList.add('show-sent');		
+	})
+	.catch(e => {
+		if (e === 401) {
+			window.location.href = '/';
+		};
+	});
+};
+
 // code run on load
 
 document.getElementById('add-form').setAttribute('action', 'javascript:addReminder();');
@@ -101,3 +136,4 @@ document.getElementById('template-selection').addEventListener('change', e => lo
 document.getElementById('normal-button').addEventListener('click', e => toggleNormal());
 document.getElementById('repeat-button').addEventListener('click', e => toggleRepeated());
 document.getElementById('close-add').addEventListener('click', e => closeAdd());
+document.getElementById('test-reminder').addEventListener('click', e => testReminder());

frontend/templates/reminders.html

@@ -178,6 +178,10 @@
 						<textarea id="text-input" cols="30" rows="10" placeholder="Text (optional)"></textarea>
 						<div class="options">
 							<button type="button" id="close-add">Cancel</button>
+							<button type="button" id="test-reminder">
+								<div>Test</div>
+								<div>Sent</div>
+							</button>
 							<button type="submit">Add</button>
 						</div>
 					</form>