Add: maestro_section_add_player
This commit is contained in:
@@ -1,333 +1,11 @@
|
||||
<style>
|
||||
|
||||
.login {
|
||||
background-color: #ff0000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.register {
|
||||
background-color: #0000ff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.player_list {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#add_player {
|
||||
float: left;
|
||||
line-height: 2em;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
background-color: #aaaaff;
|
||||
}
|
||||
|
||||
#player_list_result {
|
||||
float: right;
|
||||
line-height: 2em;
|
||||
width: 600px;
|
||||
padding: 10px;
|
||||
background-color: #ffaaaa;
|
||||
}
|
||||
|
||||
#player_list_result_contents {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#registered_player_list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#registered_player_list > li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#registered_player_list .registered_player_list_name {
|
||||
width: 200px;
|
||||
background-color: #ffdddd;
|
||||
}
|
||||
|
||||
#registered_player_list .registered_player_list_entercode {
|
||||
width: 200px;
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
|
||||
#registered_player_list .registered_player_update {
|
||||
width: 200px;
|
||||
background-color: #ddddff;
|
||||
}
|
||||
|
||||
#player_list_navigator {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#player_list_navigator a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
let maestroID = -1;
|
||||
let playerCount = 0;
|
||||
let playerListPage = 0;
|
||||
let lastPageNo = 0;
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
maestroID = sessionStorage.getItem("maestroID");
|
||||
console.log("maestroID : " + maestroID);
|
||||
console.log("ready");
|
||||
$("#section_add_player").load("./../module/maestro_section_add_player.html");
|
||||
|
||||
|
||||
loadPlayerList();
|
||||
});
|
||||
|
||||
function loadPlayerList() {
|
||||
let xhr = new XMLHttpRequest(); //new로 생성.
|
||||
xhr.open('POST', './../server/user/registered_player_count.php', true);
|
||||
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
||||
xhr.send("maestro_id=" + maestroID);
|
||||
xhr.onload = function() {
|
||||
if(xhr.readyState === 4 && xhr.status === 200) {
|
||||
// console.log(xhr.responseText);
|
||||
// console.log(xhr.responseText.length);
|
||||
if(xhr.responseText.length === 0 || xhr.responseText === null) {
|
||||
console.log("no data from server");
|
||||
return;
|
||||
}
|
||||
|
||||
let replyJSON = JSON.parse(xhr.responseText);
|
||||
// console.log(replyJSON);
|
||||
|
||||
if(replyJSON === null) {
|
||||
console.log("no data from server");
|
||||
return;
|
||||
}
|
||||
|
||||
if(replyJSON["ERROR"] !== undefined || replyJSON["RESULT"] === undefined) {
|
||||
console.log(replyJSON["ERROR"]);
|
||||
return;
|
||||
}
|
||||
|
||||
if(replyJSON["RESULT"] === "fail") {
|
||||
console.log(replyJSON["RESULT"]);
|
||||
return;
|
||||
}
|
||||
|
||||
playerCount = replyJSON["Count"];
|
||||
lastPageNo = Math.floor( (playerCount + 1) / 10 );
|
||||
|
||||
console.log("registered player count : " + playerCount);
|
||||
loadPlayerListPage(1);
|
||||
addPlayerListPages();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addPlayerListPages() {
|
||||
$("#player_list_pages").empty();
|
||||
|
||||
for(let pageNo = 1; pageNo < lastPageNo + 1; pageNo++) {
|
||||
$("#player_list_pages").append(
|
||||
"<a onClick='onClickPlayerListPage(" + pageNo + ")'> " + pageNo + " </a>"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function onClickPlayerListPage(pageNo) {
|
||||
console.log(pageNo);
|
||||
|
||||
switch(pageNo) {
|
||||
case "first":
|
||||
playerListPage = 1;
|
||||
loadPlayerListPage(playerListPage);
|
||||
return;
|
||||
case "prev":
|
||||
if(playerListPage > 1)
|
||||
playerListPage -= 1;
|
||||
|
||||
loadPlayerListPage(playerListPage);
|
||||
return;
|
||||
case "next":
|
||||
if(playerListPage < lastPageNo)
|
||||
playerListPage += 1;
|
||||
|
||||
loadPlayerListPage(playerListPage);
|
||||
return;
|
||||
case "last":
|
||||
loadPlayerListPage(lastPageNo);
|
||||
return;
|
||||
}
|
||||
|
||||
loadPlayerListPage(pageNo);
|
||||
}
|
||||
|
||||
function loadPlayerListPage(pageNo) {
|
||||
let pageIndex = pageNo - 1;
|
||||
let startNo = pageIndex * 10;
|
||||
let endNo = pageIndex * 10 + 9;
|
||||
|
||||
console.log("startNo : " + startNo);
|
||||
console.log("endNo : " + endNo);
|
||||
|
||||
let xhr = new XMLHttpRequest(); //new로 생성.
|
||||
xhr.open('POST', './../server/user/registered_player_list_page.php', true);
|
||||
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
||||
xhr.send("maestro_id=" + maestroID + "&start_no=" + startNo + "&end_no=" + endNo);
|
||||
xhr.onload = function() {
|
||||
if(xhr.readyState === 4 && xhr.status === 200) {
|
||||
// console.log(xhr.responseText);
|
||||
// console.log(xhr.responseText.length);
|
||||
if(xhr.responseText.length === 0 || xhr.responseText === null) {
|
||||
console.log("no data from server");
|
||||
return;
|
||||
}
|
||||
|
||||
let replyJSON = JSON.parse(xhr.responseText);
|
||||
// console.log(replyJSON);
|
||||
|
||||
if(replyJSON === null) {
|
||||
console.log("no data from server");
|
||||
return;
|
||||
}
|
||||
|
||||
if(replyJSON["ERROR"] !== undefined || replyJSON["RESULT"] === undefined) {
|
||||
console.log(replyJSON["ERROR"]);
|
||||
return;
|
||||
}
|
||||
|
||||
if(replyJSON["RESULT"] === "fail") {
|
||||
console.log(replyJSON["RESULT"]);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(replyJSON["PlayerList"]);
|
||||
updatePlayerListPage(replyJSON["PlayerList"]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addPlayerListTitle() {
|
||||
$("#registered_player_list").empty();
|
||||
|
||||
$("#registered_player_list").append(
|
||||
'<li class="registered_player_list_name">이름</li><li class="registered_player_list_entercode">입장 코드</li>'
|
||||
);
|
||||
}
|
||||
|
||||
function updatePlayerListPage(playerList) {
|
||||
$("#registered_player_list").empty();
|
||||
addPlayerListTitle();
|
||||
|
||||
for(let i = 0; i < playerList.length; i++) {
|
||||
$("#registered_player_list").append(
|
||||
"<li>"
|
||||
+ "" + playerList[i]["UserID"] + ""
|
||||
+ "<input type='text' value='" + playerList[i]["Name"] + "' class='registered_player_list_name'>"
|
||||
+ "<input type='text' value='" + playerList[i]["EnterCode"] + "' class='registered_player_list_entercode'>"
|
||||
+ "<input type='button' value='수정'>"
|
||||
+ "</li>"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function tabClicked(tabNo) {
|
||||
for(let i = 0; i < 4; i++) {
|
||||
$("#page-tabs li").filter(":eq(" + i + ")").removeClass("activated");
|
||||
}
|
||||
|
||||
let tabIndex = tabNo - 1;
|
||||
$("#page-tabs li").filter(":eq(" + tabIndex + ")").addClass("activated");
|
||||
|
||||
switch(tabNo) {
|
||||
case 1:
|
||||
$(".player_list").removeClass("hide");
|
||||
$(".search").addClass("hide");
|
||||
$(".mouse_app_list").addClass("hide");
|
||||
$(".typing_app_list").addClass("hide");
|
||||
break;
|
||||
case 2:
|
||||
$(".player_list").addClass("hide");
|
||||
$(".search").removeClass("hide");
|
||||
$(".mouse_app_list").addClass("hide");
|
||||
$(".typing_app_list").addClass("hide");
|
||||
break;
|
||||
case 3:
|
||||
$(".player_list").addClass("hide");
|
||||
$(".search").addClass("hide");
|
||||
$(".mouse_app_list").removeClass("hide");
|
||||
$(".typing_app_list").addClass("hide");
|
||||
break;
|
||||
case 4:
|
||||
$(".player_list").addClass("hide");
|
||||
$(".search").addClass("hide");
|
||||
$(".mouse_app_list").addClass("hide");
|
||||
$(".typing_app_list").removeClass("hide");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function addPlayer() {
|
||||
let maestroID = sessionStorage.getItem("maestroID");
|
||||
let playerName = $("#add_player_name").val();
|
||||
let enterCode = $("#add_player_enter_code").val();
|
||||
|
||||
if(playerName.length === 0) {
|
||||
$("#add_player_notice").val("학생 이름을 입력하세요.");
|
||||
$("#add_player_name").focus();
|
||||
} else if(enterCode.length === 0) {
|
||||
$("#add_player_notice").val("엔터 코드를 입력하세요.");
|
||||
$("#add_player_enter_code").focus();
|
||||
}
|
||||
|
||||
let xhr = new XMLHttpRequest(); //new로 생성.
|
||||
xhr.open('POST', './../server/user/add_player.php', true);
|
||||
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
||||
xhr.send("maestro_id=" + maestroID + "&player_name=" + playerName + "&enter_code=" + enterCode);
|
||||
xhr.onload = function() {
|
||||
if(xhr.readyState === 4 && xhr.status === 200) {
|
||||
// console.log(xhr.responseText);
|
||||
// console.log(xhr.responseText.length);
|
||||
if(xhr.responseText.length === 0 || xhr.responseText === null) {
|
||||
console.log("no data from server");
|
||||
return;
|
||||
}
|
||||
|
||||
let replyJSON = JSON.parse(xhr.responseText);
|
||||
// console.log(replyJSON);
|
||||
|
||||
if(replyJSON === null) {
|
||||
console.log("no data from server");
|
||||
return;
|
||||
}
|
||||
|
||||
if(replyJSON["ERROR"] !== undefined || replyJSON["RESULT"] === undefined) {
|
||||
console.log(replyJSON["ERROR"]);
|
||||
return;
|
||||
}
|
||||
|
||||
if(replyJSON["RESULT"] === "fail") {
|
||||
console.log(replyJSON["RESULT"]);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("update player list");
|
||||
loadPlayerListPage(1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -343,57 +21,7 @@ function addPlayer() {
|
||||
</div>
|
||||
|
||||
|
||||
<div class="player_list">
|
||||
<span id="add_player">
|
||||
<h2>추가</h2>
|
||||
|
||||
<h3>1명 추가</h3>
|
||||
|
||||
<div>
|
||||
학생 이름 <input type="text" name="name" id="add_player_name"><br/>
|
||||
입장 코드 <input type="text" name="entercode" id="add_player_enter_code">
|
||||
<input type="submit" name="추가" onClick="addPlayer()">
|
||||
</div>
|
||||
|
||||
<textarea id="add_player_notice">
|
||||
학생 이름 : (한글) 10글자, (영문) 20글자까지 입력 가능
|
||||
입장 코드 : 숫자 1~6자리 수
|
||||
</textarea>
|
||||
|
||||
|
||||
<h3>단체 추가</h3>
|
||||
|
||||
<form action="/action_page.php" method="get" id="add_users">
|
||||
<textarea>
|
||||
엑셀에서 아래와 같이 셀에 입력한 후에 복사하고 붙여넣기
|
||||
학생 이름 | 입장 코드
|
||||
학생 이름 | 입장 코드
|
||||
...
|
||||
</textarea>
|
||||
<button type="submit" form="add_users">추가</button>
|
||||
</form>
|
||||
|
||||
<textarea>
|
||||
학생 이름 : (한글) 10글자, (영문) 20글자까지 입력 가능
|
||||
입장 코드 : 숫자 1~6자리 수
|
||||
</textarea>
|
||||
</span>
|
||||
|
||||
<span id="player_list_result">
|
||||
목록
|
||||
<div id="player_list_result_contents">
|
||||
<ul id="registered_player_list">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="player_list_navigator">
|
||||
<span><a onClick="onClickPlayerListPage('first')"> << </a></span>
|
||||
<span><a onClick="onClickPlayerListPage('prev')"> < </a></span>
|
||||
<span id="player_list_pages"></span>
|
||||
<span><a onClick="onClickPlayerListPage('next')"> > </a></span>
|
||||
<span><a onClick="onClickPlayerListPage('last')"> >> </a></span>
|
||||
</div>
|
||||
</span>
|
||||
<div id="section_add_player">
|
||||
</div>
|
||||
|
||||
<div class="search hide">
|
||||
|
||||
Reference in New Issue
Block a user