LMS Dashboard
Manage your courses and students.
Total Courses
0
Total Students
0
Courses
No courses added yet.
Students
No students added yet.
Instructor: ${c.instructor}
No students added yet.
`; } else { let html = '';
students.forEach(s => {
html += ``;
});
html += '
';
elements.studentsList.innerHTML = html;
}
// Update course selection dropdown for students
elements.studentCourseSelect.innerHTML = '';
if (courses.length === 0) {
elements.studentCourseSelect.innerHTML = '';
} else {
courses.forEach(c => {
const option = document.createElement('option');
option.value = c.title;
option.textContent = c.title;
elements.studentCourseSelect.appendChild(option);
});
}
};
const addCourse = () => {
const title = elements.courseTitleInput.value.trim();
const instructor = elements.courseInstructorInput.value.trim();
if (!title || !instructor) {
displayError("Please provide both a course title and instructor.");
return;
}
courses.push({ title, instructor });
elements.courseTitleInput.value = '';
elements.courseInstructorInput.value = '';
closeModal(elements.addCourseModal);
renderDashboard();
};
const addStudent = () => {
const name = elements.studentNameInput.value.trim();
const course = elements.studentCourseSelect.value;
if (!name) {
displayError("Please enter a student name.");
return;
}
if (!course || courses.length === 0) {
displayError("Please select a course for the student.");
return;
}
students.push({ name, course });
elements.studentNameInput.value = '';
closeModal(elements.addStudentModal);
renderDashboard();
};
const downloadPDF = async () => {
const contentToPrint = document.getElementById('pdf-content');
if (!contentToPrint) return;
if (typeof window.jspdf === 'undefined' || typeof window.html2canvas === 'undefined') {
displayError("PDF generation library is not available.");
return;
}
try {
const { jsPDF } = window.jspdf;
const pdfCanvas = await html2canvas(contentToPrint, { backgroundColor: '#f3f4f6', scale: 2 });
const imgData = pdfCanvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgProps = pdf.getImageProperties(imgData);
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('lms-report.pdf');
} catch(err) {
console.error("PDF generation failed:", err);
displayError("An error occurred while creating the PDF.");
}
};
// --- Modal Handling ---
const openModal = (modal) => {
hideError();
modal.classList.add('visible');
};
const closeModal = (modal) => modal.classList.remove('visible');
// --- Event Listeners ---
elements.addCourseModalBtn.addEventListener('click', () => openModal(elements.addCourseModal));
elements.addStudentModalBtn.addEventListener('click', () => openModal(elements.addStudentModal));
elements.closeModalBtns.forEach(btn => btn.addEventListener('click', (e) => closeModal(e.target.closest('.modal-overlay'))));
elements.saveCourseBtn.addEventListener('click', addCourse);
elements.saveStudentBtn.addEventListener('click', addStudent);
elements.pdfBtn.addEventListener('click', downloadPDF);
// --- Utility Functions ---
const displayError = (message) => {
elements.error.textContent = message;
elements.error.classList.remove('hidden');
setTimeout(() => elements.error.classList.add('hidden'), 3000);
};
const hideError = () => elements.error.classList.add('hidden');
// --- Initial Render ---
renderDashboard();
});
${s.name}
Enrolled in: ${s.course}