Notifications for task reminders (#57)

Add actions for reminders

Remove scheduled reminders

Better styling

Start adding support for triggered offline notifications

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/57

src/ServiceWorker/sw.js

@@ -36,6 +36,82 @@ self.addEventListener('message', (e) => {
 	}
 });
 
+const getBearerToken = async () => {
+	// we can't get a client that sent the current request, therefore we need
+	// to ask any controlled page for auth token
+	const allClients = await self.clients.matchAll();
+	const client = allClients.filter(client => client.type === 'window')[0];
+
+	// if there is no page in scope, we can't get any token
+	// and we indicate it with null value
+	if(!client) {
+		return null;
+	}
+
+	// to communicate with a page we will use MessageChannels
+	// they expose pipe-like interface, where a receiver of
+	// a message uses one end of a port for messaging and
+	// we use the other end for listening
+	const channel = new MessageChannel();
+
+	client.postMessage({
+		'action': 'getBearerToken'
+	}, [channel.port1]);
+
+	// ports support only onmessage callback which
+	// is cumbersome to use, so we wrap it with Promise
+	return new Promise((resolve, reject) => {
+		channel.port2.onmessage = event => {
+			if (event.data.error) {
+				console.error('Port error', event.error);
+				reject(event.data.error);
+			}
+
+			resolve(event.data.authToken);
+		}
+	});
+}
+
+// Notification action
+self.addEventListener('notificationclick', function(event) {
+	const taskID = event.notification.data.taskID
+	event.notification.close()
+
+	switch (event.action) {
+		case 'mark-as-done':
+			// FIXME: Ugly as hell, but no other way of doing this, since we can't use modules
+			// in service workersfor now.
+			fetch('/config.json')
+				.then(r => r.json())
+				.then(config => {
+
+					getBearerToken()
+						.then(token => {
+							fetch(`${config.VIKUNJA_API_BASE_URL}tasks/${taskID}`, {
+								method: 'post',
+								headers: {
+									'Accept': 'application/json',
+									'Content-Type': 'application/json',
+									'Authorization': `Bearer ${token}`,
+								},
+								body: JSON.stringify({id: taskID, done: true})
+							})
+							.then(r => r.json())
+							.then(r => {
+								console.debug('Task marked as done from notification', r)
+							})
+							.catch(e => {
+								console.debug('Error marking task as done from notification', e)
+							})
+						})
+				})
+			break
+		case 'show-task':
+			clients.openWindow(`/tasks/${taskID}`)
+			break
+	}
+})
+
 workbox.core.clientsClaim();
 // The precaching code provided by Workbox.
 self.__precacheManifest = [].concat(self.__precacheManifest || []);