blob: a84d291d7368b747dacde077bd3d9dc48d8878c1 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import { Calendar } from './Icons.js';
const API_URL = import.meta.env.VITE_API_URL;
const loadEventsData = async () => {
try {
const response = await fetch(`${API_URL}/events`);
return response.json();
} catch (e) {
console.error(e);
}
}
export const EventModal = (event) => {
const formId = `rsvp-form-${event.ID}`;
const modalId = `modal-event-${event.id}`
return `<dialog id="${modalId}">
<article>
<header>
<button
aria-label="Close"
rel="prev"
data-target="${modalId}"
class="toggle-modal"
></button>
<h3>RSVP to ${event.title}</h3>
</header>
<form id="${formId}" data-modal="${modalId}"
action="${API_URL}/events/${event.id}/rsvp"
method="POST"
>
<label for="rsvp-name-${event.id}">Name:
<input type="text" id="rsvp-name-${event.id}" class="rsvp-name" name="name" required />
</label>
<label for="rsvp-email-${event.id}">Email:
<input type="email" id="rsvp-email-${event.id}" class="rsvp-email" name="email" required />
</label>
</form>
<footer>
<button
role="button"
class="toggle-modal cancel"
data-target="${modalId}"
>Cancel</button>
<button id="submit-${formId}" role="button" form="${formId}" type="submit">Submit RSVP</button>
</footer>
</article>
</dialog>`
}
export const EventCard = (e) => {
const eventDate = new Date(e.date);
const isPast = eventDate < new Date();
return `
<article class="event" >
<header>
${e.image_url && `<img src=${e.image_url} alt="${e.title} thumbnail" />`}
</header>
<main>
<h4>${e.title}</h4>
<p>${Calendar} ${eventDate.toLocaleDateString()}</p>
<p>Host: ${e.host?.name || `User ${e.host_id}`}</p>
${e.description && `<p>${e.description}</p>`}
</main>
<footer>
<span>
${e.rsvps?.length || 0} ${isPast ? 'went' : 'going'}
</span>
${!isPast ? `
<button role="button" data-target="modal-event-${e.id}" class="toggle-modal"
title="RSVP to ${e.title}"
>
RSVP
</button>`: ''}
</footer>
${EventModal(e)}
</article>
`
}
export const EventsSection = (title, events) => {
return `
<section class='events'>
<h2>${title} events </h2>
<div role = "group">
${events.map((e) => EventCard(e)).join('') || 'No events'}
</div>
</section>`;
}
// IIFE to asynchronously load the Event data before exporting the component
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
export const Events = await (async () => {
const all = await loadEventsData();
const past = all.filter((e) => (new Date(e.date) < new Date()));
const upcoming = all.filter((e) => (new Date(e.date) > new Date()));
return `
${EventsSection('Upcoming', upcoming)}
${EventsSection('Past', past)}
`})()
|
