加上編輯成員功能

This commit is contained in:
Raymond Yang 2023-06-27 15:39:13 +08:00
parent 06c06bbd5b
commit 7e9a130a11
2 changed files with 139 additions and 0 deletions

60
member/edit.html Normal file
View File

@ -0,0 +1,60 @@
<!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>修改成員</h1>
<hr>
<form id="member-form">
<table>
<tr>
<td>成員名稱</td>
<td>
<input type="text" id="nick_name" placeholder="請輸入成員 Discord 名稱" />
</td>
</tr>
<tr>
<td>遊戲角色名稱</td>
<td>
<input type="text" id="player_name" placeholder="請輸入遊戲主角名稱" />
</td>
</tr>
<tr>
<td>遊戲UID</td>
<td>
<input type="text" id="game_uid" placeholder="請輸入遊戲U ID" />
</td>
</tr>
<tr>
<td>DC ID</td>
<td>
<input type="text" id="discord_id" placeholder="請輸入 Discord user ID" />
</td>
</tr>
<tr>
<td>是否離開戰隊</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 type="submit">送出</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>

79
member/js/edit.js Normal file
View File

@ -0,0 +1,79 @@
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 () {
// 获取名为 "param" 的参数值
paramValue = getParameterByName('id');
console.log(paramValue);
axios.get("http://127.0.0.1:10001/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("member-form").addEventListener("submit", function (event) {
event.preventDefault(); // 阻止表单的默认提交行为
// 执行登录请求
updateMember(paramValue, nickName.value, playerName.value, gameUid.value, discordId.value);
});
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')
var isLeave = false;
if (selected) {
if (selected.value === true) {
isLeave = true;
} else {
isLeave = false;
}
}
// 发送登录请求
axios.put("http://127.0.0.1:10001/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);
});
}