任务列表 - 查看、修改、删除任务

<div>
    <h1>任务列表</h1>
    <table id="data-table">
        <tr>
            <th>任务id</th>
            <th>任务名称</th>
            <th>任务组名</th>
            <th>调用目标字符串</th>
            <th>执行表达式</th>
            <th>任务状态</th>
            <th>任务描述</th>
            <th>操作</th>
        </tr>
    </table>
</div>
<p></p>
<p></p>
<div >
    <button><a href="http://localhost:8086/quartz/insert" style="color: #fff;">插入任务</a></button>
</div>
<div id="edit-form" style="display: none;">
    <h1>修改任务</h1>
    <form id="edit-job-form">
        <label for="jobName">任务名称:</label>
        <input type="text" id="jobName" name="jobName"><br><br>
        <label for="jobGroup">任务组名:</label>
        <input type="text" id="jobGroup" name="jobGroup"><br><br>
        <label for="invokeTarget">调用目标字符串:</label>
        <input type="text" id="invokeTarget" name="invokeTarget"><br><br>
        <label for="cronExpression">执行表达式:</label>
        <input type="text" id="cronExpression" name="cronExpression"><br><br>
        <label for="status">任务状态:</label>
        <input type="text" id="status" name="status"><br><br>
        <label for="remark">任务描述:</label>
        <input type="text" id="remark" name="remark"><br><br>
        <button type="submit">修改</button>
    </form>
</div>
<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:8086/quartz/list', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            var table = document.getElementById('data-table');

            for (var i = 0; i < data.length; i++) {
                var row = table.insertRow(i + 1);
                var taskIdCell = row.insertCell(0);
                var taskNameCell = row.insertCell(1);
                var taskGroupNameCell = row.insertCell(2);
                var targetStringCell = row.insertCell(3);
                var executionExpressionCell = row.insertCell(4);
                var taskStatusCell = row.insertCell(5);
                var taskDescCell = row.insertCell(6);
                var actionCell = row.insertCell(7);

                taskIdCell.innerHTML = data[i].jobId;
                taskNameCell.innerHTML = data[i].jobName;
                taskGroupNameCell.innerHTML = data[i].jobGroup;
                targetStringCell.innerHTML = data[i].invokeTarget;
                executionExpressionCell.innerHTML = data[i].cronExpression;
                taskStatusCell.innerHTML = data[i].status;
                taskDescCell.innerHTML = data[i].remark;

                var editButton = document.createElement('button');
                editButton.innerHTML = '修改';
                editButton.setAttribute('jobId', data[i].jobId);
                editButton.addEventListener('click', function() {
                    var jobId = this.getAttribute('jobId');
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', 'http://localhost:8086/quartz/getJobById?id=' + jobId, true);
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            var job = JSON.parse(xhr.responseText);
                            document.getElementById('jobName').value = job.jobName;
                            document.getElementById('jobGroup').value = job.jobGroup;
                            document.getElementById('invokeTarget').value = job.invokeTarget;
                            document.getElementById('cronExpression').value = job.cronExpression;
                            document.getElementById('status').value = job.status;
                            document.getElementById('remark').value = job.remark;

                            document.getElementById('edit-form').style.display = 'block';

                            document.getElementById('edit-job-form').addEventListener('submit', function(event) {
                                event.preventDefault();
                                var updatedJob = {
                                    jobId: jobId,
                                    jobName: document.getElementById('jobName').value,
                                    jobGroup: document.getElementById('jobGroup').value,
                                    invokeTarget: document.getElementById('invokeTarget').value,
                                    cronExpression: document.getElementById('cronExpression').value,
                                    status: document.getElementById('status').value,
                                    remark: document.getElementById('remark').value
                                };
                                var xhr = new XMLHttpRequest();
                                xhr.open('PUT', 'http://localhost:8086/quartz/updateJob', true);
                                xhr.setRequestHeader('Content-Type', 'application/json');
                                xhr.onreadystatechange = function() {
                                    if (xhr.readyState === 4 && xhr.status === 200) {
                                        alert('任务修改成功');
                                        document.getElementById('edit-form').style.display = 'none';
                                        location.reload();
                                    }
                                };
                                xhr.send(JSON.stringify(updatedJob));
                            });
                        }
                    };
                    xhr.send();
                });
                actionCell.appendChild(editButton);

                var deleteButton = document.createElement('button');
                deleteButton.innerHTML = '删除';
                deleteButton.setAttribute('jobId', data[i].jobId);
                deleteButton.classList.add("delete-button");
                deleteButton.addEventListener('click', function() {
                    var jobId = this.getAttribute('jobId');
                    var xhr = new XMLHttpRequest();
                    xhr.open('DELETE', 'http://localhost:8086/quartz/deleteJobById?id=' + jobId, true);
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            alert('任务删除成功');
                            location.reload();
                        }
                    };
                    xhr.send();
                });
                actionCell.appendChild(deleteButton);
            }
        }
    };
    xhr.send();
</script>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

    button {
        width: 100px;
        height: 30px;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
    }

    .delete-button {
        background-color: #ff0000;
    }

    #edit-form {
        border: 1px solid #ccc;
        padding: 20px;
        margin: 20px;
    }
    #edit-form h2 {
        margin-bottom: 10px;
    }
    #edit-job-form label {
        display: inline-block;
        width: 150px;
        font-weight: bold;
    }
    #edit-job-form input[type="text"] {
        width: 200px;
        padding: 5px;
        margin-bottom: 10px;
    }
    #edit-job-form button {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }
    #edit-job-form button:hover {
        background-color: #45a049;
    }
</style>
</body>
</html>