From 95e796851630a4adbd342c7383a8c51baccbd69b Mon Sep 17 00:00:00 2001
From: Joe Tretter <j.tretter@gmail.com>
Date: Mon, 5 Sep 2022 11:24:51 -0500
Subject: [PATCH] Beautify

---
 Client/index.html | 67 +++++++++++++++++++++--------------------------
 1 file changed, 30 insertions(+), 37 deletions(-)
diff --git a/Client/index.html b/Client/index.html
index 1c8da10..863e9b9 100644
--- a/Client/index.html
+++ b/Client/index.html
@@ -2,44 +2,46 @@
 <html>
   <head>
     <title>QRTransfer</title>
+    <style>
+      input {
+        position: absolute;
+        left: 150px;
+      }
+    </style>
+
     <script src="qrenc-4.0.0.js" type="text/javascript"></script>
     <script type="text/javascript">
-      let fileData,
+      let fileDataB64,
         chunkSize,
-        segmentPosition,
+        dataPosition,
         timoutHandle,
         activeCanvas = 0; // double buffering.
 
       const $ = (ele) => document.getElementById(ele);
       const serveCodes = () => {
-        let numChunks = Math.ceil(fileData.length / chunkSize);
-        let currChunk = Math.ceil(segmentPosition / chunkSize) + 1;
+        let numChunks = Math.ceil(fileDataB64.length / chunkSize);
+        let currChunk = Math.ceil(dataPosition / chunkSize) + 1;
         let delay = Number($("delay").value);
         let minLeft = ((numChunks - currChunk) * delay) / 1000 / 60;
 
         $("status").innerText = `${currChunk}/${numChunks}/${((currChunk / numChunks) * 100).toFixed(2)}% (${minLeft.toFixed(2)} min left.)`;
-        displayQR(
-          currChunk + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize),
-          Number($("qrSize").value),
-          Number($("ecc").value)
-        );
-        segmentPosition += chunkSize;
+        displayQR(currChunk + "|" + fileDataB64.substring(dataPosition, dataPosition + chunkSize), Number($("qrSize").value), Number($("ecc").value));
+        dataPosition += chunkSize;
 
-        if (segmentPosition < fileData.length) {
+        if (dataPosition < fileDataB64.length) {
           timoutHandle = window.setTimeout(serveCodes, delay);
         }
       };
       const displayQR = (data, size, ecc) => {
+        window.scrollTo(0, 0);
         var qr = new QR($("qrcanv" + activeCanvas), data, size, size, ecc);
         $("qrcanv" + (activeCanvas === 0 ? 1 : 0)).style.display = "none";
         $("qrcanv" + activeCanvas).style.display = "block";
         activeCanvas = activeCanvas === 0 ? 1 : 0;
       };
-      const getFile = (fileName) => {
+      const startAction = (fileName) => {
         chunkSize = Number($("chunkSize").value);
-        segmentPosition = Number($("startChunk").value * chunkSize);
-
-        timoutHandle && window.clearTimeout(timoutHandle);
+        dataPosition = Number($("startChunk").value * chunkSize);
 
         var xhr = new XMLHttpRequest();
         xhr.open("GET", fileName, true);
@@ -47,12 +49,13 @@
         xhr.onload = (e) => {
           tgt = e.currentTarget;
           if (tgt.status == 200) {
-            let uInt8Array = new Uint8Array(tgt.response);
-            let binaryString = new Array(uInt8Array.length);
-            uInt8Array.map((x, idx) => (binaryString[idx] = String.fromCharCode(x)));
+            let allCharCodes = new Uint8Array(tgt.response);
+            let allChars = new Array(allCharCodes.length);
+            allCharCodes.map((x, idx) => (allChars[idx] = String.fromCharCode(x)));
             // it seems that the qr library doesn't support binary data - converting to base64
-            fileData = window.btoa(binaryString.join(""));
-            window.scrollTo(0, 0);
+            fileDataB64 = window.btoa(allChars.join(""));
+
+            timoutHandle && window.clearTimeout(timoutHandle);
             timoutHandle = window.setTimeout(serveCodes, 3000);
           }
         };
@@ -61,25 +64,15 @@
     </script>
   </head>
   <body>
-    <center>
-      <canvas id="qrcanv0"></canvas>
-      <canvas id="qrcanv1"></canvas>
-    </center>
+    <center><canvas id="qrcanv0"></canvas><canvas id="qrcanv1"></canvas></center>
     <hr />
-    Status:<span id="status">...</span>
+    Status:<span id="status">...</span> <button onclick="startAction($('inputFileName').value)">Start(3 sec delay)</button>
     <hr />
-    Filename:<input type="text" id="inputFileName" value="testInput/5K.dat" />
-    <br />
-    ECC (1-4):<input type="number" value="4" id="ecc" />
-    <br />
-    Qr-Size:<input type="number" value="800" id="qrSize" />
-    <br />
-    Chunk-Size<input type="number" value="1200" id="chunkSize" />
-    <br />
-    Start-Chunk:<input type="number" value="0" id="startChunk" />
-    <br />
+    Filename:<input type="text" id="inputFileName" value="testInput/5K.dat" /> <br />
+    ECC (1-4):<input type="number" value="4" id="ecc" /> <br />
+    Qr-Size:<input type="number" value="800" id="qrSize" /> <br />
+    Chunk-Size<input type="number" value="1200" id="chunkSize" /> <br />
+    Start-Chunk:<input type="number" value="0" id="startChunk" /> <br />
     Delay:<input type="number" value="1500" id="delay" />
-    <br />
-    <button onclick="getFile($('inputFileName').value)">Read</button>
   </body>
 </html>
