277 lines
9.8 KiB
HTML
277 lines
9.8 KiB
HTML
<!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">
|
|
<h1>填表系統</h1>
|
|
<hr>
|
|
<!--p>
|
|
<a href="new.html">我要填表</a>
|
|
</p-->
|
|
<input type="date" id="queryDate">
|
|
<button onclick="getDate()">選擇日期</button>
|
|
<hr>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
|
|
<script language="javascript" type="text/javascript">
|
|
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<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", {
|
|
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 = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>";
|
|
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 = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>";
|
|
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);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |