Fix: bootstrap - player list

src/web/js/player_list.js

@@ -20,31 +20,52 @@ class PlayerList {
 		this.playerCount = 0;
 		this.activePageNo = 1;
 
-		let id_list = tagDiv.find(".player_id");
+		// let id_list = tagDiv.find(".player_id");
+		let id_list = tagDiv.find(".player-list");
 		// console.log(id_list);
 
 		this.listRows = new Array();
 		for(let i = 0; i < id_list.length; i++) {
 			this.listRows[i] = new PlayerListRow(
-				id_list[i],	// span
+				id_list[i].getElementsByClassName("player_id"),
-				$(id_list[i]).siblings(".player_name"),
+				id_list[i].getElementsByClassName("player_name"),
-				$(id_list[i]).siblings(".player_entercode"),
+				id_list[i].getElementsByClassName("player_entercode"),
-				$(id_list[i]).siblings(".player_edit"),
+				id_list[i].getElementsByClassName("player_edit"),
-				$(id_list[i]).siblings(".player_delete")
+				id_list[i].getElementsByClassName("player_delete")
 			);
 
+			// this.listRows[i] = new PlayerListRow(
+			// 	id_list[i],	// span
+			// 	$(id_list[i]).siblings(".player_name"),
+			// 	$(id_list[i]).siblings(".player_entercode"),
+			// 	$(id_list[i]).siblings(".player_edit"),
+			// 	$(id_list[i]).siblings(".player_delete")
+			// );
+
 			this.disableItem(this.listRows[i]);
 
-			$(id_list[i]).siblings(".player_edit").click(function() {
+
+			// $(id_list[i]).siblings(".player_edit").click(function() {
+			// 	playerListManager.editPlayer(this);
+			// })
+
+			// $(id_list[i]).siblings(".player_delete").click(function() {
+			// 	playerListManager.deletePlayer(this);
+			// })
+
+
+			$(id_list[i].editButton).click(function() {
 				playerListManager.editPlayer(this);
 			})
 
-			$(id_list[i]).siblings(".player_delete").click(function() {
+			$(id_list[i].deleteButton).click(function() {
 				playerListManager.deletePlayer(this);
 			})
-			// console.log(this.listRows[i].playerName.val());
 			// console.log(this.listRows[i]);
+			// console.log(this.listRows[i].playerName.val());
 		}
+
+		console.log("this.listRows : " + this.listRows.length);
 	}
 
 	disableItem(item) {
@@ -63,7 +84,6 @@ class PlayerList {
 	}
 
 	updatePlayerList(jsonData) {
-		// console.log(jsonData);
 		if(jsonData === null) {
 			for(let i = 0; i < 10; i++) {
 				$(this.listRows[i].playerName).val("");

src/web/module/maestro_section_add_player.html

@@ -148,6 +148,296 @@ function onErrorPlayerPW(message) {
 		<h5>학생 목록</h5>
 
 		<div id="player_list_result_contents">
+
+			<form id="add_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>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+			</form>
+
+
+<!-- 
+			<table id="add_player_list" class="table table-sm table-striped table-hover text-center"">
+				<thread>
+					<tr>
+						<th scope="col" class="d-none">ID</th>
+						<th scope="col">이름</th>
+						<th scope="col">입장 번호</th>
+						<th scope="col"></th>
+						<th scope="col"></th>
+					</tr>
+				</thread>
+				<tbody>
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="d-none">
+							<input type="text" class="col-sm player_id" value="test">
+						</td>
+						<td>
+							<input type="text" class="col-sm player_name" value="test">
+						</td>
+						<td class="player_entercode">
+							<input type="text" class="col-sm player_entercode" value="test">
+						</td>
+						<td class="player_edit">
+							<button type="button" class="btn-sm player_edit">+</button>
+						</td>
+						<td class="player_delete">
+							<button type="button" class="btn-sm player_delete">-</button>
+						</td>
+					</tr>
+
+				</tbody>
+			</table>
+			-->
+
+			<!--
 			<ul id="add_player_list" class="player_list">
 				<li>
 					<span class="player_name">이름</span>
@@ -225,19 +515,50 @@ function onErrorPlayerPW(message) {
 					<input type='button' class="player_delete" value='삭제'>
 				</li>
 			</ul>
+		-->
+
 		</div>
 
 
 		<nav aria-label="Page navigation example">
-			<ul class="pagination justify-content-center">
+			<ul class="pagination pagination-sm justify-content-center">
 				<li class="page-item disabled">
-					<a class="page-link" href="#" tabindex="-1">Previous</a>
+					<a class="page-link" href="#" aria-label="Previous">
+						<span aria-hidden="true">&laquo;</span>
+						<span class="sr-only">Fastest</span>
+					</a>
 				</li>
+				<li class="page-item disabled">
+					<a class="page-link" href="#" aria-label="Previous">
+						<span aria-hidden="true">&lt;</span>
+						<span class="sr-only">Previous</span>
+					</a>
+				</li>
+				<li>&nbsp</li>
+
 				<li class="page-item"><a class="page-link" href="#">1</a></li>
 				<li class="page-item"><a class="page-link" href="#">2</a></li>
 				<li class="page-item"><a class="page-link" href="#">3</a></li>
+				<li class="page-item"><a class="page-link" href="#">4</a></li>
+				<li class="page-item"><a class="page-link" href="#">5</a></li>
+				<li class="page-item"><a class="page-link" href="#">6</a></li>
+				<li class="page-item"><a class="page-link" href="#">7</a></li>
+				<li class="page-item"><a class="page-link" href="#">8</a></li>
+				<li class="page-item"><a class="page-link" href="#">9</a></li>
+				<li class="page-item"><a class="page-link" href="#">10</a></li>
+
+				<li>&nbsp</li>
 				<li class="page-item">
-					<a class="page-link" href="#">Next</a>
+					<a class="page-link" href="#" aria-label="Next">
+						<span aria-hidden="true">&gt;</span>
+						<span class="sr-only">Next</span>
+					</a>
+				</li>
+				<li class="page-item">
+					<a class="page-link" href="#" aria-label="Next">
+						<span aria-hidden="true">&raquo;</span>
+						<span class="sr-only">Latest</span>
+					</a>
 				</li>
 				</ul>
 		</nav>

src/web/module/maestro_section_search.html

@@ -34,6 +34,101 @@ function searchPlayer() {
 <span id="search_result">
 	검색 결과
 	<div id="player_list_result_contents">
+
+
+			<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>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+				<div class="form-group player-list row mx-2">
+					<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">
+					<input type="button" class="player_edit col-sm-1" value="+">
+					<input type="button" class="player_delete col-sm-1" value="-">
+				</div>
+
+			</form>
+
+
+<!-- 
 		<ul id="search_player_list" class="player_list">
 			<li>
 				<span class="player_name">이름</span>
@@ -112,6 +207,52 @@ function searchPlayer() {
 			</li>
 		</ul>
 	</div>
+ -->
+
+
+		<nav aria-label="Page navigation example">
+			<ul class="pagination pagination-sm justify-content-center">
+				<li class="page-item disabled">
+					<a class="page-link" href="#" aria-label="Previous">
+						<span aria-hidden="true">&laquo;</span>
+						<span class="sr-only">Fastest</span>
+					</a>
+				</li>
+				<li class="page-item disabled">
+					<a class="page-link" href="#" aria-label="Previous">
+						<span aria-hidden="true">&lt;</span>
+						<span class="sr-only">Previous</span>
+					</a>
+				</li>
+				<li>&nbsp</li>
+
+				<li class="page-item"><a class="page-link" href="#">1</a></li>
+				<li class="page-item"><a class="page-link" href="#">2</a></li>
+				<li class="page-item"><a class="page-link" href="#">3</a></li>
+				<li class="page-item"><a class="page-link" href="#">4</a></li>
+				<li class="page-item"><a class="page-link" href="#">5</a></li>
+				<li class="page-item"><a class="page-link" href="#">6</a></li>
+				<li class="page-item"><a class="page-link" href="#">7</a></li>
+				<li class="page-item"><a class="page-link" href="#">8</a></li>
+				<li class="page-item"><a class="page-link" href="#">9</a></li>
+				<li class="page-item"><a class="page-link" href="#">10</a></li>
+
+				<li>&nbsp</li>
+				<li class="page-item">
+					<a class="page-link" href="#" aria-label="Next">
+						<span aria-hidden="true">&gt;</span>
+						<span class="sr-only">Next</span>
+					</a>
+				</li>
+				<li class="page-item">
+					<a class="page-link" href="#" aria-label="Next">
+						<span aria-hidden="true">&raquo;</span>
+						<span class="sr-only">Latest</span>
+					</a>
+				</li>
+				</ul>
+		</nav>
+
 
 	<div id="search_player_list_navigator" class="player_list_navigator">
 		<span><a onClick="onClickPlayerListPage('first')"> ≪ </a></span>
@@ -120,4 +261,5 @@ function searchPlayer() {
 		<span><a onClick="onClickPlayerListPage('next')"> ＞ </a></span>
 		<span><a onClick="onClickPlayerListPage('last')"> ≫ </a></span>
 	</div>
+
 </span>