346 lines
13 KiB
JavaScript
346 lines
13 KiB
JavaScript
|
||
let material_id = null;
|
||
function lessonTemplate(material_id,chapter_name,lesson_name) {
|
||
return `
|
||
<li class="lesson-item" data-material-id="${material_id}" data-chapter-name="${chapter_name}" data-lesson-name="${lesson_name}">
|
||
<span class="lesson-text" onclick="editLesson('${material_id}','${chapter_name}','${lesson_name}')">${lesson_name}
|
||
<button class="icon-btn edit-btn" onclick="editLesson('${material_id}','${chapter_name}','${lesson_name}')">
|
||
<i class="fas fa-pencil-alt"></i>
|
||
</button>
|
||
</span>
|
||
<div class="delete-btn-container" onclick="deleteLesson('${material_id}','${chapter_name}','${lesson_name}')">
|
||
<button class="icon-btn delete-btn">
|
||
<i class="fas fa-trash-alt"></i>
|
||
</button>
|
||
</div>
|
||
</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;
|
||
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) {
|
||
// 打开课程目录
|
||
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 = ""; // 清空章节列表
|
||
material_id = courseId;
|
||
|
||
window.material_id = courseId; // 兼容你原来的全局变量
|
||
window.EDIT_COURSE_CURRENT = window.EDIT_COURSE_CURRENT || {};
|
||
EDIT_COURSE_CURRENT.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>`;
|
||
|
||
// 填充章节列表
|
||
const chapterList = document.getElementById('chapter-list');
|
||
chapterList.innerHTML = ''; // 清空之前的章节列表
|
||
|
||
data.chapters.forEach(chapter => {
|
||
const chapterItem = document.createElement('li');
|
||
chapterItem.classList.add('chapter-item');
|
||
chapterItem.innerHTML = `<strong class="chapter-header">${chapter.chapter_name}</strong>`;
|
||
|
||
const lessonList = document.createElement('ul');
|
||
lessonList.classList.add('lessons-list');
|
||
chapter.lessons.forEach(lesson => {
|
||
lessonList.innerHTML += lessonTemplate(material_id,chapter.chapter_name,lesson.lesson_name);
|
||
});
|
||
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);
|
||
});
|
||
|
||
// 使侧边栏滑出
|
||
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);
|
||
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(material_id, chapterTitle, lessonName);
|
||
|
||
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(material_id,chapter_name,lesson_name) {
|
||
const lessonItems = document.querySelectorAll('.lesson-item');
|
||
lessonItems.forEach(item => {
|
||
if (item.dataset.lessonName === lesson_name && item.dataset.chapterName === chapter_name && item.dataset.materialId === material_id) {
|
||
fetch(`/materials/deletelesson/${material_id}`, {
|
||
method: 'DELETE',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({chapter_name: chapter_name, lesson_name: lesson_name})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
alert(data.message);
|
||
item.remove(); // 删除对应的课时项
|
||
renderChapters(material_id);
|
||
return;
|
||
})
|
||
.catch(error => {
|
||
console.error('Error deleting lesson:', error);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
function editLesson(material_id,chapter_name,lesson_name) {
|
||
// 编辑课时的逻辑
|
||
alert("编辑课时: " + lesson_name);
|
||
window.location.href = `/api/materials/${material_id}/chapters/${chapter_name}/lessons/${lesson_name}`;
|
||
}
|
||
|
||
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';
|
||
}
|
||
|
||
function onTeacherboardPageLoad(){
|
||
// 提交表单处理
|
||
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);
|
||
});
|
||
}
|
||
});
|
||
|
||
}
|