Scheduler-Backend/public/javascripts/appointments.js

"use strict";

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

let last_clicked = "";
let click_counter = 0;

// Call the function to render data
window.addEventListener("load", async function () {
    await fetchAppointments();
    document.getElementById("content").classList.remove("hidden");
});



// Render the appointments into the table
function renderAppointments(data) {
    const tableBody = document.getElementById('appointment-table-body');
    tableBody.innerHTML = '';
    data.forEach(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
        tableBody.appendChild(row);
        tableBody.appendChild(row);
    });
}

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();
    }
}

async function fetchAppointments() {
    const response = await fetchWithToken("/api/users/appointments");

    const js = await parseOrRedirect(response);

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