Scheduler-Backend/public/javascripts/bookings.js

/**
 * Import necessary utility functions from utils.js
 */
import {fetchRegular, fetchWithToken, getTimeSpan, parseOrRedirect} from "./utils.js";

/**
 * 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 appointment-info container
     */
    const appointmentInfo = document.querySelector('.appointment-info');

    /**
     * Clear existing content
     */
    while (appointmentInfo.firstChild) {
        appointmentInfo.removeChild(appointmentInfo.firstChild);
    }

    /**
     * Create and append the updated appointment content
     */
    const title = document.createElement('p');
    const titleLabel = document.createElement('strong');
    titleLabel.textContent = 'Title: ';
    title.appendChild(titleLabel);
    title.appendChild(document.createTextNode(appointmentData.title));

    const description = document.createElement('p');
    const descriptionLabel = document.createElement('strong');
    descriptionLabel.textContent = 'Description: ';
    description.appendChild(descriptionLabel);
    description.appendChild(document.createTextNode(appointmentData.description));

    const place = document.createElement('p');
    const placeLabel = document.createElement('strong');
    placeLabel.textContent = 'Place: ';
    place.appendChild(placeLabel);
    place.appendChild(document.createTextNode(appointmentData.place));

    const dueDate = document.createElement('p');
    const dueDateLabel = document.createElement('strong');
    dueDateLabel.textContent = 'Due Date: ';
    dueDate.appendChild(dueDateLabel);
    dueDate.appendChild(document.createTextNode(new Date(appointmentData.dueDate).toLocaleDateString()));

    const timeSpan = document.createElement('p');
    const timeSpanLabel = document.createElement('strong');
    timeSpanLabel.textContent = 'Time Span: ';
    timeSpan.appendChild(timeSpanLabel);
    timeSpan.appendChild(document.createTextNode(getTimeSpan(appointmentData.startDate, appointmentData.endDate)));

    /**
     * Append all the updated elements
     */
    appointmentInfo.appendChild(title);
    appointmentInfo.appendChild(description);
    appointmentInfo.appendChild(place);
    appointmentInfo.appendChild(dueDate);
    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
         */
        const row = document.createElement('tr');

        /**
         * 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
         */
        firstNameCell.textContent = participant.firstname;
        lastNameCell.textContent = participant.lastname;
        emailCell.textContent = participant.email;

        /**
         * Append cells to the row
         */
        row.appendChild(firstNameCell);
        row.appendChild(lastNameCell);
        row.appendChild(emailCell);

        /**
         * 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);
}