1049 lines
43 KiB
HTML
1049 lines
43 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ student.name }} - 学员详情 - 钢琴练习方案系统{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h4><i class="bi bi-person"></i> 学员详情</h4>
|
|
<div>
|
|
<a href="/students" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left"></i> 返回列表
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card mb-4">
|
|
<div class="card-body text-center">
|
|
<div class="avatar mb-3">
|
|
<i class="bi bi-person-circle" style="font-size: 60px; color: #6c757d;"></i>
|
|
</div>
|
|
<h5 id="detailName">{{ student.name }}</h5>
|
|
<p class="text-muted" id="detailWechatNickname">{{ student.wechat_nickname or '未填写' }}</p>
|
|
<p class="text-muted" id="detailPhone">{{ student.phone or '未填写' }}</p>
|
|
<p class="small">
|
|
<span class="badge bg-info" id="detailPracticeTime">{{ student.practice_time or '30分钟' }}</span>
|
|
</p>
|
|
<p class="small" id="detailClass">
|
|
{% if student.class_obj %}
|
|
<span class="badge bg-secondary">{{ student.class_obj.name }}</span>
|
|
{% else %}
|
|
<span class="text-muted">未分配班级</span>
|
|
{% endif %}
|
|
</p>
|
|
<p class="small text-muted" id="detailNotes">{{ student.notes or '无备注' }}</p>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="showEditStudentModal()">
|
|
<i class="bi bi-pencil"></i> 编辑
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteStudent()">
|
|
<i class="bi bi-trash"></i> 删除
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0"><i class="bi bi-list-check"></i> 当前问题</h6>
|
|
<button class="btn btn-sm btn-primary" onclick="showAddProblemModal()">
|
|
<i class="bi bi-plus"></i> 添加问题
|
|
</button>
|
|
</div>
|
|
<div class="card-body" id="problemList">
|
|
<p class="text-muted">加载中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 学员目标区块 -->
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">🎯 练习目标</h5>
|
|
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#assignGoalModal">
|
|
+ 分配目标
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="student-goals-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0"><i class="bi bi-clipboard-check"></i> 练习方案</h6>
|
|
<button class="btn btn-sm btn-primary" onclick="generatePlan()">
|
|
<i class="bi bi-plus"></i> 生成方案
|
|
</button>
|
|
</div>
|
|
<div class="card-body" id="planList">
|
|
<p class="text-muted">加载中...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 编辑学员 Modal -->
|
|
<div class="modal fade" id="editStudentModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">编辑学员</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="editStudentId" value="{{ student.id }}">
|
|
<div class="mb-3">
|
|
<label class="form-label">姓名 *</label>
|
|
<input type="text" class="form-control" id="editStudentName" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">手机号</label>
|
|
<input type="text" class="form-control" id="editStudentPhone">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">微信昵称</label>
|
|
<input type="text" class="form-control" id="editStudentWechat">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">每日练习时间</label>
|
|
<select class="form-select" id="editStudentPracticeTime">
|
|
<option value="15分钟">15分钟</option>
|
|
<option value="30分钟">30分钟</option>
|
|
<option value="45分钟">45分钟</option>
|
|
<option value="60分钟">60分钟</option>
|
|
<option value="90分钟">90分钟</option>
|
|
<option value="120分钟">120分钟</option>
|
|
<option value="150分钟以上">150分钟以上</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">备注</label>
|
|
<textarea class="form-control" id="editStudentNotes" rows="2"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveStudentEdit()">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加问题 Modal -->
|
|
<div class="modal fade" id="addProblemModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">添加问题</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">问题 *</label>
|
|
<select class="form-select" id="addProblemSelect" required>
|
|
<option value="">选择问题...</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">严重程度 *</label>
|
|
<select class="form-select" id="addProblemSeverity" required>
|
|
<option value="轻微">轻微</option>
|
|
<option value="中等" selected>中等</option>
|
|
<option value="严重">严重</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">级别 *</label>
|
|
<select class="form-select" id="addProblemLevel" required>
|
|
<option value="启蒙">启蒙</option>
|
|
<option value="入门" selected>入门</option>
|
|
<option value="进阶">进阶</option>
|
|
<option value="熟练">熟练</option>
|
|
<option value="精通">精通</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveAddProblem()">添加</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 编辑问题 Modal -->
|
|
<div class="modal fade" id="editProblemModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">编辑问题</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="editProblemId">
|
|
<div class="mb-3">
|
|
<label class="form-label">问题</label>
|
|
<input type="text" class="form-control" id="editProblemName" readonly>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">严重程度 *</label>
|
|
<select class="form-select" id="editProblemSeverity" required>
|
|
<option value="轻微">轻微</option>
|
|
<option value="中等">中等</option>
|
|
<option value="严重">严重</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">级别 *</label>
|
|
<select class="form-select" id="editProblemLevel" required>
|
|
<option value="启蒙">启蒙</option>
|
|
<option value="入门">入门</option>
|
|
<option value="进阶">进阶</option>
|
|
<option value="熟练">熟练</option>
|
|
<option value="精通">精通</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveProblemEdit()">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 生成方案 Modal -->
|
|
<div class="modal fade" id="generatePlanModal" tabindex="-1" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">生成练习方案</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">学员：{{ student.name }}</label>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="useAiReport" checked>
|
|
<label class="form-check-label" for="useAiReport">
|
|
生成AI个性化报告（需要配置API）
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="progress" style="height: 25px;">
|
|
<div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated"
|
|
role="progressbar" style="width: 0%">0%</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong id="progressText">准备中...</strong>
|
|
</div>
|
|
<div id="progressLog" class="bg-light p-3 rounded" style="height: 200px; overflow-y: auto; font-family: monospace;">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="startGenerateBtn" onclick="startGeneratePlan()">开始生成</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分配目标 Modal -->
|
|
<div class="modal fade" id="assignGoalModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">分配目标</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">选择目标 *</label>
|
|
<select class="form-select" id="assign-goal-select"></select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">评估日期</label>
|
|
<div class="row g-2">
|
|
<div class="col-auto">
|
|
<select class="form-select" id="assign-assessment-days">
|
|
<option value="">指定日期</option>
|
|
<option value="15">15天后</option>
|
|
<option value="30">30天后</option>
|
|
<option value="60">60天后</option>
|
|
<option value="90">90天后</option>
|
|
<option value="180">180天后</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<input type="date" class="form-control" id="assign-assessment-date">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<a class="text-decoration-none" data-bs-toggle="collapse" href="#assignMoreSettings" role="button">
|
|
更多设置 ▼
|
|
</a>
|
|
<div class="collapse" id="assignMoreSettings">
|
|
<div class="card card-body mt-2">
|
|
<div class="mb-3">
|
|
<label class="form-label">开始日期</label>
|
|
<input type="date" class="form-control" id="assign-start-date">
|
|
<small class="text-muted">默认立即开始</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer-with-top">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="confirm-assign-goal">分配</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 调整目标 Modal -->
|
|
<div class="modal fade" id="adjustGoalModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">调整目标</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="adjust-goal-id">
|
|
<p class="fw-bold mb-3" id="adjust-goal-name"></p>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">开始日期</label>
|
|
<input type="date" class="form-control" id="adjust-start-date">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">评估日期</label>
|
|
<input type="date" class="form-control" id="adjust-assessment-date">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer-with-top">
|
|
<button type="button" class="btn btn-danger" id="remove-assigned-goal">移除目标</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="confirm-adjust-goal">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评估目标 Modal -->
|
|
<div class="modal fade" id="assessGoalModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">评估目标</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="assess-goal-id">
|
|
<p class="fw-bold mb-3" id="assess-goal-name"></p>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label">掌握程度</label>
|
|
<select class="form-select" id="assess-mastery">
|
|
<option value="1">⭐ 入门</option>
|
|
<option value="2">⭐⭐ 初级</option>
|
|
<option value="3">⭐⭐⭐ 进阶</option>
|
|
<option value="4">⭐⭐⭐⭐ 熟练</option>
|
|
<option value="5">⭐⭐⭐⭐⭐ 精通</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label">达成日期</label>
|
|
<input type="date" class="form-control" id="assess-achievement-date">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label">当前状态</label>
|
|
<input type="text" class="form-control" id="assess-current-status" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">评语</label>
|
|
<textarea class="form-control" id="assess-comment" rows="3" placeholder="评估意见..."></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer-with-top">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="confirm-assess-goal">保存评估</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.modal-footer-with-top {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
padding: 1rem;
|
|
border-top: 1px solid #dee2e6;
|
|
background: #f8f9fa;
|
|
position: sticky;
|
|
bottom: 0;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
const currentStudentId = {{ student.id }};
|
|
const studentName = "{{ student.name }}";
|
|
let problemModal, editProblemModal, generateModal, editStudentModal, assignGoalModal;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
problemModal = new bootstrap.Modal(document.getElementById('addProblemModal'));
|
|
editProblemModal = new bootstrap.Modal(document.getElementById('editProblemModal'));
|
|
generateModal = new bootstrap.Modal(document.getElementById('generatePlanModal'));
|
|
editStudentModal = new bootstrap.Modal(document.getElementById('editStudentModal'));
|
|
assignGoalModal = new bootstrap.Modal(document.getElementById('assignGoalModal'));
|
|
|
|
// 填充编辑学员表单初始值
|
|
document.getElementById('editStudentName').value = document.getElementById('detailName').textContent;
|
|
document.getElementById('editStudentPhone').value = document.getElementById('detailPhone').textContent === '未填写' ? '' : document.getElementById('detailPhone').textContent;
|
|
document.getElementById('editStudentWechat').value = document.getElementById('detailWechatNickname').textContent === '未填写' ? '' : document.getElementById('detailWechatNickname').textContent;
|
|
document.getElementById('editStudentPracticeTime').value = document.getElementById('detailPracticeTime').textContent;
|
|
document.getElementById('editStudentNotes').value = document.getElementById('detailNotes').textContent === '无备注' ? '' : document.getElementById('detailNotes').textContent;
|
|
|
|
loadProblems();
|
|
loadPlans();
|
|
loadProblemOptions();
|
|
loadStudentGoals();
|
|
});
|
|
|
|
async function loadProblemOptions() {
|
|
try {
|
|
const resp = await fetch('/api/problems');
|
|
const problems = await resp.json();
|
|
const select = document.getElementById('addProblemSelect');
|
|
select.innerHTML = '<option value="">选择问题...</option>';
|
|
problems.forEach(p => {
|
|
select.innerHTML += `<option value="${p.id}">${p.no} - ${p.name}</option>`;
|
|
});
|
|
} catch (e) {
|
|
console.error('加载问题列表失败', e);
|
|
}
|
|
}
|
|
|
|
async function loadProblems() {
|
|
try {
|
|
const resp = await fetch(`/api/students/${currentStudentId}/problems`);
|
|
const problems = await resp.json();
|
|
renderProblemList(problems);
|
|
} catch (e) {
|
|
document.getElementById('problemList').innerHTML = '<p class="text-danger">加载失败</p>';
|
|
}
|
|
}
|
|
|
|
function renderProblemList(problems) {
|
|
const container = document.getElementById('problemList');
|
|
if (problems.length === 0) {
|
|
container.innerHTML = '<p class="text-muted">暂无问题记录</p>';
|
|
return;
|
|
}
|
|
container.innerHTML = problems.map(p => `
|
|
<div class="d-flex justify-content-between align-items-center mb-2 p-2 border rounded">
|
|
<div>
|
|
<strong>${p.problem_name}</strong>
|
|
<span class="badge bg-${p.severity === '严重' ? 'danger' : p.severity === '中等' ? 'warning' : 'info'} ms-2">${p.severity}</span>
|
|
<span class="badge bg-secondary ms-1">${p.level}</span>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary me-1" onclick="showEditProblemModal(${p.id}, '${p.problem_name}', '${p.severity}', '${p.level}')">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="deleteProblem(${p.id})">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// 学习历程时间线（替代原 loadPlans）
|
|
async function loadPlans() {
|
|
await loadTimeline();
|
|
}
|
|
|
|
// 学习历程时间线
|
|
async function loadTimeline() {
|
|
const [plansRes, goalsRes] = await Promise.all([
|
|
fetch(`/api/students/${currentStudentId}/plans`),
|
|
fetch(`/api/students/${currentStudentId}/goals`)
|
|
]);
|
|
const plans = await plansRes.json();
|
|
const goals = await goalsRes.json();
|
|
|
|
// 构建时间线条目
|
|
const timeline = [];
|
|
|
|
// 添加目标开始记录
|
|
goals.forEach(g => {
|
|
if (g.start_date) {
|
|
const startDate = new Date(g.start_date);
|
|
const endDate = g.assessment_date ? new Date(g.assessment_date) : null;
|
|
const days = endDate ? Math.ceil((endDate - startDate) / (1000*60*60*24)) : null;
|
|
timeline.push({
|
|
date: startDate,
|
|
type: 'goal_start',
|
|
goal: g,
|
|
days: days,
|
|
endDate: endDate
|
|
});
|
|
}
|
|
// 添加目标达成记录
|
|
if (g.achievement_date) {
|
|
timeline.push({
|
|
date: new Date(g.achievement_date),
|
|
type: 'goal_achieved',
|
|
goal: g
|
|
});
|
|
}
|
|
});
|
|
|
|
// 添加方案生成记录
|
|
plans.forEach(p => {
|
|
timeline.push({
|
|
date: new Date(p.created_at),
|
|
type: 'plan',
|
|
plan: p
|
|
});
|
|
});
|
|
|
|
// 按时间逆序排序
|
|
timeline.sort((a, b) => b.date - a.date);
|
|
|
|
renderTimeline(timeline);
|
|
}
|
|
|
|
function renderTimeline(timeline) {
|
|
const container = document.getElementById('planList');
|
|
if (timeline.length === 0) {
|
|
container.innerHTML = '<p class="text-muted">暂无学习记录</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = timeline.map(entry => {
|
|
if (entry.type === 'goal_start') {
|
|
const g = entry.goal;
|
|
return `
|
|
<div class="d-flex align-items-start mb-2 p-2 border rounded border-primary">
|
|
<div class="me-2">
|
|
<span class="badge bg-primary">目标启动</span>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<strong>${escapeHtml(g.goal_name)}</strong>
|
|
<span class="text-muted ms-2">${formatDate(entry.date)}</span>
|
|
</div>
|
|
<span class="badge bg-secondary">预期 ${entry.days} 天</span>
|
|
</div>
|
|
<div class="small text-muted">
|
|
${g.goal_level || '入门'} | ${g.goal_category || '综合'} | 评估日期: ${entry.endDate ? formatDate(entry.endDate) : '未设置'}
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
} else if (entry.type === 'goal_achieved') {
|
|
const g = entry.goal;
|
|
const stars = '⭐'.repeat(g.mastery_level || 1);
|
|
return `
|
|
<div class="d-flex align-items-start mb-2 p-2 border rounded border-success">
|
|
<div class="me-2">
|
|
<span class="badge bg-success">目标达成</span>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<strong>${escapeHtml(g.goal_name)}</strong>
|
|
<span class="text-muted ms-2">${formatDate(entry.date)}</span>
|
|
</div>
|
|
<span>${stars}</span>
|
|
</div>
|
|
${g.comment ? `<div class="small text-muted mt-1"><em>"${escapeHtml(g.comment)}"</em></div>` : ''}
|
|
</div>
|
|
</div>`;
|
|
} else {
|
|
const p = entry.plan;
|
|
return `
|
|
<div class="d-flex align-items-start mb-2 p-2 border rounded ${p.is_typical ? 'border-warning bg-light' : ''}">
|
|
<div class="form-check me-2">
|
|
<input class="form-check-input" type="checkbox" id="typical-${p.id}" ${p.is_typical ? 'checked' : ''} onchange="toggleTypical(${p.id})">
|
|
<label class="form-check-label" for="typical-${p.id}" title="设为典型"></label>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<a href="/plan/${p.id}" class="fw-bold text-decoration-none">${formatDate(entry.date)}</a>
|
|
${p.is_typical ? '<span class="badge bg-warning text-dark ms-1">典型</span>' : ''}
|
|
</div>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="deletePlan(${p.id})">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="small text-muted">
|
|
${p.problem_names && p.problem_names.length > 0 ? '问题: ' + p.problem_names.join(', ') : ''}
|
|
${p.template_name ? ' | 模板: ' + p.template_name : ''}
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
}).join('');
|
|
}
|
|
|
|
async function toggleTypical(planId) {
|
|
await fetch(`/api/plans/${planId}/typical`, {method: 'POST'});
|
|
loadTimeline();
|
|
}
|
|
|
|
function showEditStudentModal() {
|
|
editStudentModal.show();
|
|
}
|
|
|
|
async function saveStudentEdit() {
|
|
const data = {
|
|
name: document.getElementById('editStudentName').value,
|
|
phone: document.getElementById('editStudentPhone').value,
|
|
wechat_nickname: document.getElementById('editStudentWechat').value,
|
|
practice_time: document.getElementById('editStudentPracticeTime').value,
|
|
notes: document.getElementById('editStudentNotes').value,
|
|
};
|
|
|
|
try {
|
|
const resp = await fetch(`/api/students/${currentStudentId}`, {
|
|
method: 'PUT',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(data)
|
|
});
|
|
if (resp.ok) {
|
|
editStudentModal.hide();
|
|
location.reload();
|
|
} else {
|
|
alert('保存失败');
|
|
}
|
|
} catch (e) {
|
|
alert('保存失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function deleteStudent() {
|
|
if (!confirm('确定删除该学员？所有问题和方案都将被删除！')) return;
|
|
fetch(`/api/students/${currentStudentId}`, {method: 'DELETE'})
|
|
.then(r => r.json())
|
|
.then(() => window.location.href = '/students');
|
|
}
|
|
|
|
function showAddProblemModal() {
|
|
document.getElementById('addProblemSelect').value = '';
|
|
document.getElementById('addProblemSeverity').value = '中等';
|
|
document.getElementById('addProblemLevel').value = '入门';
|
|
problemModal.show();
|
|
}
|
|
|
|
async function saveAddProblem() {
|
|
const problemId = document.getElementById('addProblemSelect').value;
|
|
const severity = document.getElementById('addProblemSeverity').value;
|
|
const level = document.getElementById('addProblemLevel').value;
|
|
|
|
if (!problemId) {
|
|
alert('请选择问题');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const resp = await fetch(`/api/students/${currentStudentId}/problems`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
problems: [{problem_id: parseInt(problemId), severity, level}]
|
|
})
|
|
});
|
|
if (resp.ok) {
|
|
problemModal.hide();
|
|
loadProblems();
|
|
} else {
|
|
const err = await resp.json();
|
|
alert('添加失败: ' + (err.error || '未知错误'));
|
|
}
|
|
} catch (e) {
|
|
alert('添加失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function showEditProblemModal(id, name, severity, level) {
|
|
document.getElementById('editProblemId').value = id;
|
|
document.getElementById('editProblemName').value = name;
|
|
document.getElementById('editProblemSeverity').value = severity;
|
|
document.getElementById('editProblemLevel').value = level;
|
|
editProblemModal.show();
|
|
}
|
|
|
|
async function saveProblemEdit() {
|
|
const id = document.getElementById('editProblemId').value;
|
|
const severity = document.getElementById('editProblemSeverity').value;
|
|
const level = document.getElementById('editProblemLevel').value;
|
|
|
|
// 获取当前问题列表找到对应的 problem_db_id
|
|
const resp = await fetch(`/api/students/${currentStudentId}/problems`);
|
|
const problems = await resp.json();
|
|
const problem = problems.find(p => p.id === parseInt(id));
|
|
if (!problem) {
|
|
alert('问题不存在');
|
|
return;
|
|
}
|
|
|
|
// 调用更新 API
|
|
try {
|
|
const updateResp = await fetch(`/api/students/${currentStudentId}/problems/${id}`, {
|
|
method: 'PUT',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({severity, level})
|
|
});
|
|
if (updateResp.ok) {
|
|
editProblemModal.hide();
|
|
loadProblems();
|
|
} else {
|
|
alert('更新失败');
|
|
}
|
|
} catch (e) {
|
|
alert('更新失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function deleteProblem(id) {
|
|
if (!confirm('确定删除该问题？')) return;
|
|
try {
|
|
const resp = await fetch(`/api/students/${currentStudentId}/problems/${id}`, {
|
|
method: 'DELETE'
|
|
});
|
|
if (resp.ok) {
|
|
loadProblems();
|
|
} else {
|
|
alert('删除失败');
|
|
}
|
|
} catch (e) {
|
|
alert('删除失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function generatePlan() {
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressText = document.getElementById('progressText');
|
|
const progressLog = document.getElementById('progressLog');
|
|
|
|
progressBar.style.width = '0%';
|
|
progressBar.textContent = '0%';
|
|
progressText.textContent = '准备中...';
|
|
progressLog.innerHTML = '';
|
|
generateModal.show();
|
|
}
|
|
|
|
async function startGeneratePlan() {
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressText = document.getElementById('progressText');
|
|
const progressLog = document.getElementById('progressLog');
|
|
const useAi = document.getElementById('useAiReport').checked;
|
|
|
|
progressBar.style.width = '0%';
|
|
progressText.textContent = '准备中...';
|
|
progressLog.innerHTML = '';
|
|
|
|
function addLog(msg, isError = false) {
|
|
const time = new Date().toLocaleTimeString();
|
|
progressLog.innerHTML += `<div class="${isError ? 'text-danger' : 'text-muted'} small">${time} ${msg}</div>`;
|
|
progressLog.scrollTop = progressLog.scrollHeight;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/generate-plan', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({student_id: currentStudentId, use_ai: useAi})
|
|
});
|
|
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
|
|
while (true) {
|
|
const {done, value} = await reader.read();
|
|
if (done) break;
|
|
|
|
const text = decoder.decode(value);
|
|
const lines = text.split('\n');
|
|
|
|
for (const line of lines) {
|
|
if (line.startsWith('data: ')) {
|
|
try {
|
|
const data = JSON.parse(line.slice(6));
|
|
|
|
progressBar.style.width = data.progress + '%';
|
|
progressBar.textContent = data.progress + '%';
|
|
progressText.textContent = data.message;
|
|
|
|
let logMsg = data.message;
|
|
if (data.detail) {
|
|
if (data.step === 'ai_prompt') {
|
|
logMsg = '【AI提示词】\n' + data.detail;
|
|
addLog(logMsg);
|
|
continue;
|
|
} else {
|
|
logMsg += '\n └ ' + data.detail.replace(/\n/g, '\n └ ');
|
|
}
|
|
}
|
|
addLog(logMsg);
|
|
|
|
if (data.step === 'complete') {
|
|
setTimeout(() => {
|
|
generateModal.hide();
|
|
alert('方案生成成功！');
|
|
loadPlans();
|
|
}, 500);
|
|
}
|
|
|
|
if (data.error) {
|
|
addLog(data.error, true);
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
addLog('请求失败：' + err.message, true);
|
|
progressText.textContent = '生成失败';
|
|
}
|
|
}
|
|
|
|
async function deletePlan(id) {
|
|
if (!confirm('确定删除该方案？')) return;
|
|
try {
|
|
const resp = await fetch(`/api/plans/${id}`, {method: 'DELETE'});
|
|
if (resp.ok) {
|
|
loadPlans();
|
|
} else {
|
|
alert('删除失败');
|
|
}
|
|
} catch (e) {
|
|
alert('删除失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
// ===== 目标相关 =====
|
|
let adjustGoalModal, assessGoalModal;
|
|
|
|
async function loadStudentGoals() {
|
|
const res = await fetch(`/api/students/${currentStudentId}/goals`);
|
|
const goals = await res.json();
|
|
|
|
if (goals.length === 0) {
|
|
document.getElementById('student-goals-list').innerHTML =
|
|
'<p class="text-muted">暂无分配的目标</p>';
|
|
return;
|
|
}
|
|
|
|
document.getElementById('student-goals-list').innerHTML = goals.map(g => `
|
|
<div class="d-flex justify-content-between align-items-center mb-2 p-2 border rounded">
|
|
<div>
|
|
<strong>${escapeHtml(g.goal_name)}</strong>
|
|
<div class="small">
|
|
<span class="badge bg-secondary me-1">${g.goal_level || '入门'}</span>
|
|
<span class="badge bg-info me-1">${g.goal_category || '综合'}</span>
|
|
<span class="badge ${g.status === '进行中' ? 'bg-primary' : g.status === '未开始' ? 'bg-warning' : 'bg-secondary'}">${g.status}</span>
|
|
</div>
|
|
<div class="small text-muted mt-1">
|
|
${g.start_date ? '开始: '+formatDate(g.start_date) : '未开始'}
|
|
${g.assessment_date ? ' | 评估: '+formatDate(g.assessment_date) : ''}
|
|
${g.mastery_level ? ' | ⭐'.repeat(g.mastery_level) : ''}
|
|
</div>
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button class="btn btn-outline-primary" onclick="openAdjustGoal(${g.goal_id})">调整目标</button>
|
|
<button class="btn btn-outline-success" onclick="openAssessGoal(${g.goal_id})">评估目标</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return '';
|
|
const d = new Date(dateStr);
|
|
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
|
|
}
|
|
|
|
async function openAdjustGoal(goalId) {
|
|
const goals = await fetch(`/api/students/${currentStudentId}/goals`).then(r => r.json());
|
|
const goal = goals.find(g => g.goal_id === goalId);
|
|
if (!goal) return;
|
|
|
|
document.getElementById('adjust-goal-id').value = goalId;
|
|
document.getElementById('adjust-goal-name').textContent = goal.goal_name;
|
|
document.getElementById('adjust-start-date').value = goal.start_date ? goal.start_date.split('T')[0] : '';
|
|
document.getElementById('adjust-assessment-date').value = goal.assessment_date ? goal.assessment_date.split('T')[0] : '';
|
|
|
|
new bootstrap.Modal(document.getElementById('adjustGoalModal')).show();
|
|
}
|
|
|
|
document.getElementById('remove-assigned-goal').addEventListener('click', () => {
|
|
const goalId = document.getElementById('adjust-goal-id').value;
|
|
if (!confirm('确定移除此目标？此操作不可恢复。')) return;
|
|
fetch(`/api/students/${currentStudentId}/goals/${goalId}`, {method: 'DELETE'})
|
|
.then(() => {
|
|
bootstrap.Modal.getInstance(document.getElementById('adjustGoalModal')).hide();
|
|
loadStudentGoals();
|
|
});
|
|
});
|
|
|
|
document.getElementById('confirm-adjust-goal').addEventListener('click', async () => {
|
|
const goalId = document.getElementById('adjust-goal-id').value;
|
|
const startDate = document.getElementById('adjust-start-date').value;
|
|
const assessmentDate = document.getElementById('adjust-assessment-date').value;
|
|
|
|
await fetch(`/api/students/${currentStudentId}/goals/${goalId}`, {
|
|
method: 'PUT',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
start_date: startDate || null,
|
|
assessment_date: assessmentDate || null
|
|
})
|
|
});
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById('adjustGoalModal')).hide();
|
|
loadStudentGoals();
|
|
});
|
|
|
|
async function openAssessGoal(goalId) {
|
|
const goals = await fetch(`/api/students/${currentStudentId}/goals`).then(r => r.json());
|
|
const goal = goals.find(g => g.goal_id === goalId);
|
|
if (!goal) return;
|
|
|
|
document.getElementById('assess-goal-id').value = goalId;
|
|
document.getElementById('assess-goal-name').textContent = goal.goal_name;
|
|
document.getElementById('assess-mastery').value = goal.mastery_level || '1';
|
|
document.getElementById('assess-achievement-date').value = goal.achievement_date ? goal.achievement_date.split('T')[0] : '';
|
|
document.getElementById('assess-current-status').value = goal.status;
|
|
document.getElementById('assess-comment').value = goal.comment || '';
|
|
|
|
new bootstrap.Modal(document.getElementById('assessGoalModal')).show();
|
|
}
|
|
|
|
document.getElementById('confirm-assess-goal').addEventListener('click', async () => {
|
|
const goalId = document.getElementById('assess-goal-id').value;
|
|
const masteryLevel = document.getElementById('assess-mastery').value;
|
|
const achievementDate = document.getElementById('assess-achievement-date').value;
|
|
const comment = document.getElementById('assess-comment').value;
|
|
|
|
await fetch(`/api/students/${currentStudentId}/goals/${goalId}`, {
|
|
method: 'PUT',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
mastery_level: parseInt(masteryLevel),
|
|
achievement_date: achievementDate || null,
|
|
comment: comment
|
|
})
|
|
});
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById('assessGoalModal')).hide();
|
|
loadStudentGoals();
|
|
});
|
|
|
|
// 加载可选目标列表到 Modal
|
|
async function loadGoalOptions() {
|
|
const res = await fetch('/api/goals');
|
|
const goals = await res.json();
|
|
const select = document.getElementById('assign-goal-select');
|
|
|
|
// 获取已分配的目标
|
|
const assignedRes = await fetch(`/api/students/${currentStudentId}/goals`);
|
|
const assigned = await assignedRes.json();
|
|
const assignedIds = assigned.map(g => g.goal_id);
|
|
|
|
select.innerHTML = goals
|
|
.filter(g => !assignedIds.includes(g.id))
|
|
.map(g => `<option value="${g.id}">${escapeHtml(g.name)} [${g.level || '入门'} - ${g.category || '综合'}]</option>`)
|
|
.join('');
|
|
|
|
// 设置默认开始日期为今天
|
|
document.getElementById('assign-start-date').value = new Date().toISOString().split('T')[0];
|
|
}
|
|
|
|
// 评估日期联动：选择天数后自动计算日期，或直接选日期
|
|
document.getElementById('assign-assessment-days').addEventListener('change', function() {
|
|
const days = parseInt(this.value);
|
|
if (days) {
|
|
const d = new Date();
|
|
d.setDate(d.getDate() + days);
|
|
document.getElementById('assign-assessment-date').value = d.toISOString().split('T')[0];
|
|
}
|
|
});
|
|
|
|
document.getElementById('assign-assessment-date').addEventListener('change', function() {
|
|
if (this.value) {
|
|
document.getElementById('assign-assessment-days').value = '';
|
|
}
|
|
});
|
|
|
|
document.getElementById('confirm-assign-goal').addEventListener('click', async () => {
|
|
const goalId = document.getElementById('assign-goal-select').value;
|
|
const assessmentDays = document.getElementById('assign-assessment-days').value;
|
|
const assessmentDate = document.getElementById('assign-assessment-date').value;
|
|
const startDate = document.getElementById('assign-start-date').value;
|
|
|
|
if (!goalId) { alert('请选择目标'); return; }
|
|
if (!assessmentDays && !assessmentDate) { alert('请选择评估方式'); return; }
|
|
|
|
const res = await fetch(`/api/students/${currentStudentId}/goals`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
goal_id: parseInt(goalId),
|
|
assessment_days: assessmentDays || null,
|
|
assessment_date: assessmentDate || null,
|
|
start_date: startDate || null,
|
|
start_now: !startDate
|
|
})
|
|
});
|
|
|
|
if (res.ok) {
|
|
assignGoalModal.hide();
|
|
loadStudentGoals();
|
|
// 重置表单
|
|
document.getElementById('assign-assessment-days').value = '';
|
|
document.getElementById('assign-assessment-date').value = '';
|
|
document.getElementById('assign-start-date').value = new Date().toISOString().split('T')[0];
|
|
} else {
|
|
const err = await res.json();
|
|
alert(err.error || '分配失败');
|
|
}
|
|
});
|
|
|
|
document.getElementById('assignGoalModal').addEventListener('show.bs.modal', loadGoalOptions);
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function showToast(message, type) {
|
|
const toast = document.createElement('div');
|
|
toast.className = 'toast-message alert alert-' + (type === 'success' ? 'success' : 'danger');
|
|
toast.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;min-width:200px;';
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3000);
|
|
}
|
|
</script>
|
|
{% endblock %} |