rob/upn-qr
1
0
Fork 0
mirror of https://gitplac.si/aljaxus/upn-qr.git synced 2025-12-17 04:00:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement copuing QRCode URL in form creator

Browse Source
This commit is contained in:
Aljaz S
2021-11-25 17:50:04 +01:00
parent 432367d91b
commit c6c42e8f87
3 changed files with 105 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/index.ejs
View File

@@ -25,9 +25,8 @@ section div {
row-gap: .5rem;
column-gap: .5rem;
}
.maker > div:last-child {
grid-column-end: -1;
}
.maker > div:nth-last-child(1) { grid-column-end: -1; }
.maker > div:nth-last-child(2) { grid-column-end: -2; }
</style>
<body>
<section>
@@ -64,7 +63,7 @@ section div {
</div>
<div>
<label for="amount">Amount</label>
<input type="number" placeholder="00000001132" name="amount">
<input type="number" placeholder="00000001132" min="0" max="99999999999" name="amount">
</div>
<div>
<label for="code">Purpose code</label>
@@ -94,11 +93,62 @@ section div {
<label for="issuer-city">Issuer city</label>
<input type="text" placeholder="1000 Ljubljana" name="issuer-city">
</div>
<div>
<button id="copyurl" type="button">Copy URL</button>
</div>
<div>
<input type="submit" value="Create form">
</div>
</div>
</section>
<script>
function val (name) { return document.getElementsByName(name)?.[0]?.value || "" }
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")],
].map(v => `${v[0]}=${v[1]}`).join("&")
return `${window.location.origin}/api/qrcode?${qstring}`
}
const copyBtn = document.getElementById("copyurl")
copyBtn.addEventListener("click", () => copyUrl())
function copyUrl () {
try {
const dummy = document.createElement('input')
document.body.appendChild(dummy)
dummy.value = getNewUrl()
dummy.select()
document.execCommand('copy')
document.body.removeChild(dummy)
copyBtn.innerText = "Copied!"
copyBtn.classList.add("success")
setTimeout(() => {
copyBtn.innerText = "Copy URL"
copyBtn.classList.remove("success")
}, 750)
} catch (error) {
console.error(error)
copyBtn.innerText = "Failed!"
copyBtn.classList.add("error")
setTimeout(() => {
copyBtn.innerText = "Copy URL"
copyBtn.classList.remove("error")
}, 750)
}
}
</script>
<section>
<h1 id="api"><a href="#api">&#128279;</a> API</h1>
<h4 id="api-qrcode"><a href="#api-qrcode">&#128279;</a> <code>GET /api/qrcode</code></h4>