collabvm/collabvm-auth-admin-panel
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add proper bot pagination

Browse source
This commit is contained in:
Elijah R 2024-04-09 20:14:59 -04:00
parent 7a84482747
commit 39313a5564
3 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/css/style.css
View file

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

23
src/html/index.html
View file

@ -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">

28
src/ts/main.ts
View file

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