feat(viewer.html): Add modal window to show transfer in progress

When we request large amount of data mongo/pagination might be slow, thus we need to show user we are in progress, and it is not a bug, that nothing appeared yet. Signed-off-by: Denys Fedoryshchenko <[email protected]>
kernelci · Oct 10, 2024 · b749a05 · b749a05
1 parent f62032d
commit b749a05
Showing 1 changed file with 30 additions and 3 deletions.
diff --git a/api/templates/viewer.html b/api/templates/viewer.html
@@ -413,6 +413,27 @@
             nodeinfo.innerHTML = nodeinfohtml;
         }
 
+        function show_modal(message) {
+            var modal = document.getElementById("modal");
+            var modalcontent = document.getElementById("modalcontent");
+            modalcontent.innerHTML = message;
+            modal.style.display = "block";
+            var span = document.getElementsByClassName("close")[0];
+            span.onclick = function() {
+                modal.style.display = "none";
+            }
+            window.onclick = function(event) {
+                if (event.target == modal) {
+                    modal.style.display = "none";
+                }
+            }
+        }
+
+        function hide_modal() {
+            var modal = document.getElementById("modal");
+            modal.style.display = "none";
+        }
+
         function process_search(conditions) {
             // urldecode
             //conditions = decodeURIComponent(conditions);
@@ -432,8 +453,10 @@
             console.log("url: " + url);
             // request API for node info
             var request = new XMLHttpRequest();
+            show_modal("Loading search results...");
             request.open('GET', url, true);
             request.onload = function() {
+                hide_modal();
                 console.log("request.status: " + request.status);
                 if (request.status >= 200 && request.status < 400) {
                     var data = JSON.parse(request.responseText);
@@ -444,6 +467,8 @@
             };
             request.onerror = function() {
                 // There was a connection error of some sort
+                hide_modal();
+                alert("Error: " + request.status);
             };
             request.send();
         }
@@ -544,14 +569,16 @@
                 parseParameters(url);
             }
             displayMenu();
-            // event on nodeinfo double click
-            var nodeinfo = document.getElementById("nodeinfo");
-            nodeinfo.addEventListener("dblclick", nodeclick);
         }
     </script>
 </head>
 <body onload="onLoad()">
 <!-- nice horizontal menu at top -->
+<div id="modal" class="modal" style="display: none;">
+    <div class="modal-content" id="modalcontent">
+        <span class="close">&times;</span>
+    </div>
+</div>
 <div id="menu">
 </div>
 <div id="requestinfo"></div>