cmd/pkgserver: minimum viable frontend

This commit is contained in:
mae
2026-03-10 03:31:14 -05:00
parent 35d76c5d2b
commit 52a4e5b87d
8 changed files with 217 additions and 63 deletions

1
.gitignore vendored
View File

@@ -27,6 +27,7 @@ go.work.sum
# go generate # go generate
/cmd/hakurei/LICENSE /cmd/hakurei/LICENSE
/cmd/pkgserver/.sass-cache
/internal/pkg/testdata/testtool /internal/pkg/testdata/testtool
/internal/rosa/hakurei_current.tar.gz /internal/rosa/hakurei_current.tar.gz

View File

@@ -122,7 +122,6 @@ func WritePayload(w http.ResponseWriter, payload any) {
w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate") w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
w.Header().Set("Pragma", "no-cache") w.Header().Set("Pragma", "no-cache")
w.Header().Set("Expires", "0") w.Header().Set("Expires", "0")
w.WriteHeader(http.StatusOK)
err := json.NewEncoder(w).Encode(payload) err := json.NewEncoder(w).Encode(payload)
if err != nil { if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError) http.Error(w, err.Error(), http.StatusInternalServerError)

View File

@@ -16,6 +16,7 @@ import (
"hakurei.app/message" "hakurei.app/message"
) )
//go:generate sh -c "sass ui/static/dark.scss ui/static/dark.css && sass ui/static/light.scss ui/static/light.css && tsc -p ui/static"
func main() { func main() {
log.SetFlags(0) log.SetFlags(0)
log.SetPrefix("pkgserver: ") log.SetPrefix("pkgserver: ")
@@ -36,6 +37,7 @@ func main() {
return err return err
} }
cache, err := pkg.Open(ctx, msg, 0, baseDir) cache, err := pkg.Open(ctx, msg, 0, baseDir)
defer cache.Close()
if err != nil { if err != nil {
return err return err
} }

View File

@@ -5,7 +5,6 @@ import (
"net/http" "net/http"
) )
//go:generate sh -c "sass ui/static/dark.scss ui/static/dark.css && sass ui/static/light.scss ui/static/light.css && tsc ui/static/index.ts"
//go:embed ui/* //go:embed ui/*
var content embed.FS var content embed.FS

View File

@@ -4,14 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="static/style.css"> <link rel="stylesheet" href="static/style.css">
<title>Hakurei PkgServer</title> <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> <script src="static/index.js"></script>
</head> </head>
<body> <body>
<h1>Hakurei PkgServer</h1> <h1>Hakurei PkgServer</h1>
<table id="pkg-list"> <table id="pkg-list">
<tr><th>Status</th><th>Name</th><th>Version</th></tr> <tr><td>Loading...</td></tr>
</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>
@@ -22,5 +21,7 @@
<option value="100">100</option> <option value="100">100</option>
</select></span> </select></span>
</body> </body>
<footer>&copy; <a href="https://hakurei.app/">Hakurei</a>. Licensed under the MIT license.</footer> <footer>
<p>&copy;<a href="https://hakurei.app/">Hakurei</a> (<span id="hakurei-version">unknown</span>). Licensed under the MIT license.</p>
</footer>
</html> </html>

View File

