Mostly working UI

2024-11-26 21:38:49 -06:00
parent 3eb8785440
commit fd533c3f3b
2 changed files with 257 additions and 1 deletions
--- a/main.go
+++ b/main.go
@@ -7,6 +7,7 @@ import (
 	"log"
 	"net/http"
 	"os"
+	"time"

 	_ "github.com/lib/pq"
 )
@@ -16,6 +17,10 @@ type ShortLinks struct {
 	mux  *http.ServeMux
 }

+type response struct {
+	Short string `json:"short"`
+}
+
 func NewShortLinks() (*ShortLinks, error) {
 	tmpl := template.New("index.html")

@@ -29,7 +34,9 @@ func NewShortLinks() (*ShortLinks, error) {
 		mux:  http.NewServeMux(),
 	}

-	sl.mux.HandleFunc("/", sl.serveRoot)
+	sl.mux.HandleFunc("GET /{$}", sl.serveRoot)
+	sl.mux.HandleFunc("GET /{short}", sl.serveShort)
+	sl.mux.HandleFunc("POST /{$}", sl.serveSet)

 	return sl, nil
 }
@@ -48,6 +55,34 @@ func (sl *ShortLinks) serveRoot(w http.ResponseWriter, r *http.Request) {
 	}
 }

+func (sl *ShortLinks) serveShort(w http.ResponseWriter, r *http.Request) {
+	sendError(w, http.StatusNotImplemented, "not implemented")
+}
+
+func (sl *ShortLinks) serveSet(w http.ResponseWriter, r *http.Request) {
+	err := r.ParseForm()
+	if err != nil {
+		sendError(w, http.StatusBadRequest, "Parse form: %s", err)
+		return
+	}
+
+	log.Printf("%s %s %s", r.RemoteAddr, r.URL.Path, r.Form.Encode())
+
+	short := r.Form.Get("short")
+
+	long := r.Form.Get("long")
+	if long == "" {
+		sendError(w, http.StatusBadRequest, "long= param required")
+		return
+	}
+
+	time.Sleep(1 * time.Second)
+
+	sendJSON(w, response{
+		Short: short,
+	})
+}
+
 func main() {
 	port := os.Getenv("PORT")
 	if port == "" {
--- a/static/index.html
+++ b/static/index.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<html>
+	<head>
+		<style>
+:not(:defined) {
+  visibility: hidden;
+}
+
+body {
+	font: 12px var(--sl-font-mono);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+sl-icon[name="type"] {
+    color: var(--sl-color-danger-500);
+}
+
+sl-icon[name="square"] {
+    color: var(--sl-color-warning-500);
+}
+
+sl-icon[name="check-square"] {
+    color: var(--sl-color-success-500);
+}
+
+sl-icon[name="check-square-fill"] {
+    color: var(--sl-color-success-500);
+}
+		</style>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link
+				rel="stylesheet"
+				media="(prefers-color-scheme:light)"
+				href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css"
+				/>
+		<link
+				rel="stylesheet"
+				media="(prefers-color-scheme:dark)"
+				href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/dark.css"
+				onload="document.documentElement.classList.add('sl-theme-dark');"
+				/>
+		<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace-autoloader.js"></script>
+        <script>
+function setInputIcon(val, icon) {
+    if (val.length > 0) {
+        icon.setAttribute('name', 'square');
+    } else {
+        icon.setAttribute('name', 'type');
+    }
+}
+
+function setInputIcons() {
+    setInputIcon(
+        document.getElementById('short').value,
+        document.getElementById('short-icon'),
+    );
+
+    setInputIcon(
+        document.getElementById('long').value,
+        document.getElementById('long-icon'),
+    );
+}
+
+function clearAlerts() {
+    document.getElementById('err').hide();
+}
+
+function error(err1, err2) {
+	clearAlerts();
+
+	document.getElementById('err1').innerText = err1;
+	document.getElementById('err2').innerText = err2;
+	document.getElementById('err').show();
+}
+
+async function set() {
+    const short = document.getElementById('short').value;
+    const long = document.getElementById('long').value;
+
+    if (long == '') {
+        error('Unable to set', 'Long URL is required');
+        return;
+    }
+
+    document.getElementById('short-icon').setAttribute('name', 'check-square-fill');
+    document.getElementById('long-icon').setAttribute('name', 'check-square-fill');
+    setShortItem(short, 'check-square-fill');
+
+    const params = new URLSearchParams();
+    params.set('short', short);
+    params.set('long', long);
+
+    const resp = await fetch(`./?${params.toString()}`, {
+        method: 'POST',
+    });
+
+    if (resp.status !== 200) {
+        error('Failed to set', await resp.text());
+        return;
+    }
+
+    if (document.getElementById('short').value == short && document.getElementById('long').value == long) {
+        document.getElementById('short-icon').setAttribute('name', 'check-square');
+        document.getElementById('long-icon').setAttribute('name', 'check-square');
+        setShortItem(short, 'check-square');
+    }
+}
+
+function setShortItem(short, icon) {
+    const tree = document.getElementById('tree');
+
+    for (const item of tree.children) {
+        if (item.textContent == short) {
+            tree.removeChild(item);
+        }
+    }
+
+    const item = document.createElement('sl-tree-item');
+    item.appendChild(document.createElement('sl-icon')).setAttribute('name', icon);
+    item.appendChild(document.createTextNode(short));
+    tree.insertBefore(item, tree.firstChild);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('short').setAttribute('label', `${window.location.host}/`);
+
+    document.getElementById('short').addEventListener('sl-input', () => {
+        clearAlerts();
+        setInputIcons();
+    });
+
+    document.getElementById('short').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            set();
+        }
+    });
+
+    document.getElementById('short').addEventListener('paste', () => {
+        if (document.getElementById('long').value != '') {
+            setTimeout(() => set(), 0);
+        }
+    });
+
+    document.getElementById('short-icon').addEventListener('click', () => {
+        set();
+    });
+
+
+    document.getElementById('long').addEventListener('sl-input', () => {
+        clearAlerts();
+        setInputIcons();
+    });
+
+    document.getElementById('long').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            set();
+        } else {
+            document.getElementById('tree').replaceChildren();
+        }
+    });
+
+    document.getElementById('long').addEventListener('paste', () => {
+        if (document.getElementById('short').value != '') {
+            setTimeout(() => set(), 0);
+        }
+    });
+
+    document.getElementById('long-icon').addEventListener('click', () => {
+        set();
+    });
+
+
+    document.getElementById('set').addEventListener('click', () => {
+        set();
+    });
+
+
+    document.getElementById('long').focus();
+});
+
+// name="type"
+// name="circle"
+// name="check-circle"
+        </script>
+	</head>
+	<body>
+        <div id="container" style="width: min(500px, calc(100vw - 10px))">
+            <sl-input id="short">
+                <sl-icon id="short-icon" name="type" slot="suffix"></sl-icon>
+            </sl-input>
+            <br/>
+            <sl-input id="long" label="⟶">
+                <sl-icon id="long-icon" name="type" slot="suffix"></sl-icon>
+            </sl-input>
+
+            <br />
+            <br />
+
+            <div style="text-align: center;">
+                <sl-button variant="primary" id="set">Set</sl-button>
+            </div>
+
+            <br />
+            <br />
+
+            <sl-alert id="err" variant="danger">
+                <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
+                <strong id="err1"></strong><br />
+                <span id="err2"></span>
+            </sl-alert>
+
+            <br />
+            <br />
+
+            <sl-tree id="tree">
+            </sl-tree>
+        </div>
+	</body>
+</html>