ray650128/PcReDiveClanRecordBackend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

將前端整合進來

Browse Source
This commit is contained in:
Raymond Yang
2023-07-10 12:08:58 +08:00
parent 9614266453
commit 1dca536ab0
15 changed files with 1254 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/js/edit.js
+149
View File
@@ -0,0 +1,149 @@
var paramValue = "";
var memberId = "";
var title = document.getElementById("my_title");
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 () {
// 取得參數
paramValue = getParameterByName('id');
console.log(paramValue);
axios.get("./api/record/" + paramValue)
.then(function (response) {
// 在這裡處理回傳的資料
var options = response.data;
console.log(options);
memberId = options.member._id;
title.innerHTML = options.member.playerName + " 新增/修改紀錄";
knife1_boss.value = options.record1.boss;
knife1_damage.value = options.record1.damage ?? "";
knife1c_boss.value = options.record1c.boss;
knife1c_damage.value = options.record1c.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.addEventListener('resize', adjustTextSize);
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 adjustTextSize() {
var screenWidth = window.innerWidth;
var fontSize = screenWidth * 0.04;
title.fontSize = fontSize + 'px';
}
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("./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);
});
}
web/js/index.js
+146
View File
@@ -0,0 +1,146 @@
// 日期選擇
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("./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 class=\"centerText\"><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a></h5>";
row_2_data_2.innerHTML = "<h5 class=\"centerText\">" + item.record.record1.boss + "</h5>";
row_2_data_3.innerHTML = "<h5 class=\"centerText\">" + item.record.record2.boss + "</h5>";
row_2_data_4.innerHTML = "<h5 class=\"centerText\">" + item.record.record3.boss + "</h5>";
row_2_data_5.innerHTML = "<h5 class=\"centerText\">" + item.record.record1c.boss + "</h5>";
row_2_data_6.innerHTML = "<h5 class=\"centerText\">" + item.record.record2c.boss + "</h5>";
row_2_data_7.innerHTML = "<h5 class=\"centerText\">" + item.record.record3c.boss + "</h5>";
} else {
row_2_data_1.innerHTML = "<h5 class=\"centerText\">" + item.member.playerName + "</h5>";
row_2_data_2.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_3.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_4.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_5.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_6.innerHTML = "<h5 class=\"centerText\">---</h5>";
row_2_data_7.innerHTML = "<h5 class=\"centerText\">---</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);
});
}
web/js/new.js
+114
View File
@@ -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("./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("./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);
});
}