From 78c8b9281b2d487f00bbb7a8f2ea9c293a4df87e Mon Sep 17 00:00:00 2001 From: Zaida Le Date: Thu, 12 Dec 2024 22:51:53 -0500 Subject: [PATCH] Updated README.md --- README.md | 2 +- .../source/components/eventPage/compare.js | 208 ------------------ .../source/components/eventPage/eventPage.js | 22 +- frontend/source/index.html | 2 + 4 files changed, 21 insertions(+), 213 deletions(-) delete mode 100644 frontend/source/components/eventPage/compare.js diff --git a/README.md b/README.md index 42ec7171..b353d241 100644 --- a/README.md +++ b/README.md @@ -23,11 +23,11 @@ Follow these steps to set up and run the project locally: - Navigate to the backend directory: cd backend - Install dependencies: npm install - Start the server: node server.js +- You will be directed to the login page, once authenticated, you will be brought to the home page ### Frontend Setup - Navigate to the frontend directory - Open source/index.html in your browser to see the home page -- To test Google authenication open source/components/login/login.html in your browser to see the home page ## Issues that we ran into diff --git a/frontend/source/components/eventPage/compare.js b/frontend/source/components/eventPage/compare.js deleted file mode 100644 index de8e0b4a..00000000 --- a/frontend/source/components/eventPage/compare.js +++ /dev/null @@ -1,208 +0,0 @@ -import { openEventForm } from "../eventCreationForm/eventCreationForm.js"; - -export function showEventDetails(event) { - const eventDetailView = - document.getElementById("event-detail-view") || - document.createElement("div"); - eventDetailView.id = "event-detail-view"; - eventDetailView.classList.add("event-detail-view"); - document.body.appendChild(eventDetailView); - - eventDetailView.innerHTML = ` -
-
- - ${ - event.title - } -

${event.title}

-

Genre: ${event.genre || "N/A"}

-

Location: ${ - event.location || "N/A" - }

- - - - ${ - event.host === getCurrentUserName() - ? `` - : "" - } -
-
-
- Map Placeholder -
- -
-
-

Reviews

-
-
-
-
- - -
-
- -
- -
- `; - - document - .getElementById("add-to-interested") - .addEventListener("click", () => updateInterested(event)); - document.getElementById("back-to-main").addEventListener("click", backToMain); - document - .getElementById("share-button") - .addEventListener("click", () => shareEvent(event)); - document.getElementById("rsvp-button").addEventListener("click", rsvpEvent); - document - .getElementById("submit-review") - .addEventListener("click", (event) => submitReview(event)); - - if (event.host === getCurrentUserName()) { - document - .getElementById("edit-event-button") - .addEventListener("click", () => { - openEventForm(event.id); - }); - } -} - -//fot testing - -localStorage.setItem("currentUser", "Rock Society"); - -// this will be replaced with logic to get the current user -function getCurrentUserName() { - const currentUser = localStorage.getItem("currentUser") || "Guest"; - console.log(`Current User: ${currentUser}`); - return currentUser; -} - -function updateInterested(event) { - event.interested = !event.interested; - document.getElementById("add-to-interested").textContent = event.interested - ? "Remove" - : "Add"; - alert( - `Event ${ - event.interested ? "added to" : "removed from" - } your Interested list!` - ); -} - -function backToMain() { - const eventDetailView = document.getElementById("event-detail-view"); - if (eventDetailView) eventDetailView.remove(); - - document.getElementById("popular-events").style.display = "block"; - document.getElementById("events-for-you").style.display = "block"; - document.getElementById("search-results").style.display = "none"; - document.getElementById("map-container").style.display = "none"; -} - -function shareEvent(event) { - const eventUrl = `${window.location.origin}${ - window.location.pathname - }?event=${encodeURIComponent(event.title)}`; - - navigator.clipboard - .writeText(eventUrl) - .then(() => alert(`Event link copied to clipboard: ${eventUrl}`)) - .catch((error) => console.error("Error", error)); -} - -async function submitReview(event) { - // get the typed text - event.preventDefault(); - const reviewText = document.getElementById("review-text").value; - const eventTitle = document.querySelector(".event-detail-title"); - const eventName = eventTitle - ? eventTitle.innerText - : "No event name available"; - // if there is text, then we need to post to db - if (reviewText) { - const response = await fetch("http://127.0.0.1:4000/api/reviews", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - // in db, records contain the text and the event its for - body: JSON.stringify({ - review_text: reviewText, - event_name: eventName, - }), - }); - - // the post request should return res with just the text - const newReview = await response.json(); - if (response.ok) { - const reviewBox = document.getElementById("review-box"); - reviewBox.innerHTML += `

