Scheduler-Backend/public/javascripts/creator-appointments.js

/**
 * Appointment management script.
 * Handles loading, creating, and editing appointments.
 */

"use strict";

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

/**
 * DOM elements for appointment form and error/success messages.
 */
const appointmentErrorParagraph = document.getElementById("appointment-error");
const appointmentSuccessParagraph = document.getElementById("appointment-success");
const titleInput = document.getElementById('title');
const descriptionInput = document.getElementById('description');
const dueDateInput = document.getElementById('dueDate');
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const placeInput = document.getElementById('place');

/**
 * Event listener for window load event.
 * Checks if an appointment ID is provided in the URL query string.
 * If an appointment ID is found, loads the appointment data and updates the form.
 */
window.addEventListener("load", async function () {
    const urlParams = new URLSearchParams(window.location.search);
    const appointment = urlParams.get('appointment');

    if (appointment) {
        // Load appointment data
        await loadAppointment(appointment);
        document.getElementById("appointment-btn").innerText = "Edit Appointment";
        document.getElementById("form-title").innerText = "Edit Appointment";
    }

    /**
     * Event listener for appointment button click event.
     * Creates or edits an appointment based on the presence of an appointment ID.
     */
    document.getElementById("appointment-btn").addEventListener('click', async () => {
        if (!appointment) {
            await createAppointment();
        } else {
            // Modify appointment
            await editAppointment(appointment);
        }
    })
});

/**
 * Displays appointment data in the form.
 * @param {Object} data - Appointment data object.
 */
async function displayAppointment(data) {
    titleInput.value = data.title;
    descriptionInput.value = data.description;
    dueDateInput.value = new Date(data.dueDate).toISOString().split('T')[0];
    startDateInput.value = new Date(data.startDate).toISOString().slice(0, 16);
    endDateInput.value = new Date(data.endDate).toISOString().slice(0, 16);
    placeInput.value = data.place;
}

/**
 * Loads appointment data from the server.
 * @param {string} appointment - Appointment ID.
 */
async function loadAppointment(appointment) {
    let options = {method: 'GET', headers: {'User-Agent': 'insomnia/10.0.0'}};

    console.log(window.location.host);

    const searchParams = new URLSearchParams({
        appointmentId: appointment,
        isUser: true
    });

    const response = await fetchRegular("/api/schedule?" + searchParams.toString(), options)
        .catch(err => console.error('error:' + err));

    const js = await parseOrRedirect(response);
    await displayAppointment(js);
}

/**
 * Retrieves form data as an object.
 * @returns {Object} Form data object.
 */
function getParameters() {
    const title = titleInput.value;
    const description = descriptionInput.value;
    const dueDate = dueDateInput.value;
    const startDate = startDateInput.value;
    const endDate = endDateInput.value;
    const place = placeInput.value;

    return {title, description, dueDate, startDate, endDate, place};
}

/**
 * Edits an existing appointment.
 * @param {string} appointment - Appointment ID.
 */
async function editAppointment(appointment) {
    await setAppointment("modify", appointment);
}

/**
 * Creates a new appointment.
 */
async function createAppointment() {
    await setAppointment("create", "");
}

/**
 * Sets an appointment (create or modify).
 * @param {string} endpoint - API endpoint (create or modify).
 * @param {string} appointment - Appointment ID (optional).
 */
async function setAppointment(endpoint, appointment) {
    const {title, description, dueDate, startDate, endDate, place} = getParameters();

    if (!title || !description || !dueDate || !startDate || !endDate) {
        appointmentSuccessParagraph.innerText = "";
        appointmentErrorParagraph.innerText = "Not all fields filled";
        return;
    }

    const response = await fetchWithToken(`/api/users/${endpoint}`, {
        method: 'POST',
        body: JSON.stringify({
            title: title,
            description: description,
            dueDate: dueDate,
            startDate: startDate,
            endDate: endDate,
            place: place,
            appointmentId: appointment
        })
    });
    const js = await response.json();

    if (!response.ok) {
        appointmentSuccessParagraph.innerText = "";
        appointmentErrorParagraph.innerText = js["message"];
    } else {
        const searchParams = new URLSearchParams({
            appointment: js["id"],
        });

        const path = '/html/schedule.html?' + searchParams.toString();
        appointmentErrorParagraph.innerText = "";
        appointmentSuccessParagraph.innerText = "Appointment created successfully. The share link " +
            "was copied to your clipboard";
        if (endpoint === "modify") {
            appointmentSuccessParagraph.innerText = "Appointment edited successfully. The share link " +
                "was copied to your clipboard";
        }
        await navigator.clipboard.writeText(`${window.location.origin}${path}`);
    }
}