|
|
@@ -0,0 +1,132 @@
|
|
|
+"use strict";
|
|
|
+
|
|
|
+window.addEventListener("load", async function () {
|
|
|
+ const urlParams = new URLSearchParams(window.location.search);
|
|
|
+ const appointment = urlParams.get('appointment');
|
|
|
+ if (!appointment) {
|
|
|
+ window.location.replace("/html/404.html");
|
|
|
+ }
|
|
|
+ await getAppointment(appointment);
|
|
|
+ await fetchBookings(appointment);
|
|
|
+});
|
|
|
+
|
|
|
+async function fetchWithToken(url, options) {
|
|
|
+ const authToken = localStorage.getItem('token');
|
|
|
+ return await fetch(url, {...options, headers: {
|
|
|
+ 'Authorization': `Bearer ${authToken}`,
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ }});
|
|
|
+}
|
|
|
+
|
|
|
+function displayAppointmentDetails(appointmentData) {
|
|
|
+ // Retrieve the 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);
|
|
|
+}
|
|
|
+
|
|
|
+// Helper function to format the time span
|
|
|
+function getTimeSpan(startDate, endDate) {
|
|
|
+ const start = new Date(startDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
|
+ const end = new Date(endDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
|
+ return `${start} to ${end}`;
|
|
|
+}
|
|
|
+
|
|
|
+async function getAppointment(appointment) {
|
|
|
+ const options = {method: 'GET', headers: {'User-Agent': 'insomnia/10.0.0'}};
|
|
|
+
|
|
|
+ const response = await fetch(`/api/schedule?isUser=true&appointmentId=${appointment}`, options)
|
|
|
+ .catch(err => console.error('error:' + err));
|
|
|
+
|
|
|
+ if (response.status === 404) {
|
|
|
+ window.location.replace("/html/404.html");
|
|
|
+ }
|
|
|
+
|
|
|
+ const js = await response.json();
|
|
|
+ displayAppointmentDetails(js);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function renderBookings(data) {
|
|
|
+ const tableBody = document.getElementById('participants-table-body');
|
|
|
+ tableBody.innerHTML = ''; // Clear existing 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);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+async function fetchBookings(appointmentId) {
|
|
|
+ const response = await fetchWithToken(`/api/users/bookings?appointmentId=${appointmentId}`);
|
|
|
+ if (response.status === 401) {
|
|
|
+ window.location.replace("/html/auth.html");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const js = await response.json();
|
|
|
+ if (!response.ok) {
|
|
|
+ window.location.replace("/html/404.html");
|
|
|
+ }
|
|
|
+ renderBookings(js);
|
|
|
+}
|
Liontix