${newReview.review_text}

`; // Append review - document.getElementById("review-text").value = ""; // Clear text area - alert("Review Submitted!"); - } else { - alert("Failed to submit review"); - } - } else { - alert("Please write a review"); - } -} - -function rsvpEvent(event) { - const modal = document.getElementById("rsvp-modal"); - if (!modal) { - const modalElement = document.createElement("div"); - modalElement.id = "rsvp-modal"; - modalElement.classList.add("modal"); - modalElement.innerHTML = ` -
- × -

RSVP for ${event.title}

-
- - - - - - - - - - -
-
- `; - - document.body.appendChild(modalElement); - - document - .querySelector(".close") - .addEventListener("click", () => (modalElement.style.display = "none")); - - document.getElementById("rsvp-form").addEventListener("submit", (e) => { - e.preventDefault(); - const attendance = document.getElementById("attendance").value; - const attendeesCount = document.getElementById("attendees").value; - const comments = document.getElementById("comments").value; - - console.log(`RSVP for event: ${event.title}`); - console.log(`Attendance: ${attendance}`); - console.log(`Number of people: ${attendeesCount}`); - console.log(`Comments: ${comments}`); - - modalElement.style.display = "none"; - }); - } - modal.style.display = "block"; -} diff --git a/frontend/source/components/eventPage/eventPage.js b/frontend/source/components/eventPage/eventPage.js index 0d7f3f5b..fc4a5a35 100644 --- a/frontend/source/components/eventPage/eventPage.js +++ b/frontend/source/components/eventPage/eventPage.js @@ -116,6 +116,7 @@ async function submitReview() { event_name: eventName, }); + // Fetching from Post API endpoint const response = await fetch("http://127.0.0.1:4000/api/reviews", { method: "POST", headers: { @@ -123,7 +124,7 @@ async function submitReview() { }, body: review, }); - + // error handling if (response.ok) { alert("Review has been submitted!"); } else { @@ -179,11 +180,15 @@ async function fetchAndDisplayReviews(eventName) { function rsvpEvent(event) { + // Check if the RSVP modal element already exists const modal = document.getElementById("rsvp-modal"); if (!modal) { + // Create the modal element if it doesn't exist const modalElement = document.createElement("div"); modalElement.id = "rsvp-modal"; - modalElement.classList.add("modal"); + modalElement.classList.add("modal"); // Add the "modal" class for styling + + // Set the modal content (HTML structure) modalElement.innerHTML = `
× @@ -207,25 +212,34 @@ function rsvpEvent(event) {
`; + // Append the modal element to the body document.body.appendChild(modalElement); + // Add click event listener for the close button (X) document .querySelector(".close") .addEventListener("click", () => (modalElement.style.display = "none")); + // Add submit event listener for the RSVP form document.getElementById("rsvp-form").addEventListener("submit", (e) => { - e.preventDefault(); + e.preventDefault(); // Prevent default form submission behavior + + // Get the user's RSVP details const attendance = document.getElementById("attendance").value; const attendeesCount = document.getElementById("attendees").value; const comments = document.getElementById("comments").value; + // Log the RSVP details to the console console.log(`RSVP for event: ${event.name}`); console.log(`Attendance: ${attendance}`); console.log(`Number of people: ${attendeesCount}`); console.log(`Comments: ${comments}`); + // Hide the modal after submission modalElement.style.display = "none"; }); } - modal.style.display = "block"; + + // If the modal already exists, just show it + modal.style.display = "block"; // Display the modal element } diff --git a/frontend/source/index.html b/frontend/source/index.html index c18f054a..b909b903 100644 --- a/frontend/source/index.html +++ b/frontend/source/index.html @@ -7,6 +7,8 @@ LocalVibes + +