From 1fa4bf0c55a21fb64d1fc6f3b9de8a1025f4dae5 Mon Sep 17 00:00:00 2001
From: luoyonghuang <2308014474@qq.com>
Date: Mon, 7 Oct 2024 22:24:02 +0800
Subject: [PATCH] Update score_display.html

---
 score_display.html | 446 +++++++++++++++++++++++++--------------------
 1 file changed, 249 insertions(+), 197 deletions(-)
diff --git a/score_display.html b/score_display.html
index a774065..c16ebdd 100644
--- a/score_display.html
+++ b/score_display.html
@@ -1,197 +1,249 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>积分显示</title>
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #a18cd1, #fbc2eb);
-            height: 100vh;
-            margin: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: #333;
-        }
-        .container {
-            width: 90%;
-            max-width: 800px;
-            background: rgba(255, 255, 255, 0.85);
-            padding: 40px;
-            border-radius: 20px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-            backdrop-filter: blur(8.5px);
-            -webkit-backdrop-filter: blur(8.5px);
-            border: 1px solid rgba(255, 255, 255, 0.18);
-            text-align: center;
-        }
-        h1 {
-            margin-bottom: 30px;
-            font-size: 2em;
-            color: #ff5722;
-        }
-        #sortButton {
-            padding: 10px 20px;
-            font-size: 1em;
-            border: none;
-            border-radius: 25px;
-            background-color: #2196F3;
-            color: white;
-            cursor: pointer;
-            transition: background-color 0.3s, transform 0.2s;
-            margin-bottom: 20px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-        }
-        #sortButton:hover {
-            background-color: #1e88e5;
-            transform: scale(1.05);
-            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 10px;
-        }
-        th, td {
-            padding: 12px 15px;
-            border-bottom: 1px solid #ddd;
-            font-size: 1em;
-        }
-        th {
-            background-color: #4CAF50;
-            color: white;
-        }
-        tr:hover {
-            background-color: #f1f1f1;
-        }
-        .button-group {
-            margin-top: 30px;
-            display: flex;
-            justify-content: space-between;
-            gap: 10px;
-        }
-        .back-button, .clear-button {
-            padding: 10px 20px;
-            font-size: 1em;
-            border: none;
-            border-radius: 25px;
-            color: white;
-            cursor: pointer;
-            transition: background-color 0.3s, transform 0.2s;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-        }
-        .back-button {
-            background-color: #2196F3;
-        }
-        .back-button:hover {
-            background-color: #1e88e5;
-            transform: scale(1.05);
-            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
-        }
-        .clear-button {
-            background-color: #f44336;
-        }
-        .clear-button:hover {
-            background-color: #e53935;
-            transform: scale(1.05);
-            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
-        }
-        @media (max-width: 600px) {
-            th, td {
-                padding: 8px 10px;
-            }
-            #sortButton, .button-group button {
-                width: 100%;
-                margin: 10px 0;
-            }
-        }
-    </style>
-</head>
-<body>
-
-    <div class="container">
-        <h1>积分显示</h1>
-        <button id="sortButton">切换排序 (降序)</button>
-        <table>
-            <thead>
-                <tr>
-                    <th>姓名</th>
-                    <th>积分</th>
-                </tr>
-            </thead>
-            <tbody id="studentList">
-                <!-- 学生积分将在此处显示 -->
-            </tbody>
-        </table>
-        <div class="button-group">
-            <button class="back-button" onclick="window.location.href='index.html'">返回主页面</button>
-            <button class="clear-button" id="clearButton">清除所有数据</button>
-        </div>
-    </div>
-
-    <script>
-        const studentList = document.getElementById('studentList');
-        const sortButton = document.getElementById('sortButton');
-        const clearButton = document.getElementById('clearButton');
-        let ascending = false;  // 默认降序
-
-        // 预定义学生名单
-        const predefinedStudents = [
-            { name: '张三', points: 0 },
-            { name: '李四', points: 0 },
-            { name: '王五', points: 0 },
-            { name: '赵六', points: 0 },
-        ];
-
-        // 获取所有学生，包括预定义名单
-        function getAllStudents() {
-            const students = predefinedStudents.map(student => {
-                const storedPoints = localStorage.getItem(student.name);
-                return {
-                    name: student.name,
-                    points: storedPoints !== null ? parseInt(storedPoints) : student.points
-                };
-            });
-            return students;
-        }
-
-        // 显示学生积分
-        function displayStudents() {
-            const students = getAllStudents();
-            students.sort((a, b) => ascending ? a.points - b.points : b.points - a.points);
-            studentList.innerHTML = '';
-            students.forEach(student => {
-                studentList.innerHTML += `
-                    <tr>
-                        <td>${student.name}</td>
-                        <td>${student.points}</td>
-                    </tr>
-                `;
-            });
-        }
-
-        // 切换排序
-        sortButton.addEventListener('click', () => {
-            ascending = !ascending;
-            sortButton.textContent = `切换排序 (${ascending ? '升序' : '降序'})`;
-            displayStudents();
-        });
-
-        // 清除所有数据
-        clearButton.addEventListener('click', () => {
-            const confirmation = confirm("确定要清除所有学生数据吗？此操作无法撤销！");
-            if (confirmation) {
-                localStorage.clear();
-                alert("所有数据已清除！");
-                displayStudents(); // 重新显示清空后的数据
-            }
-        });
-
-        // 初次加载时显示学生积分
-        displayStudents();
-    </script>
-
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>积分显示</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #a18cd1, #fbc2eb);
+            height: 100vh;
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #333;
+        }
+        .container {
+            width: 90%;
+            max-width: 800px;
+            background: rgba(255, 255, 255, 0.85);
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(8.5px);
+            -webkit-backdrop-filter: blur(8.5px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            text-align: center;
+        }
+        h1 {
+            margin-bottom: 30px;
+            font-size: 2em;
+            color: #ff5722;
+        }
+        #sortButton {
+            padding: 10px 20px;
+            font-size: 1em;
+            border: none;
+            border-radius: 25px;
+            background-color: #2196F3;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
+            margin-bottom: 20px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+        }
+        #sortButton:hover {
+            background-color: #1e88e5;
+            transform: scale(1.05);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+        }
+        th, td {
+            padding: 12px 15px;
+            border-bottom: 1px solid #ddd;
+            font-size: 1em;
+        }
+        th {
+            background-color: #4CAF50;
+            color: white;
+        }
+        tr:hover {
+            background-color: #f1f1f1;
+        }
+        .button-group {
+            margin-top: 30px;
+            display: flex;
+            justify-content: space-between;
+            gap: 10px;
+        }
+        .back-button, .clear-button {
+            padding: 10px 20px;
+            font-size: 1em;
+            border: none;
+            border-radius: 25px;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+        }
+        .back-button {
+            background-color: #2196F3;
+        }
+        .back-button:hover {
+            background-color: #1e88e5;
+            transform: scale(1.05);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+        }
+        .clear-button {
+            background-color: #f44336;
+        }
+        .clear-button:hover {
+            background-color: #e53935;
+            transform: scale(1.05);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+        }
+        @media (max-width: 600px) {
+            th, td {
+                padding: 8px 10px;
+            }
+            #sortButton, .button-group button {
+                width: 100%;
+                margin: 10px 0;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <h1>积分显示</h1>
+        <button id="sortButton">切换排序 (降序)</button>
+        <table>
+            <thead>
+                <tr>
+                    <th>姓名</th>
+                    <th>学号</th>
+                    <th>积分</th>
+                </tr>
+            </thead>
+            <tbody id="studentList">
+                <!-- 学生积分将在此处显示 -->
+            </tbody>
+        </table>
+        <div class="button-group">
+            <button class="back-button" onclick="window.location.href='index.html'">返回主页面</button>
+            <button class="clear-button" id="clearButton">清除所有数据</button>
+        </div>
+    </div>
+
+    <script>
+        const studentList = document.getElementById('studentList');
+        const sortButton = document.getElementById('sortButton');
+        const clearButton = document.getElementById('clearButton');
+        let ascend = false;  // 默认降序
+
+
+        //删除表
+        async function deleteTable(tableName) {
+    try {
+        const response = await fetch('/api/delete-table', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ tableName }),
+        });
+
+        if (!response.ok) {
+            throw new Error('删除表失败');
+        }
+
+        const data = await response.json();
+        alert(data.message); // 成功后显示消息
+    } catch (error) {
+        console.error('删除表操作失败:', error);
+        alert('删除表失败');
+    }
+}
+
+
+
+        // 获取按分数降序排列的学生排名
+        async function fetchDescendRanking() {
+            try {
+                const response = await fetch('/api/descend_ranking');
+                if (!response.ok) {
+                    alert('无法获取降序排名');
+                    return null;
+                }
+
+                const ranking = await response.json(); // 获取并解析为JSON数组
+                return ranking; // 返回排名数组
+            } catch (error) {
+                console.error('请求失败:', error);
+                return null;
+            }
+        }
+
+        // 获取按分数升序排列的学生排名
+        async function fetchAscendRanking() {
+            try {
+                const response = await fetch('/api/ascend_ranking');
+                if (!response.ok) {
+                    alert('无法获取升序排名');
+                    return null;
+                }
+
+                const ranking = await response.json(); // 获取并解析为JSON数组
+                return ranking; // 返回排名数组
+            } catch (error) {
+                console.error('请求失败:', error);
+                return null;
+            }
+        }
+
+        async function displayStudents() {
+            let ranking; // 声明 ranking 变量
+            if (ascend) {
+                ranking = await fetchAscendRanking(); // 获取升序排名
+            } else {
+                ranking = await fetchDescendRanking(); // 获取降序排名
+            }
+
+            // 检查 ranking 是否为空
+            if (!ranking) {
+                alert('空 ranking');
+                return; // 退出函数
+            }
+
+            studentList.innerHTML = ''; // 清空表格内容
+            // 只显示前五名学生
+            ranking.slice(0, 5).forEach(student => {
+                studentList.innerHTML += `
+                    <tr>
+                        <td>${student.student_name}</td>  <!-- 学生姓名 -->
+                        <td>${student.student_id}</td>    <!-- 学生ID -->
+                        <td>${student.score}</td>         <!-- 学生分数 -->
+                    </tr>
+                `;
+            });
+        }
+
+
+
+        sortButton.addEventListener('click', () => {
+            ascend = !ascend;
+            sortButton.textContent = `切换排序 (${ascend ? '升序' : '降序'})`;
+            displayStudents();
+        });
+
+        clearButton.addEventListener('click', () => {
+            const confirmation = confirm("确定要清除所有学生数据吗？此操作无法撤销！");
+            if (confirmation) {
+                deleteTable('students');
+                alert("所有信息已清除！");
+                displayStudents(); // 重新显示清空后的数据
+            }
+        });
+
+        displayStudents();
+    </script>
+
+</body>
+</html>
