1 files changed, 92 insertions, 0 deletions
diff --git a/frontend/ui.ts b/frontend/ui.ts
new file mode 100644
index 0000000..4096204
--- /dev/null
+++ b/frontend/ui.ts
@@ -0,0 +1,92 @@
+import { bangs, process_query } from "./query.ts";
+
+export function add_page_content(engine?: string) {
+    document.getElementById("content")?.remove()
+    if (engine) {
+        document.body.append(create_search_bar(engine), create_search_info())
+    } else {
+        document.body.append(create_start_page())
+    }
+}
+
+function create_search_bar(engine: string) {
+    const section = document.createElement("section")
+    section.classList.add("search")
+
+    if (document.getElementById("search-link")) {
+        // <link /> is already present, we need reload because browser wont notice otherwise
+        window.location.reload()
+    }
+    const link = document.createElement("link")
+    link.rel = "search"
+    link.id = "search-link"
+    link.type = "application/opensearchdescription+xml"
+    link.href = `/search.xml?default=${encodeURIComponent(engine)}`
+    link.title = `Projectname (default engine: ${engine})`
+    document.head.append(link)
+
+    const heading = document.createElement("h1")
+    heading.textContent = engine
+    bangs.then(bangs => heading.textContent = bangs[engine].name)
+
+    const input = document.createElement("input")
+    input.type = "input"
+    input.addEventListener("keydown", ev => {
+        if (ev.code == "Enter") process_query(engine, input.value ?? "")
+    })
+
+    const submit = document.createElement("button")
+    submit.textContent = "Search"
+    submit.addEventListener("click", () => {
+        process_query(engine, input.value ?? "")
+    })
+
+    const search = document.createElement("div")
+    search.classList.add("bar")
+    search.append(input, submit)
+
+    section.append(heading, search)
+    return section
+}
+
+function create_search_info() {
+    const section = document.createElement("section")
+    section.classList.add("info")
+
+    const heading = document.createElement("h1")
+    heading.textContent = "Heading"
+
+    const info = document.createElement("p")
+    info.textContent = `To install this as the default search engine, select "Add <name>" in the context-menu of the URL-bar.`
+
+    section.append(heading, info)
+    return section
+}
+
+
+function create_start_page() {
+    const section = document.createElement("section")
+    section.id = "content"
+
+    const heading = document.createElement("h1")
+    heading.textContent = "Projectname"
+
+    const info = document.createElement("p")
+    info.textContent = "This is where one would write what this application does..."
+
+    section.append(heading, info)
+    return section
+}
+
+
+
+let status_el: HTMLElement
+export function status(level: "error" | "info" | "success", text: string) {
+    if (!status_el) {
+        status_el = document.createElement("p")
+        document.body.append(status_el)
+    }
+    status_el.textContent = text
+    status_el.classList.value = ""
+    status_el.classList.add("status", `level-${level}`)
+}