Add uploads page

2022-07-25 22:05:04 +00:00
parent 91d16ced01
commit 217f86e5af
2 changed files with 91 additions and 0 deletions
--- a/public/uploads.html
+++ b/public/uploads.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+	<meta charset='UTF-8'>
+	<meta name='viewport' content='width=device-width, initial-scale=1'>
+
+	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+
+	<title>Uploads</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='flex justify-between p-4 shadow-sm w-screen bg-white z-10'>
+		<div class='flex gap-6 items-center flex-wrap'>
+			<a href='/'>
+				<h1 class='text-3xl'>Trip Schedule</h1>
+			</a>
+			<nav>
+				<ul class='flex gap-4'>
+					<li><a href='/' class='hover:underline'>Home</a></li>
+					<li><a href='/uploads.html' class='hover:underline'>Uploads</a></li>
+					<li><a href='/admin' class='hover:underline'>Admin</a></li>
+				</ul>
+			</nav>
+		</div>
+	</header>
+
+	<div id='container' class='min-h-screen z-0 p-8 bg-gray-100'>
+		<div id='uploads' class='drop-shadow-md rounded-md p-4 bg-white relative'>
+
+		</div>
+	</div>
+
+	<template id='upload-item'>
+		<div>
+			<a class='upload-link hover:underline'></a>
+		</div>
+	</template>
+
+	<script src='uploads.js' type='module'></script>
+</body>
+</html>
--- a/public/uploads.js
+++ b/public/uploads.js
@@ -0,0 +1,43 @@
+const uploadTemplate = document.getElementById('upload-item');
+const uploadsContainer = document.getElementById('uploads');
+
+async function main() {
+	const query = {
+		sort: 'filename',
+		limit: 50
+	};
+
+	const stringifiedQuery = Qs.stringify({
+		...query
+	},
+	{
+		addQueryPrefix: true
+	}
+	);
+
+	const uploads = await (await fetch(`/api/uploads${stringifiedQuery}`)).json();
+
+	console.log(uploads);
+
+	if (uploads.errors) {
+		const $elem = document.createElement('span');
+		$elem.classList.add('text-red-600');
+		$elem.innerText =
+			uploads.errors[0].message +
+			'\nIf you are not logged in, please log in to view this page';
+
+		uploadsContainer.appendChild($elem);
+		return;
+	}
+
+	for (const upload of uploads.docs) {
+		const $upload = uploadTemplate.content.cloneNode(true);
+
+		$upload.querySelector('.upload-link').innerText = upload.filename;
+		$upload.querySelector('.upload-link').setAttribute('href', upload.url);
+
+		uploadsContainer.append($upload);
+	}
+}
+
+main();