Implement DNS control (enable/disable blocking, possibly with a given timeout)

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/js/footer.js

@@ -18,27 +18,20 @@ function secondsTimeSpanToHMS(s) {
   return h + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s); //zero padding on minutes and seconds
 }
 
-function piholeChanged(action) {
+function piholeChanged(blocking) {
   var status = $("#status");
   var ena = $("#pihole-enable");
   var dis = $("#pihole-disable");
 
-  switch (action) {
-    case "enabled":
-      status.html("<i class='fa fa-circle text-green-light'></i> Active");
+  if (blocking) {
+    status.html("<i class='fa fa-circle fa-fw text-green-light'></i>&nbsp;Active");
     ena.hide();
     dis.show();
     dis.removeClass("active");
-      break;
-
-    case "disabled":
-      status.html("<i class='fa fa-circle text-red'></i> Blocking disabled");
+  } else {
+    status.html("<i class='fa fa-circle fa-fw text-red'></i>&nbsp;Blocking disabled");
     ena.show();
     dis.hide();
-      break;
-
-    default:
-    // nothing
   }
 }
 
@@ -66,41 +59,61 @@ function countDown() {
   }
 }
 
+function checkBlocking() {
+  $.ajax({
+    url: "/api/dns/blocking",
+    method: "GET",
+  })
+    .done(function (data) {
+      piholeChanged(data.blocking);
+
+      setTimeout(checkBlocking, 2500);
+    })
+    .fail(function (data) {
+      apiFailure(data);
+
+      setTimeout(checkBlocking, 5000);
+    });
+}
+
 function piholeChange(action, duration) {
-  var token = encodeURIComponent($("#token").text());
   var enaT = $("#enableTimer");
   var btnStatus;
 
   switch (action) {
     case "enable":
       btnStatus = $("#flip-status-enable");
-      btnStatus.html("<i class='fa fa-spinner'> </i>");
-      $.getJSON("api.lp?enable&token=" + token, function (data) {
-        if (data.status === "enabled") {
-          btnStatus.html("");
-          piholeChanged("enabled");
-        }
-      });
       break;
-
     case "disable":
       btnStatus = $("#flip-status-disable");
-      btnStatus.html("<i class='fa fa-spinner'> </i>");
-      $.getJSON("api.lp?disable=" + duration + "&token=" + token, function (data) {
-        if (data.status === "disabled") {
+      break;
+    default: // Do nothing
+      break;
+  }
+
+  btnStatus.html("<i class='fa fa-spinner fa-spin'> </i>");
+  const blocking = action === "enable";
+  $.ajax({
+    url: "/api/dns/blocking",
+    method: "POST",
+    data: JSON.stringify({
+      blocking: blocking,
+      timer: parseInt(duration, 10) > 0 ? parseInt(duration, 10) : null,
+    }),
+  })
+    .done(function (data) {
+      if (data.blocking === blocking) {
         btnStatus.html("");
-          piholeChanged("disabled");
+        piholeChanged(blocking);
         if (duration > 0) {
           enaT.html(Date.now() + duration * 1000);
           setTimeout(countDown, 100);
         }
       }
+    })
+    .fail(function (data) {
+      apiFailure(data);
     });
-      break;
-
-    default:
-    // nothing
-  }
 }
 
 function testCookies() {
@@ -558,6 +571,7 @@ $("#settings-level").on("change", function () {
 });
 
 $(function () {
+  checkBlocking();
   initSettingsLevel();
 });
 

scripts/pi-hole/js/groups-common.js

@@ -5,6 +5,8 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
+/* global apiFailure:false */
+
 // eslint-disable-next-line no-unused-vars
 var groups = [];
 
@@ -17,5 +19,8 @@ function getGroups() {
     success: function (data) {
       groups = data.groups;
     },
+    error: function (data) {
+      apiFailure(data);
+    },
   });
 }

scripts/pi-hole/lua/sidebar.lp

@@ -17,7 +17,7 @@
                 </div>
                 <div class="pull-left info">
                     <p>Status</p>
-                    <span id="status"></span>
+                    <span id="status"></span><br/>
                     <span id="temperature"></span><br/>
                     <span id="cpu"></span><br/>
                     <span id="memory"></span>
@@ -81,7 +81,7 @@
                 <!-- Enable/Disable Blocking -->
                 <li id="pihole-disable" class="menu-dns treeview">
                     <a href="#">
-                        <i class="fa fa-fw menu-icon fa-stop"></i> <span class="text-red">Disable Blocking&nbsp;&nbsp;&nbsp;<span id="flip-status-disable"></span></span>
+                        <i class="fa fa-fw menu-icon fa-stop"></i> <span class="text-green">Disable Blocking&nbsp;&nbsp;&nbsp;<span id="flip-status-disable"></span></span>
                         <span class="pull-right-container">
                             <i class="fa fa-angle-left pull-right"></i>
                         </span>
@@ -115,10 +115,10 @@
                     </ul>
                     <!-- <a href="#" id="flip-status"><i class="fa fa-stop"></i> <span>Disable</span></a> -->
                 </li>
-                <li id="pihole-enable" class="menu-dns treeview">
+                <li id="pihole-enable" class="menu-dns treeview" style="display: none;">
                     <a href="#">
                         <i class="fa fa-fw menu-icon fa-play"></i>
-                        <span id="enableLabel" class="text-red">Enable Blocking&nbsp;&nbsp;&nbsp;
+                        <span id="enableLabel" class="text-green">Enable Blocking&nbsp;&nbsp;&nbsp;
                             <span id="flip-status-enable"></span>
                         </span>
                     </a>