添加chapter和lesson

Html/apps/static/js/teacherboard.js

@@ -1,12 +1,14 @@
-function lessonTemplate(lesson) {
+
+let material_id = null;
+function lessonTemplate(lesson_name) {
     return `
         <li class="lesson-item">
-            <span class="lesson-text" onclick="editLesson('${lesson}')">${lesson}
-                <button class="icon-btn edit-btn" onclick="editLesson('${lesson}')">
+            <span class="lesson-text" onclick="editLesson('${lesson_name}')">${lesson_name}
+                <button class="icon-btn edit-btn" onclick="editLesson('${lesson_name}')">
                     <i class="fas fa-pencil-alt"></i>
                 </button>
             </span>
-            <button class="icon-btn delete-btn" onclick="deleteLesson('${lesson}')">
+            <button class="icon-btn delete-btn" onclick="deleteLesson('${lesson_name}')">
                 <i class="fas fa-trash-alt"></i>
             </button>
         </li>
@@ -77,13 +79,26 @@ function checkAndAddChapter(input) {
         <ul>
         </ul>
         <button class="add-lesson-btn" onclick="showInputForNewLesson('${chapterName}', this)">新增课时</button>
-       
     `;
     chapterList.appendChild(chapterItem);
     // 恢复新增按钮的显示
     document.querySelector('.add-chapter-btn').style.display = 'block';
     input.remove();
     isAddingChapter = false;
+    fetch(`/materials/addchapter/${material_id}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({chapter_name: chapterName})
+    })
+    .then(response => response.json())
+    .then(data => {
+        alert(data.message);
+    })
+    .catch(error => {
+        console.error('Error adding chapter:', error);
+    });
 }
 function openCourseDetails(courseId) {
     // 打开课程目录
@@ -104,44 +119,61 @@ function deleteChapter(deleteButton) {
 function renderChapters(courseId) {
     const chapterList = document.getElementById('chapter-list');
     chapterList.innerHTML = ""; // 清空章节列表
-
-    // 假设从服务器获取课程章节数据
-    const chapters = [
-        { title: "第一章：算法基础", lessons: ["算法简介", "算法设计方法"] },
-        { title: "第二章：数据结构", lessons: ["数组", "链表"] }
-    ];
-
-    chapters.forEach(chapter => {
-        const chapterItem = document.createElement('li');
+    material_id = courseId;
+    fetch(`/materials/${courseId}`)
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById('course-title').innerText = data.name;
+        const detailsContent = document.getElementById('details-content');
+        // 填充课程描述
+        const description = data.description || '暂无描述';
+        detailsContent.innerHTML = `<h3>课程描述：</h3><p>${description}</p>`;
         
-        // 渲染章节标题
-        let lessonsHtml = chapter.lessons.map(lesson => lessonTemplate(lesson)).join('');
-        
-        chapterItem.innerHTML = `
-            <strong>${chapter.title}</strong>
-            <ul>
-                ${lessonsHtml}
-            </ul>
-            <button class="add-lesson-btn" onclick="showInputForNewLesson('${chapter.title}', this)">新增课时</button>
-        `;
+        // 填充章节列表
+        const chapterList = document.getElementById('chapter-list');
+        chapterList.innerHTML = '';  // 清空之前的章节列表
 
+        data.chapters.forEach(chapter => {
+            const chapterItem = document.createElement('li');
+            chapterItem.innerHTML = `<strong>${chapter.chapter_name}</strong>`;
+            
+            const lessonList = document.createElement('ul');
+            chapter.lessons.forEach(lesson => {
+                const lessonItem = document.createElement('li');
+                lessonItem.innerHTML = lessonTemplate(lesson.lesson_name);
+                lessonList.appendChild(lessonItem);
+            });
+            chapterItem.appendChild(lessonList);
+            const addBtn = document.createElement('button');
+            addBtn.className = 'add-lesson-btn';
+            addBtn.onclick = () => showInputForNewLesson(chapter.chapter_name, addBtn);
+            addBtn.textContent = '新增课时';
+            chapterItem.appendChild(addBtn);
 
-        chapterList.appendChild(chapterItem);
+            chapterList.appendChild(chapterItem);
+        });
+
+        // 使侧边栏滑出
+        document.getElementById('courseDetails').classList.add('open');
+    })
+    .catch(error => {
+        const detailsContent = document.getElementById('details-content');
+        detailsContent.innerHTML = '<p>加载课程详情失败，请稍后再试。</p>';
+        console.error('Error loading course details:', error);
     });
 }
 
+
 function showInputForNewLesson(chapterTitle, button) {
     // 防止重复点击
     const addButton = button;
     addButton.style.display = 'none'; // 隐藏按钮
-
     // 创建一个输入框
     const input = document.createElement('input');
     input.type = 'text';
     input.placeholder = '请输入课时名称...';
     input.className = 'new-lesson-input';
     input.onblur = () => checkAndAddLesson(input, chapterTitle, addButton);  // 失去焦点时检查输入
-
     // 将输入框插入到章节列表中
     const chapterItem = addButton.closest('li');  // 获取到点击按钮的父元素
     chapterItem.appendChild(input);
@@ -168,6 +200,13 @@ function checkAndAddLesson(input, chapterTitle, addButton) {
     lessonsList.appendChild(lessonItem);  // 将新课时添加到章节下
     input.remove();  // 删除输入框
     addButton.style.display = 'block';  // 重新显示新增课时按钮
+    fetch(`/materials/addlesson/${material_id}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({chapter_name: chapterTitle, lesson_name: lessonName})
+    })
 }
 function deleteLesson(lesson) {
     const lessonItems = document.querySelectorAll('.lesson-item');
@@ -186,4 +225,93 @@ function editLesson(lesson) {
 
 function closeCourseDetails() {
     document.getElementById('courseDetails').classList.remove('open');
+    material_id = null;
 }
+
+
+
+// 打开新建课程浮窗
+function openAddCourseModal() {
+    document.getElementById('add-course-modal').style.display = 'block';
+}
+
+// 关闭新建课程浮窗
+function closeAddCourseModal() {
+    document.getElementById('add-course-modal').style.display = 'none';
+}
+
+// 提交表单处理
+document.getElementById('add-course-form').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const courseName = document.getElementById('course-name').value;
+    const courseSelection = document.getElementById('course-selection').value;
+    const coverImage = document.getElementById('cover-preview').src;
+    const courseDescription = document.getElementById('course-description').value;
+    // 构建发送的数据
+    const data = {
+        material_name: courseName,
+        description: courseDescription,
+        chapters: [], // 这里可以根据需要添加章节信息，如果有的话
+        image_url: coverImage
+    };
+
+    // 如果选择了已有课程，可以通过 courseSelection 传递课程ID（根据需要修改）
+    if (courseSelection !== 'new') {
+        // 如果是修改已有课程，设置相关的章节信息或其他数据
+        data.chapters = ["Chapter 1", "Chapter 2"]; // 示例章节信息
+    }
+
+    // 发送 POST 请求到 /create_material
+    fetch('/create_material', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data) // 将数据转为 JSON 格式
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log("返回消息:", data.message); // 打印返回消息
+        alert(data.message); // 显示一个警告框来显示返回的消息
+        courseName.value = "";
+        closeAddCourseModal(); // 关闭浮窗
+    })
+    .catch(error => {
+        console.error("请求失败:", error); // 如果请求失败，打印错误
+        alert("创建课程失败，请稍后再试！");
+    });
+});
+
+document.getElementById("cover-image").addEventListener("click", function() {
+    document.getElementById("cover-image-input").click();
+});
+
+document.getElementById("cover-image-input").addEventListener("change", function(event) {
+    const file = event.target.files[0];
+    if (file) {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        // 上传图片到服务器
+        fetch('/teacher/upload_image', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.image_url) {
+                // 显示上传后的图片预览
+                document.getElementById("cover-preview").src = data.image_url;
+                document.getElementById("cover-preview").style.display = 'block';
+                document.getElementById("cover-image").style.display = 'none';  // 隐藏占位符
+            } else {
+                alert('图片上传失败');
+            }
+        })
+        .catch(error => {
+            alert('上传出错');
+            console.error(error);
+        });
+    }
+});