From 7b8f2e6678685bdf9f0d99e6bbd7541891603ca3 Mon Sep 17 00:00:00 2001
From: Pablo Revilla <pablorevilla@gmail.com>
Date: Thu, 28 Aug 2025 09:05:01 -0700
Subject: [PATCH] Added the traceroute and neighbours to the map

---
 meshview/templates/map.html | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/meshview/templates/map.html b/meshview/templates/map.html
index 130a75d..3ff2ec4 100644
--- a/meshview/templates/map.html
+++ b/meshview/templates/map.html
@@ -251,7 +251,7 @@ var lastFetchTime = null;
 const activeBlinks = new Map();
 
 function fetchLatestPacket() {
-    fetch(`/api/packets?limit=1&since=1970-01-01T00:00:00Z`)
+    fetch(`/api/packets?limit=1`)
         .then(res => res.json())
         .then(data => {
             if (data.packets && data.packets.length > 0) lastFetchTime = data.packets[0].import_time;
@@ -286,7 +286,7 @@ function blinkNode(marker, longName, portnum) {
     let interval = setInterval(() => {
         if (isMarkerVisible(marker)) {
             marker.setStyle({ fillColor: blinkCount % 2 === 0 ? 'yellow' : marker.originalColor });
-            marker.bringToFront();  // <-- ensures blinking node stays on top
+            marker.bringToFront();  // <-- keeps blinking node on top
         }
         blinkCount++;
         if (blinkCount > 7) {
@@ -302,7 +302,7 @@ function blinkNode(marker, longName, portnum) {
 
 function fetchNewPackets() {
     if (!lastFetchTime) return;
-    fetch(`/api/packets?since=${lastFetchTime}`)
+    fetch(`/api/packets?limit=5&since=${lastFetchTime}`)
         .then(res => res.json())
         .then(data => {
             if (!data.packets || data.packets.length === 0) return;
@@ -321,8 +321,35 @@ function fetchNewPackets() {
         .catch(err => console.error("Error fetching packets:", err));
 }
 
+// --- Visibility-based polling control ---
+let packetInterval = null;
+
+function startPacketFetcher() {
+    if (!packetInterval) {
+        packetInterval = setInterval(fetchNewPackets, 1000);
+        console.log("Packet fetching started");
+    }
+}
+
+function stopPacketFetcher() {
+    if (packetInterval) {
+        clearInterval(packetInterval);
+        packetInterval = null;
+        console.log("Packet fetching stopped");
+    }
+}
+
+document.addEventListener("visibilitychange", function() {
+    if (document.hidden) {
+        stopPacketFetcher();
+    } else {
+        startPacketFetcher();
+    }
+});
+
+// Init
 fetchLatestPacket();
-setInterval(fetchNewPackets, 1000);
+startPacketFetcher();
 
 </script>
 {% endblock %}