PcReDiveClanRecordFrontend/js/index.js

// 日期選擇
var dateInput = document.getElementById('queryDate');
dateInput.addEventListener('change', function() { 
    //console.log("change" + dateInput.value);
    localStorage.setItem('temp_date', dateInput.value);
    getDateOfRecords();
});

// 載入日期
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;
}

let table = document.createElement("table");
let thead = document.createElement("thead");
let tbody = document.createElement("tbody");
generateTable();

getDateOfRecords();

setInterval(getDateOfRecords, 2000);

function generateTable() {
    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.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);
}

// 取得刀表
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], {
        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++) {
                // 建立新的資料列
                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 = "<h5>" + item.record.record1.boss + "</h5>";
                    row_2_data_3.innerHTML = "<h5>" + item.record.record2.boss + "</h5>";
                    row_2_data_4.innerHTML = "<h5>" + item.record.record3.boss + "</h5>";
                    row_2_data_5.innerHTML = "<h5>" + item.record.record1c.boss + "</h5>";
                    row_2_data_6.innerHTML = "<h5>" + item.record.record2c.boss + "</h5>";
                    row_2_data_7.innerHTML = "<h5>" + item.record.record3c.boss + "</h5>";
                } else {
                    row_2_data_1.innerHTML = "<h5>" + item.member.playerName + "</h5>";
                    row_2_data_2.innerHTML = "<h5>---</h5>";
                    row_2_data_3.innerHTML = "<h5>---</h5>";
                    row_2_data_4.innerHTML = "<h5>---</h5>";
                    row_2_data_5.innerHTML = "<h5>---</h5>";
                    row_2_data_6.innerHTML = "<h5>---</h5>";
                    row_2_data_7.innerHTML = "<h5>---</h5>";
                }

                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) {
            console.error('資料取得失敗:', error);
        });
}