@@ -1,67 +1,136 @@
"use strict"; class PackageIndexEntry {
var PackageEntry = /** @class */ (function () { name;
function PackageEntry() { description;
} website;
return PackageEntry; version;
}()); report;
var State = /** @class */ (function () { }
function State() { function toHTML(entry) {
this.entriesPerPage = 10; let v = entry.version != null ? `<span>${escapeHtml(entry.version)}</span>` : "";
this.currentPage = 1; let d = entry.description != null ? `<p>${escapeHtml(entry.description)}</p>` : "";
this.entryIndex = 0; let w = entry.website != null ? `<a href="${encodeURI(entry.website)}">Website</a>` : "";
this.loadedEntries = []; let r = entry.report != null ? `<a href="${encodeURI(entry.report)}">Log</a>` : "";
} let row = (document.createElement('tr'));
State.prototype.getEntriesPerPage = function () { row.innerHTML = `<td>
<h2>${escapeHtml(entry.name)} ${v}</h2>
${d}
${w}
${r}
</td>`;
return row;
}
const API_VERSION = 1;
const ENDPOINT = `/api/v${API_VERSION}`;
class InfoPayload {
count;
hakurei_version;
}
async function infoRequest() {
const res = await fetch(`${ENDPOINT}/info`);
const res_1 = await res.json();
return res_1;
}
class GetPayload {
count;
values;
}
var SortOrders;
(function (SortOrders) {
SortOrders[SortOrders["DeclarationAscending"] = 0] = "DeclarationAscending";
SortOrders[SortOrders["DeclarationDescending"] = 1] = "DeclarationDescending";
SortOrders[SortOrders["NameAscending"] = 2] = "NameAscending";
SortOrders[SortOrders["NameDescending"] = 3] = "NameDescending";
})(SortOrders || (SortOrders = {}));
async function getRequest(limit, index, sort) {
const res = await fetch(`${ENDPOINT}/get?limit=${limit}&index=${index}&sort=${sort.valueOf()}`);
const res_1 = await res.json();
return res_1;
}
class State {
entriesPerPage = 10;
currentPage = 1;
entryIndex = 0;
maxEntries = 100;
getEntriesPerPage() {
return this.entriesPerPage; return this.entriesPerPage;
}; }
State.prototype.setEntriesPerPage = function (entriesPerPage) { setEntriesPerPage(entriesPerPage) {
this.entriesPerPage = entriesPerPage; this.entriesPerPage = entriesPerPage;
this.updateRange(); if (this.currentPage > this.getMaxPage()) {
}; this.setCurrentPage(this.getMaxPage());
State.prototype.getCurrentPage = function () { }
}
getCurrentPage() {
return this.currentPage; return this.currentPage;
}; }
State.prototype.setCurrentPage = function (page) { setCurrentPage(page) {
this.currentPage = page; this.currentPage = page;
document.getElementById("page-number").innerText = String(this.currentPage); this.setEntryIndex((this.getCurrentPage() - 1) * this.getEntriesPerPage());
this.updateRange(); document.getElementById("page-number").innerText = String(this.getCurrentPage());
}; }
State.prototype.getEntryIndex = function () { getEntryIndex() {
return this.entryIndex; return this.entryIndex;
}; }
State.prototype.setEntryIndex = function (entryIndex) { setEntryIndex(entryIndex) {
this.entryIndex = entryIndex; this.entryIndex = entryIndex;
this.updateRange(); this.updateRange();
}; this.updateListings();
State.prototype.getLoadedEntries = function () { }
return this.loadedEntries; getMaxEntries() {
}; return this.maxEntries;
State.prototype.getMaxPage = function () { }
return this.loadedEntries.length / this.entriesPerPage; setMaxEntries(max) {
}; this.maxEntries = max;
State.prototype.updateRange = function () { }
var max = Math.min(this.entryIndex + this.entriesPerPage, this.loadedEntries.length); getMaxPage() {
document.getElementById("entry-counter").innerText = "".concat(this.entryIndex, "-").concat(max, " of ").concat(this.loadedEntries.length); return Math.ceil(this.getMaxEntries() / this.getEntriesPerPage());
}; }
return State; updateRange() {
}()); let max = Math.min(this.getEntryIndex() + this.getEntriesPerPage(), this.getMaxEntries());
var STATE; document.getElementById("entry-counter").innerText = `${this.getEntryIndex() + 1}-${max} of ${this.getMaxEntries()}`;
}
updateListings() {
getRequest(this.getEntriesPerPage(), this.entryIndex, 0)
.then(res => {
let table = document.getElementById("pkg-list");
table.innerHTML = '';
for (let i = 0; i < res.count; i++) {
table.appendChild(toHTML(res.values[i]));
}
});
}
}
let STATE;
function prevPage() { function prevPage() {
var current = STATE.getCurrentPage(); let current = STATE.getCurrentPage();
if (current > 1) { if (current > 1) {
STATE.setCurrentPage(STATE.getCurrentPage() - 1); STATE.setCurrentPage(STATE.getCurrentPage() - 1);
} }
} }
function nextPage() { function nextPage() {
var current = STATE.getCurrentPage(); let current = STATE.getCurrentPage();
if (current < STATE.getMaxPage()) { if (current < STATE.getMaxPage()) {
STATE.setCurrentPage(STATE.getCurrentPage() + 1); STATE.setCurrentPage(STATE.getCurrentPage() + 1);
} }
} }
document.addEventListener("DOMContentLoaded", function () { function escapeHtml(str) {
return str
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;');
}
document.addEventListener("DOMContentLoaded", () => {
STATE = new State(); STATE = new State();
STATE.updateRange(); infoRequest()
document.getElementById("count").addEventListener("change", function (event) { .then(res => {
STATE.setMaxEntries(res.count);
document.getElementById("hakurei-version").innerText = res.hakurei_version;
STATE.updateRange();
STATE.updateListings();
});
document.getElementById("count").addEventListener("change", (event) => {
STATE.setEntriesPerPage(parseInt(event.target.value)); STATE.setEntriesPerPage(parseInt(event.target.value));
}); });
}); });

View File

