Online Virtual Classroom Attendance Tracker

Online Virtual Classroom Attendance Tracker

Dashboard

No attendance records found for the selected date range.

'; document.getElementById('downloadPdfBtn').disabled = true; return; } let tableHTML = ''; const dates = [...new Set(filteredData.map(item => item.date))].sort(); dates.forEach(date => { tableHTML += ``; }); tableHTML += ''; const students = [...new Set(filteredData.map(item => item.studentId))].map(id => appData.students.find(s => s.id === id)); students.forEach(student => { tableHTML += ``; dates.forEach(date => { const record = filteredData.find(item => item.studentId === student.id && item.date === date); const status = record ? record.status : '-'; let statusClass = ''; if (status === 'present') statusClass = 'text-green-600'; if (status === 'absent') statusClass = 'text-red-600'; if (status === 'late') statusClass = 'text-orange-600'; tableHTML += ``; }); tableHTML += ''; }); tableHTML += '
Student${new Date(date).toLocaleDateString('en-US', { timeZone: 'UTC' })}
${student.firstName} ${student.lastName}${status}
'; output.innerHTML = tableHTML; document.getElementById('downloadPdfBtn').disabled = false; } // --- LOGIC & EVENT HANDLERS --- function updateTabs() { tabs.forEach(tab => tab.classList.toggle('active', parseInt(tab.dataset.tab) === currentTab)); tabPanes.forEach(pane => pane.classList.toggle('hidden', parseInt(pane.id.split('-')[1]) !== currentTab)); prevBtn.disabled = currentTab === 1; nextBtn.disabled = currentTab === totalTabs; } function goToTab(tabNumber) { if (tabNumber >= 1 && tabNumber <= totalTabs) { currentTab = tabNumber; updateTabs(); } } function addStudent() { const firstName = document.getElementById('newStudentFirstName').value.trim(); const lastName = document.getElementById('newStudentLastName').value.trim(); if (firstName && lastName) { const newId = appData.students.length > 0 ? Math.max(...appData.students.map(s => s.id)) + 1 : 1; appData.students.push({ id: newId, firstName, lastName }); document.getElementById('newStudentFirstName').value = ''; document.getElementById('newStudentLastName').value = ''; renderStudentList(); renderDashboard(); } else { alert('Please enter both a first and last name.'); } } function deleteStudent(studentId) { if (confirm('Are you sure you want to remove this student? This will also remove their attendance records.')) { appData.students = appData.students.filter(s => s.id !== studentId); appData.sessions.forEach(session => { session.attendance = session.attendance.filter(a => a.studentId !== studentId); }); renderStudentList(); renderDashboard(); } } function markAttendance(sessionId, studentId, status) { const session = appData.sessions.find(s => s.id == sessionId); if (!session) return; let record = session.attendance.find(a => a.studentId === studentId); if (record) { record.status = status; } else { session.attendance.push({ studentId, status }); } renderAttendanceSheet(); renderDashboard(); // Update stats } function generateReport() { const startDate = document.getElementById('reportStartDate').value; const endDate = document.getElementById('reportEndDate').value; if (!startDate || !endDate) { alert('Please select both a start and end date.'); return; } const reportData = []; appData.sessions.forEach(session => { if (session.date >= startDate && session.date <= endDate) { session.attendance.forEach(att => { reportData.push({ ...att, date: session.date }); }); } }); renderReport(reportData); } function downloadPdf() { const reportTitle = `Attendance Report (${document.getElementById('reportStartDate').value} to ${document.getElementById('reportEndDate').value})`; document.getElementById('pdf-report-title').textContent = reportTitle; document.getElementById('pdf-report-content').innerHTML = document.getElementById('reportOutput').innerHTML; const elementToCapture = document.getElementById('pdf-report-container'); html2canvas(elementToCapture, { scale: 2 }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const ratio = canvasWidth / canvasHeight; let newCanvasWidth = pdfWidth; let newCanvasHeight = newCanvasWidth / ratio; if (newCanvasHeight > pdfHeight) { newCanvasHeight = pdfHeight; newCanvasWidth = newCanvasHeight * ratio; } const x = (pdfWidth - newCanvasWidth) / 2; const y = (pdfHeight - newCanvasHeight) / 2; pdf.addImage(imgData, 'PNG', x, y, newCanvasWidth, newCanvasHeight); pdf.save('attendance-report.pdf'); }); } // --- EVENT LISTENERS --- tabs.forEach(tab => tab.addEventListener('click', (e) => goToTab(parseInt(e.currentTarget.dataset.tab)))); prevBtn.addEventListener('click', () => goToTab(currentTab - 1)); nextBtn.addEventListener('click', () => goToTab(currentTab + 1)); document.getElementById('addStudentBtn').addEventListener('click', addStudent); document.getElementById('sessionSelect').addEventListener('change', renderAttendanceSheet); document.getElementById('generateReportBtn').addEventListener('click', generateReport); document.getElementById('downloadPdfBtn').addEventListener('click', downloadPdf); document.getElementById('studentList').addEventListener('click', (e) => { if (e.target.classList.contains('delete-student-btn')) { deleteStudent(parseInt(e.target.dataset.studentId)); } }); document.getElementById('attendanceSheet').addEventListener('click', (e) => { if (e.target.classList.contains('attendance-btn')) { const { sessionId, studentId, status } = e.target.dataset; markAttendance(parseInt(sessionId), parseInt(studentId), status); } }); // --- INITIALIZATION --- renderAll(); updateTabs(); });
Scroll to Top