LufsX/Evaluation-Backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: rank page

Browse Source
This commit is contained in:
LufsX
2024-09-25 10:49:34 +08:00
parent adf54c45c4
commit 1ba7facb59
5 changed files with 211 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RANK.html
+96
View File
File diff suppressed because one or more lines are too long
RANK.md
+61
View File
@@ -0,0 +1,61 @@
# 挑战赛数据展示
该页面展示所有提交的分数（包括零分）
数据刷新可能有五分钟左右的延迟。
## 评测结果
<table>
<thead>
<tr>
<th>时间</th>
<th>名称</th>
<th>得分</th>
<th>运行时间</th>
<th>详细信息</th>
</tr>
</thead>
<tbody id="data-table-body">
</tbody>
</table>
<div id="detailsModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>详细信息</h2>
<div id="modal-details"></div>
</div>
</div>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<script src="./get_scores.js"></script>
README.md
+1 -1
View File
@@ -1,4 +1,4 @@
# exp-backend
# Challenge-Backend
这是针对自动化评测的后端源码。
get_scores.js
+53
View File
@@ -0,0 +1,53 @@
async function fetchData() {
try {
const response = await fetch("https://rank.intcplab.cn/get_scores");
const data = await response.json();
const tableBody = document.getElementById("data-table-body");
tableBody.innerHTML = "";
data.forEach((item, index) => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${item.time}</td>
<td>${item.name}</td>
<td>${item.score}</td>
<td>${item.running_time}</td>
<td>
<button onclick="showDetailsModal(${index})">查看详情</button>
</td>
`;
tableBody.appendChild(row);
});
const modal = document.getElementById("detailsModal");
const span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};
window.onclick = function (event) {
if (event.target === modal) {
modal.style.display = "none";
}
};
} catch (error) {
console.error("获取数据时发生错误:", error);
}
}
function showDetailsModal(index) {
const modal = document.getElementById("detailsModal");
const modalDetails = document.getElementById("modal-details");
fetch("https://rank.intcplab.cn/get_scores")
.then((response) => response.json())
.then((data) => {
modalDetails.innerHTML = data[index].details;
modal.style.display = "block";
});
}
window.onload = fetchData;
index.html
-140
View File
@@ -1,140 +0,0 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>挑战赛数据展示</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>测试结果</h2>
<table>
<thead>
<tr>
<th>时间</th>
<th>学号</th>
<th>名称</th>
<th>得分</th>
<th>运行时间</th>
<th>详细信息</th>
</tr>
</thead>
<tbody id="data-table-body">
<!-- 动态填充表格数据 -->
</tbody> </table
><!-- 模态窗口 -->
<div id="detailsModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>详细信息</h2>
<div id="modal-details"></div>
</div>
</div>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
async function fetchData() {
try {
const response = await fetch("/get_scores");
const data = await response.json();
const tableBody = document.getElementById("data-table-body");
tableBody.innerHTML = "";
data.forEach((item, index) => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${item.time}</td>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.score}</td>
<td>${item.running_time}</td>
<td>
<button onclick="showDetailsModal(${index})">查看详情</button>
</td>
`;
tableBody.appendChild(row);
});
const modal = document.getElementById("detailsModal");
const span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};
window.onclick = function (event) {
if (event.target === modal) {
modal.style.display = "none";
}
};
} catch (error) {
console.error("获取数据时发生错误:", error);
}
}
function showDetailsModal(index) {
const modal = document.getElementById("detailsModal");
const modalDetails = document.getElementById("modal-details");
fetch("/get_scores")
.then((response) => response.json())
.then((data) => {
modalDetails.innerHTML = data[index].details;
modal.style.display = "block";
});
}
window.onload = fetchData;
</script>
</body>
</html>