@@ -1,27 +1,74 @@
"use strict" class PackageIndexEntry {
name: string
description: string | null
website: string | null
version: string | null
report: string | null
}
function toHTML(entry: PackageIndexEntry): HTMLTableRowElement {
let v = entry.version != null ? `<span>${escapeHtml(entry.version)}</span>` : ""
let d = entry.description != null ? `<p>${escapeHtml(entry.description)}</p>` : ""
let w = entry.website != null ? `<a href="${encodeURI(entry.website)}">Website</a>` : ""
let r = entry.report != null ? `<a href="${encodeURI(entry.report)}">Log</a>` : ""
let row = <HTMLTableRowElement>(document.createElement('tr'))
row.innerHTML = `<td>
<h2>${escapeHtml(entry.name)} ${v}</h2>
${d}
${w}
${r}
</td>`
return row
}
class PackageEntry { const API_VERSION = 1
const ENDPOINT = `/api/v${API_VERSION}`
class InfoPayload {
count: number
hakurei_version: string
}
async function infoRequest(): Promise<InfoPayload> {
const res = await fetch(`${ENDPOINT}/info`)
const res_1 = await res.json()
return res_1 as InfoPayload
}
class GetPayload {
count: number
values: PackageIndexEntry[]
}
enum SortOrders {
DeclarationAscending = 0,
DeclarationDescending,
NameAscending,
NameDescending
}
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_1 = await res.json()
return res_1 as GetPayload
} }
class State { class State {
entriesPerPage: number = 10 entriesPerPage: number = 10
currentPage: number = 1 currentPage: number = 1
entryIndex: number = 0 entryIndex: number = 0
loadedEntries: PackageEntry[] = [] maxEntries: number = 0
getEntriesPerPage(): number { getEntriesPerPage(): number {
return this.entriesPerPage return this.entriesPerPage
} }
setEntriesPerPage(entriesPerPage: number) { setEntriesPerPage(entriesPerPage: number) {
this.entriesPerPage = entriesPerPage this.entriesPerPage = entriesPerPage
this.updateRange() if (this.currentPage > this.getMaxPage()) {
this.setCurrentPage(this.getMaxPage())
}
} }
getCurrentPage(): number { getCurrentPage(): number {
return this.currentPage return this.currentPage
} }
setCurrentPage(page: number) { setCurrentPage(page: number) {
this.currentPage = page this.currentPage = page
document.getElementById("page-number").innerText = String(this.currentPage) this.setEntryIndex((this.getCurrentPage() - 1) * this.getEntriesPerPage())
this.updateRange() document.getElementById("page-number").innerText = String(this.getCurrentPage())
} }
getEntryIndex(): number { getEntryIndex(): number {
return this.entryIndex return this.entryIndex
@@ -29,17 +76,32 @@ class State {
setEntryIndex(entryIndex: number) { setEntryIndex(entryIndex: number) {
this.entryIndex = entryIndex this.entryIndex = entryIndex
this.updateRange() this.updateRange()
this.updateListings()
} }
getLoadedEntries(): PackageEntry[] { getMaxEntries(): number {
return this.loadedEntries return this.maxEntries
}
setMaxEntries(max: number) {
this.maxEntries = max
} }
getMaxPage(): number { getMaxPage(): number {
return this.loadedEntries.length / this.entriesPerPage return Math.ceil(this.getMaxEntries() / this.getEntriesPerPage())
} }
updateRange() { updateRange() {
let max = Math.min(this.entryIndex + this.entriesPerPage, this.loadedEntries.length) let max = Math.min(this.getEntryIndex() + this.getEntriesPerPage(), this.getMaxEntries())
document.getElementById("entry-counter").innerText = `${this.entryIndex}-${max} of ${this.loadedEntries.length}` document.getElementById("entry-counter").innerText = `${this.getEntryIndex() + 1}-${max} of ${this.getMaxEntries()}`
} }
updateListings() {
getRequest(this.getEntriesPerPage(), this.entryIndex, 0)
.then(res => {
let table = document.getElementById("pkg-list")
table.innerHTML = ''
for(let i = 0; i < res.count; i++) {
table.appendChild(toHTML(res.values[i]))
}
})
}
} }
let STATE: State let STATE: State
@@ -57,9 +119,25 @@ function nextPage() {
} }
} }
function escapeHtml(str: string): string {
return str
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;')
}
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
STATE = new State() STATE = new State()
STATE.updateRange() infoRequest()
.then(res => {
STATE.setMaxEntries(res.count)
document.getElementById("hakurei-version").innerText = res.hakurei_version
STATE.updateRange()
STATE.updateListings()
})
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))
}) })

View File

@@ -0,0 +1,5 @@
{
"compilerOptions": {
"target": "ES2024"
}
}