Scheduler-Backend/public/javascripts/appointments.js

"use strict";

import {fetchWithToken, getTimeSpan, parseOrRedirect} from "./utils.js";

let last_clicked = "";
let click_counter = 0;

/**
 * Adds an event listener to window load to fetch and render appointments.
 */
window.addEventListener("load", async function () {
    await fetchAppointments();
    document.getElementById("content").classList.remove("hidden");
});



/**
 * Renders appointment data into the table body of an HTML table.
 * @param {Array<Object>} data - Array of appointment objects containing title, description, dueDate, place, startDate, and endDate.
 */
function renderAppointments(data) {
    const tableBody = document.getElementById('appointment-table-body');
    tableBody.innerHTML = '';
    data.forEach(appointment => {
        const row = createAppointmentRow(appointment);

        // Append the row to the table body
        tableBody.appendChild(row);
    });
}

/**
 * Creates a row in the appointment table for each appointment.
 * @param {Object} appointment - Appointment object containing title, description, dueDate, place, startDate, and endDate.
 * @returns {HTMLTableRowElement} The newly created table row element.
 */
function createAppointmentRow(appointment) {
    const row = document.createElement('tr');
    const titleCell = document.createElement('td');
    const descriptionCell = document.createElement('td');
    const placeCell = document.createElement('td');
    const dueDateCell = document.createElement('td');
    const timeSpanCell = document.createElement('td');
    const shareCell = document.createElement('td');
    const participantCell = document.createElement('td');
    const editCell = document.createElement('td');
    const deleteCell = document.createElement('td');
    const shareATag = document.createElement('a');
    const participantATag = document.createElement('a');
    const editATag = document.createElement('a');
    const deleteButton = document.createElement('button');

    const searchParams = new URLSearchParams({
        appointment: appointment._id,
    });

    participantATag.href = '/html/bookings.html?' + searchParams.toString();
    participantATag.innerText = 'participants';
    participantATag.classList.add('participants-link');
    editATag.href = '/html/appointmentscreator.html?' + searchParams.toString();
    shareATag.href = '/html/schedule.html?' + searchParams.toString();
    shareATag.innerText = 'share';
    shareATag.classList.add('share-link');
    editATag.innerText = 'edit';
    editATag.classList.add('edit-link');
    deleteButton.onclick = async () => {
        if (last_clicked !== appointment._id) {
            click_counter += 1;
            last_clicked = appointment._id;
            return;
        }

        await deleteAppointment(appointment._id);
    }
    deleteButton.innerText = 'delete';

    shareCell.appendChild(shareATag);
    participantCell.appendChild(participantATag);
    editCell.appendChild(editATag);
    deleteCell.appendChild(deleteButton);

    titleCell.textContent = appointment.title;
    descriptionCell.textContent = appointment.description;
    dueDateCell.textContent = new Date(appointment.dueDate).toLocaleDateString();
    placeCell.textContent = appointment.place;

    timeSpanCell.textContent = getTimeSpan(appointment.startDate, appointment.endDate);
    timeSpanCell.classList.add('time-span');

    // Append cells to the row
    row.appendChild(titleCell);
    row.appendChild(descriptionCell);
    row.appendChild(dueDateCell);
    row.appendChild(placeCell);
    row.appendChild(timeSpanCell);
    row.appendChild(shareCell);
    row.appendChild(participantCell);
    row.appendChild(editCell);
    row.appendChild(deleteCell);

    // Append the row to the table body
    return row;
}

/**
 * Deletes an appointment from the server and updates the UI.
 * @param {string} appointmentId - ID of the appointment to delete.
 */
async function deleteAppointment(appointmentId) {
    const response = await fetchWithToken(`/api/users/delete`, {
        method: 'DELETE',
        body: JSON.stringify({appointmentId: appointmentId})
    });
    await parseOrRedirect(response);

    if (response.ok) {
        await fetchAppointments();
    }
}

/**
 * Fetches appointments from the server and updates the UI.
 */
async function fetchAppointments() {
    const response = await fetchWithToken("/api/users/appointments");

    const js = await parseOrRedirect(response);

    if (js.length === 0) return;
    renderAppointments(js);
}