cmd/pkgserver: minimum viable frontend

cmd/pkgserver/ui/static/index.ts

@@ -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 {
     entriesPerPage: number = 10
     currentPage: number = 1
     entryIndex: number = 0
-    loadedEntries: PackageEntry[] = []
+    maxEntries: number = 0
     getEntriesPerPage(): number {
         return this.entriesPerPage
     }
     setEntriesPerPage(entriesPerPage: number) {
         this.entriesPerPage = entriesPerPage
-        this.updateRange()
+        if (this.currentPage > this.getMaxPage()) {
+            this.setCurrentPage(this.getMaxPage())
+        }
     }
     getCurrentPage(): number {
         return this.currentPage
     }
     setCurrentPage(page: number) {
         this.currentPage = page
-        document.getElementById("page-number").innerText = String(this.currentPage)
-        this.updateRange()
+        this.setEntryIndex((this.getCurrentPage() - 1) * this.getEntriesPerPage())
+        document.getElementById("page-number").innerText = String(this.getCurrentPage())
     }
     getEntryIndex(): number {
         return this.entryIndex
@@ -29,17 +76,32 @@ class State {
     setEntryIndex(entryIndex: number) {
         this.entryIndex = entryIndex
         this.updateRange()
+        this.updateListings()
     }
-    getLoadedEntries(): PackageEntry[] {
-        return this.loadedEntries
+    getMaxEntries(): number {
+        return this.maxEntries
+    }
+    setMaxEntries(max: number) {
+        this.maxEntries = max
     }
     getMaxPage(): number {
-        return this.loadedEntries.length / this.entriesPerPage
+        return Math.ceil(this.getMaxEntries() / this.getEntriesPerPage())
     }
     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 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: 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", () => {
     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) => {
         STATE.setEntriesPerPage(parseInt((event.target as HTMLSelectElement).value))
     })