matt/summer-dci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add homepage to show all events

Browse Source
This commit is contained in:
matt
2022-07-24 21:55:16 +00:00
parent fa6e949805
commit 909cd08275
3 changed files with 120 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/index.html Normal file
View File

@@ -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>

66
public/script.js Normal file
View File

@@ -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();

17
src/server.ts
View File

@@ -1,9 +1,10 @@
import * as dotenv from 'dotenv'; import * as dotenv from 'dotenv';
import express from 'express'; import express from 'express';
import path from 'path';
import payload from 'payload'; import payload from 'payload';
import findEventsOnDay from './helpers/findEventsOnDay'; // import findEventsOnDay from './helpers/findEventsOnDay';
dotenv.config(); dotenv.config();
@@ -30,18 +31,6 @@ payload.init({
} }
}); });
app.get('/', async (req, res) => { app.use(express.static(path.join(__dirname, '../public')));
const docs = await payload.find({
collection: 'events',
sort: 'startTime',
pagination: false
});
res.json(docs);
});
app.get('/day/:day', async (req, res) => {
res.json(await findEventsOnDay(payload, req.params.day));
});
app.listen(process.env.LISTEN_PORT); app.listen(process.env.LISTEN_PORT);