forked from security/hakurei
cmd/pkgserver: pagination
This commit is contained in:
@@ -4,20 +4,23 @@
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="static/style.css">
|
||||
<title>Hakurei PkgServer</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script src="static/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hakurei PkgServer</h1>
|
||||
|
||||
<table id="pkg-list">
|
||||
<tr><th>Status</th><th>Name</th><th>Version</th></tr>
|
||||
</table>
|
||||
<p>Showing entries <span id="entry-counter"></span>.</p>
|
||||
<span class="bottom-nav"><a href="javascript:prevPage()">« Previous</a> <span id="page-number">1</span> <a href="javascript:nextPage()">Next »</a></span>
|
||||
<span><label for="count">Entries per page:</label><select name="count" id="count">
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select></span>
|
||||
<table id="pkg-list">
|
||||
<tr><th>Status</th><th>Name</th><th>Version</th></tr>
|
||||
</table>
|
||||
<p>Showing entries <span id="entry-counter"></span>.</p>
|
||||
<span class="bottom-nav"><a href="javascript:prevPage()">« Previous</a><span id="page-number"></span><a href="javascript:nextPage">Next »</a></span>
|
||||
</body>
|
||||
<footer>© <a href="https://hakurei.app/">Hakurei</a>. Licensed under the MIT license.</footer>
|
||||
</html>
|
||||
@@ -1,4 +1,67 @@
|
||||
"use strict";
|
||||
var PackageEntry = /** @class */ (function () {
|
||||
function PackageEntry() {
|
||||
}
|
||||
return PackageEntry;
|
||||
}());
|
||||
var State = /** @class */ (function () {
|
||||
function State() {
|
||||
this.entriesPerPage = 10;
|
||||
this.currentPage = 1;
|
||||
this.entryIndex = 0;
|
||||
this.loadedEntries = [];
|
||||
}
|
||||
State.prototype.getEntriesPerPage = function () {
|
||||
return this.entriesPerPage;
|
||||
};
|
||||
State.prototype.setEntriesPerPage = function (entriesPerPage) {
|
||||
this.entriesPerPage = entriesPerPage;
|
||||
this.updateRange();
|
||||
};
|
||||
State.prototype.getCurrentPage = function () {
|
||||
return this.currentPage;
|
||||
};
|
||||
State.prototype.setCurrentPage = function (page) {
|
||||
this.currentPage = page;
|
||||
document.getElementById("page-number").innerText = String(this.currentPage);
|
||||
this.updateRange();
|
||||
};
|
||||
State.prototype.getEntryIndex = function () {
|
||||
return this.entryIndex;
|
||||
};
|
||||
State.prototype.setEntryIndex = function (entryIndex) {
|
||||
this.entryIndex = entryIndex;
|
||||
this.updateRange();
|
||||
};
|
||||
State.prototype.getLoadedEntries = function () {
|
||||
return this.loadedEntries;
|
||||
};
|
||||
State.prototype.getMaxPage = function () {
|
||||
return this.loadedEntries.length / this.entriesPerPage;
|
||||
};
|
||||
State.prototype.updateRange = function () {
|
||||
var max = Math.min(this.entryIndex + this.entriesPerPage, this.loadedEntries.length);
|
||||
document.getElementById("entry-counter").innerText = "".concat(this.entryIndex, "-").concat(max, " of ").concat(this.loadedEntries.length);
|
||||
};
|
||||
return State;
|
||||
}());
|
||||
var STATE;
|
||||
function prevPage() {
|
||||
var current = STATE.getCurrentPage();
|
||||
if (current > 1) {
|
||||
STATE.setCurrentPage(STATE.getCurrentPage() - 1);
|
||||
}
|
||||
}
|
||||
function nextPage() {
|
||||
var current = STATE.getCurrentPage();
|
||||
if (current < STATE.getMaxPage()) {
|
||||
STATE.setCurrentPage(STATE.getCurrentPage() + 1);
|
||||
}
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
STATE = new State();
|
||||
STATE.updateRange();
|
||||
document.getElementById("count").addEventListener("change", function (event) {
|
||||
STATE.setEntriesPerPage(parseInt(event.target.value));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,66 @@
|
||||
function prevPage() {
|
||||
"use strict"
|
||||
|
||||
class PackageEntry {
|
||||
|
||||
}
|
||||
class State {
|
||||
entriesPerPage: number = 10
|
||||
currentPage: number = 1
|
||||
entryIndex: number = 0
|
||||
loadedEntries: PackageEntry[] = []
|
||||
getEntriesPerPage(): number {
|
||||
return this.entriesPerPage
|
||||
}
|
||||
setEntriesPerPage(entriesPerPage: number) {
|
||||
this.entriesPerPage = entriesPerPage
|
||||
this.updateRange()
|
||||
}
|
||||
getCurrentPage(): number {
|
||||
return this.currentPage
|
||||
}
|
||||
setCurrentPage(page: number) {
|
||||
this.currentPage = page
|
||||
document.getElementById("page-number").innerText = String(this.currentPage)
|
||||
this.updateRange()
|
||||
}
|
||||
getEntryIndex(): number {
|
||||
return this.entryIndex
|
||||
}
|
||||
setEntryIndex(entryIndex: number) {
|
||||
this.entryIndex = entryIndex
|
||||
this.updateRange()
|
||||
}
|
||||
getLoadedEntries(): PackageEntry[] {
|
||||
return this.loadedEntries
|
||||
}
|
||||
getMaxPage(): number {
|
||||
return this.loadedEntries.length / this.entriesPerPage
|
||||
}
|
||||
updateRange() {
|
||||
let max = Math.min(this.entryIndex + this.entriesPerPage, this.loadedEntries.length)
|
||||
document.getElementById("entry-counter").innerText = `${this.entryIndex}-${max} of ${this.loadedEntries.length}`
|
||||
}
|
||||
}
|
||||
|
||||
let STATE: State
|
||||
|
||||
function prevPage() {
|
||||
let current = STATE.getCurrentPage()
|
||||
if (current > 1) {
|
||||
STATE.setCurrentPage(STATE.getCurrentPage() - 1)
|
||||
}
|
||||
}
|
||||
function nextPage() {
|
||||
|
||||
let current = STATE.getCurrentPage()
|
||||
if (current < STATE.getMaxPage()) {
|
||||
STATE.setCurrentPage(STATE.getCurrentPage() + 1)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
STATE = new State()
|
||||
STATE.updateRange()
|
||||
document.getElementById("count").addEventListener("change", (event) => {
|
||||
STATE.setEntriesPerPage(parseInt((event.target as HTMLSelectElement).value))
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user