jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: player list navigator refactoring

Browse Source
This commit is contained in:
Jisang Park
2018-07-28 23:30:32 +09:00
parent 7d463fc292
commit d0be19ef0a
7 changed files with 296 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/js/maestro_main.js
-14
View File
@@ -5,17 +5,3 @@ let mouseAppList;
let typingAppList;
let accountValidator = new AccountValidator();
/*
function onClickPageNo(item, pageNo) {
let tagDiv = $(item).closest("div");
// console.log(tagDiv);
let tagDivIDName = tagDiv.prop("id");
// console.log(tagDivIDName);
if(tagDivIDName === "add_player_list_navigator")
addPlayerListManager.onClickPageNo(pageNo);
else if(tagDivIDName === "search_player_list_navigator")
searchPlayerListManager.onClickPageNo(pageNo);
}
*/
src/web/js/player_list.js
-4
View File
@@ -52,18 +52,14 @@ class PlayerList {
disableItem(item) {
$(item.playerID).empty();
$(item.playerName).prop("disabled", true);
// $(item.playerName).removeClass("bg-secondary");
$(item.enterCode).prop("disabled", true);
// $(item.enterCode).removeClass("bg-secondary");
$(item.editButton).prop("disabled", true);
$(item.deleteButton).prop("disabled", true);
}
enableItem(item) {
$(item.playerName).prop("disabled", false);
// $(item.playerName).addClass("bg-secondary");
$(item.enterCode).prop("disabled", false);
// $(item.enterCode).addClass("bg-secondary");
$(item.editButton).prop("disabled", false);
$(item.deleteButton).prop("disabled", false);
}
src/web/js/player_list_manager.js
+16 -30
View File
@@ -8,7 +8,6 @@
this.list = new PlayerList(this.docList, this);
this.list.updatePlayerList(null);
// this.listNavigator = new PlayerListNavigator(this, this.list, this.docNav);
this.listNavigator = new PlayerListNavigator(this.docNav, this);
this.playerCount = 0;
@@ -36,9 +35,7 @@
},
(errorMessage, errorCode) => {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessage, "error");
}
);
@@ -62,9 +59,7 @@
},
(errorMessage, errorCode) => {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessage, "error");
}
);
@@ -90,9 +85,7 @@
},
(errorMessage, errorCode) => {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessage, "error");
}
);
@@ -114,12 +107,13 @@
self.activePageNo = 1;
self.updateSearchPlayerListPage(this.searchPlayerName, 1);
if(self.playerCount === 0)
showErrorMessage(this.searchPlayerName + " : 검색 결과가 없습니다.", "info");
},
(errorMessage, errorCode) => {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessage, "error");
}
);
@@ -144,9 +138,7 @@
},
(errorMessage, errorCode) => {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessage, "error");
}
);
@@ -163,35 +155,32 @@
let id = $(inputButton).siblings(".player_id");
let playerID = id.text();
console.log(playerID);
// console.log(playerID);
let name = $(inputButton).siblings(".player_name");
let playerName = name.val();
console.log(playerName);
// console.log(playerName);
let enterCode = $(inputButton).siblings(".player_entercode");
let playerEnterCode = enterCode.val();
console.log(playerEnterCode);
// console.log(playerEnterCode);
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
"./../server/player/edit_player.php",
"maestro_id=" + maestroID + "&player_id=" + playerID + "&player_name=" + playerName + "&enter_code=" + playerEnterCode,
(jsonData) => {
console.log(jsonData);
// console.log(jsonData);
if(this.playerListID === "add_player_list") {
self.setupAddPlayerList();
} else if(this.playerListID === "search_player_list") {
// let playerName = $("#search_name").val();
self.setupSearchPlayerList(this.searchPlayerName);
}
showErrorMessage("학생 데이터가 [ " + playerName + " / " + playerEnterCode + " ] 으로 변경되었습니다.", "success");
},
(errorMessage, errorCode) => {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessage, "error");
}
);
@@ -205,7 +194,7 @@
let name = $(inputButton).siblings(".player_name");
let playerName = name.val();
console.log(playerName);
// console.log(playerName);
// let clickedObjectID = this.getClickedObjectID(inputButton);
@@ -220,8 +209,7 @@
if(this.playerListID === "add_player_list") {
self.setupAddPlayerList();
} else if(this.playerListID === "search_player_list") {
// let searchPlayerName = $("#search_name").val();
self.setupSearchPlayerList(searchPlayerName);
self.setupSearchPlayerList(this.searchPlayerName);
}
showErrorMessage("[ " + playerName + "] 학생 데이터가 삭제되었습니다.", "success");
@@ -229,9 +217,7 @@
},
(errorMessage, errorCode) => {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessage, "error");
}
);
src/web/js/player_list_navigator.js
+46 -4
View File
@@ -11,14 +11,18 @@
}
updateNavigator(activePageNo, lastPageNo) {
let self = this;
this.activePageNo = activePageNo;
this.lastPageNo = lastPageNo;
// this.lastPageNo = Math.ceil( (playerCount + 1) / 10 );
$(this.pagination).empty();
this.makePagination();
this.applyClickEvent();
this.disableNavButtons();
}
makePagination() {
// left arrows
let paginationLeftArrows = '\
<li class="page-item">\
<a class="page-link" href="javascript:void(0);" aria-label="First">\
@@ -36,16 +40,16 @@
\
<li>&nbsp</li>\
\ ';
$(this.pagination).append(paginationLeftArrows);
// numbers
for(let pageNo = 1; pageNo < this.lastPageNo + 1; pageNo++) {
$(this.pagination).append(
// "<a onClick='onClickPageNo(this, " + pageNo + ")'> " + pageNo + " </a>"
'<li class="page-item"><a class="page-link" href="javascript:void(0);" aria-label="' + pageNo + '">' + pageNo + '</a></li>'
);
}
// right arrows
let paginationRightArrows = '\
<li>&nbsp</li>\
\
@@ -64,7 +68,10 @@
</li>\
';
$(this.pagination).append(paginationRightArrows);
}
applyClickEvent() {
let self = this;
$("[aria-label='First']").click(function() {
self.onClickPageNo("first");
@@ -89,6 +96,41 @@
});
}
disableNavButtons() {
/*
console.log(this.activePageNo);
console.log(this.lastPageNo);
console.log($("[aria-label='First']").parent());
if(this.activePageNo === 1 || this.lastPageNo === 1)
$("[aria-label='First']").parent().prop("disabled", true);
else
$("[aria-label='First']").parent().prop("disabled", false);
if(this.activePageNo === 1 || this.lastPageNo === 1)
$("[aria-label='Previous']").parent().prop("disabled", true);
else
$("[aria-label='Previous']").parent().prop("disabled", false);
for(let pageNo = 1; pageNo < this.lastPageNo + 1; pageNo++) {
if(this.activePageNo === pageNo)
$("[aria-label='" + pageNo + "']").parent().prop("disabled", true);
else
$("[aria-label='" + pageNo + "']").parent().prop("disabled", false);
}
if(this.activePageNo === this.lastPageNo)
$("[aria-label='Next']").parent().prop("disabled", true);
else
$("[aria-label='Next']").parent().prop("disabled", false);
if(this.activePageNo === this.lastPageNo)
$("[aria-label='Last']").parent().prop("disabled", true);
else
$("[aria-label='Last']").parent().prop("disabled", false);
*/
}
onClickPageNo(pageNo) {
console.log(pageNo);
switch(pageNo) {
src/web/module/maestro_section_add_player.html
+6 -23
View File
@@ -3,8 +3,8 @@
$(document).ready(function() {
addPlayerListManager = new PlayerListManager(
$("#add_player_list"),
// $("#add_player_list_navigator > #page_no_area")
$(".pagination")
// $(".pagination")
$("[aria-label='add_player_list'] > .pagination")
);
addPlayerListManager.setupAddPlayerList();
@@ -43,6 +43,7 @@ function addPlayer() {
"maestro_id=" + maestroID + "&player_name=" + playerName + "&enter_code=" + enterCode,
(jsonData) => {
showErrorMessage(playerName + " : 학생 데이터가 추가되었습니다", "success");
addPlayerListManager.updateAddPlayerListPage(1);
onChangePlayerCount();
@@ -74,13 +75,6 @@ function onErrorPlayerPW(message) {
<div class="row mx-1">
<div class="col">
<div id="message_box"></div>
</div>
</div>
<div class="row mx-1">
<div class="col-5">
@@ -146,8 +140,6 @@ function onErrorPlayerPW(message) {
<div class="col-7" style="background-color: #ffce54">
<h5 class="my-3">학생 목록</h5>
<div id="player_list_result_contents">
<form id="add_player_list">
<div class="form-group row mx-2 mb-0 font-weight-bold">
<label class="col-form-label d-none">ID</label>
@@ -238,10 +230,8 @@ function onErrorPlayerPW(message) {
</div>
</form>
</div> <!-- 학생 목록 -->
<nav>
<nav aria-label="add_player_list">
<ul class="pagination pagination-sm justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
@@ -284,13 +274,6 @@ function onErrorPlayerPW(message) {
</ul>
</nav>
<div id="add_player_list_navigator" class="player_list_navigator">
<span><a onClick="onClickPageNo(this, 'first')"> ≪ </a></span>
<span><a onClick="onClickPageNo(this, 'prev')"> ＜ </a></span>
<span id="page_no_area"></span>
<span><a onClick="onClickPageNo(this, 'next')"> ＞ </a></span>
<span><a onClick="onClickPageNo(this, 'last')"> ≫ </a></span>
</div>
</div>
</div> <!-- 학생 목록 -->
</div> <!-- 학생 목록 -->
</div>
src/web/module/maestro_section_main.html
+7 -1
View File
@@ -38,6 +38,11 @@ function onChangePlayerCount() {
<div id="maestro_info_setting" class="col-2">계정 정보 수정 버튼</div>
</div>
<div class="row mx-1">
<div class="col">
<div id="message_box"></div>
</div>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
@@ -57,7 +62,6 @@ function onChangePlayerCount() {
</li>
</ul> <!-- 탭 -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active my-3" id="add" role="tabpanel" aria-labelledby="add-tab">
@@ -76,4 +80,6 @@ function onChangePlayerCount() {
<div id="typing_app_list" class="hide"></div>
</div>
</div>
</div> <!-- container -->
src/web/module/maestro_section_search.html
+44 -45
View File
@@ -3,8 +3,8 @@
$(document).ready(function() {
searchPlayerListManager = new PlayerListManager(
$("#search_player_list"),
// $("#search_player_list_navigator > #page_no_area")
$(".pagination")
// $(".pagination")
$("[aria-label='search_player_list'] > .pagination")
);
});
@@ -25,36 +25,43 @@ function searchPlayer() {
<div class="row mx-1">
<div class="col">
<div id="message_box"></div>
<div class="col-5">
<h5 class="my-3">학생 검색</h5>
<form class="mx-2">
<div class="form-group row">
<label for="search_name" class="col-sm-3 col-form-label">이름</label>
<div class="col-sm-9">
<input type="text" class="form-control col-sm-9" id="search_name" placeholder="이름 입력">
<!-- <small class="form-text text-muted">1~8 글자 / [ 한글,영문,숫자,-,_ ]</small> -->
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<button type="button" class="col-sm-7 btn btn-primary btn-lg mt-3" onClick="searchPlayer()">검색</button>
</div>
</div>
</form>
</div> <!-- 학생 검색 -->
<span id="search_player_name">
<h1>검색</h1>
학생 이름
<input type="text" id="search_name"><input type="submit" name="찾기" onClick="searchPlayer()"><br/>
<br/>
</span>
<span id="search_result">
검색 결과
<div id="player_list_result_contents">
<div class="col-7" style="background-color: #ffce54">
<h5 class="my-3">검색 결과</h5>
<form id="search_player_list">
<div class="form-group row mx-2">
<label class="col-form-label text-center d-none">ID</label>
<label class="col-form-label text-center col-sm">이름</label>
<label class="col-form-label text-center col-sm">입장번호</label>
<label class="col-form-label text-center col-sm-1"></label>
<label class="col-form-label text-center col-sm-1"></label>
<div class="form-group row mx-2 mb-0 font-weight-bold">
<label class="col-form-label d-none">ID</label>
<label class="col-form-label col-sm">이 름</label>
<label class="col-form-label col-sm">입장 번호</label>
<label class="col-form-label col-sm-1"></label>
<label class="col-form-label col-sm-1"></label>
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test1">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -62,7 +69,7 @@ function searchPlayer() {
<input type="button" class="player_delete col-sm-1" value="-">
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test2">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -70,7 +77,7 @@ function searchPlayer() {
<input type="button" class="player_delete col-sm-1" value="-">
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test3">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -78,7 +85,7 @@ function searchPlayer() {
<input type="button" class="player_delete col-sm-1" value="-">
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test4">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -86,7 +93,7 @@ function searchPlayer() {
<input type="button" class="player_delete col-sm-1" value="-">
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test5">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -94,7 +101,7 @@ function searchPlayer() {
<input type="button" class="player_delete col-sm-1" value="-">
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test6">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -102,7 +109,7 @@ function searchPlayer() {
<input type="button" class="player_delete col-sm-1" value="-">
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test7">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -110,7 +117,7 @@ function searchPlayer() {
<input type="button" class="player_delete col-sm-1" value="-">
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test8">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -118,7 +125,7 @@ function searchPlayer() {
<input type="button" class="player_delete col-sm-1" value="-">
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test9">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -126,7 +133,7 @@ function searchPlayer() {
<input type="button" class="player_delete col-sm-1" value="-">
</div>
<div class="form-group player-list row mx-2">
<div class="form-group player-list row mx-2 mb-1">
<input type="text" class="player_id d-none" value="test10">
<input type="text" class="player_name col-sm" value="test">
<input type="text" class="player_entercode col-sm" value="test">
@@ -136,8 +143,7 @@ function searchPlayer() {
</form>
<nav>
<nav aria-label="search_player_list">
<ul class="pagination pagination-sm justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
@@ -180,13 +186,6 @@ function searchPlayer() {
</ul>
</nav>
</div> <!-- 학생 목록 -->
<div id="search_player_list_navigator" class="player_list_navigator">
<span><a onClick="onClickPageNo(this, 'first')"> ≪ </a></span>
<span><a onClick="onClickPageNo(this, 'prev')"> ＜ </a></span>
<span id="page_no_area"></span>
<span><a onClick="onClickPageNo(this, 'next')"> ＞ </a></span>
<span><a onClick="onClickPageNo(this, 'last')"> ≫ </a></span>
</div>
</span>
</div>