From 3147f68899e61f409121ef4dbdfc89422c16cb36 Mon Sep 17 00:00:00 2001
From: Bofh <bofh@nogafam.es>
Date: Sat, 17 Dec 2022 13:03:03 +0100
Subject: [PATCH] Added UI loader for http requests

---
 css/base.php       | 52 ++++++++++++++++++++++++++++++++++++++++++++++
 index.php          |  6 ++++++
 js/base.php        | 42 +++++++++++++++++++++++++++++++++++++
 views/instance.php |  5 ++++-
 4 files changed, 104 insertions(+), 1 deletion(-)

diff --git a/css/base.php b/css/base.php
index 6335467..160de99 100644
--- a/css/base.php
+++ b/css/base.php
@@ -54,6 +54,22 @@ body > .toast-container {
 .toast.error {
 	background: #9b1919;
 }
+#overlay, .overlay {
+	position: fixed;
+	display: flex;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: #0000009e;
+	z-index: 1000;
+}
+#overlay > *, .overlay > * {
+	margin: auto;
+}
+#overlay span, .overlay span {
+	color: #fff;
+}
 
 .window.hidden { display: none !important }
 *[id*="-item"] { display: none !important }
@@ -337,4 +353,40 @@ table.fields tr.verified td .fa.fa-check::before {
 	margin-top: .4em;
 }
 
+/* ANIMATIONS*/
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/index.php b/index.php
index a67ab6e..f30d6d6 100644
--- a/index.php
+++ b/index.php
@@ -43,6 +43,12 @@ function apcontrol_title(str) {
 <?php endforeach ?>
 </main>
 <div id="toast-container"></div>
+<div id="overlay-loader"></div>
+<div id="overlay-loader-item">
+	<div class="overlay" onclick="if ({cancelable}) http.abort()">
+		<div class="content">{content}</div>
+	</div>
+</div>
 
 <?php require 'js/base.php' ?>
 
diff --git a/js/base.php b/js/base.php
index d4db603..88823bd 100644
--- a/js/base.php
+++ b/js/base.php
@@ -76,6 +76,34 @@ var E = {
 		});
 	},
 	custom: {
+		loader: {
+			show: function(text, cancelable) {
+				text = text || 'Loading...';
+				E.custom.overlay(`
+				<div class="flex" style="max-width: 30em">
+					<div class="lds-ring" style="transform: scale(70%);
+						width: 10em">
+						<div></div><div></div>
+						<div></div><div></div>
+					</div>
+					<div class="flex">
+						<span class="center">${text}</span>
+					</div>
+				</div>
+				`, cancelable);
+			},
+			hide: function() {
+				E.elemid('overlay-loader').innerHTML = '';
+			},
+		},
+		overlay: function(html, cancelable) {
+			cancelable = [undefined, true].includes(cancelable) ? 'true' : 'false';
+			E.template('overlay-loader', function(tpl) {
+				tpl = tpl.replaceAll('{cancelable}', cancelable);
+				tpl = tpl.replaceAll('{content}', html);
+				return tpl;
+			});
+		},
 		btncollapse_render: function() {
 			E.elements('button[id*="btncollapse-"]').forEach(function(it) {
 				it.setAttribute('onclick', 'E.custom.btncollapse_click(this)');
@@ -290,9 +318,19 @@ function uuidv4() {
 	});
 }
 
+window.http_requests = {};
 const http = {
+	abort: function() {
+		const ks = Object.keys(window.http_requests);
+		for (var i = 0; i < ks.length; i++) {
+			window.http_requests[ks[i]].abort();
+			delete window.http_requests[ks[i]];
+		}
+		E.custom.loader.hide();
+	},
 	request: function(method, path, payload, callbk) {
 		//console.log(path); printstack();
+		const httpid = uuidv4();
 		const httpdiv = document.getElementById('http');
 		const httpts  = new Date().getTime();
 		if (httpdiv !== null)
@@ -302,6 +340,9 @@ const http = {
 		callbk = callbk || null;
 		const oReq = new XMLHttpRequest();
 		oReq.addEventListener("load", function() {
+			delete window.http_requests[httpid];
+			E.custom.loader.hide();
+
 			if (httpdiv !== null) {
 				const hit = document.getElementById('http-'+httpts);
 				if (hit !== null) hit.remove();
@@ -325,6 +366,7 @@ const http = {
 		oReq.open(method, path);
 		oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 		oReq.send(JSON_to_URLEncoded(payload));
+		window.http_requests[httpid] = oReq;
 	},
 	get: function(path, payload, callbk) {
 		return http.request('GET',  path, payload, callbk);
diff --git a/views/instance.php b/views/instance.php
index a8d30bf..4e26790 100644
--- a/views/instance.php
+++ b/views/instance.php
@@ -322,7 +322,10 @@ window.view.instance = {
 				if (page === 'null') return;
 				page--; if (page < 0) page = 0;
 
-				E.template('users-all', 'Loading query...');
+				var loader_msg = 'Loading query...';
+				if (data.user_filter === 'remote')
+					loader_msg = 'Loading query (this may take up to 10 minutes, depending on your instance users)...';
+				E.custom.loader.show(loader_msg, true);
 				http.get(`api/v1/database/${hargs.software}/accounts/search?${payload}&paging=${page},${items_per_page}`, data, function(js) {
 					if (js === undefined) return toast.error('Could not process the query result');
 					if (js.ok !== undefined) return toast.info(js.ok);