[TASK] Update node and link infobox with latest json

- Includes a cache-breaker variable for stats images

README.md

@@ -3,6 +3,7 @@
 ### Main differences to https://github.com/ffnord/meshviewer
 #### Some features are maybe merged
 
+- Updates selected node or list (incl. image stats cache-breaker) - not only overview tables
 - Formatted Code
 - Grunt inline for some css and js - less requests
 - Icon font with only needed icons
@@ -121,7 +122,7 @@ This option allows to show node statistics depending on following case-sensitive
 - `caption` is shown, if `thumbnail` is not present (no thumbnail in infobox)
 
 To insert current node-id in either `href`, `thumbnail` or `caption`
-you can use the case-sensitive template string `{NODE_ID}`.
+you can use the case-sensitive template string `{NODE_ID}`, `{NODE_NAME}` and `{TIME}` as cache-breaker.
 
 Examples for `nodeInfos`:
 
@@ -129,12 +130,12 @@ Examples for `nodeInfos`:
 
       { "name": "Clientstatistik",
         "href": "stats/dashboard/db/node-byid?var-nodeid={NODE_ID}",
-        "thumbnail": "stats/render/dashboard-solo/db/node-byid?panelId=1&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}",
+        "thumbnail": "stats/render/dashboard-solo/db/node-byid?panelId=1&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}&var-host={NODE_NAME}&_t={TIME}",
         "caption": "Knoten {NODE_ID}"
       },
       { "name": "Uptime",
         "href": "stats/dashboard/db/node-byid?var-nodeid={NODE_ID}",
-        "thumbnail": "stats/render/dashboard-solo/db/node-byid?panelId=2&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}",
+        "thumbnail": "stats/render/dashboard-solo/db/node-byid?panelId=2&fullscreen&theme=light&width=600&height=300&var-nodeid={NODE_ID}&_t={TIME}",
         "caption": "Knoten {NODE_ID}"
       }
     ]
@@ -174,11 +175,11 @@ This option allows to show link statistics depending on the following case-sensi
 - `caption` is shown, if `thumbnail` is not present (no thumbnail in infobox)
 
 To insert the source or target node-id in either `href`, `thumbnail` or `caption`
-you can use the case-sensitive template strings `{SOURCE}` and `{TARGET}`.
+you can use the case-sensitive template strings `{SOURCE}`, `{TARGET}` and `{TIME}` as cache-breaker.
 
     "linkInfos": [
       { "href": "stats/dashboard/db/links?var-source={SOURCE}&var-target={TARGET}",
-        "thumbnail": "stats/render/dashboard-solo/db/links?panelId=1&fullscreen&theme=light&width=800&height=600&var-source={SOURCE}&var-target={TARGET}"
+        "thumbnail": "stats/render/dashboard-solo/db/links?panelId=1&fullscreen&theme=light&width=800&height=600&var-source={SOURCE}&var-target={TARGET}&_t={TIME}"
       }
     ]
 

config.json

@@ -5,13 +5,13 @@
     {
       "name": "Clientstatistik",
       "href": "https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/",
-      "thumbnail": "https://grafana.regensburg.freifunk.net/render/dashboard-solo/db/ffrgb-all-nodes?panelId=1&from=now-7d&var-nodeid={NODE_ID}&var-host={NODE_NAME}&width=650&height=350&theme=light",
+      "thumbnail": "https://grafana.regensburg.freifunk.net/render/dashboard-solo/db/ffrgb-all-nodes?panelId=1&from=now-7d&var-nodeid={NODE_ID}&var-host={NODE_NAME}&width=650&height=350&theme=light&_t={TIME}",
       "caption": "Knoten {NODE_ID} - weiteren Statistiken"
     },
     {
       "name": "Trafficstatistik",
       "href": "https://regensburg.freifunk.net/netz/statistik/node/{NODE_ID}/",
-      "thumbnail": "https://grafana.regensburg.freifunk.net/render/dashboard-solo/db/ffrgb-all-nodes?panelId=2&from=now-7d&var-nodeid={NODE_ID}&var-host={NODE_NAME}&width=650&height=350&theme=light",
+      "thumbnail": "https://grafana.regensburg.freifunk.net/render/dashboard-solo/db/ffrgb-all-nodes?panelId=2&from=now-7d&var-nodeid={NODE_ID}&var-host={NODE_NAME}&width=650&height=350&theme=light&_t={TIME}",
       "caption": "Knoten {NODE_ID} - weiteren Statistiken"
     }
   ],

lib/infobox/link.js

