add proper bot pagination

src/css/style.css

@@ -2,6 +2,6 @@
     display: none;
 }
 
-#userPageControl {
+.paginationControl {
     display: flex;
 }

src/html/index.html

@@ -90,7 +90,7 @@
                         <tbody id="usersTableBody"></tbody>
                     </table>
                     <div class="row">
-                        <div class="col-3" id="userPageControl">
+                        <div class="col-3 paginationControl">
                             <span class="input-group me-2">
                                 <span class="input-group-text">Page</span>
                                 <input type="number" class="form-control" id="usersPage" name="page" value="1" min="1" max="1" required/>
@@ -132,6 +132,27 @@
                         </thead>
                         <tbody id="botsTableBody"></tbody>
                     </table>
+                    <div class="row">
+                        <div class="col-3 paginationControl">
+                            <span class="input-group me-2">
+                                <span class="input-group-text">Page</span>
+                                <input type="number" class="form-control" id="botsPage" name="page" value="1" min="1" max="1" required/>
+                                <span class="input-group-text">of&nbsp;<span id="botsPageCount">1</span></span>
+                                <button type="submit" class="btn btn-primary">Go</button>
+                            </span>
+                            <span class="input-group">
+                                <button type="button" class="btn btn-primary" id="botsPrevPage">Previous</button>
+                                <button type="button" class="btn btn-primary" id="botsNextPage">Next</button>
+                            </span>
+                        </div>
+                        <div class="col-7"><!-- yeah this is lazy whatever --></div>
+                        <div class="col-2">
+                            <div class="input-group">
+                                <input type="number" class="form-control" id="botsPerPage" name="perPage" value="10" min="1" required/>
+                                <span class="input-group-text">Per Page</span>
+                            </div>
+                        </div>
+                    </div>
                 </form>
                 <h2>Create Bot</h2>
                 <form id="createBotForm">

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');