將前端整合進來
This commit is contained in:
Raymond Yang
@@ -0,0 +1,82 @@
|
||||
<!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>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="centerText">修改成員</h1>
|
||||
<hr />
|
||||
<form id="member-form">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="width: 30%"><h4>成員名稱</h4></td>
|
||||
<td style="width: 70%">
|
||||
<input
|
||||
type="text"
|
||||
id="nick_name"
|
||||
placeholder="請輸入成員 Discord 名稱"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>遊戲角色名稱</h4></td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
id="player_name"
|
||||
placeholder="請輸入遊戲主角名稱"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>遊戲UID</h4></td>
|
||||
<td>
|
||||
<input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>DC ID</h4></td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
id="discord_id"
|
||||
placeholder="請輸入 Discord user ID"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>是否離開戰隊</h4></td>
|
||||
<td>
|
||||
<input type="radio" id="leave_true" name="is_leave" value="true" />
|
||||
<label for="leave_true">是</label>
|
||||
<input
|
||||
type="radio"
|
||||
id="leave_false"
|
||||
name="is_leave"
|
||||
value="false"
|
||||
/>
|
||||
<label for="leave_true">否</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<p>
|
||||
<button id="submit" type="button">更新</button>
|
||||
<button class="button_red" id="delete" type="button">刪除</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
|
||||
<script src="./js/edit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
<!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>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<h1 class="centerText">成員管理</h1>
|
||||
<hr>
|
||||
<div class="center">
|
||||
<h4><a href="./new.html">新增成員</a></h4>
|
||||
</div>
|
||||
<hr>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
var paramValue = "";
|
||||
var memberId = "";
|
||||
|
||||
var nickName = document.getElementById("nick_name");
|
||||
var playerName = document.getElementById("player_name");
|
||||
var gameUid = document.getElementById("game_uid");
|
||||
var discordId = document.getElementById("discord_id");
|
||||
|
||||
// 在頁面載入完成後，執行獲取參數的操作
|
||||
window.onload = function () {
|
||||
// 取得參數
|
||||
paramValue = getParameterByName('id');
|
||||
console.log(paramValue);
|
||||
|
||||
axios.get("./api/member/" + paramValue)
|
||||
.then(function (response) {
|
||||
// 在這裡處理回傳的資料
|
||||
var options = response.data;
|
||||
console.log(options);
|
||||
nickName.value = options.nickName;
|
||||
playerName.value = options.playerName;
|
||||
gameUid.value = options.uid;
|
||||
discordId.value = options.discordID;
|
||||
|
||||
if (options.leave) {
|
||||
document.getElementById("leave_true").checked = true;
|
||||
} else {
|
||||
document.getElementById("leave_false").checked = true;
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
// 處理錯誤
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById("submit").addEventListener("click", function (event) {
|
||||
event.preventDefault(); // 阻止表單預設提交行為
|
||||
|
||||
// 執行請求
|
||||
updateMember(paramValue, nickName.value, playerName.value, gameUid.value, discordId.value);
|
||||
});
|
||||
|
||||
document.getElementById("delete").addEventListener("click", function (event) {
|
||||
event.preventDefault(); // 阻止表單預設提交行為
|
||||
|
||||
// 執行請求
|
||||
deleteMember(paramValue);
|
||||
});
|
||||
|
||||
function getParameterByName(name) {
|
||||
// 获取 URL 中的参数部分
|
||||
var url = window.location.href;
|
||||
// 对 URL 进行解析
|
||||
var parsedUrl = new URL(url);
|
||||
// 从解析后的 URL 中获取参数值
|
||||
return parsedUrl.searchParams.get(name);
|
||||
}
|
||||
|
||||
function updateMember(memberId, nickName, playerName, gameUid, discordId) {
|
||||
var selected = document.querySelector('input[name="is_leave"]:checked')
|
||||
console.log(selected.value);
|
||||
var isLeave = false;
|
||||
if (selected) {
|
||||
if (selected.value == "true") {
|
||||
isLeave = true;
|
||||
} else {
|
||||
isLeave = false;
|
||||
}
|
||||
}
|
||||
// 发送登录请求
|
||||
axios.put("./api/member/" + memberId, {
|
||||
playerName: playerName,
|
||||
nickName: nickName,
|
||||
discordID: discordId,
|
||||
uid: gameUid,
|
||||
leave: isLeave
|
||||
})
|
||||
.then(function (response) {
|
||||
window.location.href = "./index.html";
|
||||
})
|
||||
.catch(function (error) {
|
||||
//const message = error.response.data.message;
|
||||
alert("更新失敗");
|
||||
//console.error('登入失敗:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteMember(memberId) {
|
||||
axios.delete("./api/member/" + memberId)
|
||||
.then(function (response) {
|
||||
window.location.href = "./index.html";
|
||||
})
|
||||
.catch(function (error) {
|
||||
//const message = error.response.data.message;
|
||||
alert("刪除失敗");
|
||||
//console.error('登入失敗:', error);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
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 = "<h4>成員名稱</h4>";*/
|
||||
let heading_2 = document.createElement("th");
|
||||
heading_2.innerHTML = "<h4>角色暱稱</h4>";
|
||||
heading_2.setAttribute('style', 'width: 54%;')
|
||||
let heading_3 = document.createElement("th");
|
||||
heading_3.innerHTML = "<h4>角色UID</h4>";
|
||||
heading_3.setAttribute('style', 'width: 34%;')
|
||||
/*let heading_4 = document.createElement("th");
|
||||
heading_4.innerHTML = "<h4>DC ID</h4>";*/
|
||||
let heading_5 = document.createElement("th");
|
||||
heading_5.innerHTML = "<h4>離開</h4>";
|
||||
heading_5.setAttribute('style', 'width: 12%;')
|
||||
|
||||
//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);
|
||||
thead.appendChild(row_1);
|
||||
// 取得刀表
|
||||
axios.get("./api/member", {
|
||||
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");
|
||||
|
||||
const item = data[i];
|
||||
|
||||
//row_2_data_1.innerHTML = "<a href=\"edit.html?id=" + item._id + "\">" + item.nickName + "</a>";
|
||||
row_2_data_2.innerHTML = "<h4><a href=\"edit.html?id=" + item._id + "\">" + item.playerName + "</a></h4>";
|
||||
row_2_data_3.innerHTML = "<h4>" + item.uid + "</h4>";
|
||||
//row_2_data_4.innerHTML = item.discordID;
|
||||
if (item.leave) {
|
||||
row_2_data_5.innerHTML = "<h4>O</h4>";
|
||||
} else {
|
||||
row_2_data_5.innerHTML = "<h4>X</h4>";
|
||||
}
|
||||
|
||||
//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);
|
||||
tbody.appendChild(row_2);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
//const message = error.response.data.message;
|
||||
//alert("資料取得失敗");
|
||||
console.error('資料取得失敗:', error);
|
||||
});
|
||||
@@ -0,0 +1,31 @@
|
||||
document
|
||||
.getElementById("member-form")
|
||||
.addEventListener("submit", function (event) {
|
||||
event.preventDefault(); // 阻止表單預設提交行為
|
||||
|
||||
var nickName = document.getElementById("nick_name");
|
||||
var playerName = document.getElementById("player_name");
|
||||
var gameUid = document.getElementById("game_uid");
|
||||
var discordId = document.getElementById("discord_id");
|
||||
|
||||
// 執行請求
|
||||
newMember(nickName.value, playerName.value, gameUid.value, discordId.value);
|
||||
});
|
||||
|
||||
function newMember(nickName, playerName, gameUid, discordId) {
|
||||
// 发送登录请求
|
||||
axios.post("./api/member", {
|
||||
playerName: playerName,
|
||||
nickName: nickName,
|
||||
discordID: discordId,
|
||||
uid: gameUid
|
||||
})
|
||||
.then(function (response) {
|
||||
window.location.href = "./index.html";
|
||||
})
|
||||
.catch(function (error) {
|
||||
const message = error.response.data.message;
|
||||
alert("新增失敗");
|
||||
//console.error('登入失敗:', error);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
<!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>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<h1 class="centerText">新增成員</h1>
|
||||
<hr />
|
||||
<form id="member-form">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="width: 30%"><h4>成員名稱</h4></td>
|
||||
<td style="width: 70%">
|
||||
<input
|
||||
type="text"
|
||||
id="nick_name"
|
||||
placeholder="請輸入成員 Discord 名稱"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>遊戲角色名稱</h4></td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
id="player_name"
|
||||
placeholder="請輸入遊戲主角名稱"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>遊戲UID</h4></td>
|
||||
<td>
|
||||
<input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>DC ID</h4></td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
id="discord_id"
|
||||
placeholder="請輸入 Discord user ID"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<p><button type="submit">送出</button></p>
|
||||
</form>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
|
||||
<script src="./js/new.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user