Merge pull request #107 from narspt/patch-5

dashboard: smooth page refresh with jquery

dashboard/css/layout.css

@@ -10,6 +10,10 @@ h1 {
    font-size            : 25pt;
 }
 
+a img {
+   border: 0;
+}
+
 a.tip {
    text-decoration      : none;
 }
@@ -117,18 +121,19 @@ a.tip:hover span {
 .listingtable th {
    height               : 35px;
    text-align           : center;
-   background-image: -webkit-gradient(
-	linear,
-	left top,
-	left bottom,
-	color-stop(0, rgb(201, 231, 233)),
-	color-stop(0.8, rgb(220, 237, 244))
-);
-background-image: -o-linear-gradient(bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
-background-image: -moz-linear-gradient(bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
-background-image: -webkit-linear-gradient(bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
-background-image: -ms-linear-gradient(bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
-background-image: linear-gradient(to bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
+   background-color     : #D5EBF0;
+   background-image     : -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      color-stop(0, rgb(201, 231, 233)),
+      color-stop(0.8, rgb(220, 237, 244))
+   );
+   background-image: -o-linear-gradient(bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
+   background-image: -moz-linear-gradient(bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
+   background-image: -webkit-linear-gradient(bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
+   background-image: -ms-linear-gradient(bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
+   background-image: linear-gradient(to bottom, rgb(201, 231, 233) 0%, rgb(220, 237, 244) 80%);
 }
 
 .listingtable td {
@@ -136,7 +141,7 @@ background-image: linear-gradient(to bottom, rgb(201, 231, 233) 0%, rgb(220, 237
 }      
 
 .listinglink {
-   font-size             : 12pt;
+   font-size            : 12pt;
    text-decoration      : underline;
    color                : #60A1DE;
 }

dashboard/index.php

@@ -94,32 +94,32 @@ else {
 
    if ($PageOptions['PageRefreshActive']) {
       echo '
+   <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
       var PageRefresh;
       
-      function ReloadPage() {';
-     if (($_SERVER['REQUEST_METHOD'] === 'POST') || isset($_GET['do'])) {
-       echo '
-         document.location.href = "./index.php';
-       if (isset($_GET['show'])) {
-         echo '?show='.$_GET['show'];
-       }
-       echo '";';
-     } else {
-       echo '
-         document.location.reload();';
-     }
-     echo '
+      function ReloadPage() {
+         $.get("./index.php'.(isset($_GET['show'])?'?show='.$_GET['show']:'').'", function(data) {
+            var BodyStart = data.indexOf("<bo"+"dy");
+            var BodyEnd = data.indexOf("</bo"+"dy>");
+            if ((BodyStart >= 0) && (BodyEnd > BodyStart)) {
+               BodyStart = data.indexOf(">", BodyStart)+1;
+               $("body").html(data.substring(BodyStart, BodyEnd));
+            }
+         })
+            .always(function() {
+               PageRefresh = setTimeout(ReloadPage, '.$PageOptions['PageRefreshDelay'].');
+            });
       }';
 
      if (!isset($_GET['show']) || (($_GET['show'] != 'liveircddb') && ($_GET['show'] != 'reflectors') && ($_GET['show'] != 'interlinks'))) {
          echo '
-     PageRefresh = setTimeout(ReloadPage, '.$PageOptions['PageRefreshDelay'].');';
+      PageRefresh = setTimeout(ReloadPage, '.$PageOptions['PageRefreshDelay'].');';
      }
      echo '
 
       function SuspendPageRefresh() {
-        clearTimeout(PageRefresh);
+         clearTimeout(PageRefresh);
       }
    </script>';
    }