moonq/pankkimaksu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobiilit

Browse Source
This commit is contained in:
Ville Rantanen
2023-06-06 15:16:58 +03:00
parent a3600bfccd
commit aebcd9eb0b
1 changed files with 131 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
index.html
View File

@@ -5,132 +5,138 @@
<meta name="theme-color" content="lightcyan"> <meta name="theme-color" content="lightcyan">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<STYLE type="text/css"> <STYLE type="text/css">
BODY { BODY {
font-family: sans-serif; font-family: sans-serif;
background-color: lightcyan; background-color: lightcyan;
} }
TEXTAREA { font-family: sans-serif; width: 100%; TEXTAREA { font-family: sans-serif; width: 100%;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
background: transparent; background: transparent;
} }
#block { #block {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 69%; width: 69%;
min-width: 69%; min-width: 69%;
max-width: 100%; } max-width: 100%; }
LABEL { LABEL {
width: 25ex; width: 25ex;
display: inline-block; display: inline-block;
} }
.error { .error {
color: salmon; color: salmon;
} }
.hidden { .hidden {
display: none; display: none;
} }
#barcode { #barcode {
margin-top: 0em; margin-top: 0em;
margin-bottom: 0em; margin-bottom: 0em;
width: 80%; width: 80%;
opacity: 1; opacity: 1;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
#barcodePNG { #barcodePNG {
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
width: 25%; width: 25%;
opacity: 1; opacity: 1;
transition: opacity 0.2s; transition: opacity 0.2s;
display:block; display:block;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
} }
#barcodeBW { #barcodeBW {
display: none; display: none;
} }
#barcodes { #barcodes {
margin: 1em; margin: 1em;
opacity: 1; opacity: 1;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
#barcodes.fade { #barcodes.fade {
opacity: 0; opacity: 0;
} }
/* Lasku */ /* Lasku */
#lasku { #lasku {
border: 1px solid; border: 1px solid;
border-collapse: collapse; border-collapse: collapse;
} }
#lasku th, #lasku td { #lasku th, #lasku td {
border: 1px solid; border: 1px solid;
padding: 1ex; padding: 1ex;
vertical-align: top; vertical-align: top;
} }
#lasku .col1 { width: 10%; } #lasku .col1 { width: 10%; }
#lasku .col2 { width: 40%; } #lasku .col2 { width: 40%; }
#lasku .col3 { width: 10%; } #lasku .col3 { width: 10%; }
#lasku .col4 { width: 20%; } #lasku .col4 { width: 20%; }
#lasku .col5 { width: 20%; } #lasku .col5 { width: 20%; }
#lasku_summa { #lasku_summa {
text-align: right; text-align: right;
} }
#lasku_summa::after { #lasku_summa::after {
content: " €"; content: " €";
padding-right: 8px; padding-right: 8px;
} }
#lasku_barcode { #lasku_barcode {
text-align:center; text-align:center;
} }
.print_help { .print_help {
display: none;
}
.arvo {
font-family: monospace;
}
.kayttaja {
font-family: monospace;
}
.kayttaja_pdf {
display: none; display: none;
}
.arvo {
font-family: monospace; font-family: monospace;
}
.print_help_pdf {
display: block;
overflow: visible;
white-space: pre;
white-space: pre-wrap;
font-family: monospace;
}
@media print {
.no-print, .no-print * {
display: none !important;
}
#block {
width: 90vw;
min-width: 90vw;
max-width: 90vw;
} }
.kayttaja { .kayttaja {
font-family: monospace; display: none;
} }
.kayttaja_pdf { .print_help {
display: none;
font-family: monospace;
}
.print_help_pdf {
display: block; display: block;
overflow: visible; overflow: visible;
white-space: pre; white-space: pre;
white-space: pre-wrap; white-space: pre-wrap;
font-family: monospace; font-family: monospace;
} }
@media print {
.no-print, .no-print * {
display: none !important;
}
#block {
width: 90vw;
min-width: 90vw;
max-width: 90vw;
}
.kayttaja {
display: none;
}
.print_help {
display: block;
overflow: visible;
white-space: pre;
white-space: pre-wrap;
font-family: monospace;
}
}
}
@media only screen and (max-width: 600px) {
#block {
margin-left: auto;
margin-right: auto;
width: 100%;
min-width: 100%;
max-width: 100%; }
}
</STYLE> </STYLE>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -142,6 +148,7 @@ let state = {
'paiva': null, 'paiva': null,
'summa': null, 'summa': null,
'viite': null, 'viite': null,
'virtuaali': null,
'jaettu': null 'jaettu': null
} }
@@ -164,13 +171,14 @@ function generate(final = true) {
return return
} }
document.getElementById('virtuaali').value = code; document.getElementById('virtuaali').value = code;
state['virtuaali'] = code;
JsBarcode("#barcode", code, { JsBarcode("#barcode", code, {
format: "CODE128", format: "CODE128",
lineColor: "#404", lineColor: "#404",
background: "transparent", background: "transparent",
width: 2, width: 2,
height: 80, height: 80,
displayValue: true displayValue: false
}); });
JsBarcode("#barcodeBW", code, { JsBarcode("#barcodeBW", code, {
format: "CODE128", format: "CODE128",
@@ -306,10 +314,16 @@ function parse_virtual() {
let kuu = vkoodi.substring(50,52); let kuu = vkoodi.substring(50,52);
let paiva = vkoodi.substring(52,54); let paiva = vkoodi.substring(52,54);
let paivays = `${vuosisata}${vuosi}-${kuu}-${paiva}`; let paivays = `${vuosisata}${vuosi}-${kuu}-${paiva}`;
document.getElementById('iban').value = iban; document.getElementById('iban').value = iban;
document.getElementById('summa').value = summa; document.getElementById('summa').value = summa;
document.getElementById('viite').value = viite; document.getElementById('viite').value = viite;
document.getElementById('paiva').value = paivays; document.getElementById('paiva').value = paivays;
state['iban'] = vkoodi.substring(1,17);
state['summa'] = summa;
state['viite'] = viite;
state['paiva'] = paivays;
flash_generate(); flash_generate();
} }
@@ -332,7 +346,7 @@ function print_help() {
modify_request(); modify_request();
} }
function modify_lasku() { function modify_lasku() {
let fields = ['iban','summa','viite','paiva']; let fields = ['iban','summa','viite','paiva','virtuaali'];
for (let i = 0; i < fields.length; i++) { for (let i = 0; i < fields.length; i++) {
try { try {
document.getElementById('lasku_' + fields[i]).innerHTML = document.getElementById(fields[i]).value; document.getElementById('lasku_' + fields[i]).innerHTML = document.getElementById(fields[i]).value;
@@ -434,7 +448,7 @@ function reversed(str) {
<label>&nbsp;</label><span id="iban_error" class="error" ></span><br> <label>&nbsp;</label><span id="iban_error" class="error" ></span><br>
<label>Summa: </label><br><input type="number" id="summa" size=10 value=10 onblur="generate()" onkeyup="generate(false)" />&euro;<br> <label>Summa: </label><br><input type="number" id="summa" size=10 value=10 onblur="generate()" onkeyup="generate(false)" />&euro;<br>
<label>&nbsp;</label><span id="summa_error" class="error" ></span><br> <label>&nbsp;</label><span id="summa_error" class="error" ></span><br>
<label>Viite: </label><br><input pattern="[0-9 ]+" id="viite" size=20 value=1054 onblur="generate()" onkeyup="generate(false)" />&nbsp;Viite pakollinen, esim 1054 jos et keksi<br> <label>Viite: </label><br><input pattern="[0-9 ]+" id="viite" size=20 value=1054 onblur="generate()" onkeyup="generate(false)" placeholder=1054/>&nbsp;Viite pakollinen.<br>
<label>&nbsp;</label><span id="viite_error" class="error" ></span><br> <label>&nbsp;</label><span id="viite_error" class="error" ></span><br>
<label>Eräpäivä: </label><br><input type="text" pattern="[0-9\-]+" id="paiva" size=10 onblur="generate()" onkeyup="generate(false)" placeholder="VVVV-KK-PP"/><br> <label>Eräpäivä: </label><br><input type="text" pattern="[0-9\-]+" id="paiva" size=10 onblur="generate()" onkeyup="generate(false)" placeholder="VVVV-KK-PP"/><br>
<label>&nbsp;</label><span id="paiva_error" class="error" ></span><br> <label>&nbsp;</label><span id="paiva_error" class="error" ></span><br>
@@ -462,7 +476,9 @@ function reversed(str) {
<td class=col3>Eräpäivä</td><td class="col4, arvo" id="lasku_paiva">[paiva]</td><td class="col5, arvo" id="lasku_summa">[summa]</td> <td class=col3>Eräpäivä</td><td class="col4, arvo" id="lasku_paiva">[paiva]</td><td class="col5, arvo" id="lasku_summa">[summa]</td>
</tr> </tr>
<tr> <tr>
<td colspan=5 id=lasku_barcode><svg id="barcode"></svg></td> <td colspan=5 id=lasku_barcode><svg id="barcode"></svg>
<p id="lasku_virtuaali" class="arvo">[virtuaaliviivakoodi]</p>
</td>
</tr> </tr>
</tbody> </tbody>