Some fixes to disabled buttons and bootstrap grid (#116)

Christoffer-Cortes · web-flow · commit 62461c4bcac0 · 2018-12-03T08:26:18.000+01:00
* Button disable to tied to backend status check and css is not switched

* Change column css and add small timed check to disable collapsed buttons
diff --git a/src/main/resources/static/js/subscription.js b/src/main/resources/static/js/subscription.js
@@ -74,6 +74,7 @@ jQuery(document).ready(function () {
                 backendStatus = true;
             },
             complete: function () {
+                toggleOnBackendStatus(backendStatus);
                 setTimeout(loadSubButtons, 800);
             }
         });
@@ -89,21 +90,25 @@ jQuery(document).ready(function () {
     window.setInterval(function () { checkBackendStatus(); }, 15000);
 
     // Check if buttons should be enabled or disabled
-    // Execute code to show or hide status enable disable buttons
-    var buttonsDisabled = false;
-    window.setInterval(function () {
-        if (!backendStatus && !buttonsDisabled) {
-            $("#back_end_down_warning").show();
-            $(".hidden_by_default").show();
-            buttonsDisabled = true;
-            toggleButtonsDisabled(buttonsDisabled);
-        } else if (backendStatus && buttonsDisabled) {
-            $("#back_end_down_warning").hide();
-            buttonsDisabled = false;
-            toggleButtonsDisabled(buttonsDisabled);
+    // Toggle warning text on and off
+    // Check backend status to shrink or increase space for warning to show
+    function toggleOnBackendStatus(backendStatus) {
+        if(!backendStatus && !$("#back_end_down_warning").is(":visible")) {
+            $("#subTitle").parent().removeClass("col-md-9");
+            $("#btnEIContainer").parent().removeClass("col-md-3");
+            $("#subTitle").parent().addClass("col-md-4");
+            $("#btnEIContainer").parent().addClass("col-md-2");
+        }
+        if(backendStatus && $("#back_end_down_warning").is(":visible")) {
+            $("#subTitle").parent().removeClass("col-md-4");
+            $("#btnEIContainer").parent().removeClass("col-md-2");
+            $("#subTitle").parent().addClass("col-md-9");
+            $("#btnEIContainer").parent().addClass("col-md-3");
             reload_table();
         }
-    }, 1000);
+        $("#back_end_down_warning").toggle(!backendStatus);
+        toggleButtonsDisabled(!backendStatus);
+    }
 
     // Check if EI Backend Server is online when Status Connection button is pressed.
     $("#btnEIConnection").click(function () {
@@ -381,7 +386,7 @@ jQuery(document).ready(function () {
                     "targets": [0],
                     "orderable": false,
                     "className": "control",
-                    "data":"subscriptionName",
+                    "data": "subscriptionName",
                     "render": function (data, type, row, meta) {
                         return '';
                     }
@@ -460,6 +465,9 @@ jQuery(document).ready(function () {
                 $("#check-all").click(function () {
                     $(".data-check").prop('checked', $(this).prop('checked'));
                 });
+                $(".control").click(function () {
+                    setTimeout(function () { toggleOnBackendStatus(backendStatus); }, 50);
+                });
             }
         });
     };
diff --git a/src/main/resources/templates/subscription.html b/src/main/resources/templates/subscription.html
@@ -16,15 +16,15 @@
 <body>
     <div class="d-none" id="subscriptionTemplate" th:text="${subscriptionTemplate}"></div>
     <div class="d-flex flex-wrap">
-        <div class="col-md-4 col-6 order-md-0">
-            <h3>Eiffel Intelligence Subscription Handling</h3>
+        <div class="col-md-9 col-sm-8 col-6 order-md-0">
+            <h3 id="subTitle">Eiffel Intelligence Subscription Handling</h3>
         </div>
-        <div class="col-md-6 col-12 order-last order-md-1">
-            <span id="back_end_down_warning" class="hidden_by_default">
+        <div id="back_end_down_warning" class="col-md-6 col-12 order-last order-md-1 hidden_by_default">
+            <span>
                 Ensure back end is up or switch to another back end before continuing!
             </span>
         </div>
-        <div class="col-md-2 col-6 order-md-2 d-flex justify-content-end">
+        <div class="col-md-3 col-sm-4 col-6 order-md-2 d-flex justify-content-end">
             <div id="btnEIContainer">
                 <button title="EI connection status check is refreshed continuously. Click button to force check status."
                     type="button" id="btnEIConnection" class="btn btnEIConnectionStatus white-space-normal">
