Version 0.1.1 rise to flask app factory
This commit is contained in:
CakeCN
189
Html/apps/static/js/teacherboard.js
Normal file
189
Html/apps/static/js/teacherboard.js
Normal file
@@ -0,0 +1,189 @@
|
||||
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');
|
||||
}
|
||||
Reference in New Issue
Block a user