Scheduler-Backend/public/javascripts/schedule.js

"use strict";

let appointment;
const errorParagraph = document.getElementById('appointment-error');
const successParagraph = document.getElementById('appointment-success');


window.addEventListener("load", async function () {
    document.getElementById("btn-attend").addEventListener("click", async () => {
        await attendEvent();
    })
    const urlParams = new URLSearchParams(window.location.search);
    appointment = urlParams.get('appointment');
    if (!appointment) {
        window.location.replace("/html/404.html");
    }

    await getAppointment();
});

// Function to format time as HH:MM
function formatTime(date) {
    const hours = date.getHours().toString().padStart(2, '0');  // Get hours and ensure two digits
    const minutes = date.getMinutes().toString().padStart(2, '0');  // Get minutes and ensure two digits
    return `${hours}:${minutes}`;
}

// Function to get time span (from 11:00 to 12:00 format)
function getTimeSpan(start, end) {
    const startTime = formatTime(start);
    const endTime = formatTime(end);
    return `${startTime} to ${endTime}`;
}

async function getAppointment() {
    let options = {method: 'GET', headers: {'User-Agent': 'insomnia/10.0.0'}};

    const response = await fetch(`/api/schedule?appointmentId=${appointment}`, options)
        .catch(err => console.error('error:' + err));

    if (response.status === 404) {
        window.location.replace("/html/404.html");
    }

    if (response.status === 410) {
        window.location.replace("/html/410.html");
    }
    const js = await response.json();
    displayAppointmentDetails(js);
}

function displayAppointmentDetails(appointment) {
    // Update the innerHTML of the elements to display the appointment details
    document.getElementById('appointment-date').innerText = appointment._id;
    document.getElementById('title').innerText = appointment.title;
    document.getElementById('description').innerText = appointment.description;

    // Format the dates to a more user-friendly format
    const dueDate = new Date(appointment.dueDate).toLocaleDateString();
    const startDate = new Date(appointment.startDate);
    const endDate = new Date(appointment.endDate);
    const startDateFormatted = startDate.toLocaleString();
    const endDateFormatted = endDate.toLocaleString();

    console.log(dueDate);
    console.log(startDate);
    console.log(endDate);

    document.getElementById('due-date').value = dueDate;
    document.getElementById('appointment-date').value = startDateFormatted;
    document.getElementById('time-span').value = getTimeSpan(startDate, endDate);

    // Set place
    document.getElementById('place').innerText = appointment.place;
}

async function attendEvent() {
    const email = document.getElementById('email').value;
    const firstname = document.getElementById('firstname').value;
    const lastname = document.getElementById('lastname').value;

    if (!email || !firstname || !lastname) {
        errorParagraph.innerText = "Fill in all fields.";
        return;
    }

    const response = await fetch("/api/schedule/create",
        {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                appointment: appointment,
                email: email,
                firstname: firstname,
                lastname: lastname
            })
        });
    const js = await response.json();

    if (response.status !== 200) {
        errorParagraph.innerText = js["message"];
        successParagraph.innerText = "";
    } else {
        errorParagraph.innerText = "";
        successParagraph.innerText = "Registered successfully.";
    }


}