restructure stuff, add logging, use node 20

2025-12-17 04:00:59 +00:00 · 2023-10-23 22:54:08 +02:00
parent acfa8461e5
commit 5323504a87
11 changed files with 16 additions and 18 deletions
--- a/views/form.ejs
+++ b/views/form.ejs
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UPN-QR :: FORM</title>
+    <link rel="stylesheet" href="/public/style.css">
+</head>
+<style>
+
+div {
+    display: grid;
+}
+.card {
+    row-gap: 1rem
+}
+.title {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
+    align-content: center;
+    justify-content: center;
+    padding: 1rem;
+    column-gap: 1rem;
+    text-align: center;
+}
+.title > * {
+    margin: auto;
+}
+
+.form {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    row-gap: .5rem;
+    column-gap: 1rem;;
+}
+.code {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: auto;
+    row-gap: 1rem;
+
+    background-size: contain;
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-image: url("/public/invalid-content.png");
+    min-height: 210px;
+    min-width: 210px;
+}
+@media screen and (min-width: 700px) {
+    .card {
+        grid-template-columns: min-content 1fr;
+        column-gap: 1rem;
+    }
+    .title { grid-column: span 2; }
+}
+</style>
+<body>
+    <div class="card">
+        <div class="title">
+            <h1>Form: <%= q["title"] %></h1>
+            <span>Create your form here: <a href="/#maker">/#maker</a></span>
+        </div>
+        <div class="code" id="qrcode"></div>
+        <div class="form">
+            <%
+            const items = [
+                { n: "client-name",     d: "Client name",       p: "Peter Novak",               t: "text" },
+                { n: "client-address",  d: "Client address",    p: "Ravna Ulica 13",            t: "text" },
+                { n: "client-city",     d: "Client city",       p: "1000 Ljubljana",            t: "text" },
+                { n: "issuer-name",     d: "Issuer name",       p: "Spletne strani n'123",      t: "text" },
+                { n: "issuer-address",  d: "Issuer address",    p: "Za deveto smreko 15 k",     t: "text" },
+                { n: "issuer-city",     d: "Issuer city",       p: "1000 Ljubljana",            t: "text" },
+                { n: "iban",            d: "IBAN",              p: "SI56047500000280672",       t: "text" },
+                { n: "amount",          d: "Amount",            p: "35090 (350.90€)",           t: "number" },
+                { n: "code",            d: "Code",              p: "OTHR",                      t: "text" },
+                { n: "purpose",         d: "Purpose",           p: "moutain bike first half",   t: "text" },
+                { n: "reference",       d: "Reference",         p: "SI121234567890120",         t: "text" },
+                { n: "deadline",        d: "Deadline",          p: "01.02.2034",                t: "text" }
+            ]
+            %>
+            <% for (const i of items) { %>
+                <%
+                    const str = String(q[i.n])
+                    const readonly = (str != "" && !str.includes("*") ? "readonly" : "")
+                    const val = str.replace("*", "")
+                %>
+                <div>
+                    <label for="<%= i.n %>"><%= i.d %></label>
+                    <input value="<%= val %>" <%= readonly %> type="<%= i.t %>" placeholder="<%= i.p %>" name="<%= i.n %>">
+                </div>
+            <% } %>
+            <!-- <div>
+                <input type="submit" value="Update details" id="update-details">
+            </div> -->
+        </div>
+    </div>
+</body>
+<script>
+const qrcode = document.getElementById("qrcode")
+function val (name) { return document.getElementsByName(name)?.[0]?.value || "" }
+let debounce = null
+function updateQRdeb () {
+    clearTimeout(debounce)
+    debounce = setTimeout(() => {
+        clearTimeout(debounce)
+        updateQR()
+    }, 500);
+}
+function getNewUrl () {
+    const qstring = [
+        ["client_name", val("client-name")],
+        ["client_address", val("client-address")],
+        ["client_city", val("client-city")],
+        ["amount", val("amount").padStart(11, "0")],
+        ["purpose_code", val("code")],
+        ["payment_purpose", val("purpose")],
+        ["iban", val("iban")],
+        ["reference", val("reference")],
+        ["issuer_name", val("issuer-name")],
+        ["issuer_address", val("issuer-address")],
+        ["issuer_city", val("issuer-city")],
+        ["deadline", val("deadline")]
+    ].map(v => `${v[0]}=${v[1]}`).join("&")
+    return `${window.location.origin}/api/qrcode?${qstring}`
+}
+function updateQR (e) {
+    try {
+        const preloadImg = new Image();
+        const newurl = getNewUrl()
+        preloadImg.addEventListener("load", () => qrcode.style.setProperty('background-image', `url("${newurl}"), url("/public/invalid-content.png")`))
+        preloadImg.addEventListener("error", () => qrcode.style.setProperty('background-image', `url("/public/invalid-content.png")`))
+        preloadImg.src=newurl;
+    } catch (error) {
+        setImgUrl(`url("/public/invalid-content.png")`)
+    }
+}
+
+// Add input listener to all inputs
+for (el of document.getElementsByTagName("input")) {
+    el.addEventListener("input", updateQRdeb)
+}
+
+updateQR()
+</script>
+</html>