`;
// Timeline Column
html += '
';
timeSlots.forEach(time => {
const booking = bookings.find(b => b.roomId === room.id && b.date === selectedDate && b.time === time);
if (booking) {
html += `
Booked
`;
} else {
html += `
`;
}
});
html += '
';
});
html += '
';
scheduleDashboard.innerHTML = html;
addSlotClickListeners();
};
/**
* Adds click event listeners to all available time slots.
*/
const addSlotClickListeners = () => {
document.querySelectorAll('.timeline-slot.available').forEach(slot => {
slot.addEventListener('click', () => {
const roomId = parseInt(slot.dataset.roomId);
const time = slot.dataset.time;
openBookingModal(roomId, time);
});
});
};
/**
* Opens and populates the booking modal.
* @param {number} roomId - The ID of the selected room.
* @param {string} time - The selected time slot.
*/
const openBookingModal = (roomId, time) => {
const room = conferenceRooms.find(r => r.id === roomId);
document.getElementById('booking-room-id').value = roomId;
document.getElementById('booking-time-slot').value = time;
document.getElementById('modal-room-name').textContent = room.name;
document.getElementById('modal-time-slot').textContent = `${time} - ${parseInt(time.split(':')[0]) + 1}:00 on ${dateInput.value}`;
bookingModal.classList.remove('hidden');
};
/**
* Closes the booking modal and resets the form.
*/
const closeBookingModal = () => {
bookingModal.classList.add('hidden');
bookingForm.reset();
};
/**
* Handles the submission of the booking form.
* @param {Event} e - The form submission event.
*/
const handleBookingSubmit = (e) => {
e.preventDefault();
const newBooking = {
id: bookings.length + 1,
roomId: parseInt(document.getElementById('booking-room-id').value),
date: dateInput.value,
time: document.getElementById('booking-time-slot').value,
title: document.getElementById('meeting-title').value,
organizer: document.getElementById('organizer-name').value,
};
bookings.push(newBooking);
closeBookingModal();
renderSchedule();
};
/**
* Generates and triggers the download of a PDF schedule.
*/
const generatePdf = () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'landscape' });
const selectedDate = dateInput.value;
doc.setFontSize(18);
doc.text(`Conference Room Schedule for ${selectedDate}`, 14, 22);
const head = [['Room', 'Capacity', ...timeSlots]];
const body = conferenceRooms.map(room => {
const row = [room.name, room.capacity.toString()];
timeSlots.forEach(time => {
const booking = bookings.find(b => b.roomId === room.id && b.date === selectedDate && b.time === time);
row.push(booking ? `${booking.title.substring(0, 15)}...` : 'Available');
});
return row;
});
doc.autoTable({
head: head,
body: body,
startY: 30,
theme: 'grid',
headStyles: { fillColor: [243, 244, 246], textColor: [55, 65, 81], fontStyle: 'bold' },
styles: { cellPadding: 2, fontSize: 8 },
didParseCell: function (data) {
if (data.cell.section === 'body' && data.cell.text[0] === 'Available') {
data.cell.styles.fillColor = '#D1FAE5'; // green-100
data.cell.styles.textColor = '#065F46'; // green-800
}
}
});
doc.save(`Conference_Schedule_${selectedDate}.pdf`);
};
// --- Event Listeners ---
dateInput.addEventListener('change', renderSchedule);
bookingForm.addEventListener('submit', handleBookingSubmit);
cancelBookingBtn.addEventListener('click', closeBookingModal);
downloadPdfBtn.addEventListener('click', generatePdf);
// --- Initial Setup ---
const today = new Date().toISOString().split('T')[0];
dateInput.value = today;
renderSchedule();
});
