[TASK] Add multiple links to link infobox

lib/forcegraph.js

@@ -253,9 +253,9 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'd3-timer', 'd3-ease',
 
       self.gotoLink = function gotoLink(d) {
         moveTo(function calcToLink() {
-          draw.setHighlight({ type: 'link', id: d.id });
+          draw.setHighlight({ type: 'link', id: d[0].id });
           var l = intLinks.find(function (link) {
-            return link.o.id === d.id;
+            return link.o.id === d[0].id;
           });
           if (l) {
             return [(l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2, (ZOOM_MAX / 2) + ZOOM_MIN];

lib/infobox/link.js

@@ -2,16 +2,21 @@ define(['helper', 'snabbdom'], function (helper, V) {
   'use strict';
   V = V.default;
 
-  function showStatImg(o, d, time) {
+  function showStatImg(img, o, d, time) {
     var subst = {
       '{SOURCE_ID}': d.source.node_id,
       '{SOURCE_NAME}': d.source.hostname.replace(/[^a-z0-9\-]/ig, '_'),
+      '{SOURCE_MAC}': d.source_mac,
       '{TARGET_ID}': d.target.node_id,
       '{TARGET_NAME}': d.target.hostname.replace(/[^a-z0-9\-]/ig, '_'),
+      '{TARGET_MAC}': d.target_mac,
+      '{TYPE}': d.type,
       '{TIME}': time,
       '{LOCALE}': _.locale()
     };
-    return helper.showStat(V, o, subst);
+
+    img.push(V.h('h4', helper.listReplace(o.name, subst)));
+    img.push(helper.showStat(V, o, subst));
   }
 
   return function (el, d, linkScale) {
@@ -25,50 +30,55 @@ define(['helper', 'snabbdom'], function (helper, V) {
 
     self.render = function render() {
       var children = [];
-      var headers = [];
+      var img = [];
-      headers.push(V.h('h2', [
+      var time = d[0].target.lastseen.format('DDMMYYYYHmmss');
+
+      header = V.patch(header, V.h('div', V.h('h2', [
         V.h('a', {
-          props: { href: router.generateLink({ node: d.source.node_id }) }
+          props: { href: router.generateLink({ node: d[0].source.node_id }) }
-        }, d.source.hostname),
+        }, d[0].source.hostname),
         V.h('span', ' - '),
         V.h('a', {
-          props: { href: router.generateLink({ node: d.target.node_id }) }
+          props: { href: router.generateLink({ node: d[0].target.node_id }) }
-        }, d.target.hostname)
+        }, d[0].target.hostname)
+      ])));
+
+      helper.attributeEntry(V, children, 'node.hardware', (d[0].source.model ? d[0].source.model + ' – ' : '') +
+        (d[0].target.model ? d[0].target.model : ''));
+      helper.attributeEntry(V, children, 'node.distance', helper.showDistance(d[0]));
+
+      d.forEach(function (link) {
+        children.push(V.h('tr', { props: { className: 'header' } }, [
+          V.h('th', _.t('node.connectionType')),
+          V.h('th', link.type)
         ]));
-
-      header = V.patch(header, V.h('div', headers));
-
-      helper.attributeEntry(V, children, 'node.connectionType', d.type);
         helper.attributeEntry(V, children, 'node.tq', V.h('span',
-        {
+          { style: { color: linkScale((link.source_tq + link.target_tq) / 2) } },
-          style:
+          helper.showTq(link.source_tq) + ' - ' + helper.showTq(link.target_tq))
-            {
-              color: linkScale((d.source_tq + d.target_tq) / 2)
-            }
-        }, helper.showTq(d.source_tq) + ' - ' + helper.showTq(d.target_tq))
         );
-      helper.attributeEntry(V, children, 'node.distance', helper.showDistance(d));
+
-      helper.attributeEntry(V, children, 'node.hardware', (d.source.model ? d.source.model + ' – ' : '') +
+        if (config.linkTypeInfos) {
-        (d.target.model ? d.target.model : ''));
+          config.linkTypeInfos.forEach(function (o) {
+            showStatImg(img, o, link, time);
+          });
+        }
+      });
+
+      if (config.linkInfos) {
+        config.linkInfos.forEach(function (o) {
+          showStatImg(img, o, d[0], time);
+        });
+      }
 
       var elNew = V.h('table', children);
       table = V.patch(table, elNew);
       table.elm.classList.add('attributes');
-
-      if (config.linkInfos) {
-        var time = d.target.lastseen.format('DDMMYYYYHmmss');
-        var img = [];
-        config.linkInfos.forEach(function (linkInfo) {
-          img.push(V.h('h4', linkInfo.name));
-          img.push(showStatImg(linkInfo, d, time));
-        });
       images = V.patch(images, V.h('div', img));
-      }
     };
 
     self.setData = function setData(data) {
-      d = data.links.find(function (a) {
+      d = data.links.filter(function (a) {
-        return a.id === d.id;
+        return a.id === d[0].id;
       });
       self.render();
     };

lib/map.js

@@ -194,7 +194,7 @@ define(['map/clientlayer', 'map/labellayer', 'map/button', 'leaflet'],
 
       self.gotoLink = function gotoLink(d) {
         button.disableTracking();
-        highlight = { type: 'link', o: d };
+        highlight = { type: 'link', o: d[0] };
         updateView();
       };
 

lib/title.js

@@ -21,7 +21,7 @@ define(function () {
     };
 
     this.gotoLink = function gotoLink(d) {
-      setTitle((d.source ? d.source.hostname : d.source.id) + ' \u21D4 ' + d.target.hostname);
+      setTitle(d[0].source.hostname + ' \u21D4 ' + d[0].target.hostname);
     };
 
     this.gotoLocation = function gotoLocation() {

lib/utils/router.js

@@ -24,7 +24,7 @@ define(['Navigo'], function (Navigo) {
     }
 
     function gotoLink(d) {
-      var link = objects.links.find(function (value) {
+      var link = objects.links.filter(function (value) {
         return value.id === d.linkId;
       });
       if (link) {

scss/modules/_table.scss

@@ -22,6 +22,16 @@ table {
   }
 }
 
+tr {
+  &.header {
+    font-size: 1.2em;
+
+    th {
+      padding-top: 1em;
+    }
+  }
+}
+
 td,
 th {
   line-height: 1.41em;