From 84d1e1916a0fe13b323466e39180e73a27b8e3ba Mon Sep 17 00:00:00 2001
From: Raymond Yang <sdc957@gmail.com>
Date: Mon, 26 Jun 2023 20:31:05 +0800
Subject: [PATCH] first commit

---
 index.html | 207 ++++++++++++++++++++++++++++++++++++
 new.html   | 301 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 508 insertions(+)
 create mode 100644 index.html
 create mode 100644 new.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4c03748
--- /dev/null
+++ b/index.html
@@ -0,0 +1,207 @@
+<!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>
+
+    <style>
+      table {
+        border-style: solid;
+        border-width: 2px;
+        border-collapse: collapse;
+        width: 100%;
+      }
+
+      th, td {
+        padding: 10px 20px;
+        border: 1px solid #000;
+      }
+
+      a:link {
+            color:#000000;
+        } /* 未訪問超連結 */
+
+        a:visited {
+            color:#000000;
+        } /* 已訪問超連結 */
+
+        a:hover {
+            color: #1aff00;
+        } /* 滑鼠移動到超連結上 */
+
+        a:active {
+            color: #396035;
+        } /* 滑鼠點選時 */
+
+        h1 {
+            font-weight: bold;
+            font-family: 'Arial Black',system-ui
+        }
+
+        h2 {
+            font-weight: bold;
+            font-family: 'Arial Black',system-ui
+        }
+
+        h3 {
+            font-weight: bold;
+            font-family: 'Arial Black',system-ui
+        }
+
+        h4 {
+            font-weight: bold;
+            font-family: 'Arial Black',system-ui
+        }
+
+        p {
+            font-weight: bold;
+            font-family: 'Arial',system-ui
+        }
+
+        .center {
+            margin-left: auto;
+            margin-right: auto;
+            font-weight: bold;
+            font-family: 'Arial',system-ui
+        }
+
+        .button {
+            width: 30%;
+            height: 30px;
+            font-weight: bold;
+            font-family: 'Arial',system-ui
+        }
+
+        .form_td {
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+
+        .label_title {
+            font-weight: bold;
+            font-family: 'Arial Black',system-ui
+        }
+
+        .label_content {
+            font-weight: normal;
+            font-family: 'Arial',system-ui
+        }
+    </style>
+  </head>
+  <body id="body">
+    <p>
+        <a href="new.html">我要填表</a>
+    </p>
+
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
+    <script language="javascript" type="text/javascript">
+      let table = document.createElement("table");
+      let thead = document.createElement("thead");
+      let tbody = document.createElement("tbody");
+
+      table.appendChild(thead);
+      table.appendChild(tbody);
+
+      // Adding the entire table to the body tag
+      document.getElementById("body").appendChild(table);
+
+      // Creating and adding data to first row of the table
+      let row_1 = document.createElement("tr");
+      let heading_1 = document.createElement("th");
+      heading_1.innerHTML = "成員名稱";
+      let heading_2 = document.createElement("th");
+      heading_2.innerHTML = "1<br>正刀";
+      let heading_3 = document.createElement("th");
+      heading_3.innerHTML = "1<br>殘刀";
+      let heading_4 = document.createElement("th");
+      heading_4.innerHTML = "2<br>正刀";
+      let heading_5 = document.createElement("th");
+      heading_5.innerHTML = "2<br>殘刀";
+      let heading_6 = document.createElement("th");
+      heading_6.innerHTML = "3<br>正刀";
+      let heading_7 = document.createElement("th");
+      heading_7.innerHTML = "3<br>殘刀";
+
+      row_1.appendChild(heading_1);
+      row_1.appendChild(heading_2);
+      row_1.appendChild(heading_3);
+      row_1.appendChild(heading_4);
+      row_1.appendChild(heading_5);
+      row_1.appendChild(heading_6);
+      row_1.appendChild(heading_7);
+      thead.appendChild(row_1);
+      // 取得刀表
+      axios
+        .get("http://127.0.0.1:10001/api/record")
+        .then(function (response) {
+          const data = response.data;
+          for (let i = 0; i < data.length; i++) {
+            // Creating and adding data to second row of the table
+            let row_2 = document.createElement("tr");
+            let row_2_data_1 = document.createElement("td");
+            row_2_data_1.innerHTML = data[i].member.playerName;
+            let row_2_data_2 = document.createElement("td");
+            if ("record1" in data[i].record) {
+                row_2_data_2.innerHTML = data[i].record.record1.boss;
+            } else {
+                row_2_data_2.innerHTML = "";
+            }
+            let row_2_data_3 = document.createElement("td");
+            if ("record1c" in data[i].record) {
+                row_2_data_3.innerHTML = data[i].record.record1c.boss;
+            } else {
+                row_2_data_3.innerHTML = "";
+            }
+
+            let row_2_data_4 = document.createElement("td");
+            if ("record1" in data[i].record) {
+                row_2_data_4.innerHTML = data[i].record.record2.boss;
+            } else {
+                row_2_data_4.innerHTML = "";
+            }
+            let row_2_data_5 = document.createElement("td");
+            if ("record1c" in data[i].record) {
+                row_2_data_5.innerHTML = data[i].record.record2c.boss;
+            } else {
+                row_2_data_5.innerHTML = "";
+            }
+            
+            let row_2_data_6 = document.createElement("td");
+            if ("record1" in data[i].record) {
+                row_2_data_6.innerHTML = data[i].record.record3.boss;
+            } else {
+                row_2_data_6.innerHTML = "";
+            }
+            let row_2_data_7 = document.createElement("td");
+            if ("record1c" in data[i].record) {
+                row_2_data_7.innerHTML = data[i].record.record3c.boss;
+            } else {
+                row_2_data_7.innerHTML = "";
+            }
+
+            row_2.appendChild(row_2_data_1);
+            row_2.appendChild(row_2_data_2);
+            row_2.appendChild(row_2_data_3);
+            row_2.appendChild(row_2_data_4);
+            row_2.appendChild(row_2_data_5);
+            row_2.appendChild(row_2_data_6);
+            row_2.appendChild(row_2_data_7);
+            tbody.appendChild(row_2);
+          }
+          console.log("Data: ", data);
+        })
+        .catch(function (error) {
+          //const message = error.response.data.message;
+          //alert("資料取得失敗");
+          console.error('資料取得失敗:', error);
+        });
+    </script>
+  </body>
+</html>
diff --git a/new.html b/new.html
new file mode 100644
index 0000000..128e398
--- /dev/null
+++ b/new.html
@@ -0,0 +1,301 @@
+<!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>
+
+    <style>
+      table {
+        border-style: solid;
+        border-width: 2px;
+        border-collapse: collapse;
+        width: 100%;
+      }
+
+      th,
+      td {
+        padding: 10px 20px;
+        border: 1px solid #000;
+      }
+
+      a:link {
+        color: #000000;
+      } /* 未訪問超連結 */
+
+      a:visited {
+        color: #000000;
+      } /* 已訪問超連結 */
+
+      a:hover {
+        color: #1aff00;
+      } /* 滑鼠移動到超連結上 */
+
+      a:active {
+        color: #396035;
+      } /* 滑鼠點選時 */
+
+      h1 {
+        font-weight: bold;
+        font-family: "Arial Black", system-ui;
+      }
+
+      h2 {
+        font-weight: bold;
+        font-family: "Arial Black", system-ui;
+      }
+
+      h3 {
+        font-weight: bold;
+        font-family: "Arial Black", system-ui;
+      }
+
+      h4 {
+        font-weight: bold;
+        font-family: "Arial Black", system-ui;
+      }
+
+      p {
+        font-weight: bold;
+        font-family: "Arial", system-ui;
+      }
+
+      .center {
+        margin-left: auto;
+        margin-right: auto;
+        font-weight: bold;
+        font-family: "Arial", system-ui;
+      }
+
+      .button {
+        width: 30%;
+        height: 30px;
+        font-weight: bold;
+        font-family: "Arial", system-ui;
+      }
+
+      .form_td {
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+
+      .label_title {
+        font-weight: bold;
+        font-family: "Arial Black", system-ui;
+      }
+
+      .label_content {
+        font-weight: normal;
+        font-family: "Arial", system-ui;
+      }
+    </style>
+  </head>
+  <body id="body">
+    <form id="record-form">
+      <table>
+        <tr>
+          <td>請選擇你的名字</td>
+          <td>
+            <select id="member_select"></select>
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <table>
+        <tr>
+          <td>第1刀正刀</td>
+          <td>
+            <input type="text" id="knife1_boss" placeholder="x周-y王" />
+          </td>
+          <td>第1刀正刀傷害</td>
+          <td>
+            <input type="text" id="knife1_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+        <tr>
+          <td>第1刀殘刀</td>
+          <td>
+            <input type="text" id="knife1c_boss" placeholder="x周-y王" />
+          </td>
+          <td>第1刀殘刀傷害</td>
+          <td>
+            <input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <table>
+        <tr>
+          <td>第2刀正刀</td>
+          <td>
+            <input type="text" id="knife2_boss" placeholder="x周-y王" />
+          </td>
+          <td>第2刀正刀傷害</td>
+          <td>
+            <input type="text" id="knife2_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+        <tr>
+          <td>第2刀殘刀</td>
+          <td>
+            <input type="text" id="knife2c_boss" placeholder="x周-y王" />
+          </td>
+          <td>第2刀殘刀傷害</td>
+          <td>
+            <input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <table>
+        <tr>
+          <td>第3刀正刀</td>
+          <td>
+            <input type="text" id="knife3_boss" placeholder="x周-y王" />
+          </td>
+          <td>第3刀正刀傷害</td>
+          <td>
+            <input type="text" id="knife3_damage" placeholder="ex: 12000000" />
+          </td>
+        </tr>
+        <tr>
+          <td>第3刀殘刀</td>
+          <td>
+            <input type="text" id="knife3c_boss" placeholder="x周-y王" />
+          </td>
+          <td>第3刀殘刀傷害</td>
+          <td>
+            <input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
+          </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 language="javascript" type="text/javascript">
+      document
+        .getElementById("record-form")
+        .addEventListener("submit", function (event) {
+          event.preventDefault(); // 阻止表单的默认提交行为
+
+          // 假設你有一個下拉式選單的 HTML 元素
+          var selectElement = document.getElementById("member_select");
+
+          var knife1_boss = document.getElementById("knife1_boss").value;
+          var knife1_damage = document.getElementById("knife1_damage").value;
+          var knife1c_boss = document.getElementById("knife1c_boss").value;
+          var knife1c_damage = document.getElementById("knife1c_damage").value;
+
+          var knife2_boss = document.getElementById("knife2_boss").value;
+          var knife2_damage = document.getElementById("knife2_damage").value;
+          var knife2c_boss = document.getElementById("knife2c_boss").value;
+          var knife2c_damage = document.getElementById("knife2c_damage").value;
+
+          var knife3_boss = document.getElementById("knife3_boss").value;
+          var knife3_damage = document.getElementById("knife3_damage").value;
+          var knife3c_boss = document.getElementById("knife3c_boss").value;
+          var knife3c_damage = document.getElementById("knife3c_damage").value;
+
+          // 执行登录请求
+          fillRecord(
+            selectElement.value,
+            knife1_boss,
+            knife1_damage,
+            knife1c_boss,
+            knife1c_damage,
+            knife2_boss,
+            knife2_damage,
+            knife2c_boss,
+            knife2c_damage,
+            knife3_boss,
+            knife3_damage,
+            knife3c_boss,
+            knife3c_damage
+          );
+        });
+
+      axios
+        .get("http://127.0.0.1:10001/api/member")
+        .then(function (response) {
+          // 在這裡處理回傳的資料
+          var options = response.data;
+
+          // 假設你有一個下拉式選單的 HTML 元素
+          var selectElement = document.getElementById("member_select");
+
+          // 將資料加入到下拉式選單中
+          options.forEach(function (option) {
+            var optionElement = document.createElement("option");
+            optionElement.value = option._id;
+            optionElement.textContent = option.playerName;
+            selectElement.appendChild(optionElement);
+          });
+        })
+        .catch(function (error) {
+          // 處理錯誤
+          console.error(error);
+        });
+
+      function fillRecord(
+        memberId,
+        knife1_boss,
+        knife1_damage,
+        knife1c_boss,
+        knife1c_damage,
+        knife2_boss,
+        knife2_damage,
+        knife2c_boss,
+        knife2c_damage,
+        knife3_boss,
+        knife3_damage,
+        knife3c_boss,
+        knife3c_damage
+      ) {
+        // 发送登录请求
+        axios
+          .post("http://127.0.0.1:10001/api/record/" + memberId, {
+            record1: {
+              boss: knife1_boss,
+              damage: knife1_damage,
+            },
+            record1c: {
+              boss: knife1c_boss,
+              damage: knife1c_damage,
+            },
+            record2: {
+              boss: knife2_boss,
+              damage: knife2_damage,
+            },
+            record2c: {
+              boss: knife2c_boss,
+              damage: knife2c_damage,
+            },
+            record3: {
+              boss: knife3_boss,
+              damage: knife3_damage,
+            },
+            record3c: {
+              boss: knife3c_boss,
+              damage: knife3c_damage,
+            }
+          })
+          .then(function (response) {
+            window.location.href = "./index.html";
+          })
+          .catch(function (error) {
+            const message = error.response.data.message;
+            alert("登入失敗");
+            //console.error('登入失敗:', error);
+          });
+      }
+    </script>
+  </body>
+</html>

第1刀正刀	+ +	第1刀正刀傷害	+ +
第1刀殘刀	+ +	第1刀殘刀傷害	+ +
第2刀正刀	+ +	第2刀正刀傷害	+ +
第2刀殘刀	+ +	第2刀殘刀傷害	+ +
第3刀正刀	+ +	第3刀正刀傷害	+ +
第3刀殘刀	+ +	第3刀殘刀傷害	+ +