Merge pull request #412 from pi-hole/tweak/customDisableTimeGlovalCountdown

Show disable timer across all devices

api.php

@@ -71,6 +71,7 @@
     if (isset($_GET['enable'], $_GET['token']) && $auth) {
         check_csrf($_GET['token']);
         exec('sudo pihole enable');
+        unlink("../custom_disable_timer");
         $data = array_merge($data, Array(
             "status" => "enabled"
         ));
@@ -81,11 +82,14 @@
         // intval returns the integer value on success, or 0 on failure
         if($disable > 0)
         {
+            $timestamp = time();
             exec("sudo pihole disable ".$disable."s");
+            file_put_contents("../custom_disable_timer",($timestamp+$disable)*1000);
         }
         else
         {
             exec('sudo pihole disable');
+            unlink("../custom_disable_timer");
         }
         $data = array_merge($data, Array(
             "status" => "disabled"

scripts/pi-hole/js/footer.js

@@ -14,6 +14,35 @@ $("body").on("click", function(event) {
     }
 });
 
+//The following functions allow us to display time until pi-hole is enabled after disabling.
+//Works between all pages
+
+function secondsTimeSpanToHMS(s) {
+    var h = Math.floor(s/3600); //Get whole hours
+    s -= h*3600;
+    var m = Math.floor(s/60); //Get remaining minutes
+    s -= m*60;
+    return h+":"+(m < 10 ? "0"+m : m)+":"+(s < 10 ? "0"+s : s); //zero padding on minutes and seconds
+}
+
+function countDown(){
+    var ena = $("#enableLabel");
+    var enaT = $("#enableTimer");
+    var target = new Date(parseInt(enaT.html()));
+    var seconds = Math.round((target.getTime() - new Date().getTime()) / 1000);
+
+    if(seconds > 0){
+        setTimeout(countDown,1000);
+        ena.text("Enable (" + secondsTimeSpanToHMS(seconds) + ")");
+    }
+    else
+    {
+        ena.text("Enable");
+        piholeChanged("enabled");
+        localStorage.removeItem("countDownTarget");
+    }
+}
+
 function piholeChanged(action)
 {
     var status = $("#status");
@@ -40,6 +69,7 @@ function piholeChanged(action)
 function piholeChange(action, duration)
 {
     var token = encodeURIComponent($("#token").html());
+    var enaT = $("#enableTimer");
     var btnStatus;
 
     switch(action) {
@@ -61,52 +91,21 @@ function piholeChange(action, duration)
                 if(data.status === "disabled") {
                     btnStatus.html("");
                     piholeChanged("disabled");
+                    enaT.html(new Date().getTime() + duration * 1000);
+                    setTimeout(countDown,100);
                 }
             });
             break;
     }
 }
 
-//The following three functions allow us to display time until pi-hole is enabled after disabling.
-//Works between all pages
-
-
-function setCountdownTarget(seconds){
-    var target = new Date();
-    target = new Date(target.getTime() + seconds * 1000);
-    localStorage.setItem("countDownTarget", target);
-}
-
-function secondsTimeSpanToHMS(s) {
-    var h = Math.floor(s/3600); //Get whole hours
-    s -= h*3600;
-    var m = Math.floor(s/60); //Get remaining minutes
-    s -= m*60;
-    return h+":"+(m < 10 ? "0"+m : m)+":"+(s < 10 ? "0"+s : s); //zero padding on minutes and seconds
-}
-
-function countDown(){
-    var ena = $("#enableLabel");
-    var target = new Date(localStorage.getItem("countDownTarget"));
-    var seconds = Math.round((target.getTime() - new Date().getTime()) / 1000);
-
-    if(seconds > 0){
-        setTimeout(countDown,1000);
-        ena.text("Enable (" + secondsTimeSpanToHMS(seconds) + ")");
-    }
-    else
-    {
-        ena.text("Enable");
-        piholeChanged("enabled");
-        localStorage.removeItem("countDownTarget");
-    }
-}
-
 $( document ).ready(function() {
-    var countDownTarget = localStorage.getItem("countDownTarget");
-    if (countDownTarget != null)
+    var enaT = $("#enableTimer");
+    var target = new Date(parseInt(enaT.html()));
+    var seconds = Math.round((target.getTime() - new Date().getTime()) / 1000);
+    if (seconds > 0)
     {
-        setTimeout(countDown,1000);
+        setTimeout(countDown,100);
     }
 });
 
@@ -123,28 +122,20 @@ $("#pihole-disable-permanently").on("click", function(e){
 $("#pihole-disable-10s").on("click", function(e){
     e.preventDefault();
     piholeChange("disable","10");
-    setCountdownTarget(10);
-    setTimeout(countDown,1000);
 });
 $("#pihole-disable-30s").on("click", function(e){
     e.preventDefault();
     piholeChange("disable","30");
-    setCountdownTarget(30);
-    setTimeout(countDown,1000);
 });
 $("#pihole-disable-5m").on("click", function(e){
     e.preventDefault();
     piholeChange("disable","300");
-    setCountdownTarget(300);
-    setTimeout(countDown,1000);
 });
 $("#pihole-disable-custom").on("click", function(e){
     e.preventDefault();
     var custVal = $("#customTimeout").val();
     custVal = $("#btnMins").hasClass("active") ? custVal * 60 : custVal;
     piholeChange("disable",custVal);
-    setCountdownTarget(custVal);
-    setTimeout(countDown,1000);
 });
 
 

scripts/pi-hole/php/header.php

@@ -182,6 +182,7 @@
 <script src="scripts/pi-hole/js/header.js"></script>
 <!-- Send token to JS -->
 <div id="token" hidden><?php if($auth) echo $token; ?></div>
+<div id="enableTimer" hidden><?php if(file_exists("../custom_disable_timer")){ echo file_get_contents("../custom_disable_timer"); } ?></div>
 <div class="wrapper">
     <header class="main-header">
         <!-- Logo -->