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]>
JenySadadia · Oct 11, 2024 · ea2ec57 · ea2ec57
1 parent f62032d
commit ea2ec57
Showing 1 changed file with 64 additions and 3 deletions.
diff --git a/api/templates/viewer.html b/api/templates/viewer.html
@@ -99,6 +99,40 @@
             line-height: 20px; /* Fixed line height */
             white-space: pre-wrap; /* To wrap text and preserve spaces and line breaks */
         }
+        #modal {
+            display: none; /* Hidden by default */
+            position: fixed; /* Stay in place */
+            z-index: 1; /* Sit on top */
+            left: 0;
+            top: 0;
+            width: 100%; /* Full width */
+            height: 100%; /* Full height */
+            overflow: auto; /* Enable scroll if needed */
+            background-color: rgb(0,0,0); /* Fallback color */
+            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+        }
+        /* Modal Content/Box */
+        .modal-content {
+            background-color: #fefefe;
+            margin: 15% auto; /* 15% from the top and centered */
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%; /* Could be more or less, depending on screen size */
+        }
+        /* The Close Button */
+        .close {
+            color: #aaaaaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }
+        .close:hover,
+        .close:focus {
+            color: #000;
+            text-decoration: none;
+            cursor: pointer;
+        }
+
     </style>
     <script>
         var pagebaseurl;
@@ -413,6 +447,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 +487,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 +501,8 @@
             };
             request.onerror = function() {
                 // There was a connection error of some sort
+                hide_modal();
+                alert("Error: " + request.status);
             };
             request.send();
         }
@@ -544,14 +603,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">
+    </div>
+    <span class="close">&times;</span>
+</div>
 <div id="menu">
 </div>
 <div id="requestinfo"></div>