@@ -1,10 +1,11 @@
 define(["helper"], function (helper) {
   "use strict";
 
-  function showStatImg(o, source, target) {
+  function showStatImg(o, source, target, time) {
     var subst = {};
     subst["{SOURCE}"] = source;
     subst["{TARGET}"] = target;
+    subst["{TIME}"] = time;
     return helper.showStat(o, subst);
   }
 
@@ -46,11 +47,12 @@ define(["helper"], function (helper) {
     if (config.linkInfos) {
       var source = d.source.node_id;
       var target = d.target.node_id;
+      var time = d.target.node.lastseen.format("DDMMYYYYHmmss");
       config.linkInfos.forEach(function (linkInfo) {
         var h4 = document.createElement("h4");
         h4.textContent = linkInfo.name;
         el.appendChild(h4);
-        el.appendChild(showStatImg(linkInfo, source, target));
+        el.appendChild(showStatImg(linkInfo, source, target, time));
       });
     }
   };

lib/infobox/main.js

@@ -32,15 +32,31 @@ define(["infobox/link", "infobox/node", "infobox/location"], function (Link, Nod
       el.appendChild(closeButton);
     }
 
+    function clear() {
+      var closeButton = el.firstChild;
+      while (el.firstChild) {
+        el.removeChild(el.firstChild);
+      }
+      el.appendChild(closeButton);
+    }
+
     self.resetView = destroy;
 
-    self.gotoNode = function (d) {
+    self.gotoNode = function (d, update) {
-      create();
+      if (update !== true) {
+        create();
+      } else {
+        clear();
+      }
       Node(config, el, router, d);
     };
 
-    self.gotoLink = function (d) {
+    self.gotoLink = function (d, update) {
-      create();
+      if (update !== true) {
+        create();
+      } else {
+        clear();
+      }
       Link(config, el, router, d);
     };
 

lib/infobox/node.js

@@ -237,6 +237,7 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
       var subst = {};
       subst["{NODE_ID}"] = d.nodeinfo.node_id ? d.nodeinfo.node_id : "unknown";
       subst["{NODE_NAME}"] = d.nodeinfo.hostname ? d.nodeinfo.hostname.replace(/[^a-z0-9\-]/ig, "_") : "unknown";
+      subst["{TIME}"] = d.lastseen.format("DDMMYYYYHmmss");
       return helper.showStat(o, subst);
     }
 
@@ -344,7 +345,7 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
           } else {
             td2.textContent = d.id;
           }
-          
+
           tr.appendChild(td2);
 
           var td3 = document.createElement("td");

lib/main.js

@@ -181,6 +181,7 @@ define(["moment", "router", "leaflet", "gui", "helper", "moment.de"],
             update().then(function (d) {
               gui.setData(d);
               router.setData(d);
+              router.update();
             });
           }, 60000);
         })

lib/map.js

@@ -452,16 +452,16 @@ define(["map/clientlayer", "map/labelslayer",
         updateView();
       };
 
-      self.gotoNode = function (d) {
+      self.gotoNode = function (d, update) {
         disableTracking();
         highlight = {type: "node", o: d};
-        updateView();
+        updateView(update);
       };
 
-      self.gotoLink = function (d) {
+      self.gotoLink = function (d, update) {
         disableTracking();
         highlight = {type: "link", o: d};
-        updateView();
+        updateView(update);
       };
 
       self.gotoLocation = function () {

lib/router.js

@@ -45,25 +45,25 @@ define(["helper"], function (helper) {
       }
     }
 
-    function gotoNode(d) {
+    function gotoNode(d, update) {
       if (!d) {
         return false;
       }
 
       targets.forEach(function (t) {
-        t.gotoNode(d);
+        t.gotoNode(d, update);
       });
 
       return true;
     }
 
-    function gotoLink(d) {
+    function gotoLink(d, update) {
       if (!d) {
         return false;
       }
 
       targets.forEach(function (t) {
-        t.gotoLink(d);
+        t.gotoLink(d, update);
       });
 
       return true;
@@ -84,7 +84,7 @@ define(["helper"], function (helper) {
       return true;
     }
 
-    function loadState(s) {
+    function loadState(s, update) {
       if (!s) {
         return false;
       }
@@ -100,7 +100,7 @@ define(["helper"], function (helper) {
       s.slice(2).split(";").forEach(function (d) {
         var args = d.split(":");
 
-        if (args[0] === "v" && args[1] in views) {
+        if (update !== true && args[0] === "v" && args[1] in views) {
           currentView = args[1];
           views[args[1]]();
         }
@@ -111,7 +111,7 @@ define(["helper"], function (helper) {
           id = args[1];
           if (id in objects.nodes) {
             currentObject = {node: objects.nodes[id]};
-            gotoNode(objects.nodes[id]);
+            gotoNode(objects.nodes[id], update);
             targetSet = true;
           }
         }
@@ -120,7 +120,7 @@ define(["helper"], function (helper) {
           id = args[1];
           if (id in objects.links) {
             currentObject = {link: objects.links[id]};
-            gotoLink(objects.links[id]);
+            gotoLink(objects.links[id], update);
             targetSet = true;
           }
         }
@@ -225,6 +225,11 @@ define(["helper"], function (helper) {
       data.graph.links.forEach(function (d) {
         objects.links[d.id] = d;
       });
+
+    };
+
+    self.update = function () {
+      loadState(window.location.hash, true);
     };
 
     return self;