maemachinebroke/hakurei
1
0
Fork 0
forked from security/hakurei
Code Pull Requests Activity

cmd/pkgserver: add sort orders, change pagination rules

Browse Source
This commit is contained in:
mae
2026-03-10 05:18:55 -05:00
parent 469bd1ee99
commit b104ad6e2d
3 changed files with 58 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cmd/pkgserver/ui/index.html
View File

@@ -14,12 +14,18 @@
</table> </table>
<p>Showing entries <span id="entry-counter"></span>.</p> <p>Showing entries <span id="entry-counter"></span>.</p>
<span class="bottom-nav"><a href="javascript:prevPage()">&laquo; Previous</a> <span id="page-number">1</span> <a href="javascript:nextPage()">Next &raquo;</a></span> <span class="bottom-nav"><a href="javascript:prevPage()">&laquo; Previous</a> <span id="page-number">1</span> <a href="javascript:nextPage()">Next &raquo;</a></span>
<span><label for="count">Entries per page:</label><select name="count" id="count"> <span><label for="count">Entries per page: </label><select name="count" id="count">
<option value="10">10</option> <option value="10">10</option>
<option value="25">25</option> <option value="25">25</option>
<option value="50">50</option> <option value="50">50</option>
<option value="100">100</option> <option value="100">100</option>
</select></span> </select></span>
<span><label for="sort">Sort by: </label><select name="sort" id="sort">
<option value="0">Definition (ascending)</option>
<option value="1">Definition (descending)</option>
<option value="2">Name (ascending)</option>
<option value="3">Name (descending)</option>
</select></span>
</body> </body>
<footer> <footer>
<p>&copy;<a href="https://hakurei.app/">Hakurei</a> (<span id="hakurei-version">unknown</span>). Licensed under the MIT license.</p> <p>&copy;<a href="https://hakurei.app/">Hakurei</a> (<span id="hakurei-version">unknown</span>). Licensed under the MIT license.</p>

52
cmd/pkgserver/ui/static/index.js
View File

