<%--
  Created by IntelliJ IDEA.
  User: 25589
  Date: 2024/11/21
  Time: 下午5:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>课程信息列表</title>
    <link rel="stylesheet" href="../css/course.css">
</head>
<body>
<div class="container">
    <table id="course-list">
    </table>
    <div class="course-editor"></div>
</div>
</body>
<script src="${pageContext.request.contextPath}/js/jquery-3.7.1.min.js"></script>
<script>
    // 1公共基础必修课
    // 2公共选修课
    // 3学科基础课
    // 4专业必修课
    // 5专业选修课
    // 6集中性实践教学环节
    const types = ['', '公共基础必修课', '公共选修课', '学科基础课', '专业必修课', '专业选修课', '集中性实践教学环节']
    // 1 软件工程
    // 2 空间信息
    // 3 大数据
    const majors = ['', '软件工程', '空间信息', '大数据'];
    let courses;
    function getCourses(){
        $.get("${pageContext.request.contextPath}/courseListAction", (data, status)=>{
            const course_list = document.getElementById('course-list');
            if (status!=="success"){
                alert("信息获取失败！");
                return;
            }
            course_list.innerHTML = "<tr class=\"tr-head\"><td class=\"tr-head\" colspan=\"6\">课程信息列表</td></tr> <tr> <td>名称</td> <td>性质</td> <td>学分</td> <td>开设年级</td> <td>开设专业</td> </tr>"
            courses = data;
            for (let i in data){
                const course_tr = document.createElement('tr');
                course_tr.innerHTML="<td>"+ data[i].name +"</td>" +
                    "<td>"+types[data[i].type]+"</td>" +
                    "<td>"+ data[i].credit +"</td>" +
                    "<td>"+ data[i].grade + "</td>" +
                    "<td>"+ majors[data[i].major]+"</td>" +
                    "<td><a href=\"#\" onclick=\"editCourse("+ i + ")\" " +
                    ">编辑</a> <a href=\"${pageContext.request.contextPath}/courseDeleteAction?id=" +
                    data[i].id+"\">删除</a></td>";
                course_list.appendChild(course_tr);
            }
            const end_tr = document.createElement('tr');
            end_tr.innerHTML="<td><a href=\"#\" onclick=\"addCourse()\">添加</a></td><td></td><td></td><td></td><td>" +
                "<a href=\"#\" onclick=\"getCourses()\">刷新数据列表</a></td><td></td>";
            course_list.appendChild(end_tr);
    });
    }
    $(document).ready(getCourses);

    function editCourse(i){
        $(".course-editor").load("${pageContext.request.contextPath}/course/course_edit.jsp", ()=>{
            const form = document.querySelector('.course-edit');
            form.action = "${pageContext.request.contextPath}/courseEditAction";
            form.method = "POST";
            const idInput = document.getElementById('id-input');
            idInput.value = courses[i].id;
            const nameInput = document.getElementById('name-input');
            nameInput.value = courses[i].name;
            const typeInput = document.getElementById('type-input');
            typeInput.value = courses[i].type;
            const creditInput = document.getElementById('credit-input');
            creditInput.value = courses[i].credit;
            const yearInput = document.getElementById('grade-input');
            yearInput.value = courses[i].grade;
            const majorInputs = form.querySelectorAll('input[name="major"]');
            majorInputs.forEach((input) => {
                if (parseInt(input.value) === courses[i].major) {
                    input.checked = true;
                }
            });

            const noteInput = form.querySelector('#detail-input');
            noteInput.value = courses[i].detail;

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                const gradeInput = document.getElementById('grade-input');
                if (!/^20\d{2}$/.test(gradeInput.value)) {
                    alert('请输入合法的四位年份');
                    return;
                }

                const nameInput = document.getElementById('name-input');
                console.log(nameInput.value.length)
                console.log(nameInput.value)
                if (nameInput.value.length < 5 || nameInput.value.length > 20){
                    alert('请输入5~20位字符');
                    return;
                }
                const detailInput = document.getElementById('detail-input');
                if (detailInput.value.length > 200){
                    alert('备注超长');
                    return;
                }
                $(".course-edit").submit();
            });
        });
    }

    function addCourse(){
        $(".course-editor").load("${pageContext.request.contextPath}/course/course_edit.jsp", ()=>{
            const form = document.querySelector('.course-edit');
            form.action = "${pageContext.request.contextPath}/courseAddAction";
            form.addEventListener('submit', function (e) {
                e.preventDefault();
                const gradeInput = document.getElementById('grade-input');
                if (!/^20\d{2}$/.test(gradeInput.value)) {
                    alert('请输入合法的四位年份');
                    return;
                }

                const nameInput = document.getElementById('name-input');
                console.log(nameInput.value.length)
                console.log(nameInput.value)
                if (nameInput.value.length < 5 || nameInput.value.length > 20){
                    alert('请输入5~20位字符');
                    return;
                }
                const detailInput = document.getElementById('detail-input');
                if (detailInput.value.length > 200){
                    alert('备注超长');
                    return;
                }
                $(".course-edit").submit();
            });
        });
    }
</script>
</html>
