Smart Office Desk Booking System
Visualize and book available desks for any day.
Available
Booked
Manage Desks
Manage Employees
${desk.name}
${isBooked ? employee?.name.split(' ')[0] : 'Available'}
${desk.name}
`).join('');
}
function renderEmployeeList() {
employeeList.innerHTML = employees.map(emp => `
${emp.name}
`).join('');
}
function populateEmployeeSelect() {
employeeSelect.innerHTML = employees.map(emp => ``).join('');
}
// --- EVENT HANDLERS ---
function handleAddDesk(e) {
e.preventDefault();
const nameInput = document.getElementById('desk-name');
const name = nameInput.value.trim();
if (name) {
desks.push({ id: Date.now(), name });
nameInput.value = '';
renderAll();
}
}
function handleDeleteDesk(e) {
if (e.target.classList.contains('delete-desk-btn')) {
const deskId = parseInt(e.target.dataset.id);
desks = desks.filter(d => d.id !== deskId);
renderAll();
}
}
function handleAddEmployee(e) {
e.preventDefault();
const nameInput = document.getElementById('employee-name');
const name = nameInput.value.trim();
if (name) {
employees.push({ id: Date.now(), name });
nameInput.value = '';
renderAll();
}
}
function handleDeleteEmployee(e) {
if (e.target.classList.contains('delete-employee-btn')) {
const empId = parseInt(e.target.dataset.id);
employees = employees.filter(emp => emp.id !== empId);
renderAll();
}
}
function handleDateChange(e) {
selectedDate = e.target.value;
renderDeskLayout();
}
function handleDeskClick(e) {
const deskEl = e.target.closest('.desk');
if (!deskEl || deskEl.classList.contains('desk-booked')) return;
deskToBook = deskEl.dataset.deskId;
const desk = desks.find(d => d.id == deskToBook);
modalTitle.textContent = `Book Desk ${desk.name}`;
bookingModal.classList.remove('hidden');
}
function handleConfirmBooking() {
if (!deskToBook) return;
const employeeId = employeeSelect.value;
if (!bookings[selectedDate]) {
bookings[selectedDate] = {};
}
bookings[selectedDate][deskToBook] = employeeId;
closeModal();
renderDeskLayout();
}
function closeModal() {
deskToBook = null;
bookingModal.classList.add('hidden');
}
function generatePdf() {
const { jsPDF } = window.jspdf;
const pdfContent = document.getElementById('pdf-content');
const pdfTitleEl = document.getElementById('pdf-title');
if (!pdfContent || !pdfTitleEl) return;
const date = new Date(selectedDate + 'T00:00:00');
pdfTitleEl.textContent = `Desk Bookings for ${date.toLocaleDateString('en-US', { dateStyle: 'long' })}`;
html2canvas(pdfContent, { scale: 2, useCORS: true, logging: false })
.then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const ratio = canvas.width / canvas.height;
const imgHeight = (pdfWidth - 20) / ratio;
pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, imgHeight);
pdf.save(`Desk-Bookings-${selectedDate}.pdf`);
pdfTitleEl.textContent = '';
});
}
// --- EVENT LISTENERS ---
function addEventListeners() {
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const tab = button.dataset.tab;
tabButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tab));
tabContents.forEach(content => content.classList.toggle('active', content.id.startsWith(tab)));
});
});
bookingDateInput.addEventListener('change', handleDateChange);
deskLayout.addEventListener('click', handleDeskClick);
addDeskForm.addEventListener('submit', handleAddDesk);
deskList.addEventListener('click', handleDeleteDesk);
addEmployeeForm.addEventListener('submit', handleAddEmployee);
employeeList.addEventListener('click', handleDeleteEmployee);
confirmBookingBtn.addEventListener('click', handleConfirmBooking);
cancelBookingBtn.addEventListener('click', closeModal);
downloadPdfBtn.addEventListener('click', generatePdf);
}
initialize();
});