From 37e77d340519fefa9e9b45e0a43fca875eac98db Mon Sep 17 00:00:00 2001 From: matt Date: Mon, 25 Jul 2022 00:51:20 +0000 Subject: [PATCH] Add single event page --- public/single.html | 60 ++++++++++++++++++++++++++++++++++++++++ public/single.js | 65 ++++++++++++++++++++++++++++++++++++++++++++ src/payload-types.ts | 2 ++ src/server.ts | 4 +++ 4 files changed, 131 insertions(+) create mode 100644 public/single.html create mode 100644 public/single.js diff --git a/public/single.html b/public/single.html new file mode 100644 index 0000000..ca74371 --- /dev/null +++ b/public/single.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + Event + + + + + + +
+ +

Trip Schedule

+ +
+ +
+
+
+

+ +
+ +
+

Times

+
+ Starts at: + +
+
+ Ends at: + +
+
+ +
+

Location

+

+

+
+ +
+

Notes

+

+

+
+
+
+ + + + diff --git a/public/single.js b/public/single.js new file mode 100644 index 0000000..b3e2dfb --- /dev/null +++ b/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(); diff --git a/src/payload-types.ts b/src/payload-types.ts index 40cde95..1c926b0 100644 --- a/src/payload-types.ts +++ b/src/payload-types.ts @@ -41,4 +41,6 @@ export interface Event { }; start: string; end?: string; + location?: string; + notes?: string; } diff --git a/src/server.ts b/src/server.ts index 39fbeff..8f8ee2a 100644 --- a/src/server.ts +++ b/src/server.ts @@ -33,4 +33,8 @@ payload.init({ app.use(express.static(path.join(__dirname, '../public'))); +app.get(/^\/[0-9a-fA-F]{24}$/, (req, res) => { + res.redirect(`/single.html?event=${req.path.split('/')[1]}`); +}); + app.listen(process.env.LISTEN_PORT);