cmd/pkgserver: minimum viable frontend

cmd/pkgserver/ui/static/index.js

@@ -1,67 +1,136 @@
-"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 () {
+class PackageIndexEntry {
+    name;
+    description;
+    website;
+    version;
+    report;
+}
+function toHTML(entry) {
+    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 = (document.createElement('tr'));
+    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;
-    };
-    State.prototype.setEntriesPerPage = function (entriesPerPage) {
+    }
+    setEntriesPerPage(entriesPerPage) {
         this.entriesPerPage = entriesPerPage;
-        this.updateRange();
-    };
-    State.prototype.getCurrentPage = function () {
+        if (this.currentPage > this.getMaxPage()) {
+            this.setCurrentPage(this.getMaxPage());
+        }
+    }
+    getCurrentPage() {
         return this.currentPage;
-    };
-    State.prototype.setCurrentPage = function (page) {
+    }
+    setCurrentPage(page) {
         this.currentPage = page;
-        document.getElementById("page-number").innerText = String(this.currentPage);
-        this.updateRange();
-    };
-    State.prototype.getEntryIndex = function () {
+        this.setEntryIndex((this.getCurrentPage() - 1) * this.getEntriesPerPage());
+        document.getElementById("page-number").innerText = String(this.getCurrentPage());
+    }
+    getEntryIndex() {
         return this.entryIndex;
-    };
-    State.prototype.setEntryIndex = function (entryIndex) {
+    }
+    setEntryIndex(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;
+        this.updateListings();
+    }
+    getMaxEntries() {
+        return this.maxEntries;
+    }
+    setMaxEntries(max) {
+        this.maxEntries = max;
+    }
+    getMaxPage() {
+        return Math.ceil(this.getMaxEntries() / this.getEntriesPerPage());
+    }
+    updateRange() {
+        let max = Math.min(this.getEntryIndex() + this.getEntriesPerPage(), this.getMaxEntries());
+        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() {
-    var current = STATE.getCurrentPage();
+    let current = STATE.getCurrentPage();
     if (current > 1) {
         STATE.setCurrentPage(STATE.getCurrentPage() - 1);
     }
 }
 function nextPage() {
-    var current = STATE.getCurrentPage();
+    let current = STATE.getCurrentPage();
     if (current < STATE.getMaxPage()) {
         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.updateRange();
-    document.getElementById("count").addEventListener("change", function (event) {
+    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) => {
         STATE.setEntriesPerPage(parseInt(event.target.value));
     });
 });