From 4d0221e5a9e099563c9178891bc28ebfcb939e9b Mon Sep 17 00:00:00 2001 From: Raymond Yang Date: Thu, 29 Jun 2023 09:38:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=84=AA=E5=8C=96=E4=B8=BB=E7=95=AB=E9=9D=A2?= =?UTF-8?q?=E6=9F=A5=E8=A9=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 - js/index.js | 201 +++++++++++++++++++++------------------------------- 2 files changed, 81 insertions(+), 121 deletions(-) diff --git a/index.html b/index.html index b709a81..7069fc0 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,6 @@
-
diff --git a/js/index.js b/js/index.js index bc1cb84..67ee604 100644 --- a/js/index.js +++ b/js/index.js @@ -1,128 +1,90 @@ -var selectedDate = document.getElementById("queryDate"); -var today = new Date(); -var formattedDate = today.toISOString().split('T')[0]; -selectedDate.value = formattedDate; +// 日期選擇 +var dateInput = document.getElementById('queryDate'); +dateInput.addEventListener('change', function() { + //console.log("change" + dateInput.value); + localStorage.setItem('temp_date', dateInput.value); + getDateOfRecords(); +}); -let table = document.createElement("table"); -let thead = document.createElement("thead"); -let tbody = document.createElement("tbody"); +// 載入日期 +if (localStorage.getItem('temp_date') !== null) { + dateInput.value = localStorage.getItem("temp_date"); +} else { + var today = new Date(); + var formattedDate = today.toISOString().split('T')[0]; + dateInput.value = formattedDate; +} -table.appendChild(thead); -table.appendChild(tbody); +generateTable(); -// Adding the entire table to the body tag -document.getElementById("body").appendChild(table); +getDateOfRecords(); -// Creating and adding data to first row of the table -let row_1 = document.createElement("tr"); -let heading_1 = document.createElement("th"); -heading_1.setAttribute('style', 'width: 40%;') -let heading_2 = document.createElement("th"); -heading_2.setAttribute('style', 'width: 10%;') -let heading_3 = document.createElement("th"); -heading_3.setAttribute('style', 'width: 10%;') -let heading_4 = document.createElement("th"); -heading_4.setAttribute('style', 'width: 10%;') -let heading_5 = document.createElement("th"); -heading_5.setAttribute('style', 'width: 10%;') -let heading_6 = document.createElement("th"); -heading_6.setAttribute('style', 'width: 10%;') -let heading_7 = document.createElement("th"); -heading_7.setAttribute('style', 'width: 10%;') +setInterval(getDateOfRecords, 2000); -let heading_1_text = document.createElement("h5"); -heading_1_text.innerHTML = "成員名稱"; -let heading_2_text = document.createElement("h5"); -heading_2_text.innerHTML = "1
正刀"; -let heading_3_text = document.createElement("h5"); -heading_3_text.innerHTML = "2
正刀"; -let heading_4_text = document.createElement("h5"); -heading_4_text.innerHTML = "3
正刀"; -let heading_5_text = document.createElement("h5"); -heading_5_text.innerHTML = "1
殘刀"; -let heading_6_text = document.createElement("h5"); -heading_6_text.innerHTML = "2
殘刀"; -let heading_7_text = document.createElement("h5"); -heading_7_text.innerHTML = "3
殘刀"; +function generateTable() { + let table = document.createElement("table"); + let thead = document.createElement("thead"); + let tbody = document.createElement("tbody"); -heading_1.appendChild(heading_1_text); -heading_2.appendChild(heading_2_text); -heading_3.appendChild(heading_3_text); -heading_4.appendChild(heading_4_text); -heading_5.appendChild(heading_5_text); -heading_6.appendChild(heading_6_text); -heading_7.appendChild(heading_7_text); + table.appendChild(thead); + table.appendChild(tbody); -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); -getDate(); + // 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.setAttribute('style', 'width: 40%;') + let heading_2 = document.createElement("th"); + heading_2.setAttribute('style', 'width: 10%;') + let heading_3 = document.createElement("th"); + heading_3.setAttribute('style', 'width: 10%;') + let heading_4 = document.createElement("th"); + heading_4.setAttribute('style', 'width: 10%;') + let heading_5 = document.createElement("th"); + heading_5.setAttribute('style', 'width: 10%;') + let heading_6 = document.createElement("th"); + heading_6.setAttribute('style', 'width: 10%;') + let heading_7 = document.createElement("th"); + heading_7.setAttribute('style', 'width: 10%;') + + let heading_1_text = document.createElement("h5"); + heading_1_text.innerHTML = "成員名稱"; + let heading_2_text = document.createElement("h5"); + heading_2_text.innerHTML = "1
正刀"; + let heading_3_text = document.createElement("h5"); + heading_3_text.innerHTML = "2
正刀"; + let heading_4_text = document.createElement("h5"); + heading_4_text.innerHTML = "3
正刀"; + let heading_5_text = document.createElement("h5"); + heading_5_text.innerHTML = "1
殘刀"; + let heading_6_text = document.createElement("h5"); + heading_6_text.innerHTML = "2
殘刀"; + let heading_7_text = document.createElement("h5"); + heading_7_text.innerHTML = "3
殘刀"; + + heading_1.appendChild(heading_1_text); + heading_2.appendChild(heading_2_text); + heading_3.appendChild(heading_3_text); + heading_4.appendChild(heading_4_text); + heading_5.appendChild(heading_5_text); + heading_6.appendChild(heading_6_text); + heading_7.appendChild(heading_7_text); + + 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); +} -setInterval(getDate, 2500); // 取得刀表 -/*axios.get("https://pcredive.ray650128.com/backend/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.record2.boss + "
"; - row_2_data_4.innerHTML = "
" + item.record.record3.boss + "
"; - row_2_data_5.innerHTML = "
" + item.record.record1c.boss + "
"; - row_2_data_6.innerHTML = "
" + item.record.record2c.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("-"); +function getDateOfRecords() { + var dateSplit = dateInput.value.split("-"); console.log(dateSplit); // 取得刀表 axios.get("https://pcredive.ray650128.com/backend/api/record/" + dateSplit[0] + "/" + dateSplit[1] + "/" + dateSplit[2], { @@ -133,12 +95,13 @@ function getDate() { }) .then(function (response) { const data = response.data; - console.log(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"); @@ -179,8 +142,6 @@ function getDate() { } }) .catch(function (error) { - //const message = error.response.data.message; - //alert("資料取得失敗"); console.error('資料取得失敗:', error); }); } \ No newline at end of file