From ea2ec571c72256834614f6b36f6652dfb59dfd6f Mon Sep 17 00:00:00 2001
From: Denys Fedoryshchenko <denys.f@collabora.com>
Date: Thu, 10 Oct 2024 11:07:49 +0300
Subject: [PATCH] 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 <denys.f@collabora.com>
---
 api/templates/viewer.html | 67 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 3 deletions(-)

diff --git a/api/templates/viewer.html b/api/templates/viewer.html
index 2641f718..21bbe476 100644
--- 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>