Merge pull request #616 from Th3M3/AddToList_Modal

replace Alerts with Modal on queries.php page

queries.php

@@ -88,18 +88,35 @@ if(strlen($showing) > 0)
 </div>
 -->
 
-<!-- Alerts -->
+<!-- Alert Modal -->
-<div id="alInfo" class="alert alert-info alert-dismissible fade in" role="alert" hidden="true">
+<div id="alertModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
-    <button type="button" class="close" data-hide="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <div class="vertical-alignment-helper">
-    Adding <span id="alDomain"></span> to the <span id="alList"></span>...
+        <div class="modal-dialog vertical-align-center">
-</div>
+            <div class="modal-content">
-<div id="alSuccess" class="alert alert-success alert-dismissible fade in" role="alert" hidden="true">
+                <div class="modal-body text-center">
-    <button type="button" class="close" data-hide="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <span class="fa-stack fa-2x" style="margin-bottom: 10px">
-    Success!
+                        <div class="alProcessing">
-</div>
+                            <i class="fa-stack-2x alSpinner"></i>
-<div id="alFailure" class="alert alert-danger alert-dismissible fade in" role="alert" hidden="true">
+                        </div>
-    <button type="button" class="close" data-hide="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <div class="alSuccess" style="display: none">
-    Failure! Something went wrong.<span id="err"></span>
+                            <i class="fa fa-circle fa-stack-2x text-green"></i>
+                            <i class="fa fa-check fa-stack-1x fa-inverse"></i>
+                        </div>
+                        <div class="alFailure" style="display: none">
+                            <i class="fa fa-circle fa-stack-2x text-red"></i>
+                            <i class="fa fa-times fa-stack-1x fa-inverse"></i>
+                        </div>
+                    </span>
+                    <div class="alProcessing">Adding <span id="alDomain"></span> to the <span id="alList"></span>...</div>
+                    <div class="alSuccess text-bold text-green" style="display: none"><span id="alDomain"></span> successfully added to the <span id="alList"></span></div>
+                    <div class="alFailure text-bold text-red" style="display: none">
+                        <span id="alNetErr">Timeout or Network Connection Error!</span>
+                        <span id="alCustomErr"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <div class="row">

scripts/pi-hole/js/queries.js

@@ -22,62 +22,76 @@ function refreshData() {
 
 function add(domain,list) {
     var token = $("#token").html();
-    var alInfo = $("#alInfo");
+    var alertModal = $("#alertModal");
-    var alList = $("#alList");
+    var alProcessing = alertModal.find(".alProcessing");
-    var alDomain = $("#alDomain");
+    var alSuccess = alertModal.find(".alSuccess");
-    alDomain.html(domain);
+    var alFailure = alertModal.find(".alFailure");
-    var alSuccess = $("#alSuccess");
+    var alNetworkErr = alertModal.find(".alFailure #alNetErr");
-    var alFailure = $("#alFailure");
+    var alCustomErr = alertModal.find(".alFailure #alCustomErr");
-    var err = $("#err");
+    var alList = "#alList";
+    var alDomain = "#alDomain";
 
-    if(list === "white")
+    // Exit the function here if the Modal is already shown (multiple running interlock)
-    {
+    if (alertModal.css("display") !== "none") {
-        alList.html("Whitelist");
+        return;
-    }
-    else
-    {
-        alList.html("Blacklist");
     }
 
-    alInfo.show();
+    var listtype;
-    alSuccess.hide();
+    if (list === "white") {
-    alFailure.hide();
+        listtype = "Whitelist";
+    } else {
+        listtype = "Blacklist";
+    }
+    alProcessing.children(alDomain).html(domain);
+    alProcessing.children(alList).html(listtype);
+    alertModal.modal("show");
+
+    // add Domain to List after Modal has faded in
+    alertModal.one("shown.bs.modal", function() {
         $.ajax({
             url: "scripts/pi-hole/php/add.php",
             method: "post",
             data: {"domain":domain, "list":list, "token":token},
             success: function(response) {
-            if (response.indexOf("not a valid argument") >= 0 || response.indexOf("is not a valid domain") >= 0)
+                alProcessing.hide();
+                if (response.indexOf("not a valid argument") >= 0 ||
+                    response.indexOf("is not a valid domain") >= 0 ||
+                    response.indexOf("Wrong token") >= 0)
                 {
-                alFailure.show();
+                    // Failure
-                err.html(response);
+                    alNetworkErr.hide();
-                alFailure.delay(4000).fadeOut(2000, function() { alFailure.hide(); });
+                    alCustomErr.html(response.replace("[✗]", ""));
+                    alFailure.fadeIn(1000);
+                    setTimeout(function() { alertModal.modal("hide"); }, 3000);
                 }
                 else
                 {
-                alSuccess.show();
+                    // Success
-                alSuccess.delay(1000).fadeOut(2000, function() { alSuccess.hide(); });
+                    alSuccess.children(alDomain).html(domain);
+                    alSuccess.children(alList).html(listtype);
+                    alSuccess.fadeIn(1000);
+                    setTimeout(function() { alertModal.modal("hide"); }, 2000);
                 }
-            alInfo.delay(1000).fadeOut(2000, function() {
-                alInfo.hide();
-                alList.html("");
-                alDomain.html("");
-            });
             },
             error: function(jqXHR, exception) {
-            alFailure.show();
+                // Network Error
-            err.html("");
+                alProcessing.hide();
-            alFailure.delay(1000).fadeOut(2000, function() {
+                alNetworkErr.show();
-                alFailure.hide();
+                alFailure.fadeIn(1000);
-            });
+                setTimeout(function() { alertModal.modal("hide"); }, 3000);
-            alInfo.delay(1000).fadeOut(2000, function() {
-                alInfo.hide();
-                alList.html("");
-                alDomain.html("");
-            });
             }
         });
+    });
+        
+    // Reset Modal after it has faded out
+    alertModal.one("hidden.bs.modal", function() {
+        alProcessing.show();
+        alSuccess.add(alFailure).hide();
+        alProcessing.add(alSuccess).children(alDomain).html("").end().children(alList).html("");
+        alCustomErr.html("");
+    });
 }
+
 function handleAjaxError( xhr, textStatus, error ) {
     if ( textStatus === "timeout" )
     {

style/pi-hole.css

@@ -85,3 +85,33 @@ a.lookatme {
 	color: red;
 	font-weight: bold;
 }
+
+.vertical-alignment-helper {
+    display: table;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+.vertical-alignment-helper > .vertical-align-center {
+    display: table-cell;
+    vertical-align: middle;
+}
+.vertical-alignment-helper > .vertical-align-center > .modal-content {
+    width: 250px;
+    margin-left: auto;
+    margin-right: auto;
+    word-wrap: break-word;
+    pointer-events: all;
+}
+
+.alSpinner {
+    top: 0.1em;
+    left: 0.1em;
+    width: 0.8em;
+    height: 0.8em;
+    border-radius: 50%;
+    border: 4px solid silver;
+    border-right-color: transparent;
+    -webkit-animation: fa-spin 1s infinite linear;
+    animation: fa-spin 1s infinite linear;
+}