Add: player list navigator

src/web/css/maestro_main.css

@@ -45,16 +45,18 @@
 	list-style: none;
 }
 
-#registered_player_list > li {
+#registered_player_list {
-	display: inline-block;
+	list-style: none;
-	vertical-align: middle;
-	text-align: center;
 }
 
 #registered_player_list > li > span {
 	line-height: normal;
 }
 
+#registered_player_list > li > .player_id {
+	display: none;
+}
+
 #registered_player_list .player_id {
 	background-color: #ffffff;
 }
@@ -78,6 +80,10 @@
 	text-align: center;
 }
 
+#player_list_navigator > span {
+	line-height: normal;
+}
+
 #player_list_navigator a {
 	cursor: pointer;
 }

src/web/js/maestro_main.js

@@ -4,7 +4,10 @@ let playerListPage = 0;
 let lastPageNo = 0;
 
 let addPlayerList;
-let searchPlayerList
+let searchPlayerList;
+
+let addPlayerListNavigator;
+let searchPlayerListNavigator;
 
 
 $(document).ready(function() {
@@ -45,113 +48,9 @@ function loadPlayerList() {
 			}
 
 			playerCount = replyJSON["Count"];
-			lastPageNo = Math.floor( (playerCount + 1) / 10 );
 
 			loadPlayerListPage(1);
-			addPlayerListPages();
+			addPlayerListNavigator.addPlayerListPages(playerCount);
-		}
-	}
-}
-
-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":
-		console.log("playerListPage : " + playerListPage);
-		console.log("lastPageNo : " + lastPageNo);
-		if(playerListPage < lastPageNo)
-			playerListPage += 1;
-		loadPlayerListPage(playerListPage);
-		return;
-
-		case "last":
-		loadPlayerListPage(lastPageNo);
-		return;
-	}
-
-	loadPlayerListPage(pageNo);
-}
-
-function loadPlayerListPage(pageNo) {
-	playerListPage = 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);
-	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"]);
-			addPlayerList.updatePlayerList(replyJSON["PlayerList"]);
-		}
-	}
-}
-
-function updatePlayerList(playerList) {
-	for(let i = 0; i < 10; i++) {
-		let listIndex = i + 1;	// index 0 : list title
-
-		if(i < playerList.length) {
-			$("#registered_player_list .player_id").filter(":eq(" + i + ")").empty();
-			$("#registered_player_list .player_id").filter(":eq(" + i + ")").append(playerList[i]["UserID"]);
-			$("#registered_player_list .player_name").filter(":eq(" + listIndex + ")").val(playerList[i]["Name"]);
-			$("#registered_player_list .player_entercode").filter(":eq(" + listIndex + ")").val(playerList[i]["EnterCode"]);
-		} else {
-			$("#registered_player_list .player_id").filter(":eq(" + i + ")").empty();
-			$("#registered_player_list .player_name").filter(":eq(" + listIndex + ")").val("");
-			$("#registered_player_list .player_entercode").filter(":eq(" + listIndex + ")").val("");
 		}
 	}
 }
@@ -239,7 +138,6 @@ function addPlayer() {
 				return;
 			}
 
-			console.log("update player list");
 			loadPlayerListPage(1);
 		}
 	}

src/web/js/player_list.js

@@ -89,8 +89,6 @@ class PlayerList {
 		if(playerID === null || playerID === "")
 			return;
 
-		console.log(playerID);
-
 		let xhr = new XMLHttpRequest(); //new로 생성.
 		xhr.open('POST', './../server/user/delete_player.php', true);
 		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
@@ -126,7 +124,51 @@ class PlayerList {
 				loadPlayerListPage(1);
 			}
 		}
-
 	}
-
+}
+
+
+function loadPlayerListPage(pageNo) {
+	playerListPage = 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);
+	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"]);
+			addPlayerList.updatePlayerList(replyJSON["PlayerList"]);
+		}
+	}
 }

src/web/js/player_list_navigator.js

@@ -0,0 +1,51 @@
+class PlayerListNavigator {
+
+	constructor(pageNoArea) {
+		let self = this;
+		this.pageNoArea = pageNoArea;
+		// console.log(parent);
+	}
+
+	addPlayerListPages(playerCount) {
+		lastPageNo = Math.ceil( (playerCount + 1) / 10 );
+
+		$(this.pageNoArea).empty();
+
+		for(let pageNo = 1; pageNo < lastPageNo + 1; pageNo++) {
+			$(this.pageNoArea).append(
+				"<a onClick='onClickPlayerListPage(" + pageNo + ")'> " + pageNo + " </a>"
+			);
+		}
+	}
+
+}
+
+
+
+function onClickPlayerListPage(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);
+}
+

src/web/maestro/main_menu.html

@@ -12,6 +12,7 @@
 	<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
 	<script type="text/javascript" src="./../js/maestro_main.js"></script>
 	<script type="text/javascript" src="./../js/player_list.js"></script>
+	<script type="text/javascript" src="./../js/player_list_navigator.js"></script>
 	<script type="text/javascript">
 		$(document).ready(function() {
 			$("#header").load("./../module/maestro_header.html");

src/web/module/maestro_section_add_player.html

@@ -1,7 +1,10 @@
 <script type="text/javascript">
 $(document).ready(function() {
-	console.log("add_player loaded");
 	addPlayerList = new PlayerList($("#registered_player_list"));
+	addPlayerListNavigator = new PlayerListNavigator($("#page_no_area"));
+
+	loadPlayerList();
+	addPlayerListNavigator.addPlayerListPages();
 });
 </script>
 
@@ -127,10 +130,10 @@ $(document).ready(function() {
 	</div>
 
 	<div id="player_list_navigator">
-		<span><a onClick="onClickPlayerListPage('first')"> << </a></span>
+		<span><a onClick="onClickPlayerListPage('first')"> ≪ </a></span>
-		<span><a onClick="onClickPlayerListPage('prev')"> < </a></span>
+		<span><a onClick="onClickPlayerListPage('prev')"> ＜ </a></span>
-		<span id="player_list_pages"></span>
+		<span id="page_no_area"></span>
-		<span><a onClick="onClickPlayerListPage('next')"> > </a></span>
+		<span><a onClick="onClickPlayerListPage('next')"> ＞ </a></span>
-		<span><a onClick="onClickPlayerListPage('last')"> >> </a></span>
+		<span><a onClick="onClickPlayerListPage('last')"> ≫ </a></span>
 	</div>
 </span>

src/web/module/maestro_section_main.html

@@ -3,7 +3,7 @@ $(document).ready(function() {
 	$("#section_add_player").load("./../module/maestro_section_add_player.html");
 	$("#search").load("./../module/maestro_section_search.html");
 
-	loadPlayerList();
+	// loadPlayerList();
 });
 </script>
 

src/web/module/maestro_section_search.html

@@ -1,6 +1,5 @@
 <script type="text/javascript">
 $(document).ready(function() {
-	console.log("search loaded");
 	searchPlayerList = new PlayerList($("#search_player_list"));
 });
 </script>