114 lines
2.8 KiB
JavaScript

export function createEventCard(event) {
const article = document.createElement("article");
article.className = "event-card";
const title = document.createElement("h3");
title.className = "event-card__title";
title.textContent = event.name;
const formattedDate = event.date
? new Date(event.date).toLocaleDateString("de-CH", {
day: "2-digit",
month: "2-digit",
year: "numeric"
})
: "Date not available";
const formattedTime = event.time
? event.time.slice(0, 5)
: "";
const dateTime = formattedTime
? `${formattedDate}, ${formattedTime}`
: formattedDate;
const date = document.createElement("p");
date.className = "event-card__date";
date.textContent = dateTime;
const venue = document.createElement("p");
venue.className = "event-card__venue";
venue.textContent = event.venue;
article.append(title, date, venue);
// =========================
// BUTTON CONTAINER
// =========================
const buttonContainer = document.createElement("div");
buttonContainer.className = "d-flex gap-2 mt-2";
// =========================
// SAVE BUTTON
// =========================
const saveBtn = document.createElement("button");
saveBtn.textContent = "Save";
saveBtn.className = "btn btn-outline-primary btn-sm";
saveBtn.addEventListener("click", () => {
if (!window.currentUser) {
alert("Please login to save events");
return;
}
const saved = JSON.parse(localStorage.getItem("savedEvents") || "[]");
// prevent duplicates
if (saved.find(e => e.id === event.id)) {
alert("Event already saved");
return;
}
saved.push(event);
localStorage.setItem("savedEvents", JSON.stringify(saved));
alert("Event saved!");
});
saveBtn.disabled = !window.currentUser;
// =========================
// INVITE BUTTON
// =========================
const inviteBtn = document.createElement("button");
inviteBtn.textContent = "Invite";
inviteBtn.className = "btn btn-primary btn-sm";
inviteBtn.addEventListener("click", async () => {
if (!window.currentUser) {
alert("Please login to invite users");
return;
}
const toUser = prompt("Enter username to invite:");
if (!toUser) return;
await fetch("http://localhost:3000/api/invitation", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Username": window.currentUser
},
body: JSON.stringify({
toUser,
eventId: event.id,
eventName: event.name
})
});
alert("Invitation sent!");
});
inviteBtn.disabled = !window.currentUser;
// =========================
// APPEND BUTTONS
// =========================
buttonContainer.append(saveBtn, inviteBtn);
article.appendChild(buttonContainer);
return article;
}