Port dashboard landing page to v6.0 API

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

scripts/pi-hole/js/footer.js

@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global utils:false */
+/* global utils:false, moment:false */
 //The following functions allow us to display time until pi-hole is enabled after disabling.
 //Works between all pages
 
@@ -158,53 +158,247 @@ function initCheckboxRadioStyle() {
   }
 }
 
-function initCPUtemp() {
-  function setCPUtemp(unit) {
-    if (localStorage) {
-      localStorage.setItem("tempunit", tempunit);
-    }
+var systemTimer, sensorsTimer, versionTimer;
+function updateInfo() {
+  updateSystemInfo();
+  updateSensorsInfo();
+  updateVersionInfo();
+}
 
-    var temperature = parseFloat($("#rawtemp").text());
-    var displaytemp = $("#tempdisplay");
-    if (!isNaN(temperature)) {
-      switch (unit) {
-        case "K":
-          temperature += 273.15;
-          displaytemp.html(temperature.toFixed(1) + " K");
-          break;
+function updateSystemInfo() {
+  $.ajax({
+    url: "/api/info/system",
+  })
+    .done(function (data) {
+      var system = data.system;
+      var memory = (100 * system.memory.ram.used) / system.memory.ram.total;
+      var totalGB = 1e-6 * system.memory.ram.total;
+      var swap =
+        system.memory.swap.total > 0
+          ? ((1e-6 * system.memory.swap.used) / system.memory.swap.total).toFixed(1) + " %"
+          : "N/A";
+      var color;
+      color = memory > 75 ? "text-red" : "text-green-light";
+      $("#memory").html(
+        '<i class="fa fa-circle ' +
+          color +
+          '"></i>&nbsp;Memory usage:&nbsp;' +
+          memory.toFixed(1) +
+          "&thinsp;%"
+      );
+      $("#memory").prop(
+        "title",
+        "Total memory: " + totalGB.toFixed(1) + " GB, Swap usage: " + swap
+      );
 
-        case "F":
-          temperature = (temperature * 9) / 5 + 32;
-          displaytemp.html(temperature.toFixed(1) + "&nbsp;&deg;F");
-          break;
+      color = system.cpu.load.percent[0] > 100 ? "text-red" : "text-green-light";
+      $("#cpu").html(
+        '<i class="fa fa-circle ' +
+          color +
+          '"></i>&nbsp;CPU:&nbsp;' +
+          system.cpu.load.percent[0].toFixed(1) +
+          "&thinsp;%"
+      );
+      $("#cpu").prop(
+        "title",
+        "Load: " +
+          system.cpu.load.raw[0].toFixed(2) +
+          " " +
+          system.cpu.load.raw[1].toFixed(2) +
+          " " +
+          system.cpu.load.raw[2].toFixed(2) +
+          " on " +
+          system.cpu.nprocs +
+          " cores running " +
+          system.procs +
+          " processes"
+      );
 
-        default:
-          displaytemp.html(temperature.toFixed(1) + "&nbsp;&deg;C");
-          break;
-      }
-    }
-  }
-
-  // Read from local storage, initialize if needed
-  var tempunit = localStorage ? localStorage.getItem("tempunit") : null;
-  if (tempunit === null) {
-    tempunit = "C";
-  }
-
-  setCPUtemp(tempunit);
-
-  // Add handler when on settings page
-  var tempunitSelector = $("#tempunit-selector");
-  if (tempunitSelector !== null) {
-    tempunitSelector.val(tempunit);
-    tempunitSelector.on("change", function () {
-      tempunit = $(this).val();
-      setCPUtemp(tempunit);
+      var startdate = moment()
+        .subtract(system.uptime, "seconds")
+        .format("dddd, MMMM Do YYYY, HH:mm:ss");
+      $("#temperature").prop(
+        "title",
+        "System uptime: " +
+          moment.duration(1000 * system.uptime).humanize() +
+          " (running since " +
+          startdate +
+          ")"
+      );
+      // Update every 20 seconds
+      clearTimeout(systemTimer);
+      systemTimer = setTimeout(updateSystemInfo, 20000);
+    })
+    .fail(function (data) {
+      apiFailure(data);
     });
+}
+
+function updateSensorsInfo() {
+  $.ajax({
+    url: "/api/info/sensors",
+  })
+    .done(function (data) {
+      if (data.sensors.length > 0) {
+        var temp = data.sensors[0].value.toFixed(1) + "&thinsp;&deg;C";
+        var color = data.sensors[0].value > 50 ? "text-red" : "text-vivid-blue";
+        $("#temperature").html('<i class="fa fa-fire ' + color + '"></i>&nbsp;Temp:&nbsp;' + temp);
+      } else $("#temperature").html('<i class="fa fa-fire"></i>&nbsp;Temp:&nbsp;N/A');
+      // Update every 20 seconds
+      clearTimeout(sensorsTimer);
+      sensorsTimer = setTimeout(updateSensorsInfo, 20000);
+    })
+    .fail(function (data) {
+      apiFailure(data);
+    });
+}
+
+function apiFailure(data) {
+  if (data.status === 401) {
+    // Unauthorized, reload page
+    window.location.reload();
   }
 }
 
+// Method to compare two versions. Returns 1 if v2 is smaller, -1 if v1 is
+// smaller, 0 if equal
+// Credits: https://www.geeksforgeeks.org/compare-two-version-numbers/
+function versionCompare(v1, v2) {
+  // vnum stores each numeric part of version
+  var vnum1 = 0,
+    vnum2 = 0;
+
+  // Remove possible leading "v" in v1 and v2
+  if (v1[0] === "v") {
+    v1 = v1.substring(1);
+  }
+
+  if (v2[0] === "v") {
+    v2 = v2.substring(1);
+  }
+
+  // loop until both string are processed
+  for (var i = 0, j = 0; i < v1.length || j < v2.length; ) {
+    // storing numeric part of version 1 in vnum1
+    while (i < v1.length && v1[i] !== ".") {
+      vnum1 = vnum1 * 10 + (v1[i] - "0");
+      i++;
+    }
+
+    // storing numeric part of version 2 in vnum2
+    while (j < v2.length && v2[j] !== ".") {
+      vnum2 = vnum2 * 10 + (v2[j] - "0");
+      j++;
+    }
+
+    if (vnum1 > vnum2) return 1;
+    if (vnum2 > vnum1) return -1;
+
+    // if equal, reset variables and go for next numeric part
+    vnum1 = 0;
+    vnum2 = 0;
+    i++;
+    j++;
+  }
+
+  return 0;
+}
+
+function updateVersionInfo() {
+  $.ajax({
+    url: "/api/info/version",
+  }).done(function (data) {
+    var version = data.version;
+    var updateAvailable = false;
+    var dockerUpdate = false;
+    $("#versions").empty();
+
+    var versions = [
+      {
+        name: "Docker Tag",
+        local: version.docker.local,
+        remote: version.docker.remote,
+        branch: null,
+        hash: null,
+        url: "https://github.com/pi-hole/docker-pi-hole/releases",
+      },
+      {
+        name: "Core",
+        local: version.core.local.version,
+        remote: version.core.remote.version,
+        branch: version.core.local.branch,
+        hash: version.core.local.hash,
+        url: "https://github.com/pi-hole/pi-hole/releases",
+      },
+      {
+        name: "FTL",
+        local: version.ftl.local.version,
+        remote: version.ftl.remote.version,
+        branch: version.ftl.local.branch,
+        hash: version.ftl.local.hash,
+        url: "https://github.com/pi-hole/FTL/releases",
+      },
+      {
+        name: "Web interface",
+        local: version.web.local.version,
+        remote: version.web.remote.version,
+        branch: version.web.local.branch,
+        hash: version.web.local.hash,
+        url: "https://github.com/pi-hole/AdminLTE/releases",
+      },
+    ];
+
+    versions.forEach(function (v) {
+      if (v.local !== null) {
+        var localVersion = v.local;
+        if (v.branch !== null && v.hash !== null)
+          if (v.branch === "master") {
+            localVersion = v.local.split("-")[0];
+            localVersion =
+              '<a href="' +
+              v.url +
+              "/" +
+              localVersion +
+              '" rel="noopener" target="_blank">' +
+              localVersion +
+              "</a>";
+          } else localVersion = "vDev (" + v.branch + ", " + v.hash + ")";
+
+        if (versionCompare(v.local, v.remote) === -1) {
+          if (v.name === "Docker Tag") dockerUpdate = true;
+          else updateAvailable = true;
+          $("#versions").append(
+            "<li><strong>" +
+              v.name +
+              "</strong> " +
+              localVersion +
+              '&middot; <a class="lookatme" lookatme-text="Update available!" href="' +
+              v.url +
+              '" rel="noopener" target="_blank">Update available!</a></li>'
+          );
+        } else {
+          $("#versions").append("<li><strong>" + v.name + "</strong> " + localVersion + "</li>");
+        }
+      }
+    });
+
+    if (dockerUpdate)
+      $("update-hint").html(
+        'To install updates, <a href="https://github.com/pi-hole/docker-pi-hole#upgrading-persistence-and-customizations" rel="noopener" target="_blank">replace this old container with a fresh upgraded image</a>.'
+      );
+    else if (updateAvailable)
+      $("update-hint").html(
+        'To install updates, run <code><a href="https://docs.pi-hole.net/main/update/" rel="noopener" target="_blank">pihole -up</a></code>.'
+      );
+
+    // Update every 120 seconds
+    clearTimeout(versionTimer);
+    versionTimer = setTimeout(updateVersionInfo, 120000);
+  });
+}
+
 $(function () {
+  if (window.location.pathname !== "/admin/login.php") updateInfo();
   var enaT = $("#enableTimer");
   var target = new Date(parseInt(enaT.html(), 10));
   var seconds = Math.round((target.getTime() - Date.now()) / 1000);
@@ -218,7 +412,6 @@ $(function () {
 
   // Apply per-browser styling settings
   initCheckboxRadioStyle();
-  initCPUtemp();
 
   // Run check immediately after page loading ...
   utils.checkMessages();
@@ -254,11 +447,3 @@ $("#pihole-disable-custom").on("click", function (e) {
   custVal = $("#btnMins").hasClass("active") ? custVal * 60 : custVal;
   piholeChange("disable", custVal);
 });
-
-// Handle Ctrl + Enter button on Login page
-$(document).on("keypress", function (e) {
-  if ((e.keyCode === 10 || e.keyCode === 13) && e.ctrlKey && $("#loginpw").is(":focus")) {
-    $("#loginform").attr("action", "settings.php");
-    $("#loginform").submit();
-  }
-});