redo link type handling

This commit is contained in:
Milan Pässler 2016-02-18 19:26:05 +00:00
parent 3a7cc2bbc5
commit f77aabd37d
8 changed files with 67 additions and 33 deletions

2
.gitignore vendored
View file

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

View file

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

View file

@ -19,7 +19,7 @@ define(function () {
attributeEntry(attributes, "TQ", showTq(d)) attributeEntry(attributes, "TQ", showTq(d))
attributeEntry(attributes, "Entfernung", showDistance(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 hw1 = dictGet(d.source.node.nodeinfo, ["hardware", "model"])
var hw2 = dictGet(d.target.node.nodeinfo, ["hardware", "model"]) var hw2 = dictGet(d.target.node.nodeinfo, ["hardware", "model"])
attributeEntry(attributes, "Hardware", (hw1 != null ? hw1 : "unbekannt") + " " + (hw2 != null ? hw2 : "unbekannt")) attributeEntry(attributes, "Hardware", (hw1 != null ? hw1 : "unbekannt") + " " + (hw2 != null ? hw2 : "unbekannt"))

View file

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

View file

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

View file

@ -102,10 +102,18 @@ function (moment, Router, L, GUI, numeral) {
links.forEach( function (d) { links.forEach( function (d) {
d.source.node.neighbours.push({ node: d.target.node, link: d, incoming: false }) 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 }) 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.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 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) { links.sort( function (a, b) {

View file

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

View file

@ -237,16 +237,24 @@ table {
font-weight: bold; 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; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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; width: 1.5em;
} }
@ -304,7 +312,13 @@ table {
text-align: left; 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; text-align: right;
} }