diff --git a/src/web/js/maestro_main.js b/src/web/js/maestro_main.js index 35052f5..c3950ab 100644 --- a/src/web/js/maestro_main.js +++ b/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); } +*/ \ No newline at end of file diff --git a/src/web/js/player_list.js b/src/web/js/player_list.js index 53ef946..02a9b6d 100644 --- a/src/web/js/player_list.js +++ b/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); } diff --git a/src/web/js/player_list_manager.js b/src/web/js/player_list_manager.js index 39da048..2b298fc 100644 --- a/src/web/js/player_list_manager.js +++ b/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; diff --git a/src/web/js/player_list_navigator.js b/src/web/js/player_list_navigator.js index 0ba7c87..5bb67f1 100644 --- a/src/web/js/player_list_navigator.js +++ b/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.pageNoArea = pageNoArea; + this.pagination = 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 = '\ +
  • \ + \ + \ + First\ + \ +
    • \ +\ +
  • \ + \ + \ + Previous\ + \ +
    • \ +\ +
  •  
    • \ +\ '; + + $(this.pagination).append(paginationLeftArrows); for(let pageNo = 1; pageNo < this.lastPageNo + 1; pageNo++) { - $(this.pageNoArea).append( - " " + pageNo + " " + $(this.pagination).append( + // " " + pageNo + " " + '
  • ' + pageNo + '
    • ' ); - /* - let aTag = $(this.pageNoArea).append( - " " + pageNo + " " - ); - aTag.click( - this.onClickPageNo(pageNo) - ); - */ } + + let paginationRightArrows = '\ +
  •  
    • \ +\ +
  • \ + \ + \ + Next\ + \ +
    • \ +\ +
  • \ + \ + \ + Last\ + \ +
    • \ + '; + $(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); - this.playerListManager.onClickPageNo(this.activePageNo); - return; + break; - case "prev": + case "previous": if(this.activePageNo > 1) this.activePageNo -= 1; - // this.playerList.loadPlayerListPage(this.activePageNo); - this.playerListManager.onClickPageNo(this.activePageNo); - return; + break; case "next": if(this.activePageNo < this.lastPageNo) this.activePageNo += 1; - // this.playerList.loadPlayerListPage(this.activePageNo); - this.playerListManager.onClickPageNo(this.activePageNo); - return; + break; case "last": - // this.playerList.loadPlayerListPage(this.lastPageNo); this.activePageNo = this.lastPageNo; - this.playerListManager.onClickPageNo(this.activePageNo); - return; + break; default: this.activePageNo = pageNo; } - this.activePageNo = pageNo; - // this.playerList.loadPlayerListPage(this.activePageNo); + console.log(this.activePageNo); this.playerListManager.onClickPageNo(this.activePageNo); } diff --git a/src/web/module/maestro_section_add_player.html b/src/web/module/maestro_section_add_player.html index d29d89a..aa51d38 100644 --- a/src/web/module/maestro_section_add_player.html +++ b/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) { -