Add uploads page
This commit is contained in:
48
public/uploads.html
Normal file
48
public/uploads.html
Normal file
@@ -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>
|
||||||
43
public/uploads.js
Normal file
43
public/uploads.js
Normal file
@@ -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();
|
||||||
Reference in New Issue
Block a user