NEW FEATURE: added ajax loader

assets/job/index.js

@@ -27,6 +27,11 @@ function initRunNowButtons() {
     document.querySelectorAll('.runnow').forEach(elem => elem.addEventListener("click", event => {
         let me = event.currentTarget;
         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' })
             .then(response => response.json())
             .then(data => {
@@ -56,6 +61,10 @@ function initRunNowButtons() {
                 }
 
                 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');
             })
         })
     )

assets/job/index.scss

@@ -4,6 +4,33 @@
 tr.norun td {
   background-color: #f8d7da;
 }
+
 tr.running td {
   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;
+  }
 }

templates/base.html.twig

@@ -35,6 +35,8 @@
                 </div>
             </div>
         </div>
+
+        {% block extrahtml %}{% endblock %}
     </body>
 </html>
 

templates/job/index.html.twig

@@ -48,9 +48,15 @@
             </div>
         </div>
     </div>
-    <div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
-        <img src="/public/images/ajax-loader.gif" alt="loading">
+{% endblock %}
+
+{% block extrahtml %}
+<div class="runnow-overlay d-none">
+    <div class="runnow-content">
+        <img src="/images/ajax-loader.gif" alt="loading">
     </div>
+    <div class="runnow-blur"></div>
+</div>
 {% endblock %}
 
 {% block styles %}