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

create the form

Browse Source
This commit is contained in:
Aljaz S
2021-11-23 15:58:12 +01:00
parent a11afb36fb
commit 492a4e8203
3 changed files with 122 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/template/style.ejs
View File

@@ -59,6 +59,10 @@ input {
border-radius: 4px; border-radius: 4px;
font-family: monospace; font-family: monospace;
} }
input:read-only {
cursor: default;
background-color: var(--c-dark);
}
input:focus, input:focus,
input:focus-visible { input:focus-visible {
border-color: transparent; border-color: transparent;

119
src/views/form.ejs
View File

@@ -8,13 +8,128 @@
</head> </head>
<%- include('../template/style.ejs') -%> <%- include('../template/style.ejs') -%>
<style> <style>
div {
display: grid;
}
.title {
display: grid;
grid-template-columns: auto auto 1fr;
align-content: center;
justify-content: center;
padding: 1rem;
column-gap: 1rem;
}
.title > * {
margin: auto;
}
.form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
row-gap: .5rem;
column-gap: .5rem;
}
.form > div:last-child {
grid-column-end: -1;
}
.code {
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.card {
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.title { grid-row: 1; grid-column: span 2; }
.code { grid-row: 2; grid-column: 1; }
.form { grid-row: 2; grid-column: 2; }
</style> </style>
<body> <body>
<div> <div class="card">
<div class="title">
<h1>Form: <%= query["form-title"] %></h1>
<span>Create your form here: <a href="/#maker">/#maker</a></span>
</div>
<!-- <pre><%= query ? JSON.stringify(query, null, 2) : "query: None" %></pre> -->
<div class="code" id="qrcode">
</div>
<div class="form">
<div>
<label for="form-client-name">Client name</label>
<input value="<%= query["form-client-name"] %>" <%= query["form-client-name"] ? "readonly" : "" %> type="text" placeholder="Peter Novak" name="form-client-name">
</div>
<div>
<label for="form-client-address">Client address</label>
<input value="<%= query["form-client-address"] %>" <%= query["form-client-address"] ? "readonly" : "" %> type="text" placeholder="Ravna ulica 13 a" name="form-client-address">
</div>
<div>
<label for="form-client-city">Client city</label>
<input value="<%= query["form-client-city"] %>" <%= query["form-client-city"] ? "readonly" : "" %> type="text" placeholder="1000 Ljubljana" name="form-client-city">
</div>
<div>
<label for="form-amount">Amount</label>
<input value="<%= query["form-amount"] %>" <%= query["form-amount"] ? "readonly" : "" %> type="number" placeholder="00000001132" name="form-amount">
</div>
<div>
<label for="form-code">Purpose code</label>
<input value="<%= query["form-code"] %>" <%= query["form-code"] ? "readonly" : "" %> type="text" placeholder="OTHR" name="form-code">
</div>
<div>
<label for="form-purpose">Payment purpose</label>
<input value="<%= query["form-purpose"] %>" <%= query["form-purpose"] ? "readonly" : "" %> type="text" placeholder="moutain bike first half" name="form-purpose">
</div>
<div>
<label for="form-iban">IBAN</label>
<input value="<%= query["form-iban"] %>" <%= query["form-iban"] ? "readonly" : "" %> type="text" placeholder="SI56047500000280672" name="form-iban">
</div>
<div>
<label for="form-reference">Reference</label>
<input value="<%= query["form-reference"] %>" <%= query["form-reference"] ? "readonly" : "" %> type="text" placeholder="SI121234567890120" name="form-reference">
</div>
<div>
<label for="form-issuer-name">Issuer name</label>
<input value="<%= query["form-issuer-name"] %>" <%= query["form-issuer-name"] ? "readonly" : "" %> type="text" placeholder="Spletne strani na 123" name="form-issuer-name">
</div>
<div>
<label for="form-issuer-address">Issuer address</label>
<input value="<%= query["form-issuer-address"] %>" <%= query["form-issuer-address"] ? "readonly" : "" %> type="text" placeholder="Za deveto smreko 15 k" name="form-issuer-address">
</div>
<div>
<label for="form-issuer-city">Issuer city</label>
<input value="<%= query["form-issuer-city"] %>" <%= query["form-issuer-city"] ? "readonly" : "" %> type="text" placeholder="1000 Ljubljana" name="form-issuer-city">
</div>
<div>
<input type="submit" value="Update details" id="update-details">
</div>
</div>
</div> </div>
</body> </body>
<script> <script>
const btn = document.getElementById("update-details")
const qrcode = document.getElementById("qrcode")
function val (name) {
return document.getElementsByName(name)?.[0]?.value || ""
}
function updateQR (e) {
const querystring = [
["client_name", val("form-client-name")],
["client_address", val("form-client-address")],
["client_city", val("form-client-city")],
["amount", val("form-amount")],
["purpose_code", val("form-code")],
["payment_purpose", val("form-purpose")],
["iban", val("form-iban")],
["reference", val("form-reference")],
["issuer_name", val("form-issuer-name")],
["issuer_address", val("form-issuer-address")],
["issuer_city", val("form-issuer-city")],
].map(v => `${v[0]}=${v[1]}`).join("&")
qrcode.style.setProperty('background-image', `url("/api/qrcode?${querystring}")`)
}
btn.addEventListener("click", updateQR)
updateQR()
</script> </script>
</html> </html>

2
src/views/index.ejs
View File

@@ -76,7 +76,7 @@ section div {
</div> </div>
<div> <div>
<label for="form-iban">IBAN</label> <label for="form-iban">IBAN</label>
<input type="number" placeholder="SI56047500000280672" name="form-iban"> <input type="text" placeholder="SI56047500000280672" name="form-iban">
</div> </div>
<div> <div>
<label for="form-reference">Reference</label> <label for="form-reference">Reference</label>