@@ -27,8 +27,8 @@ class InfoPayload {
} }
async function infoRequest() { async function infoRequest() {
const res = await fetch(`${ENDPOINT}/info`); const res = await fetch(`${ENDPOINT}/info`);
const res_1 = await res.json(); const payload = await res.json();
return res_1; return payload;
} }
class GetPayload { class GetPayload {
count; count;
@@ -43,36 +43,27 @@ var SortOrders;
})(SortOrders || (SortOrders = {})); })(SortOrders || (SortOrders = {}));
async function getRequest(limit, index, sort) { async function getRequest(limit, index, sort) {
const res = await fetch(`${ENDPOINT}/get?limit=${limit}&index=${index}&sort=${sort.valueOf()}`); const res = await fetch(`${ENDPOINT}/get?limit=${limit}&index=${index}&sort=${sort.valueOf()}`);
const res_1 = await res.json(); const payload = await res.json();
return res_1; return payload;
} }
class State { class State {
entriesPerPage = 10; entriesPerPage = 10;
currentPage = 1;
entryIndex = 0; entryIndex = 0;
maxEntries = 0; maxEntries = 0;
sort = SortOrders.DeclarationAscending;
getEntriesPerPage() { getEntriesPerPage() {
return this.entriesPerPage; return this.entriesPerPage;
} }
setEntriesPerPage(entriesPerPage) { setEntriesPerPage(entriesPerPage) {
this.entriesPerPage = entriesPerPage; this.entriesPerPage = entriesPerPage;
if (this.currentPage > this.getMaxPage()) { this.setEntryIndex(Math.floor(this.getEntryIndex() / entriesPerPage) * entriesPerPage);
this.setCurrentPage(this.getMaxPage());
}
}
getCurrentPage() {
return this.currentPage;
}
setCurrentPage(page) {
this.currentPage = page;
this.setEntryIndex((this.getCurrentPage() - 1) * this.getEntriesPerPage());
document.getElementById("page-number").innerText = String(this.getCurrentPage());
} }
getEntryIndex() { getEntryIndex() {
return this.entryIndex; return this.entryIndex;
} }
setEntryIndex(entryIndex) { setEntryIndex(entryIndex) {
this.entryIndex = entryIndex; this.entryIndex = entryIndex;
this.updatePage();
this.updateRange(); this.updateRange();
this.updateListings(); this.updateListings();
} }
@@ -82,15 +73,23 @@ class State {
setMaxEntries(max) { setMaxEntries(max) {
this.maxEntries = max; this.maxEntries = max;
} }
getMaxPage() { getSortOrder() {
return Math.ceil(this.getMaxEntries() / this.getEntriesPerPage()); return this.sort;
}
setSortOrder(sortOrder) {
this.sort = sortOrder;
this.setEntryIndex(0);
}
updatePage() {
let page = Math.ceil(((this.getEntryIndex() + this.getEntriesPerPage()) - 1) / this.getEntriesPerPage());
document.getElementById("page-number").innerText = String(page);
} }
updateRange() { updateRange() {
let max = Math.min(this.getEntryIndex() + this.getEntriesPerPage(), this.getMaxEntries()); let max = Math.min(this.getEntryIndex() + this.getEntriesPerPage(), this.getMaxEntries());
document.getElementById("entry-counter").innerText = `${this.getEntryIndex() + 1}-${max} of ${this.getMaxEntries()}`; document.getElementById("entry-counter").innerText = `${this.getEntryIndex() + 1}-${max} of ${this.getMaxEntries()}`;
} }
updateListings() { updateListings() {
getRequest(this.getEntriesPerPage(), this.entryIndex, 0) getRequest(this.getEntriesPerPage(), this.getEntryIndex(), this.getSortOrder())
.then(res => { .then(res => {
let table = document.getElementById("pkg-list"); let table = document.getElementById("pkg-list");
table.innerHTML = ''; table.innerHTML = '';
@@ -102,16 +101,12 @@ class State {
} }
let STATE; let STATE;
function prevPage() { function prevPage() {
let current = STATE.getCurrentPage(); let index = STATE.getEntryIndex();
if (current > 1) { STATE.setEntryIndex(Math.max(0, index - STATE.getEntriesPerPage()));
STATE.setCurrentPage(STATE.getCurrentPage() - 1);
}
} }
function nextPage() { function nextPage() {
let current = STATE.getCurrentPage(); let index = STATE.getEntryIndex();
if (current < STATE.getMaxPage()) { STATE.setEntryIndex(Math.min((Math.ceil(STATE.getMaxEntries() / STATE.getEntriesPerPage()) * STATE.getEntriesPerPage()) - STATE.getEntriesPerPage(), index + STATE.getEntriesPerPage()));
STATE.setCurrentPage(STATE.getCurrentPage() + 1);
}
} }
function escapeHtml(str) { function escapeHtml(str) {
return str return str
@@ -133,4 +128,7 @@ document.addEventListener("DOMContentLoaded", () => {
document.getElementById("count").addEventListener("change", (event) => { document.getElementById("count").addEventListener("change", (event) => {
STATE.setEntriesPerPage(parseInt(event.target.value)); STATE.setEntriesPerPage(parseInt(event.target.value));
}); });
document.getElementById("sort").addEventListener("change", (event) => {
STATE.setSortOrder(parseInt(event.target.value));
});
}); });

53
cmd/pkgserver/ui/static/index.ts
View File

@@ -29,8 +29,8 @@ class InfoPayload {
async function infoRequest(): Promise<InfoPayload> { async function infoRequest(): Promise<InfoPayload> {
const res = await fetch(`${ENDPOINT}/info`) const res = await fetch(`${ENDPOINT}/info`)
const res_1 = await res.json() const payload = await res.json()
return res_1 as InfoPayload return payload as InfoPayload
} }
class GetPayload { class GetPayload {
count: number count: number
@@ -45,36 +45,28 @@ enum SortOrders {
} }
async function getRequest(limit: number, index: number, sort: SortOrders): Promise<GetPayload> { async function getRequest(limit: number, index: number, sort: SortOrders): Promise<GetPayload> {
const res = await fetch(`${ENDPOINT}/get?limit=${limit}&index=${index}&sort=${sort.valueOf()}`) const res = await fetch(`${ENDPOINT}/get?limit=${limit}&index=${index}&sort=${sort.valueOf()}`)
const res_1 = await res.json() const payload = await res.json()
return res_1 as GetPayload return payload as GetPayload
} }
class State { class State {
entriesPerPage: number = 10 entriesPerPage: number = 10
currentPage: number = 1
entryIndex: number = 0 entryIndex: number = 0
maxEntries: number = 0 maxEntries: number = 0
sort: SortOrders = SortOrders.DeclarationAscending
getEntriesPerPage(): number { getEntriesPerPage(): number {
return this.entriesPerPage return this.entriesPerPage
} }
setEntriesPerPage(entriesPerPage: number) { setEntriesPerPage(entriesPerPage: number) {
this.entriesPerPage = entriesPerPage this.entriesPerPage = entriesPerPage
if (this.currentPage > this.getMaxPage()) { this.setEntryIndex(Math.floor(this.getEntryIndex() / entriesPerPage) * entriesPerPage)
this.setCurrentPage(this.getMaxPage())
}
}
getCurrentPage(): number {
return this.currentPage
}
setCurrentPage(page: number) {
this.currentPage = page
this.setEntryIndex((this.getCurrentPage() - 1) * this.getEntriesPerPage())
document.getElementById("page-number").innerText = String(this.getCurrentPage())
} }
getEntryIndex(): number { getEntryIndex(): number {
return this.entryIndex return this.entryIndex
} }
setEntryIndex(entryIndex: number) { setEntryIndex(entryIndex: number) {
this.entryIndex = entryIndex this.entryIndex = entryIndex
this.updatePage()
this.updateRange() this.updateRange()
this.updateListings() this.updateListings()
} }
@@ -84,15 +76,23 @@ class State {
setMaxEntries(max: number) { setMaxEntries(max: number) {
this.maxEntries = max this.maxEntries = max
} }
getMaxPage(): number { getSortOrder(): SortOrders {
return Math.ceil(this.getMaxEntries() / this.getEntriesPerPage()) return this.sort
}
setSortOrder(sortOrder: SortOrders) {
this.sort = sortOrder
this.setEntryIndex(0)
}
updatePage() {
let page = Math.ceil(((this.getEntryIndex() + this.getEntriesPerPage()) - 1) / this.getEntriesPerPage())
document.getElementById("page-number").innerText = String(page)
} }
updateRange() { updateRange() {
let max = Math.min(this.getEntryIndex() + this.getEntriesPerPage(), this.getMaxEntries()) let max = Math.min(this.getEntryIndex() + this.getEntriesPerPage(), this.getMaxEntries())
document.getElementById("entry-counter").innerText = `${this.getEntryIndex() + 1}-${max} of ${this.getMaxEntries()}` document.getElementById("entry-counter").innerText = `${this.getEntryIndex() + 1}-${max} of ${this.getMaxEntries()}`
} }
updateListings() { updateListings() {
getRequest(this.getEntriesPerPage(), this.entryIndex, 0) getRequest(this.getEntriesPerPage(), this.getEntryIndex(), this.getSortOrder())
.then(res => { .then(res => {
let table = document.getElementById("pkg-list") let table = document.getElementById("pkg-list")
table.innerHTML = '' table.innerHTML = ''
@@ -107,16 +107,12 @@ class State {
let STATE: State let STATE: State
function prevPage() { function prevPage() {
let current = STATE.getCurrentPage() let index = STATE.getEntryIndex()
if (current > 1) { STATE.setEntryIndex(Math.max(0, index - STATE.getEntriesPerPage()))
STATE.setCurrentPage(STATE.getCurrentPage() - 1)
}
} }
function nextPage() { function nextPage() {
let current = STATE.getCurrentPage() let index = STATE.getEntryIndex()
if (current < STATE.getMaxPage()) { STATE.setEntryIndex(Math.min((Math.ceil(STATE.getMaxEntries() / STATE.getEntriesPerPage()) * STATE.getEntriesPerPage()) - STATE.getEntriesPerPage(), index + STATE.getEntriesPerPage()))
STATE.setCurrentPage(STATE.getCurrentPage() + 1)
}
} }
function escapeHtml(str: string): string { function escapeHtml(str: string): string {
@@ -141,4 +137,7 @@ document.addEventListener("DOMContentLoaded", () => {
document.getElementById("count").addEventListener("change", (event) => { document.getElementById("count").addEventListener("change", (event) => {
STATE.setEntriesPerPage(parseInt((event.target as HTMLSelectElement).value)) STATE.setEntriesPerPage(parseInt((event.target as HTMLSelectElement).value))
}) })
document.getElementById("sort").addEventListener("change", (event) => {
STATE.setSortOrder(parseInt((event.target as HTMLSelectElement).value))
})
}) })