Final version of jquery pause / resume for page refresh

html/includes/print-menubar.php

@@ -452,12 +452,19 @@ if ($_SESSION['userlevel'] >= '10')
              <li><a href="api-access/"><img src="images/16/script.png" /> API Settings</a></li>
              <li><a href="https://github.com/librenms/librenms/wiki/API-Docs" target="_blank"><img src="images/16/report.png" /> API Documentation</a></li>
            </ul>
+           </li>
            <li role="presentation" class="divider"></li>');
     } ?>
 <?php
 if ($_SESSION['authenticated'])
 {
   echo('
+           <li class="dropdown-submenu">
+               <a href="#"><span class="countdown_timer" id="countdown_timer"></span></a>
+               <ul class="dropdown-menu scrollable-menu">
+                   <li><a href="#"><span class="countdown_timer_status" id="countdown_timer_status"></span></a></li>
+               </ul>
+           </li>
            <li><a href="logout/"><img src="images/16/lock_go.png" with="16" height="16" alt="Logout"> Logout</a></li>
 ');
 }

html/index.php

@@ -342,15 +342,55 @@ if (is_array($sql_debug) && is_array($php_debug)) {
 
 if ($no_refresh !== TRUE && $config['page_refresh'] != 0) {
     $refresh = $config['page_refresh'] * 1000;
-    echo('<script> type="text/javascript">
+    echo('<script type="text/javascript">
         $(document).ready(function() {
-            setInterval("refreshPage()", '. $refresh .');
+
+           $("#countdown_timer_status").html("<img src=\"images/16/clock_pause.png\"> Pause");
+           var Countdown = {
+               sec: '. $config['page_refresh'] .',
+
+               Start: function() {
+                   var cur = this;
+                   this.interval = setInterval(function() {
+                       $("#countdown_timer_status").html("<img src=\"images/16/clock_pause.png\"> Pause");
+                       cur.sec -= 1;
+                       display_time = cur.sec;
+                       if (display_time == 0) {
+                           location.reload();
+                       }
+                       if (display_time % 1 === 0 && display_time <= 300) {
+                           $("#countdown_timer").html("<img src=\"images/16/clock.png\"> Refresh in " + display_time);
+                       }
+                   }, 1000);
+               },
+
+               Pause: function() {
+                   clearInterval(this.interval);
+                   $("#countdown_timer_status").html("<img src=\"images/16/clock_play.png\"> Resume");
+                   delete this.interval;
+               },
+
+               Resume: function() {
+                   if (!this.interval) this.Start();
+               }
+           };
+
+           Countdown.Start();
+
+           $("#countdown_timer_status").click("", function(event) {
+               event.preventDefault();
+               if (Countdown.interval) {
+                   Countdown.Pause();
+               } else {
+                   Countdown.Resume();
+               }
+           });
+
+           $("#countdown_timer").click("", function(event) {
+               event.preventDefault();
+           });
+
         });
-
-        function refreshPage() {
-            location.reload();
-        }
-
     </script>');
 
 }