89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
// Course List Component
|
|
export class CourseList {
|
|
constructor(onSectionClick) {
|
|
this.container = document.getElementById('courseList');
|
|
this.onSectionClick = onSectionClick;
|
|
this.courseData = null;
|
|
}
|
|
|
|
async loadCourseContent() {
|
|
if (this.container?.querySelector('.course-loaded')) {
|
|
return; // Already loaded
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/course');
|
|
const data = await response.json();
|
|
this.courseData = data;
|
|
|
|
const list = document.createElement('div');
|
|
list.className = 'module-items';
|
|
list.classList.add('course-loaded');
|
|
|
|
if (data.sections && data.sections.length > 0) {
|
|
data.sections.forEach(section => {
|
|
const sectionDiv = this.createSectionItem(section);
|
|
list.appendChild(sectionDiv);
|
|
});
|
|
}
|
|
|
|
if (this.container) {
|
|
this.container.innerHTML = '';
|
|
this.container.appendChild(list);
|
|
}
|
|
} catch (error) {
|
|
if (this.container) {
|
|
this.container.innerHTML = `<div class="error-message">Error loading course: ${error.message}</div>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
createSectionItem(section) {
|
|
const sectionDiv = document.createElement('div');
|
|
sectionDiv.className = 'module-section';
|
|
|
|
const sectionTitle = document.createElement('h4');
|
|
sectionTitle.textContent = section.title;
|
|
sectionTitle.className = 'module-section-title';
|
|
sectionDiv.appendChild(sectionTitle);
|
|
|
|
const itemsList = document.createElement('div');
|
|
itemsList.className = 'module-items-list';
|
|
|
|
// Create clickable navigation item
|
|
const navBtn = document.createElement('button');
|
|
navBtn.className = 'module-item';
|
|
navBtn.textContent = section.title;
|
|
navBtn.addEventListener('click', () => {
|
|
if (this.onSectionClick) {
|
|
this.onSectionClick(section);
|
|
}
|
|
});
|
|
itemsList.appendChild(navBtn);
|
|
|
|
// Add subsections if any
|
|
if (section.subsections && section.subsections.length > 0) {
|
|
section.subsections.forEach(subsection => {
|
|
const subBtn = document.createElement('button');
|
|
subBtn.className = 'module-item';
|
|
subBtn.style.paddingLeft = '1.5rem';
|
|
subBtn.textContent = subsection.title;
|
|
subBtn.addEventListener('click', () => {
|
|
if (this.onSectionClick) {
|
|
this.onSectionClick(subsection);
|
|
}
|
|
});
|
|
itemsList.appendChild(subBtn);
|
|
});
|
|
}
|
|
|
|
sectionDiv.appendChild(itemsList);
|
|
return sectionDiv;
|
|
}
|
|
|
|
getCourseData() {
|
|
return this.courseData;
|
|
}
|
|
}
|
|
|