redo link type handling

.gitignore

@@ -2,4 +2,4 @@ bower_components/
 node_modules/
 build/
 .sass-cache/
-config.js
+config.json

lib/forcegraph.js

@@ -213,7 +213,7 @@ define(["d3"], function (d3) {
 
     function drawLabel(d) {
       var neighbours = d.neighbours.filter(function (d) {
-        return !d.link.o.vpn
+        return !d.link.o.type === "VPN"
       })
 
       var sum = neighbours.reduce(function (a, b) {
@@ -244,8 +244,7 @@ define(["d3"], function (d3) {
       return (d.source.x > screenRect.left && d.source.x < screenRect.right &&
               d.source.y > screenRect.top && d.source.y < screenRect.bottom) ||
              (d.target.x > screenRect.left && d.target.x < screenRect.right &&
-              d.target.y > screenRect.top && d.target.y < screenRect.bottom) ||
+              d.target.y > screenRect.top && d.target.y < screenRect.bottom)
-             d.o.vpn
     }
 
     function visibleNodes(d) {
@@ -316,6 +315,7 @@ define(["d3"], function (d3) {
       var uplinkColor = "#5BAAEB"
       var highlightColor = "rgba(252, 227, 198, 0.15)"
       var nodeRadius = 6
+      var cableColor = "#50B0F0"
 
       // -- draw links --
       ctx.save()
@@ -329,9 +329,9 @@ define(["d3"], function (d3) {
         ctx.beginPath()
         ctx.moveTo(d.source.x + dx * nodeRadius, d.source.y + dy * nodeRadius)
         ctx.lineTo(d.target.x - dx * nodeRadius, d.target.y - dy * nodeRadius)
-        ctx.strokeStyle = d.color
+        ctx.strokeStyle = d.o.type === "Kabel" ? cableColor : d.color
-        ctx.globalAlpha = d.o.vpn ? 0.1 : 0.8
+        ctx.globalAlpha = d.o.type === "VPN" ? 0.1 : 0.8
-        ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
+        ctx.lineWidth = d.o.type === "VPN" ? 1.5 : 2.5
         ctx.stroke()
       })
 
@@ -516,7 +516,7 @@ define(["d3"], function (d3) {
       }
 
       var links = intLinks.filter(function (d) {
-        return !d.o.vpn
+        return !d.o.type === "VPN"
       }).filter(function (d) {
         return distanceLink(e, d.source, d.target) < LINE_RADIUS
       })
@@ -577,13 +577,13 @@ define(["d3"], function (d3) {
               .charge(-250)
               .gravity(0.1)
               .linkDistance(function (d) {
-                if (d.o.vpn)
+                if (d.o.type === "VPN")
                   return 0
                 else
                   return LINK_DISTANCE
               })
               .linkStrength(function (d) {
-                if (d.o.vpn)
+                if (d.o.type === "VPN")
                   return 0
                 else
                   return Math.max(0.5, 1 / d.o.tq)
@@ -637,7 +637,7 @@ define(["d3"], function (d3) {
         e.source = newNodesDict[d.source.id]
         e.target = newNodesDict[d.target.id]
 
-        if (d.vpn)
+        if (d.type === "VPN")
           e.color = "rgba(255, 255, 255, " + (0.6 / d.tq) + ")"
         else
           e.color = linkScale(d.tq).hex()

lib/infobox/link.js

@@ -19,7 +19,7 @@ define(function () {
 
     attributeEntry(attributes, "TQ", showTq(d))
     attributeEntry(attributes, "Entfernung", showDistance(d))
-    attributeEntry(attributes, "VPN", d.vpn ? "ja" : null)
+    attributeEntry(attributes, "Typ", d.type)
     var hw1 = dictGet(d.source.node.nodeinfo, ["hardware", "model"])
     var hw2 = dictGet(d.target.node.nodeinfo, ["hardware", "model"])
     attributeEntry(attributes, "Hardware", (hw1 != null ? hw1 : "unbekannt") + " – " + (hw2 != null ? hw2 : "unbekannt"))

lib/infobox/node.js

@@ -246,9 +246,13 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
       tr.appendChild(th3)
 
       var th4 = document.createElement("th")
-      th4.textContent = "Entfernung"
+      th4.textContent = "Typ"
       tr.appendChild(th4)
 
+      var th5 = document.createElement("th")
+      th5.textContent = "Entfernung"
+      tr.appendChild(th5)
+
       thead.appendChild(tr)
       table.appendChild(thead)
 
@@ -269,11 +273,6 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
         a1.onclick = router.node(d.node)
         td2.appendChild(a1)
 
-        if (d.link.vpn)
-          td1.appendChild(document.createTextNode(" (VPN)"))
-        if (d.link.cable)
-          td1.appendChild(document.createTextNode(" (Kabel)"))
-
         if (has_location(d.node)) {
           var span = document.createElement("span")
           span.classList.add("icon")
@@ -294,16 +293,25 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
         var td4 = document.createElement("td")
         var a3 = document.createElement("a")
         a3.href = "#"
-        a3.textContent = showDistance(d.link)
+        a3.textContent = d.link.type
         a3.onclick = router.link(d.link)
         td4.appendChild(a3)
-        td4.setAttribute("data-sort", d.link.distance !== undefined ? -d.link.distance : 1)
         tr.appendChild(td4)
 
+        var td5 = document.createElement("td")
+        var a4 = document.createElement("a")
+        a4.href = "#"
+        a4.textContent = showDistance(d.link)
+        a4.onclick = router.link(d.link)
+        td5.appendChild(a4)
+        td5.setAttribute("data-sort", d.link.distance !== undefined ? -d.link.distance : 1)
+        tr.appendChild(td5)
+
         tbody.appendChild(tr)
       })
 
       table.appendChild(tbody)
+      table.className = "node-links"
 
       new Tablesort(table)
 

lib/linklist.js

@@ -13,6 +13,12 @@ define(["sorttable", "virtual-dom"], function (SortTable, V) {
                     sort: function (a, b) { return a.tq - b.tq},
                     reverse: true
                   },
+                  { name: "Typ",
+                    sort: function (a, b) {
+                      return a.type.localeCompare(b.type)
+                    },
+                    reverse: false
+                  },
                   { name: "Entfernung",
                     sort: function (a, b) {
                       return (a.distance === undefined ? -1 : a.distance) -
@@ -27,14 +33,12 @@ define(["sorttable", "virtual-dom"], function (SortTable, V) {
     function renderRow(d) {
       var td1Content = [V.h("a", {href: "#", onclick: router.link(d)}, linkName(d))]
 
-      if (d.vpn)
-        td1Content.push(" (VPN)")
-
       var td1 = V.h("td", td1Content)
       var td2 = V.h("td", {style: {color: linkScale(d.tq).hex()}}, showTq(d))
-      var td3 = V.h("td", showDistance(d))
+      var td3 = V.h("td", d.type)
+      var td4 = V.h("td", showDistance(d))
 
-      return V.h("tr", [td1, td2, td3])
+      return V.h("tr", [td1, td2, td3, td4])
     }
 
     this.render = function (d)  {

lib/main.js

@@ -102,10 +102,18 @@ function (moment, Router, L, GUI, numeral) {
       links.forEach( function (d) {
         d.source.node.neighbours.push({ node: d.target.node, link: d, incoming: false })
         d.target.node.neighbours.push({ node: d.source.node, link: d, incoming: true })
-        if (!d.vpn) {
+        if (!d.type === "tunnel") {
           d.source.node.meshlinks = d.source.node.meshlinks ? d.source.node.meshlinks + 1 : 1
           d.target.node.meshlinks = d.target.node.meshlinks ? d.target.node.meshlinks + 1 : 1
         }
+        if (d.type === "tunnel")
+          d.type = "VPN"
+        else if (d.type === "wireless")
+          d.type = "Wifi"
+        else if (d.type === "other")
+          d.type = "Kabel"
+        else
+          d.type = "NaN"
       })
 
       links.sort( function (a, b) {

lib/map.js

@@ -129,7 +129,7 @@ define(["map/clientlayer", "map/labelslayer",
 
     function addLinksToMap(dict, linkScale, graph, router) {
       graph = graph.filter( function (d) {
-        return "distance" in d && !d.vpn
+        return "distance" in d && !d.type === "VPN"
       })
 
       var lines = graph.map( function (d) {

scss/main.scss

@@ -237,16 +237,24 @@ table {
   font-weight: bold;
 }
 
-.sidebar table th:nth-child(2),
+.sidebar table:not(.node-links) th:first-child,
-.sidebar table td:nth-child(2) {
+.sidebar table:not(.node-links) td:first-child {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 60%;
+  width: 50%;
 }
 
-.sidebar table th:first-child,
+.sidebar table.node-links th:nth-child(2),
-.sidebar table td:first-child {
+.sidebar table.node-links td:nth-child(2) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 45%;
+}
+
+.sidebar table.node-links th:first-child,
+.sidebar table.node-links td:first-child {
   width: 1.5em;
 }
 
@@ -304,7 +312,13 @@ table {
   text-align: left;
 }
 
-.sidebar td:not(:nth-child(-n+2)), .sidebar th:not(:nth-child(-n+2)) {
+.sidebar table:not(.node-links) td:not(:first-child),
+.sidebar table:not(.node-links) th:not(:first-child) {
+  text-align: right;
+}
+
+.sidebar table.node-links td:not(:nth-child(-n+2)),
+.sidebar table.node-links th:not(:nth-child(-n+2)) {
   text-align: right;
 }