diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 241 |
1 files changed, 241 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..bfa9441 --- /dev/null +++ b/index.html @@ -0,0 +1,241 @@ +<html> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="manifest" href="./manifest.json"> + <title> + Orodje za izdelavo UPN nalogov, (C) Anton Luka Šijanec 2020 + </title> + <style> + @font-face { + font-family: myriadpro; + src: url(myriadpro.otf); + } + @font-face { + font-family: courbd; + src: url(courbd.ttf); + } + body { + font-family: myriadpro; + background: black; + color: white; + } + input { + font-family: courbd; + border: 0; + width: 100%; + background: transparent; + position: fixed; + color: black; + } + #div { + background-color: white; + display: inline-block; + } + canvas { + background: white; + color: black; + position: fixed; + width: 0; + heigth: 0; + } + </style> + <script src="qrcode.js"></script> + <script src="qrcode.tosjis.js"></script> + <script src="iso-8859-2.js"></script> + <script src="sw.js"></script> + <script> + if ("serviceWorker" in navigator) { + navigator.serviceWorker.register("./sw.js") + .then(() => { }) + .catch((err) => console.log("Service worker registration failed", err)); + } + // Listen to messages from service workers.} + if(navigator.serviceWorker) { + navigator.serviceWorker.addEventListener('message', (event) => { + if (event.data.msg === "install") { + window.location.replace("./index.html"); + } + }); + } + if (location.protocol != 'https:') { + location.href = 'https:' + window.location.href.substring(window.location.protocol.length); + } + var canvasEl, errorEl, qrtext; + function httpGet(theUrl) { + var xmlHttp = new XMLHttpRequest(); + xmlHttp.open( "GET", theUrl, false ); // false for synchronous request + xmlHttp.send( null ); + return xmlHttp.responseText; + } + var unikatnapolja = ["KodaNamena", "ImePlacnika", "UlicaPlacnika", "KrajPlacnika", "NamenPlacila", "RokPlacila", "Znesek", "IbanPrejemnika", "ImePrejemnika", "UlicaPrejemnika", "KrajPrejemnika", "IbanPlacnika", "ReferencaPlacnika1", "ReferencaPlacnika2", "ReferencaPrejemnika1", "ReferencaPrejemnika2", "PodpisPlacnikaNeobveznoZig1", "PodpisPlacnikaNeobveznoZig2", "DatumPlacila", "Dvig", "Polog", "Nujno"]; + document.addEventListener("DOMContentLoaded", function() { + document.getElementById("div").insertAdjacentHTML( 'afterbegin', httpGet("upn.svg")); + var element = "ImePlacnika"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "UlicaPlacnika"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "KrajPlacnika"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "NamenPlacila"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "RokPlacila"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "Znesek"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "IbanPrejemnika"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "ReferencaPrejemnika1"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "ReferencaPrejemnika2"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "ImePrejemnika"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "UlicaPrejemnika"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "KrajPrejemnika"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+"Belo style='top:"+document.getElementById("belaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("belaVnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById("belaVnos"+element).childNodes[0].nodeValue=""; + var element = "QRKoda"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<canvas id=polje"+element+"Rdece style='top:"+document.getElementById("rdecaVnos"+element).getBoundingClientRect().top+";left:"+document.getElementById("rdecaVnos"+element).getBoundingClientRect().left+"' >"); + for (const element of unikatnapolja) { + if(document.getElementById("rdecaVnos"+element) != null) var ccc = "rdeca"; else + if(document.getElementById("rumenaVnos"+element) != null) var ccc = "rumena"; else + if(document.getElementById("belaVnos"+element) != null) var ccc = "bela"; + document.getElementById("div").insertAdjacentHTML( 'beforeend', "<input id=polje"+element+" style='top:"+document.getElementById(ccc+"Vnos"+element).getBoundingClientRect().top+";left:"+document.getElementById(ccc+"Vnos"+element).getBoundingClientRect().left+"' >"); + document.getElementById(ccc+"Vnos"+element).childNodes[0].nodeValue=""; + } + var unikatnekljukice; + addeventlisteners(); + canvasEl = document.getElementById('poljeQRKodaRdece'); + errorEl = document.getElementById('error'); + }); + function addeventlisteners() { + var belapolja = ["ImePlacnika", "UlicaPlacnika", "KrajPlacnika", "NamenPlacila", "RokPlacila", "Znesek", "IbanPrejemnika", "ImePrejemnika", "UlicaPrejemnika", "KrajPrejemnika", "ReferencaPrejemnika1", "ReferencaPrejemnika2"]; + for (const element of belapolja) { + document.getElementById("polje"+element).addEventListener("keyup", function() { + document.getElementById("polje"+element+"Belo").value = document.getElementById("polje"+element).value; + }); + document.getElementById("polje"+element+"Belo").addEventListener("keyup", function() { + document.getElementById("polje"+element).value = document.getElementById("polje"+element+"Belo").value; + }); + } + document.addEventListener("keyup", function() { + updateQR(); + }); + } + function debounce (func, wait, immediate) { + var timeout + return function () { + var context = this + var args = arguments + var later = function () { + timeout = null + if (!immediate) func.apply(context, args) + } + + var callNow = immediate && !timeout + clearTimeout(timeout) + timeout = setTimeout(later, wait) + if (callNow) func.apply(context, args) + } + } + + function drawQR (text) { + errorEl.style.display = 'none' + canvasEl.style.display = 'block' + + QRCode.toCanvas(canvasEl, text, { + version: 15, + errorCorrectionLevel: "M", + margin: 0, + width: 123.199029921, + color: { + light: "#ffffff", + dark: "#000000" + }, + toSJISFunc: QRCode.toSJIS + }, function (error, canvas) { + if (error) { + canvasEl.style.display = 'none' + errorEl.style.display = 'inline' + errorEl.textContent = error + } + }) + } + + var updateQR = debounce(function () { + dpi = window.devicePixelRatio; + ctx = canvasEl.getContext('2d'); + var telo = "UPNQR\n" + +document.getElementById("poljeIbanPlacnika").value.replace(/\s/g, '').substring(0, 19)+"\n" + +document.getElementById("poljePolog").value.replace(/\s/g, '').substring(0, 1)+"\n" + +document.getElementById("poljeDvig").value.replace(/\s/g, '').substring(0, 1)+"\n" + +document.getElementById("poljeReferencaPlacnika1").value.replace(/\s/g, '').substring(0, 4)+document.getElementById("poljeReferencaPlacnika2").value.replace(/\s/g, '').substring(0, 22)+"\n" + +document.getElementById("poljeImePlacnika").value.substring(0, 33)+"\n" + +document.getElementById("poljeUlicaPlacnika").value.substring(0, 33)+"\n" + +document.getElementById("poljeKrajPlacnika").value.substring(0, 33)+"\n" + +(Number(document.getElementById("poljeZnesek").value.replace(/\s/g, '').substring(3).replace(/\./g, '').replace(',', '.'))*100).toString().padStart(11, "0")+"\n" + +document.getElementById("poljeDatumPlacila").value.replace(/\s/g, '').substring(0, 10)+"\n" + +document.getElementById("poljeNujno").value.replace(/\s/g, '').substring(0, 1)+"\n" + +document.getElementById("poljeKodaNamena").value.replace(/\s/g, '').toUpperCase().substring(0, 4)+"\n" + +document.getElementById("poljeNamenPlacila").value.replace(/\s/g, '').substring(0, 42)+"\n" + +document.getElementById("poljeRokPlacila").value.replace(/\s/g, '').substring(0, 10)+"\n" + +document.getElementById("poljeIbanPrejemnika").value.replace(/\s/g, '').substring(0, 34)+"\n" + +document.getElementById("poljeReferencaPrejemnika1").value.replace(/\s/g, '').substring(0, 4)+document.getElementById("poljeReferencaPrejemnika2").value.replace(/\s/g, '').substring(0, 22)+"\n" + +document.getElementById("poljeImePrejemnika").value.substring(0, 33)+"\n" + +document.getElementById("poljeUlicaPrejemnika").value.substring(0, 33)+"\n" + +document.getElementById("poljeKrajPrejemnika").value.substring(0, 33)+"\n"; + var podpis = "upn.sijanec.eu - Anton Luka Šijanec je spisal programsko opremo, ki je generirala ta UPN. (C) 2020"; + var qrtext = telo+telo.length.toString().padStart(3, "0")+"\n"+podpis.substring(0, 411-(telo.length+4)); + console.log(qrtext); + var mode = "Byte"; + if (mode !== 'Auto') { + // drawQR([{ data: iso88592.encode(qrtext.replace(/[\t\r]/g,)), mode: mode }]) + drawQR([{ data: qrtext.replace(/[\t\r]/g,), mode: mode }]) + } else { + // drawQR(iso88592.encode(qrtext.replace(/[\t\r]/g,))) + drawQR(qrtext.replace(/[\t\r]/g,)) + } + }, 250) + var pxTomm = function(px){ + return Math.floor(px/($('#my_mm').height()/100)); //JQuery returns sizes in PX + }; + </script> + </head> + <body> + <h1 align="center"> + Orodje za izdelavo položnic, (C) Anton Luka Šijanec 2020 + </h1> + <div id="div"> + </div> + <hr> + <ul> + <b>Navodila in opombe za vpisovanje:</b> + <li>Številke IBAN morajo biti ločene s presledki na vsake štiri znake.</li> + <li>Ko strojno vpisujemo podatke, le-ti ne smejo biti vpisani znak-po-znak med vodila, ki so namenjena zgolj ročnemu vnosu.</li> + <li>Kljukice na poljih Polog, Dvig in Nujno označimo z vpisom velike tiskane črke X.</li> + <li>Pri poljih Ime, ulica in kraj ne pišemo vejic.</li> + <li>Znesek začnemo z tremi zvezdicami (***) in vanj vnesemo tudi cente, ločene z decimalno vejico. Največji znesek je 999.999.999,99 evrov (ena milijarda minus en cent). Celoštevilski del ločimo na segmente po tri mesta s piko. Primer zneska (en milijon dvanajst tisoč petsto triindvajset evrov in triinpetdeset centov): ***1.012.523,53.</li> + <li>Datume pišemo v slovenskem formatu brez presledkov (primer: 31.12.1999).</li> + <li>Reference pišemo v formatu <i>SI00 225268-32526-222</i>, vendar sem opazil, da delujejo tudi brez pomišljajev.</li> + <li>Kode namena najdete na <a href="https://www.nlb.si/sepa-koda-namena-prebivalstvo" target="_blank">spletni strani NLB [odpre v novem zavihku]</a>.</li> + <li>Program ne preverja vnosa!</li> + </ul> + <div id="error"> + </div> + <hr> + <i>šijanec/upn, različica 0.0.7</i> + </body> +</html>
\ No newline at end of file |