Add single event page

public/single.js

@@ -0,0 +1,65 @@
+const $event = document.getElementById('event');
+const searchParams = new URLSearchParams(document.location.search);
+
+const eventId = searchParams.get('event');
+
+const googleAPIEndpoint = 'https://www.google.com/maps/dir/?api=1';
+
+const getDirectionLink = (location) => {
+	const $elem = document.createElement('a');
+	const encodedLocation = encodeURIComponent(location);
+	const dirLink = `${googleAPIEndpoint}&destination=${encodedLocation}`;
+
+	$elem.setAttribute('href', dirLink);
+	$elem.innerText = location;
+
+	$elem.classList.add('underline');
+
+	return $elem;
+};
+
+async function main() {
+	if (!eventId)
+		return window.location.replace('/');
+
+	const query = {
+		sort: 'start',
+		where: {
+			id: {
+				equals: searchParams.get('event')
+			}
+		}
+	};
+
+	const stringifiedQuery = Qs.stringify({
+		...query
+	},
+	{
+		addQueryPrefix: true
+	}
+	);
+
+	const res = await (await fetch(`/api/events${stringifiedQuery}`)).json();
+	const event = res.docs[0];
+
+	if (!event)
+		return window.location.replace('/');
+
+	document.title = `Event: ${event.name}`;
+
+	$event.querySelector('.event-name').innerText = event.name;
+
+	const typeElem = $event.querySelector('.event-type');
+	typeElem.innerText = event.type.value.name;
+	typeElem.style.backgroundColor = event.type.value.backgroundColour;
+
+	$event.querySelector('.event-start .event-datetime').innerText = event.start;
+	$event.querySelector('.event-end .event-datetime').innerText = event.end ? event.end : 'N/A';
+
+	if (event.location)
+		$event.querySelector('.event-location').appendChild(getDirectionLink(event.location));
+
+	$event.querySelector('.event-notes').innerText = event.notes ?? '';
+}
+
+main();