Add homepage to show all events

2022-07-24 21:55:16 +00:00
parent fa6e949805
commit 909cd08275
3 changed files with 120 additions and 14 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+	<meta charset='UTF-8'>
+	<meta name='viewport' content='width=device-width, initial-scale=1'>
+
+	<title>Trip Schedule</title>
+
+	<link href='output.css' rel='stylesheet'>
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.11.0/qs.js"></script>
+</head>
+<body>
+	<header class='fixed flex justify-between p-4 shadow-sm w-screen bg-white z-10'>
+		<h1 class='text-3xl'>Trip Schedule</h1>
+	</header>
+
+	<div id='container' class='min-h-screen z-0 p-8 pt-20 bg-gray-100'>
+	</div>
+
+	<template id='events-container'>
+		<div class='my-8'>
+			<h2 class='events-container-title text-2xl mb-4'></h2>
+			<div class='grid md:grid-cols-3 lg:grid-cols-4 grid-cols-1 gap-4'>
+			</div>
+		</div>
+	</template>
+
+	<template id='event-card'>
+		<div class='shadow-xl rounded-md text-center p-4 bg-white relative'>
+			<h3 class='event-name text-2xl'></h3>
+
+			<span class='event-type py-0.5 px-3 rounded my-2 inline-block'></span>
+
+			<div class='event-date text-red-600 text-l'>
+				<span class='event-start'></span>
+				<span class='event-time-seperator hidden'> - </span>
+				<span class='event-end'></span>
+			</div>
+			<div class='event-time text-red-600 text-l'>
+				<span class='event-start'></span>
+				<span class='event-time-seperator hidden'> - </span>
+				<span class='event-end'></span>
+			</div>
+			<a class='event-link absolute inset-0 block' href=''></a>
+		</div>
+	</template>
+
+	<script src='script.js' type='module'></script>
+</body>
+</html>
--- a/public/script.js
+++ b/public/script.js
@@ -0,0 +1,66 @@
+const cardTemplate = document.getElementById('event-card');
+const eventsContainer = document.getElementById('events-container');
+const mainContainer = document.getElementById('container');
+
+
+async function main() {
+	const query = {
+		sort: 'start',
+	};
+
+	const stringifiedQuery = Qs.stringify({
+			...query
+		},
+		{
+			addQueryPrefix: true
+		}
+	);
+
+	const events = await (await fetch(`/api/events${stringifiedQuery}`)).json();
+
+	let currentDate;
+	let currentContainer;
+
+	for (const event of events.docs) {
+		if (currentDate !== event.startDate) {
+			currentContainer && mainContainer.append(currentContainer);
+
+			const c = eventsContainer.content.cloneNode(true);
+
+			c.querySelector('.events-container-title').innerText = event.startDate;
+
+			currentContainer = c;
+		}
+
+		currentDate = event.startDate;
+
+		const card = cardTemplate.content.cloneNode(true);
+
+		card.querySelector('.event-name').innerText = event.name;
+
+		const typeElem = card.querySelector('.event-type');
+		typeElem.innerText = event.type.value.name;
+		typeElem.style.backgroundColor = event.type.value.backgroundColour;
+
+		card.querySelector('.event-date .event-start').innerText = event.startDate;
+		card.querySelector('.event-time .event-start').innerText = event.startTime;
+
+		if (event.end) {
+			if (event.endDate !== event.startDate) {
+				card.querySelector('.event-date .event-end').innerText = event.endDate;
+				card.querySelector('.event-date .event-time-seperator').style.display = 'inline';
+			}
+
+			card.querySelector('.event-time .event-end').innerText = event.endTime;
+			card.querySelector('.event-time .event-time-seperator').style.display = 'inline';
+		}
+
+		card.querySelector('a.event-link').setAttribute('href', event.id);
+
+		currentContainer.querySelector('.grid').append(card);
+	}
+
+	currentContainer && mainContainer.append(currentContainer);
+}
+
+main();