I really hate javascript..

Gaardsholt · Nov 30, 2020 · 8d66e15 · 8d66e15
1 parent e19bf8f
commit 8d66e15
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 24 deletions.
diff --git a/barcoder/Views/Home/Mobilepay.cshtml b/barcoder/Views/Home/Mobilepay.cshtml
@@ -6,18 +6,22 @@
 <div class="row mt-4">
     <div class="col">
         <form id="barcodeForm">
-            <div class="form-group">
+            <div class="form-group" style="display:none">
                 <label for="barcodeType">Type</label>
                 <select class="form-control" id="barcodeType">
                     <option value="2048">QR_CODE</option>
                 </select>
             </div>
             <div class="form-group">
-                <label for="barcodeText">Text</label>
-                <input type="text" class="form-control" id="barcodeText" placeholder="Text for the barcode">
+                <label for="qrNr">Number</label>
+                <input type="text" class="form-control" id="qrNr" placeholder="MobilePay Box Number">
+            </div>
+            <div class="form-group">
+                <label for="qrAmount">Amount</label>
+                <input type="text" class="form-control" id="qrAmount" placeholder="Amount to send">
             </div>
             <div class="form-group">
-                <label for="barcodeWidth">Width</label>
+                <label for="barcodeSize">Size</label>
                 <input type="number" class="form-control" id="barcodeSize">
 
                 <input type="range" class="custom-range" id="barcodeSizeRange" value="100" min="0" max="1000">
@@ -27,9 +31,9 @@
 </div>
 <div class="row mt-5 mb-5">
     <div class="col text-center">
-        <img id="barcodeImg" src="#" onerror="console.log('error'); this.style.display='none'" style="display: none;" alt="This is the generated barcode" />
-        <span id="error_message" style="display: none;" ></span>
+        <img id="barcodeImg" src="#" style="display: none;" alt="This is the generated barcode" />
+        <span id="error_message" style="display: none;"></span>
     </div>
 </div>
 
-<script src="~/js/mobilepay.js" asp-append-version="true"></script>
+<script src="~/js/mobilepay.js" asp-append-version="true"></script>
diff --git a/barcoder/wwwroot/js/mobilepay.js b/barcoder/wwwroot/js/mobilepay.js
@@ -26,47 +26,66 @@ document.querySelectorAll('#barcodeForm input').forEach(item => {
 
 
 function onInputChange(event) {
-    updateBarcodeData();
-    updateImage();
+    let shouldUpdateImage = updateBarcodeData();
+
+    if (shouldUpdateImage) {
+        document.getElementById("barcodeImg").show();
+
+        updateImage();
+    } else {
+        document.getElementById("barcodeImg").hide();
+    }
+
 }
 
 function updateBarcodeData() {
+    var nr = document.getElementById("qrNr").value;
+    var amount = document.getElementById("qrAmount").value;
+
+    if (nr == "")
+        return false
+
+    text = "https://products.mobilepay.dk/box/box?phone=" + nr + "&amount=" + amount;
     barcode = {
-        text: document.getElementById("barcodeText").value,
+        text: text,
         type: parseInt(document.getElementById("barcodeType").selectedOptions[0].value),
         width: parseInt(document.getElementById("barcodeSize").value),
         height: parseInt(document.getElementById("barcodeSize").value),
         rotate: 0
     };
+    return true;
 }
 
 function updateImage() {
     let barcodeImg = document.getElementById("barcodeImg");
     var imgUrl = "image.png?" + toQueryString(barcode);
 
-    window.xhttp = new XMLHttpRequest();
-    window.xhttp.onreadystatechange = function () {
+    let xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function () {
         if (this.readyState == 4) {
             if (this.status == 200) {
-                document.getElementById("error_message").hide();
-
-                barcodeImg.src = imgUrl;
-                barcodeImg.show();
+                showBarcode(barcodeImg, imgUrl)
             } else {
-                document.getElementById("error_message").innerText = this.responseText;
-                document.getElementById("error_message").show();
-                barcodeImg.hide();
-
+                showError(barcodeImg)
             }
         }
 
     };
-    window.xhttp.onerror = function () {
 
-    };
+    xhttp.open("GET", imgUrl, true);
+    xhttp.send();
+}
 
-    window.xhttp.open("GET", imgUrl, true);
-    window.xhttp.send();
+function showBarcode(el, imgUrl) {
+    document.getElementById("error_message").hide();
+
+    el.src = imgUrl;
+    el.show();
+}
+function showError(el) {
+    document.getElementById("error_message").innerText = this.responseText;
+    document.getElementById("error_message").show();
+    el.hide();
 }