From b2250b303acfd3f1d714f706cfdba0e156452061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?=
 =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?=
 <jisangs@gmail.com>
Date: Mon, 2 Jul 2018 20:18:08 +0900
Subject: [PATCH] Add: navigate page

---
 src/web/module/maestro_section_main.html | 56 +++++++++++++++++++-----
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/web/module/maestro_section_main.html b/src/web/module/maestro_section_main.html
index dc72fae..b740692 100644
--- a/src/web/module/maestro_section_main.html
+++ b/src/web/module/maestro_section_main.html
@@ -64,6 +64,10 @@
 	background-color: #ddddff;
 }
 
+#player_list_navigator {
+	text-align: center;
+}
+
 </style>
 
 
@@ -71,6 +75,7 @@
 <script>
 
 let maestroID = -1;
+let playerCount = 0;
 
 $(document).ready(function() {
 	maestroID = sessionStorage.getItem("maestroID");
@@ -113,14 +118,32 @@ function loadPlayerList() {
 
 			let playerCount = replyJSON["Count"];
 			console.log("registered player count : " + playerCount);
-			loadPlayerListPage(playerCount, 1);
+			loadPlayerListPage(1);
 		}
 	}
 }
 
-function loadPlayerListPage(playerCount, pageNo) {
-	let startNo = 0;
-	let endNo = 9;
+function onClickPlayerListPage(targetPage) {
+	switch(targetPage) {
+		case "first":
+		loadPlayerListPage(1);
+		break;
+		case "prev":
+		loadPlayerListPage(1);
+		break;
+		case "next":
+		loadPlayerListPage(1);
+		break;
+		case "last":
+		loadPlayerListPage(6);
+		break;
+	}
+}
+
+function loadPlayerListPage(pageNo) {
+	let pageIndex = pageNo - 1;
+	let startNo = pageIndex * 10;
+	let endNo = pageIndex * 10 + 9;
 
 	let xhr = new XMLHttpRequest(); //new로 생성.
 	xhr.open('POST', './../server/user/registered_player_list_page.php', true);
@@ -159,7 +182,18 @@ function loadPlayerListPage(playerCount, pageNo) {
 	}
 }
 
+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>"
@@ -253,6 +287,7 @@ function addPlayer() {
 			}
 
 			console.log("update player list");
+			loadPlayerListPage(1);
 		}
 	}
 
@@ -313,14 +348,15 @@ function addPlayer() {
 			목록
 			<div id="player_list_result_contents">
 				<ul id="registered_player_list">
-					<li class="registered_player_list_name">
-						이름
-					</li>
-					<li class="registered_player_list_entercode">
-						입장 코드
-					</li>
 				</ul>
 			</div>
+
+			<div id="player_list_navigator">
+				<span><a onClick="onClickPlayerListPage('first')"> << </a></span>
+				<span><a onClick="onClickPlayerListPage('first')"> < </a></span>
+				<span><a onClick="onClickPlayerListPage('last')"> > </a></span>
+				<span><a onClick="onClickPlayerListPage('last')"> >> </a></span>
+			</div>
 		</span>
 	</div>