diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7ce6eb8 --- /dev/null +++ b/css/style.css @@ -0,0 +1,91 @@ +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 { + text-align: center; + 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 +} \ No newline at end of file diff --git a/edit.html b/edit.html index 4afb273..3c5ad01 100644 --- a/edit.html +++ b/edit.html @@ -7,12 +7,12 @@ 新增/修改紀錄 - + +

新增/修改紀錄

+
@@ -87,144 +87,7 @@ - + \ No newline at end of file diff --git a/index.html b/index.html index 7a6d014..2786819 100644 --- a/index.html +++ b/index.html @@ -7,98 +7,7 @@ 公主連結戰隊戰填表系統 - - @@ -113,165 +22,7 @@
- + \ No newline at end of file diff --git a/js/edit.js b/js/edit.js new file mode 100644 index 0000000..03fd5b0 --- /dev/null +++ b/js/edit.js @@ -0,0 +1,135 @@ +var paramValue = ""; +var memberId = ""; + +var knife1_boss = document.getElementById("knife1_boss"); +var knife1_damage = document.getElementById("knife1_damage"); +var knife1c_boss = document.getElementById("knife1c_boss"); +var knife1c_damage = document.getElementById("knife1c_damage"); + +var knife2_boss = document.getElementById("knife2_boss"); +var knife2_damage = document.getElementById("knife2_damage"); +var knife2c_boss = document.getElementById("knife2c_boss"); +var knife2c_damage = document.getElementById("knife2c_damage"); + +var knife3_boss = document.getElementById("knife3_boss"); +var knife3_damage = document.getElementById("knife3_damage"); +var knife3c_boss = document.getElementById("knife3c_boss"); +var knife3c_damage = document.getElementById("knife3c_damage"); + +// 在页面加载完成后执行获取参数的操作 +window.onload = function () { + // 获取名为 "param" 的参数值 + paramValue = getParameterByName('id'); + console.log(paramValue); + + axios.get("http://127.0.0.1:10001/api/record/" + paramValue) + .then(function (response) { + // 在這裡處理回傳的資料 + var options = response.data; + console.log(options); + memberId = options.member._id; + knife1_boss.value = options.record1.boss; + knife1_damage.value = options.record1.damage ?? ""; + knife1c_boss.value = options.record1c.boss; + knife1c_damage.value = options.record1.damage ?? ""; + + knife2_boss.value = options.record2.boss; + knife2_damage.value = options.record2.damage ?? ""; + knife2c_boss.value = options.record2c.boss; + knife2c_damage.value = options.record2c.damage ?? ""; + + knife3_boss.value = options.record3.boss; + knife3_damage.value = options.record3.damage ?? ""; + knife3c_boss.value = options.record3c.boss; + knife3c_damage.value = options.record3c.damage ?? ""; + }) + .catch(function (error) { + // 處理錯誤 + console.error(error); + }); +}; + +document.getElementById("record-form").addEventListener("submit", function (event) { + event.preventDefault(); // 阻止表单的默认提交行为 + + // 执行登录请求 + fillRecord( + paramValue, + memberId, + knife1_boss.value, + knife1_damage.value, + knife1c_boss.value, + knife1c_damage.value, + knife2_boss.value, + knife2_damage.value, + knife2c_boss.value, + knife2c_damage.value, + knife3_boss.value, + knife3_damage.value, + knife3c_boss.value, + knife3c_damage.value + ); +}); + +function getParameterByName(name) { + // 获取 URL 中的参数部分 + var url = window.location.href; + // 对 URL 进行解析 + var parsedUrl = new URL(url); + // 从解析后的 URL 中获取参数值 + return parsedUrl.searchParams.get(name); +} + +function fillRecord( + recordId, + 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.put("http://127.0.0.1:10001/api/record/" + recordId, { + memberId: memberId, + record1: { + boss: knife1_boss, + damage: parseInt(knife1_damage), + }, + record1c: { + boss: knife1c_boss, + damage: parseInt(knife1c_damage), + }, + record2: { + boss: knife2_boss, + damage: parseInt(knife2_damage), + }, + record2c: { + boss: knife2c_boss, + damage: parseInt(knife2c_damage), + }, + record3: { + boss: knife3_boss, + damage: parseInt(knife3_damage), + }, + record3c: { + boss: knife3c_boss, + damage: parseInt(knife3c_damage), + } + }) + .then(function (response) { + window.location.href = "./index.html"; + }) + .catch(function (error) { + const message = error.response.data.message; + alert("更新失敗"); + //console.error('登入失敗:', error); + }); +} \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..753bbfa --- /dev/null +++ b/js/index.js @@ -0,0 +1,157 @@ +var selectedDate = document.getElementById("queryDate"); + +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
正刀"; +let heading_3 = document.createElement("th"); +heading_3.innerHTML = "1
殘刀"; +let heading_4 = document.createElement("th"); +heading_4.innerHTML = "2
正刀"; +let heading_5 = document.createElement("th"); +heading_5.innerHTML = "2
殘刀"; +let heading_6 = document.createElement("th"); +heading_6.innerHTML = "3
正刀"; +let heading_7 = document.createElement("th"); +heading_7.innerHTML = "3
殘刀"; + +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", { + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json' + } +}) + .then(function (response) { + const data = response.data; + console.log(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"); + let row_2_data_2 = document.createElement("td"); + let row_2_data_3 = document.createElement("td"); + let row_2_data_4 = document.createElement("td"); + let row_2_data_5 = document.createElement("td"); + let row_2_data_6 = document.createElement("td"); + let row_2_data_7 = document.createElement("td"); + + const item = data[i]; + + if (item.record !== null) { + row_2_data_1.innerHTML = "" + item.member.playerName + ""; + row_2_data_2.innerHTML = item.record.record1.boss; + row_2_data_3.innerHTML = item.record.record1c.boss; + row_2_data_4.innerHTML = item.record.record2.boss; + row_2_data_5.innerHTML = item.record.record2c.boss; + row_2_data_6.innerHTML = item.record.record3.boss; + row_2_data_7.innerHTML = item.record.record3c.boss; + } else { + row_2_data_1.innerHTML = item.member.playerName; + row_2_data_2.innerHTML = ""; + row_2_data_3.innerHTML = ""; + row_2_data_4.innerHTML = ""; + row_2_data_5.innerHTML = ""; + row_2_data_6.innerHTML = ""; + 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); + } + }) + .catch(function (error) { + //const message = error.response.data.message; + //alert("資料取得失敗"); + console.error('資料取得失敗:', error); + }); + +function getDate() { + var dateSplit = selectedDate.value.split("-"); + console.log(dateSplit); + // 取得刀表 + axios.get("http://127.0.0.1:10001/api/record/" + dateSplit[0] + "/" + dateSplit[1] + "/" + dateSplit[2], { + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json' + } + }) + .then(function (response) { + const data = response.data; + console.log(data); + while (tbody.firstChild) { + tbody.removeChild(tbody.firstChild); + } + 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"); + let row_2_data_2 = document.createElement("td"); + let row_2_data_3 = document.createElement("td"); + let row_2_data_4 = document.createElement("td"); + let row_2_data_5 = document.createElement("td"); + let row_2_data_6 = document.createElement("td"); + let row_2_data_7 = document.createElement("td"); + + const item = data[i]; + + if (item.record !== null) { + row_2_data_1.innerHTML = "" + item.member.playerName + ""; + row_2_data_2.innerHTML = item.record.record1.boss; + row_2_data_3.innerHTML = item.record.record1c.boss; + row_2_data_4.innerHTML = item.record.record2.boss; + row_2_data_5.innerHTML = item.record.record2c.boss; + row_2_data_6.innerHTML = item.record.record3.boss; + row_2_data_7.innerHTML = item.record.record3c.boss; + } else { + row_2_data_1.innerHTML = item.member.playerName; + row_2_data_2.innerHTML = ""; + row_2_data_3.innerHTML = ""; + row_2_data_4.innerHTML = ""; + row_2_data_5.innerHTML = ""; + row_2_data_6.innerHTML = ""; + 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); + } + }) + .catch(function (error) { + //const message = error.response.data.message; + //alert("資料取得失敗"); + console.error('資料取得失敗:', error); + }); +} \ No newline at end of file diff --git a/js/new.js b/js/new.js new file mode 100644 index 0000000..8f9c4f6 --- /dev/null +++ b/js/new.js @@ -0,0 +1,114 @@ +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/not_leave") + .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: parseInt(knife1_damage), + }, + record1c: { + boss: knife1c_boss, + damage: parseInt(knife1c_damage), + }, + record2: { + boss: knife2_boss, + damage: parseInt(knife2_damage), + }, + record2c: { + boss: knife2c_boss, + damage: parseInt(knife2c_damage), + }, + record3: { + boss: knife3_boss, + damage: parseInt(knife3_damage), + }, + record3c: { + boss: knife3c_boss, + damage: parseInt(knife3c_damage), + } + }) + .then(function (response) { + window.location.href = "./index.html"; + }) + .catch(function (error) { + const message = error.response.data.message; + alert("新增失敗"); + //console.error('登入失敗:', error); + }); +} \ No newline at end of file diff --git a/new.html b/new.html index a68af19..da2c9ef 100644 --- a/new.html +++ b/new.html @@ -7,102 +7,12 @@ 新增紀錄 - - + +

新增紀錄

+
@@ -186,123 +96,7 @@ - + \ No newline at end of file