diff --git a/src/css/style.css b/src/css/style.css index 2d70dcb..5be71a8 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -2,6 +2,6 @@ display: none; } -#userPageControl { +.paginationControl { display: flex; } \ No newline at end of file diff --git a/src/html/index.html b/src/html/index.html index 273cf49..15b9647 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -90,7 +90,7 @@
-
+
Page @@ -132,6 +132,27 @@ +
+
+ + Page + + of 1 + + + + + + +
+
+
+
+ + Per Page +
+
+

Create Bot

diff --git a/src/ts/main.ts b/src/ts/main.ts index 5c48c19..7994f37 100644 --- a/src/ts/main.ts +++ b/src/ts/main.ts @@ -22,6 +22,7 @@ const elements = { usernameFilter: document.getElementById('usernameFilter') as HTMLInputElement, userSortBy: document.getElementById('userSortBy') as HTMLSelectElement, userSortDescending: document.getElementById('userSortDescending') as HTMLInputElement, + usersPage: document.getElementById('usersPage') as HTMLInputElement, usersPerPage: document.getElementById('usersPerPage') as HTMLInputElement, usersPageCount: document.getElementById('usersPageCount') as HTMLSpanElement, @@ -29,6 +30,12 @@ const elements = { usersNextPage: document.getElementById('usersNextPage') as HTMLButtonElement, usersTableBody: document.getElementById('usersTableBody') as HTMLTableSectionElement, + botsPage: document.getElementById('botsPage') as HTMLInputElement, + botsPerPage: document.getElementById('botsPerPage') as HTMLInputElement, + botsPageCount: document.getElementById('botsPageCount') as HTMLSpanElement, + botsPrevPage: document.getElementById('botsPrevPage') as HTMLButtonElement, + botsNextPage: document.getElementById('botsNextPage') as HTMLButtonElement, + usersNavLink: document.getElementById('usersNavLink') as HTMLAnchorElement, botsNavLink: document.getElementById('botsNavLink') as HTMLAnchorElement, @@ -182,12 +189,20 @@ elements.usersPrevPage.addEventListener('click', async e => { elements.searchBotsForm.addEventListener('submit', async e => { e.preventDefault(); var owner = elements.searchBotsOwner.value; - var data = await auth.listBots(10, 1, owner === "" ? undefined : owner); + var page = parseInt(elements.botsPage.value); + var perPage = parseInt(elements.botsPerPage.value); + var data = await auth.listBots(perPage, page, owner === "" ? undefined : owner); if (!data.success) { alert("Failed to list bots: " + data.error); return false; } elements.botsTableBody.innerHTML = ""; + elements.botsPageCount.innerText = data.totalPageCount!.toString(10); + elements.botsPage.max = data.totalPageCount!.toString(10); + if (page == data.totalPageCount) elements.botsNextPage.disabled = true; + else elements.botsNextPage.disabled = false; + if (page == 1) elements.botsPrevPage.disabled = true; + else elements.botsPrevPage.disabled = false; data.bots?.forEach(bot => { var row = elements.botsTableBody.insertRow(); var cell = row.insertCell(); @@ -225,6 +240,16 @@ elements.searchBotsForm.addEventListener('submit', async e => { }); return false; }); +elements.botsNextPage.addEventListener('click', async e => { + if (parseInt(elements.botsPage.value) >= parseInt(elements.botsPage.max)) return false; + elements.botsPage.value = (parseInt(elements.botsPage.value) + 1).toString(10); + elements.searchBotsForm.requestSubmit(); +}); +elements.botsPrevPage.addEventListener('click', async e => { + if (parseInt(elements.botsPage.value) <= 1) return false; + elements.botsPage.value = (parseInt(elements.botsPage.value) - 1).toString(10); + elements.searchBotsForm.requestSubmit(); +}); elements.createBotForm.addEventListener('submit', async e => { e.preventDefault(); @@ -281,6 +306,7 @@ elements.botsNavLink.addEventListener('click', e => { }); function loadBotsView() { + elements.botsPage.value = "1"; elements.searchBotsForm.requestSubmit(); elements.botsNavLink.classList.add('active'); elements.usersNavLink.classList.remove('active');