hsa/Html/apps/static/js/teacherboard.js

function lessonTemplate(lesson) {
    return `
        <li class="lesson-item">
            <span class="lesson-text" onclick="editLesson('${lesson}')">${lesson}
                <button class="icon-btn edit-btn" onclick="editLesson('${lesson}')">
                    <i class="fas fa-pencil-alt"></i>
                </button>
            </span>
            <button class="icon-btn delete-btn" onclick="deleteLesson('${lesson}')">
                <i class="fas fa-trash-alt"></i>
            </button>
        </li>
    `;
}

function show_teacher_data(user_data, user_course_data) {
    // 这里可以根据user_course_data生成课程卡片
    const courseCardsContainer = document.getElementById('course-cards');
    user_course_data.forEach(course => {
        const courseCard = document.createElement('div');
        courseCard.classList.add('course-card');
        courseCard.onclick = function() { openCourseDetails(course.id); };
        courseCard.innerHTML = `
            <img src="${course.cover_image}" alt="课程封面" class="course-image">
            <div class="course-info">
                <h3 class="course-name">${course.name}</h3>
                <p class="course-description">${course.description}</p>
            </div>
        `;
        courseCardsContainer.appendChild(courseCard);
    });
}
let isAddingChapter = false;

function showInputForNewChapter() {
    if (isAddingChapter) return; // 防止重复点击

    isAddingChapter = true;  // 标记正在添加章节

    // 找到新增章节按钮并隐藏
    const addButton = document.querySelector('.add-chapter-btn');
    addButton.style.display = 'none';

    // 创建一个输入框
    const input = document.createElement('input');
    input.type = 'text';
    input.placeholder = '请输入章节名称...';
    input.className = 'new-chapter-input';
    input.onblur = () => checkAndAddChapter(input);
    
    // 将输入框插入到页面
    const chapterList = document.getElementById('chapter-list');
    chapterList.appendChild(input);
    input.focus(); // 聚焦到输入框
}

function checkAndAddChapter(input) {
    const chapterName = input.value.trim();

    // 如果章节名称为空，显示提示并不添加
    if (!chapterName) {
        input.remove();  // 删除输入框
        document.querySelector('.add-chapter-btn').style.display = 'block'; // 重新显示新增章节按钮
        isAddingChapter = false;
        return;
    }

    // 如果章节名称合法，添加到章节列表
    const chapterList = document.getElementById('chapter-list');
    const chapterItem = document.createElement('li');
    chapterItem.innerHTML = `
        <li class="lesson-item">
        <strong>${chapterName}</strong> <button class="icon-btn delete-btn" onclick="deleteChapter(this)">
            <i class="fas fa-trash-alt"></i>
        </button>
        </li>
        <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;
}
function openCourseDetails(courseId) {
    // 打开课程目录
    const courseDetails = document.getElementById('courseDetails');
    const courseTitle = document.getElementById('course-title');
    courseTitle.textContent = "课程名称: " + courseId; // 假设这里显示课程ID，实际情况应该是课程名称
    
    courseDetails.classList.add('open');

    // 获取章节数据并渲染
    renderChapters(courseId);
}
function deleteChapter(deleteButton) {
    // 删除章节
    const chapterItem = deleteButton.closest('li');
    chapterItem.remove();
}
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');
        
        // 渲染章节标题
        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>
        `;


        chapterList.appendChild(chapterItem);
    });
}

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);
    input.focus(); // 聚焦到输入框
}
function checkAndAddLesson(input, chapterTitle, addButton) {
    const lessonName = input.value.trim();

    // 如果课时名称为空，显示提示并不添加
    if (!lessonName) {
        input.remove();  // 删除输入框
        addButton.style.display = 'block'; // 重新显示新增课时按钮
        return;
    }

    // 如果课时名称合法，添加到课时列表
    const chapterList = document.getElementById('chapter-list');
    const chapterItem = Array.from(chapterList.children).find(item => item.querySelector('strong').textContent === chapterTitle);
    const lessonsList = chapterItem.querySelector('ul');

    const lessonItem = document.createElement('span');
    lessonItem.innerHTML = lessonTemplate(lessonName);

    lessonsList.appendChild(lessonItem);  // 将新课时添加到章节下
    input.remove();  // 删除输入框
    addButton.style.display = 'block';  // 重新显示新增课时按钮
}
function deleteLesson(lesson) {
    const lessonItems = document.querySelectorAll('.lesson-item');
    lessonItems.forEach(item => {
        if (item.querySelector('.lesson-text').textContent === lesson) {
            item.remove();  // 删除对应的课时项
        }
    });
}


function editLesson(lesson) {
    // 编辑课时的逻辑
    alert("编辑课时: " + lesson);
}

function closeCourseDetails() {
    document.getElementById('courseDetails').classList.remove('open');
}