<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>
