Fix: player list navigator with pagination

src/web/js/maestro_main.js

@@ -6,7 +6,7 @@ let typingAppList;
 
 let accountValidator = new AccountValidator();
 
-
+/*
 function onClickPageNo(item, pageNo) {
 	let tagDiv = $(item).closest("div");
 	// console.log(tagDiv);
@@ -18,3 +18,4 @@ function onClickPageNo(item, pageNo) {
 	else if(tagDivIDName === "search_player_list_navigator")
 		searchPlayerListManager.onClickPageNo(pageNo);
 }
+*/

src/web/js/player_list.js

@@ -52,14 +52,18 @@ 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

@@ -8,7 +8,8 @@
 
 		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, this.list, this.docNav);
+		this.listNavigator = new PlayerListNavigator(this.docNav, this);
 
 		this.playerCount = 0;
 		this.activePageNo = 1;

src/web/js/player_list_navigator.js

@@ -1,10 +1,9 @@
 class PlayerListNavigator {
 
-	constructor(playerListManager, playerList, pageNoArea) {
+	constructor(pageNoArea, playerListManager) {
 		let self = this;
 		this.playerListManager = playerListManager;
-		this.playerList = playerList;
+		this.pagination = pageNoArea;
-		this.pageNoArea = pageNoArea;
 		// console.log(parent);
 
 		this.activePageNo = 1;
@@ -12,61 +11,110 @@
 	}
 
 	updateNavigator(activePageNo, lastPageNo) {
+		let self = this;
+
 		this.activePageNo = activePageNo;
 		this.lastPageNo = lastPageNo;
 		// this.lastPageNo = Math.ceil( (playerCount + 1) / 10 );
 
-		$(this.pageNoArea).empty();
+		$(this.pagination).empty();
+
+		let paginationLeftArrows = '\
+				<li class="page-item">\
+					<a class="page-link" href="javascript:void(0);" aria-label="First">\
+						<span aria-hidden="true">&laquo;</span>\
+						<span class="sr-only">First</span>\
+					</a>\
+				</li>\
+\
+				<li class="page-item">\
+					<a class="page-link" href="javascript:void(0);" aria-label="Previous">\
+						<span aria-hidden="true">&lt;</span>\
+						<span class="sr-only">Previous</span>\
+					</a>\
+				</li>\
+\
+				<li>&nbsp</li>\
+\				';
+
+		$(this.pagination).append(paginationLeftArrows);
 
 		for(let pageNo = 1; pageNo < this.lastPageNo + 1; pageNo++) {
-			$(this.pageNoArea).append(
+			$(this.pagination).append(
-				"<a onClick='onClickPageNo(this, " + pageNo + ")'> " + pageNo + " </a>"
+				// "<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>'
 			);
-			/*
-			let aTag = $(this.pageNoArea).append(
-				"<a> " + pageNo + " </a>"
-			);
-			aTag.click(
-				this.onClickPageNo(pageNo)
-			);
-			*/
 		}
+
+		let paginationRightArrows = '\
+				<li>&nbsp</li>\
+\
+				<li class="page-item">\
+					<a class="page-link" href="javascript:void(0);" 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="javascript:void(0);" aria-label="Last">\
+						<span aria-hidden="true">&raquo;</span>\
+						<span class="sr-only">Last</span>\
+					</a>\
+				</li>\
+		';
+			$(this.pagination).append(paginationRightArrows);
+
+
+		$("[aria-label='First']").click(function() {
+			self.onClickPageNo("first");
+		});
+
+		$("[aria-label='Previous']").click(function() {
+			self.onClickPageNo("previous");
+		});
+
+		for(let pageNo = 1; pageNo < this.lastPageNo + 1; pageNo++) {
+			$("[aria-label='" + pageNo + "']").click(function() {
+				self.onClickPageNo(pageNo);
+			});
+		}
+
+		$("[aria-label='Next']").click(function() {
+			self.onClickPageNo("next");
+		});
+
+		$("[aria-label='Last']").click(function() {
+			self.onClickPageNo("last");
+		});
 	}
 
 	onClickPageNo(pageNo) {
+		console.log(pageNo);
 		switch(pageNo) {
 			case "first":
 			this.activePageNo = 1;
-			// this.playerList.loadPlayerListPage(this.activePageNo);
+			break;
-			this.playerListManager.onClickPageNo(this.activePageNo);
-			return;
 
-			case "prev":
+			case "previous":
 			if(this.activePageNo > 1)
 				this.activePageNo -= 1;
-			// this.playerList.loadPlayerListPage(this.activePageNo);
+			break;
-			this.playerListManager.onClickPageNo(this.activePageNo);
-			return;
 
 			case "next":
 			if(this.activePageNo < this.lastPageNo)
 				this.activePageNo += 1;
-			// this.playerList.loadPlayerListPage(this.activePageNo);
+			break;
-			this.playerListManager.onClickPageNo(this.activePageNo);
-			return;
 
 			case "last":
-			// this.playerList.loadPlayerListPage(this.lastPageNo);
 			this.activePageNo = this.lastPageNo;
-			this.playerListManager.onClickPageNo(this.activePageNo);
+			break;
-			return;
 
 			default:
 			this.activePageNo = pageNo;
 		}
 
-		this.activePageNo = pageNo;
+		console.log(this.activePageNo);
-		// this.playerList.loadPlayerListPage(this.activePageNo);
 		this.playerListManager.onClickPageNo(this.activePageNo);
 	}
 

src/web/module/maestro_section_add_player.html

@@ -3,7 +3,8 @@
 $(document).ready(function() {
 	addPlayerListManager = new PlayerListManager(
 		$("#add_player_list"),
-		$("#add_player_list_navigator > #page_no_area")
+		// $("#add_player_list_navigator > #page_no_area")
+		$(".pagination")
 	);
 
 	addPlayerListManager.setupAddPlayerList();
@@ -240,7 +241,7 @@ function onErrorPlayerPW(message) {
 		</div>	<!-- 학생 목록 -->
 
 
-		<nav aria-label="Page navigation example">
+		<nav>
 			<ul class="pagination pagination-sm justify-content-center">
 				<li class="page-item disabled">
 					<a class="page-link" href="#" aria-label="Previous">

src/web/module/maestro_section_search.html

@@ -3,7 +3,8 @@
 $(document).ready(function() {
 	searchPlayerListManager = new PlayerListManager(
 		$("#search_player_list"),
-		$("#search_player_list_navigator > #page_no_area")
+		// $("#search_player_list_navigator > #page_no_area")
+		$(".pagination")
 	);
 });
 
@@ -136,7 +137,7 @@ function searchPlayer() {
 			</form>
 
 
-		<nav aria-label="Page navigation example">
+		<nav>
 			<ul class="pagination pagination-sm justify-content-center">
 				<li class="page-item disabled">
 					<a class="page-link" href="#" aria-label="Previous">