|
|
@@ -1,26 +1,53 @@
|
|
|
+/**
|
|
|
+ * Import necessary utility functions from utils.js
|
|
|
+ */
|
|
|
import {fetchRegular, fetchWithToken, getTimeSpan, parseOrRedirect} from "./utils.js";
|
|
|
-"use strict";
|
|
|
|
|
|
+/**
|
|
|
+ * Event listener for the window load event.
|
|
|
+ * Retrieves the appointment ID from the URL query parameters and fetches the appointment details.
|
|
|
+ */
|
|
|
window.addEventListener("load", async function () {
|
|
|
+ /**
|
|
|
+ * Get the URL query parameters
|
|
|
+ */
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
const appointment = urlParams.get('appointment');
|
|
|
+
|
|
|
+ /**
|
|
|
+ * If no appointment ID is found, redirect to the 404 page
|
|
|
+ */
|
|
|
if (!appointment) {
|
|
|
window.location.replace("/html/404.html");
|
|
|
}
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Fetch the appointment details and bookings
|
|
|
+ */
|
|
|
await getAppointment(appointment);
|
|
|
await fetchBookings(appointment);
|
|
|
});
|
|
|
|
|
|
+/**
|
|
|
+ * Displays the appointment details in the appointment-info container.
|
|
|
+ * @param {Object} appointmentData - The appointment data object
|
|
|
+ */
|
|
|
function displayAppointmentDetails(appointmentData) {
|
|
|
- // Retrieve the container
|
|
|
+ /**
|
|
|
+ * Retrieve the appointment-info container
|
|
|
+ */
|
|
|
const appointmentInfo = document.querySelector('.appointment-info');
|
|
|
|
|
|
- // Clear existing content
|
|
|
+ /**
|
|
|
+ * Clear existing content
|
|
|
+ */
|
|
|
while (appointmentInfo.firstChild) {
|
|
|
appointmentInfo.removeChild(appointmentInfo.firstChild);
|
|
|
}
|
|
|
|
|
|
- // Create and append the updated appointment content
|
|
|
+ /**
|
|
|
+ * Create and append the updated appointment content
|
|
|
+ */
|
|
|
const title = document.createElement('p');
|
|
|
const titleLabel = document.createElement('strong');
|
|
|
titleLabel.textContent = 'Title: ';
|
|
|
@@ -51,7 +78,9 @@ function displayAppointmentDetails(appointmentData) {
|
|
|
timeSpan.appendChild(timeSpanLabel);
|
|
|
timeSpan.appendChild(document.createTextNode(getTimeSpan(appointmentData.startDate, appointmentData.endDate)));
|
|
|
|
|
|
- // Append all the updated elements
|
|
|
+ /**
|
|
|
+ * Append all the updated elements
|
|
|
+ */
|
|
|
appointmentInfo.appendChild(title);
|
|
|
appointmentInfo.appendChild(description);
|
|
|
appointmentInfo.appendChild(place);
|
|
|
@@ -59,56 +88,100 @@ function displayAppointmentDetails(appointmentData) {
|
|
|
appointmentInfo.appendChild(timeSpan);
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Fetches the appointment details from the API.
|
|
|
+ * @param {string} appointment - The appointment ID
|
|
|
+ */
|
|
|
async function getAppointment(appointment) {
|
|
|
+ /**
|
|
|
+ * Set the request options
|
|
|
+ */
|
|
|
const options = {method: 'GET', headers: {'User-Agent': 'insomnia/10.0.0'}};
|
|
|
|
|
|
+ /**
|
|
|
+ * Set the query parameters
|
|
|
+ */
|
|
|
const searchParams = new URLSearchParams({
|
|
|
appointmentId: appointment,
|
|
|
isUser: true
|
|
|
});
|
|
|
|
|
|
+ /**
|
|
|
+ * Fetch the appointment details
|
|
|
+ */
|
|
|
const response = await fetchRegular(`/api/schedule?` + searchParams.toString(), options)
|
|
|
.catch(err => console.error('error:' + err));
|
|
|
|
|
|
+ /**
|
|
|
+ * Parse the response and display the appointment details
|
|
|
+ */
|
|
|
const js = await parseOrRedirect(response);
|
|
|
displayAppointmentDetails(js);
|
|
|
}
|
|
|
|
|
|
-
|
|
|
+/**
|
|
|
+ * Renders the bookings data in the participants-table-body container.
|
|
|
+ * @param {Array<Object>} data - The bookings data array
|
|
|
+ */
|
|
|
function renderBookings(data) {
|
|
|
+ /**
|
|
|
+ * Retrieve the participants-table-body container
|
|
|
+ */
|
|
|
const tableBody = document.getElementById('participants-table-body');
|
|
|
tableBody.innerHTML = ''; // Clear existing rows
|
|
|
|
|
|
+ /**
|
|
|
+ * Iterate over the bookings data and create table rows
|
|
|
+ */
|
|
|
data.forEach(participant => {
|
|
|
- // Create a new table row
|
|
|
+ /**
|
|
|
+ * Create a new table row
|
|
|
+ */
|
|
|
const row = document.createElement('tr');
|
|
|
|
|
|
- // Create table cells for first name, last name, and email
|
|
|
+ /**
|
|
|
+ * Create table cells for first name, last name, and email
|
|
|
+ */
|
|
|
const firstNameCell = document.createElement('td');
|
|
|
const lastNameCell = document.createElement('td');
|
|
|
const emailCell = document.createElement('td');
|
|
|
|
|
|
- // Populate cell content with participant data
|
|
|
+ /**
|
|
|
+ * Populate cell content with participant data
|
|
|
+ */
|
|
|
firstNameCell.textContent = participant.firstname;
|
|
|
lastNameCell.textContent = participant.lastname;
|
|
|
emailCell.textContent = participant.email;
|
|
|
|
|
|
- // Append cells to the row
|
|
|
+ /**
|
|
|
+ * Append cells to the row
|
|
|
+ */
|
|
|
row.appendChild(firstNameCell);
|
|
|
row.appendChild(lastNameCell);
|
|
|
row.appendChild(emailCell);
|
|
|
|
|
|
- // Append the row to the table body
|
|
|
+ /**
|
|
|
+ * Append the row to the table body
|
|
|
+ */
|
|
|
tableBody.appendChild(row);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
-
|
|
|
+/**
|
|
|
+ * Fetches the bookings data from the API.
|
|
|
+ * @param {string} appointmentId - The appointment ID
|
|
|
+ */
|
|
|
async function fetchBookings(appointmentId) {
|
|
|
+ /**
|
|
|
+ * Set the query parameters
|
|
|
+ */
|
|
|
const searchParams = new URLSearchParams({
|
|
|
appointmentId: appointmentId,
|
|
|
});
|
|
|
|
|
|
+ /**
|
|
|
+ * Fetch the bookings data
|
|
|
+ */
|
|
|
const response = await fetchWithToken('/api/users/bookings?' + searchParams.toString());
|
|
|
const js = await parseOrRedirect(response);
|
|
|
renderBookings(js);
|