初步加入修改排名功能

2023-08-03 22:39:03 +08:00 · 2023-08-03 22:39:03 +08:00 · cef720fa99
commit cef720fa99
parent a3ef90d5fd
2 changed files with 103 additions and 0 deletions
--- a/editRank.html
+++ b/editRank.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html
+  lang="zh-TW"
+  xmlns="http://www.w3.org/1999/html"
+  xmlns="http://www.w3.org/1999/html"
+>
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>新增/修改結算時排名</title>
+    <link rel="stylesheet" href="./css/style.css" />
+  </head>
+
+  <body>
+    <h1 class="autosize-text">新增/修改結算時排名</h1>
+    <hr />
+    <form id="rank-form">
+      <table>
+        <tr>
+          <td style="width: 25%">
+            <h5 class="centerText">結算時排名</h5>
+          </td>
+          <td style="width: 75%">
+            <input type="text" id="rank" placeholder="請輸入名次" />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <p><button type="submit">送出</button></p>
+    </form>
+
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
+    <script src="./js/editRank.js"></script>
+  </body>
+</html>
--- a/js/editRank.js
+++ b/js/editRank.js
@ -0,0 +1,66 @@
+var paramValue = "";
+var rankId = "";
+
+
+var rank = document.getElementById("rank");
+
+// 在頁面載入完成後，執行獲取參數的操作
+window.onload = function () {
+    // 取得參數
+    paramValue = getParameterByName('id');
+    console.log(paramValue);
+
+    axios.get("https://pcredive.ray650128.com/backend/api/rank/" + paramValue)
+        .then(function (response) {
+            // 在這裡處理回傳的資料
+            var options = response.data;
+            console.log(options);
+            rankId = options._id;
+            rank.value = options.rank ?? "";
+        })
+        .catch(function (error) {
+            // 處理錯誤
+            console.error(error);
+        });
+};
+
+document.addEventListener('resize', adjustTextSize);
+
+document.getElementById("record-form").addEventListener("submit", function (event) {
+    event.preventDefault(); // 阻止表單預設提交行為
+
+    // 執行請求
+    fillRecord(paramValue, rankId, rank.value);
+});
+
+function adjustTextSize() {
+    var screenWidth = window.innerWidth;
+    var fontSize = screenWidth * 0.04;
+
+    title.fontSize = fontSize + 'px';
+}
+
+function getParameterByName(name) {
+    // 获取 URL 中的参数部分
+    var url = window.location.href;
+    // 对 URL 进行解析
+    var parsedUrl = new URL(url);
+    // 从解析后的 URL 中获取参数值
+    return parsedUrl.searchParams.get(name);
+}
+
+function fillRecord(recordId, rankId, rank) {
+    // 发送登录请求
+    axios.put("https://pcredive.ray650128.com/backend/api/record/" + recordId, {
+        rankId: rankId,
+        rank: rank
+    })
+        .then(function (response) {
+            window.location.href = "./index.html";
+        })
+        .catch(function (error) {
+            const message = error.response.data.message;
+            alert("更新失敗");
+            //console.error('登入失敗:', error);
+        });
+}