Added UI loader for http requests
This commit is contained in:
parent
c011be4f3f
commit
3147f68899
52
css/base.php
52
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>
|
||||
|
|
|
|||
|
|
@ -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' ?>
|
||||
|
||||
|
|
|
|||
42
js/base.php
42
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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue