initial

static/components/CourseList.js

@@ -0,0 +1,88 @@
+// 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;
+  }
+}
+