adjusted timezone problems

public/javascripts/appointments.js

@@ -5,7 +5,9 @@ import {fetchWithToken, getTimeSpan, parseOrRedirect} from "./utils.js";
 let last_clicked = "";
 let click_counter = 0;
 
-// Call the function to render data
+/**
+ * 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");
@@ -13,80 +15,99 @@ window.addEventListener("load", async function () {
 
 
 
-// Render the appointments into the table
+/**
+ * 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 = 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);
+        const row = createAppointmentRow(appointment);
 
         // Append the row to the table body
         tableBody.appendChild(row);
-        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;
+}
+
+/**
+ * Creates a row in the appointment table for each appointment.
+ * @param {String} appointmentId - AppointmentID
+ * @returns {HTMLTableRowElement} The newly created table row element.
+ */
 async function deleteAppointment(appointmentId) {
     const response = await fetchWithToken(`/api/users/delete`, {
         method: 'DELETE',
@@ -99,6 +120,7 @@ async function deleteAppointment(appointmentId) {
     }
 }
 
+
 async function fetchAppointments() {
     const response = await fetchWithToken("/api/users/appointments");
 

public/javascripts/utils.js

@@ -18,8 +18,8 @@ async function fetchRegular(url, options) {
 
 // Function to format time as HH:MM
 function formatTime(date) {
-    const hours = date.getUTCHours().toString().padStart(2, '0');
-    const minutes = date.getUTCMinutes().toString().padStart(2, '0');
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
     return `${hours}:${minutes}`;
 }
 

public/stylesheets/create-appointment.css

@@ -30,7 +30,7 @@ textarea {
     background: white;
     padding: 20px 30px;
     border-radius: 8px;
-    width: 100%;
+    width: 80%;
     max-width: 500px;
     display: grid;
     gap: 20px;