From 1643eb636eb81499173562e3f640e9118e07384a Mon Sep 17 00:00:00 2001
From: Thomas Forgione <thomas@forgione.fr>
Date: Mon, 8 Jul 2024 17:55:34 +0200
Subject: [PATCH] Good stream

---
 templates/calibrate.html | 56 +++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/templates/calibrate.html b/templates/calibrate.html
index ffb2f4f..325f412 100644
--- a/templates/calibrate.html
+++ b/templates/calibrate.html
@@ -27,7 +27,7 @@
 
             </div>
         </div>
-        <progress id="progress-bar" class="progress is-link" style="display: none;" value="0" max="100"></progress>
+        <progress id="progress-bar" class="progress is-link" style="display: none;" value="0" max="1000"></progress>
     </div>
 </section>
 {% endblock content %}
@@ -35,6 +35,7 @@
 {% block extrajs %}
 <script>
     let scanIndex = 0;
+    let progress = 0;
     let previewButton = document.getElementById('preview-button');
     let calibrateButton = document.getElementById('calibrate-button');
     let progressBar = document.getElementById('progress-bar');
@@ -64,37 +65,44 @@
     });
 
     calibrateButton.addEventListener('click', async () => {
+        progress = 0;
+        progressBar.value = 0;
         previewImage.style.display = "none";
         buttons.forEach(x => x.setAttribute('disabled', 'disabled'));
         calibrateButton.classList.add('is-loading');
         progressBar.style.display = "block";
 
-        let xhr = new XMLHttpRequest();
-        grid.innerHTML = '';
-        xhr.open('GET', '/api/scan-for-calibration/{{ object.id }}');
-        xhr.onreadystatechange = () => {
-            if (xhr.readyState === 3 || xhr.readyState === 4) {
-                let uuids = xhr.responseText.split('\n');
-                let split = uuids[uuids.length - 2].split(',');
-                let uuid = split[0];
-                let ratio = parseFloat(split[1]);
-                progressBar.value = 100 * ratio;
-                let cell = document.createElement('div');
-                cell.classList.add('cell');
-                cell.classList.add('is-col-min-4');
-                let img = document.createElement('img');
-                img.src = '/data/{{ object.id }}/calibration/' + uuid + '.jpg?v=' + scanIndex;
-                cell.appendChild(img);
-                grid.appendChild(cell);
+        let response = await fetch('/api/scan-for-calibration/{{ object.id }}');
+        let reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
 
-                if (xhr.readyState === 4) {
-                    buttons.forEach(x => x.removeAttribute('disabled'));
-                    calibrateButton.classList.remove('is-loading');
-                }
+        while (true) {
+            let { value, done } = await reader.read();
+
+            if (done) {
+                buttons.forEach(x => x.removeAttribute('disabled'));
+                calibrateButton.classList.remove('is-loading');
+                break;
             }
-        };
 
-        xhr.send();
+            let [ uuid, ratio ] = value.trim().split(',');
+            progress = Math.ceil(1000 * parseFloat(ratio));
+            let cell = document.createElement('div');
+            cell.classList.add('cell');
+            let img = document.createElement('img');
+            img.src = '/data/{{ object.id }}/calibration/' + uuid + '.jpg?v=' + scanIndex;
+            cell.appendChild(img);
+            grid.appendChild(cell);
+        }
     });
+
+    function refreshProgressBar() {
+        if (progress !== progressBar.value) {
+            let diff = progress - progressBar.value;
+            progressBar.value += Math.max(diff / 20, 1);
+        }
+        requestAnimationFrame(refreshProgressBar);
+    }
+
+    refreshProgressBar();
 </script>
 {% endblock extrajs %}