-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (81 loc) · 2.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Students</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.sortable-list {
list-style-type: none;
padding: 0;
}
.sortable-item {
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f8f9fa;
cursor: grab;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2 id="classTitle">Class A Students</h2>
<button class="btn btn-primary" onclick="loadStudents('Class A')">Class A</button>
<button class="btn btn-primary" onclick="loadStudents('Class B')">Class B</button>
<ul id="studentList" class="sortable-list">
<!-- Students will be dynamically loaded here -->
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function loadStudents(className) {
$("#classTitle").text(className); // Set the class title
$.ajax({
type: "GET",
url: `https://task1studentrank.onrender.com/getStudents?class=${className}`,
success: function (response) {
console.log(response); // Log the response for debugging
$("#studentList").html(
response.map(
(student) =>
`<li class='sortable-item' data-student='${student.name_of_student}' data-sort-rank='${student.sort_rank}'>${student.name_of_student}</li>`
).join('')
);
},
error: function (error) {
console.error("Error loading students:", error);
},
});
}
$(function () {
$("#studentList").sortable({
update: function (event, ui) {
updateSortOrder();
}
});
function updateSortOrder() {
var updatedOrder = $("#studentList").sortable("toArray", { attribute: "data-student" });
var className = $("#classTitle").text(); // Get the current class from the title
$.ajax({
type: "POST",
url: "https://task1studentrank.onrender.com/updateSortOrder",
contentType: "application/json",
data: JSON.stringify({ sortOrder: updatedOrder, className: className }), // Pass the class to the server
success: function (response) {
console.log(response);
},
error: function (error) {
console.error("Error updating sort order:", error);
}
});
}
// Initial load for Class A
loadStudents('Class A');
});
</script>
</body>
</html>