NEW FEATURE: added ajax loader
This commit is contained in:
parent
bf62350d18
commit
e45f756177
|
@ -27,6 +27,11 @@ function initRunNowButtons() {
|
||||||
document.querySelectorAll('.runnow').forEach(elem => elem.addEventListener("click", event => {
|
document.querySelectorAll('.runnow').forEach(elem => elem.addEventListener("click", event => {
|
||||||
let me = event.currentTarget;
|
let me = event.currentTarget;
|
||||||
let href = me.dataset.href;
|
let href = me.dataset.href;
|
||||||
|
|
||||||
|
document.querySelector('.container-fluid').classList.add('blur');
|
||||||
|
document.querySelector('.runnow-overlay').classList.add('d-block');
|
||||||
|
document.querySelector('.runnow-overlay').classList.remove('d-none');
|
||||||
|
|
||||||
fetch(href, { method: 'GET' })
|
fetch(href, { method: 'GET' })
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
|
@ -56,6 +61,10 @@ function initRunNowButtons() {
|
||||||
}
|
}
|
||||||
|
|
||||||
var bsModal = new Modal('#runnow_result').show();
|
var bsModal = new Modal('#runnow_result').show();
|
||||||
|
|
||||||
|
document.querySelector('.container-fluid').classList.remove('blur');
|
||||||
|
document.querySelector('.runnow-overlay').classList.remove('d-block');
|
||||||
|
document.querySelector('.runnow-overlay').classList.add('d-none');
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|
|
@ -4,6 +4,33 @@
|
||||||
tr.norun td {
|
tr.norun td {
|
||||||
background-color: #f8d7da;
|
background-color: #f8d7da;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.running td {
|
tr.running td {
|
||||||
background-color: #d4edda;
|
background-color: #d4edda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blur {
|
||||||
|
filter: blur(3px);
|
||||||
|
}
|
||||||
|
.runnow-overlay {
|
||||||
|
.runnow-blur {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.runnow-content {
|
||||||
|
font-size: 10px;
|
||||||
|
height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
top: 50%;
|
||||||
|
width: 100px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -50px;
|
||||||
|
margin-top: -50px;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -35,6 +35,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% block extrahtml %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
@ -48,9 +48,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
|
{% endblock %}
|
||||||
<img src="/public/images/ajax-loader.gif" alt="loading">
|
|
||||||
|
{% block extrahtml %}
|
||||||
|
<div class="runnow-overlay d-none">
|
||||||
|
<div class="runnow-content">
|
||||||
|
<img src="/images/ajax-loader.gif" alt="loading">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="runnow-blur"></div>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block styles %}
|
{% block styles %}
|
||||||
|
|
Loading…
Reference in New Issue