優化主畫面查詢
This commit is contained in:
Raymond Yang
parent
5dca5139b6
commit
4d0221e5a9
@ -20,7 +20,6 @@
|
||||
<div class="center">
|
||||
<label for="queryDate">日期篩選：</label>
|
||||
<input type="date" id="queryDate">
|
||||
<button onclick="getDate()">設定日期</button>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
|
||||
201
js/index.js
201
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<br>正刀";
|
||||
let heading_3_text = document.createElement("h5");
|
||||
heading_3_text.innerHTML = "2<br>正刀";
|
||||
let heading_4_text = document.createElement("h5");
|
||||
heading_4_text.innerHTML = "3<br>正刀";
|
||||
let heading_5_text = document.createElement("h5");
|
||||
heading_5_text.innerHTML = "1<br>殘刀";
|
||||
let heading_6_text = document.createElement("h5");
|
||||
heading_6_text.innerHTML = "2<br>殘刀";
|
||||
let heading_7_text = document.createElement("h5");
|
||||
heading_7_text.innerHTML = "3<br>殘刀";
|
||||
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<br>正刀";
|
||||
let heading_3_text = document.createElement("h5");
|
||||
heading_3_text.innerHTML = "2<br>正刀";
|
||||
let heading_4_text = document.createElement("h5");
|
||||
heading_4_text.innerHTML = "3<br>正刀";
|
||||
let heading_5_text = document.createElement("h5");
|
||||
heading_5_text.innerHTML = "1<br>殘刀";
|
||||
let heading_6_text = document.createElement("h5");
|
||||
heading_6_text.innerHTML = "2<br>殘刀";
|
||||
let heading_7_text = document.createElement("h5");
|
||||
heading_7_text.innerHTML = "3<br>殘刀";
|
||||
|
||||
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 = "<h5><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a><h5>";
|
||||
row_2_data_2.innerHTML = "<h6>" + item.record.record1.boss + "</h6>";
|
||||
row_2_data_3.innerHTML = "<h6>" + item.record.record2.boss + "</h6>";
|
||||
row_2_data_4.innerHTML = "<h6>" + item.record.record3.boss + "</h6>";
|
||||
row_2_data_5.innerHTML = "<h6>" + item.record.record1c.boss + "</h6>";
|
||||
row_2_data_6.innerHTML = "<h6>" + item.record.record2c.boss + "</h6>";
|
||||
row_2_data_7.innerHTML = "<h6>" + item.record.record3c.boss + "</h6>";
|
||||
} else {
|
||||
row_2_data_1.innerHTML = item.member.playerName;
|
||||
row_2_data_2.innerHTML = "<h6>---</h6>";
|
||||
row_2_data_3.innerHTML = "<h6>---</h6>";
|
||||
row_2_data_4.innerHTML = "<h6>---</h6>";
|
||||
row_2_data_5.innerHTML = "<h6>---</h6>";
|
||||
row_2_data_6.innerHTML = "<h6>---</h6>";
|
||||
row_2_data_7.innerHTML = "<h6>---</h6>";
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user