mirror of
https://gitplac.si/aljaxus/upn-qr.git
synced 2025-12-16 19:50:57 +00:00
147 lines
5.1 KiB
Plaintext
147 lines
5.1 KiB
Plaintext
<!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>
|