From aebcd9eb0bff664f8b0e02592e4090ecde46863d Mon Sep 17 00:00:00 2001
From: Ville Rantanen <q@moonq.org>
Date: Tue, 6 Jun 2023 15:16:58 +0300
Subject: [PATCH] mobiilit

---
 index.html | 246 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 131 insertions(+), 115 deletions(-)

diff --git a/index.html b/index.html
index 1cbeb4b..d89caec 100644
--- a/index.html
+++ b/index.html
@@ -5,132 +5,138 @@
 <meta name="theme-color" content="lightcyan">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <STYLE type="text/css">
-    BODY {
-           font-family: sans-serif;
-           background-color: lightcyan;
-           }
-    TEXTAREA { font-family: sans-serif; width: 100%;
-               -webkit-border-radius: 5px;
-               -moz-border-radius: 5px;
-               border-radius: 5px;
-               padding: 5px;
-               background: transparent;
-             }
-    #block {
-            margin-left: auto;
-            margin-right: auto;
-            width: 69%;
-            min-width: 69%;
-            max-width: 100%; }
-    LABEL {
-        width: 25ex;
-        display: inline-block;
-    }
-    .error {
-        color: salmon;
-    }
-    .hidden {
-        display: none;
-    }
-    #barcode {
-        margin-top: 0em;
-        margin-bottom: 0em;
-        width: 80%;
-        opacity: 1;
-        transition: opacity 0.2s;
-    }
-    #barcodePNG {
-        margin-top: 1em;
-        margin-bottom: 1em;
-        width: 25%;
-        opacity: 1;
-        transition: opacity 0.2s;
-        display:block;
-        margin-left:auto;
-        margin-right:auto;
-    }
-    #barcodeBW {
-        display: none;
-    }
-    #barcodes {
-        margin: 1em;
-        opacity: 1;
-        transition: opacity 0.2s;
-    }
-    #barcodes.fade {
-        opacity: 0;
-    }
+BODY {
+       font-family: sans-serif;
+       background-color: lightcyan;
+       }
+TEXTAREA { font-family: sans-serif; width: 100%;
+           -webkit-border-radius: 5px;
+           -moz-border-radius: 5px;
+           border-radius: 5px;
+           padding: 5px;
+           background: transparent;
+         }
+#block {
+        margin-left: auto;
+        margin-right: auto;
+        width: 69%;
+        min-width: 69%;
+        max-width: 100%; }
+LABEL {
+    width: 25ex;
+    display: inline-block;
+}
+.error {
+    color: salmon;
+}
+.hidden {
+    display: none;
+}
+#barcode {
+    margin-top: 0em;
+    margin-bottom: 0em;
+    width: 80%;
+    opacity: 1;
+    transition: opacity 0.2s;
+}
+#barcodePNG {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    width: 25%;
+    opacity: 1;
+    transition: opacity 0.2s;
+    display:block;
+    margin-left:auto;
+    margin-right:auto;
+}
+#barcodeBW {
+    display: none;
+}
+#barcodes {
+    margin: 1em;
+    opacity: 1;
+    transition: opacity 0.2s;
+}
+#barcodes.fade {
+    opacity: 0;
+}
 
-    /* Lasku */
+/* Lasku */
 
-    #lasku {
-        border: 1px solid;
-        border-collapse: collapse;
-    }
-    #lasku th, #lasku td {
-        border: 1px solid;
-        padding: 1ex;
-        vertical-align: top;
-    }
-    #lasku .col1 { width: 10%; }
-    #lasku .col2 { width: 40%; }
-    #lasku .col3 { width: 10%; }
-    #lasku .col4 { width: 20%; }
-    #lasku .col5 { width: 20%; }
-    #lasku_summa {
-        text-align: right;
+#lasku {
+    border: 1px solid;
+    border-collapse: collapse;
+}
+#lasku th, #lasku td {
+    border: 1px solid;
+    padding: 1ex;
+    vertical-align: top;
+}
+#lasku .col1 { width: 10%; }
+#lasku .col2 { width: 40%; }
+#lasku .col3 { width: 10%; }
+#lasku .col4 { width: 20%; }
+#lasku .col5 { width: 20%; }
+#lasku_summa {
+    text-align: right;
 
-    }
-    #lasku_summa::after {
-        content: " €";
-        padding-right: 8px;
-    }
-    #lasku_barcode {
-        text-align:center;
-    }
-    .print_help {
+}
+#lasku_summa::after {
+    content: " €";
+    padding-right: 8px;
+}
+#lasku_barcode {
+    text-align:center;
+}
+.print_help {
+    display: none;
+}
+.arvo {
+    font-family: monospace;
+}
+.kayttaja {
+    font-family: monospace;
+}
+.kayttaja_pdf {
         display: none;
-    }
-    .arvo {
         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 {
-        font-family: monospace;
+        display: none;
     }
-    .kayttaja_pdf {
-            display: none;
-            font-family: monospace;
-    }
-    .print_help_pdf {
+    .print_help {
         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 {
-            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>
 <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>
@@ -142,6 +148,7 @@ let state = {
     'paiva': null,
     'summa': null,
     'viite': null,
+    'virtuaali': null,
     'jaettu': null
 }
 
@@ -164,13 +171,14 @@ function generate(final = true) {
         return
     }
     document.getElementById('virtuaali').value = code;
+    state['virtuaali'] = code;
     JsBarcode("#barcode", code, {
       format: "CODE128",
       lineColor: "#404",
       background: "transparent",
       width: 2,
       height: 80,
-      displayValue: true
+      displayValue: false
     });
     JsBarcode("#barcodeBW", code, {
       format: "CODE128",
@@ -306,10 +314,16 @@ function parse_virtual() {
     let kuu = vkoodi.substring(50,52);
     let paiva = vkoodi.substring(52,54);
     let paivays = `${vuosisata}${vuosi}-${kuu}-${paiva}`;
+
+
     document.getElementById('iban').value = iban;
     document.getElementById('summa').value = summa;
     document.getElementById('viite').value = viite;
     document.getElementById('paiva').value = paivays;
+    state['iban'] = vkoodi.substring(1,17);
+    state['summa'] = summa;
+    state['viite'] = viite;
+    state['paiva'] = paivays;
     flash_generate();
 }
 
@@ -332,7 +346,7 @@ function print_help() {
     modify_request();
 }
 function modify_lasku() {
-    let fields = ['iban','summa','viite','paiva'];
+    let fields = ['iban','summa','viite','paiva','virtuaali'];
     for (let i = 0; i < fields.length; i++) {
         try {
            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>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>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>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>
@@ -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>
         </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>
 
         </tbody>