|
|
@@ -0,0 +1,188 @@
|
|
|
+/**
|
|
|
+ * Import necessary utility functions from utils.js
|
|
|
+ */
|
|
|
+import {fetchRegular, fetchWithToken, getTimeSpan, parseOrRedirect} from "./utils.js";
|
|
|
+
|
|
|
+/**
|
|
|
+ * Event listener for the window load event.
|
|
|
+ * Retrieves the appointment ID from the URL query parameters and fetches the appointment details.
|
|
|
+ */
|
|
|
+window.addEventListener("load", async function () {
|
|
|
+ /**
|
|
|
+ * Get the URL query parameters
|
|
|
+ */
|
|
|
+ const urlParams = new URLSearchParams(window.location.search);
|
|
|
+ const appointment = urlParams.get('appointment');
|
|
|
+
|
|
|
+ /**
|
|
|
+ * If no appointment ID is found, redirect to the 404 page
|
|
|
+ */
|
|
|
+ if (!appointment) {
|
|
|
+ window.location.replace("/html/404.html");
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Fetch the appointment details and bookings
|
|
|
+ */
|
|
|
+ await getAppointment(appointment);
|
|
|
+ await fetchBookings(appointment);
|
|
|
+});
|
|
|
+
|
|
|
+/**
|
|
|
+ * Displays the appointment details in the appointment-info container.
|
|
|
+ * @param {Object} appointmentData - The appointment data object
|
|
|
+ */
|
|
|
+function displayAppointmentDetails(appointmentData) {
|
|
|
+ /**
|
|
|
+ * Retrieve the appointment-info container
|
|
|
+ */
|
|
|
+ const appointmentInfo = document.querySelector('.appointment-info');
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Clear existing content
|
|
|
+ */
|
|
|
+ while (appointmentInfo.firstChild) {
|
|
|
+ appointmentInfo.removeChild(appointmentInfo.firstChild);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Create and append the updated appointment content
|
|
|
+ */
|
|
|
+ const title = document.createElement('p');
|
|
|
+ const titleLabel = document.createElement('strong');
|
|
|
+ titleLabel.textContent = 'Title: ';
|
|
|
+ title.appendChild(titleLabel);
|
|
|
+ title.appendChild(document.createTextNode(appointmentData.title));
|
|
|
+
|
|
|
+ const description = document.createElement('p');
|
|
|
+ const descriptionLabel = document.createElement('strong');
|
|
|
+ descriptionLabel.textContent = 'Description: ';
|
|
|
+ description.appendChild(descriptionLabel);
|
|
|
+ description.appendChild(document.createTextNode(appointmentData.description));
|
|
|
+
|
|
|
+ const place = document.createElement('p');
|
|
|
+ const placeLabel = document.createElement('strong');
|
|
|
+ placeLabel.textContent = 'Place: ';
|
|
|
+ place.appendChild(placeLabel);
|
|
|
+ place.appendChild(document.createTextNode(appointmentData.place));
|
|
|
+
|
|
|
+ const dueDate = document.createElement('p');
|
|
|
+ const dueDateLabel = document.createElement('strong');
|
|
|
+ dueDateLabel.textContent = 'Due Date: ';
|
|
|
+ dueDate.appendChild(dueDateLabel);
|
|
|
+ dueDate.appendChild(document.createTextNode(new Date(appointmentData.dueDate).toLocaleDateString()));
|
|
|
+
|
|
|
+ const timeSpan = document.createElement('p');
|
|
|
+ const timeSpanLabel = document.createElement('strong');
|
|
|
+ timeSpanLabel.textContent = 'Time Span: ';
|
|
|
+ timeSpan.appendChild(timeSpanLabel);
|
|
|
+ timeSpan.appendChild(document.createTextNode(getTimeSpan(appointmentData.startDate, appointmentData.endDate)));
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Append all the updated elements
|
|
|
+ */
|
|
|
+ appointmentInfo.appendChild(title);
|
|
|
+ appointmentInfo.appendChild(description);
|
|
|
+ appointmentInfo.appendChild(place);
|
|
|
+ appointmentInfo.appendChild(dueDate);
|
|
|
+ appointmentInfo.appendChild(timeSpan);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Fetches the appointment details from the API.
|
|
|
+ * @param {string} appointment - The appointment ID
|
|
|
+ */
|
|
|
+async function getAppointment(appointment) {
|
|
|
+ /**
|
|
|
+ * Set the request options
|
|
|
+ */
|
|
|
+ const options = {method: 'GET', headers: {'User-Agent': 'insomnia/10.0.0'}};
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Set the query parameters
|
|
|
+ */
|
|
|
+ const searchParams = new URLSearchParams({
|
|
|
+ appointmentId: appointment,
|
|
|
+ isUser: true
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Fetch the appointment details
|
|
|
+ */
|
|
|
+ const response = await fetchRegular(`/api/schedule?` + searchParams.toString(), options)
|
|
|
+ .catch(err => console.error('error:' + err));
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Parse the response and display the appointment details
|
|
|
+ */
|
|
|
+ const js = await parseOrRedirect(response);
|
|
|
+ displayAppointmentDetails(js);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Renders the bookings data in the participants-table-body container.
|
|
|
+ * @param {Array<Object>} data - The bookings data array
|
|
|
+ */
|
|
|
+function renderBookings(data) {
|
|
|
+ /**
|
|
|
+ * Retrieve the participants-table-body container
|
|
|
+ */
|
|
|
+ const tableBody = document.getElementById('participants-table-body');
|
|
|
+ tableBody.innerHTML = ''; // Clear existing rows
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Iterate over the bookings data and create table rows
|
|
|
+ */
|
|
|
+ data.forEach(participant => {
|
|
|
+ /**
|
|
|
+ * Create a new table row
|
|
|
+ */
|
|
|
+ const row = document.createElement('tr');
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Create table cells for first name, last name, and email
|
|
|
+ */
|
|
|
+ const firstNameCell = document.createElement('td');
|
|
|
+ const lastNameCell = document.createElement('td');
|
|
|
+ const emailCell = document.createElement('td');
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Populate cell content with participant data
|
|
|
+ */
|
|
|
+ firstNameCell.textContent = participant.firstname;
|
|
|
+ lastNameCell.textContent = participant.lastname;
|
|
|
+ emailCell.textContent = participant.email;
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Append cells to the row
|
|
|
+ */
|
|
|
+ row.appendChild(firstNameCell);
|
|
|
+ row.appendChild(lastNameCell);
|
|
|
+ row.appendChild(emailCell);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Append the row to the table body
|
|
|
+ */
|
|
|
+ tableBody.appendChild(row);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Fetches the bookings data from the API.
|
|
|
+ * @param {string} appointmentId - The appointment ID
|
|
|
+ */
|
|
|
+async function fetchBookings(appointmentId) {
|
|
|
+ /**
|
|
|
+ * Set the query parameters
|
|
|
+ */
|
|
|
+ const searchParams = new URLSearchParams({
|
|
|
+ appointmentId: appointmentId,
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Fetch the bookings data
|
|
|
+ */
|
|
|
+ const response = await fetchWithToken('/api/users/bookings?' + searchParams.toString());
|
|
|
+ const js = await parseOrRedirect(response);
|
|
|
+ renderBookings(js);
|
|
|
+}
|