feat: add rank switch

RANK.html

@@ -21,9 +21,12 @@
 <p>该页面展示<strong>得分前五名</strong>和<strong>最近三十次提交成功</strong>的数据（包括<strong>零分</strong>）。</p>
 <p>数据非实时刷新，可能有最长<strong>五分钟</strong>的延迟。</p>
 <p>详细日志信息点击「查看详情」即可查看。</p>
-<h2 id="说明">说明 </h2>
+<h2 id="榜单选择">榜单选择 </h2>
-<p>挑战赛榜单正在施工中……<strong>暂时</strong>仅展示 kNN 挑战赛排行榜……</p>
+<p>当前展示 <select id="projectSelect">
-<h2 id="前十名排行榜">前十名排行榜 </h2>
+<option value="challenge_knn">KNN 挑战赛</option>
+<option value="challenge_svm">SVM 挑战赛</option>
+</select> 榜单
+</p><h2 id="前十名排行榜">前十名排行榜 </h2>
 <p>这里展示<strong>得分前十名</strong>的数据。</p>
 <p>以得分排序，分数高的靠前，若分数相同，则运行时间短的靠前。</p>
 <hr>

RANK.md

@@ -6,9 +6,12 @@
 
 详细日志信息点击「查看详情」即可查看。
 
-## 说明
+## 榜单选择
 
-挑战赛榜单正在施工中……**暂时**仅展示 kNN 挑战赛排行榜……
+当前展示 <select id="projectSelect">
+<option value="challenge_knn">KNN 挑战赛</option>
+<option value="challenge_svm">SVM 挑战赛</option>
+</select> 榜单
 
 ## 前十名排行榜
 

get_scores.js

@@ -1,50 +1,39 @@
 const BACKEND_URL = "https://rank.intcplab.cn";
 
+// 获取数据的函数
 async function fetchScoresData(para, project, inject) {
   try {
     const response = await fetch(`${BACKEND_URL}/get_scores/${project}?sort_by=${para}`);
     const data = await response.json();
 
     const tableBody = document.getElementById(`${inject}`);
-    tableBody.innerHTML = "";
+    tableBody.innerHTML = ""; // 清空现有表格内容
 
     data.forEach((item, index) => {
       const row = document.createElement("tr");
 
       row.innerHTML = `
-        <td>${item.time}</td>
+            <td>${item.time}</td>
-        <td>${item.id}</td>
+            <td>${item.id}</td>
-        <td>${item.name}</td>
+            <td>${item.name}</td>
-        <td>${item.score.toFixed(2)}</td>
+            <td>${item.score.toFixed(2)}</td>
-        <td>${item.running_time}</td>
+            <td>${item.running_time}</td>
-        <td>
+            <td>
-            <button onclick="showDetailsModal('${para}', '${project}', ${index})">查看详情</button>
+                <button onclick="showDetailsModal('${para}', '${project}', ${index})">查看详情</button>
-        </td>
+            </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(para, project, index) {
   const modal = document.getElementById("detailsModal");
   const modalDetails = document.getElementById("modal-details");
-  console.log(para, index);
   fetch(`${BACKEND_URL}/get_scores/${project}?sort_by=${para}`)
     .then((response) => response.json())
     .then((data) => {
@@ -53,5 +42,24 @@ function showDetailsModal(para, project, index) {
     });
 }
 
-window.onload = fetchScoresData("score", "challenge_knn", "top-data-table-body");
+// 关闭模态框
-window.onload = fetchScoresData("time", "challenge_knn", "recent-data-table-body");
+window.onclick = function (event) {
+  const modal = document.getElementById("detailsModal");
+  if (event.target === modal || event.target === document.getElementsByClassName("close")[0]) {
+    modal.style.display = "none";
+  }
+};
+
+// 当页面加载时默认加载
+window.onload = () => {
+  fetchScoresData("score", "challenge_knn", "top-data-table-body");
+  fetchScoresData("time", "challenge_knn", "recent-data-table-body");
+};
+
+// 监听下拉框
+document.getElementById("projectSelect").addEventListener("change", function () {
+  const selectedProject = this.value;
+  // 根据选择的项目加载
+  fetchScoresData("score", selectedProject, "top-data-table-body");
+  fetchScoresData("time", selectedProject, "recent-data-table-body");
+});