Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

redo link type handling

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

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

20
lib/forcegraph.js
View File

@ -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.o.vpn
d.target.y > screenRect.top && d.target.y < screenRect.bottom)
}
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.globalAlpha = d.o.vpn ? 0.1 : 0.8
ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
ctx.strokeStyle = d.o.type === "Kabel" ? cableColor : d.color
ctx.globalAlpha = d.o.type === "VPN" ? 0.1 : 0.8
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()

2
lib/infobox/link.js
View File

@ -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"))

24
lib/infobox/node.js
View File

@ -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)

14
lib/linklist.js
View File

@ -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) {

10
lib/main.js
View File

@ -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) {

2
lib/map.js
View File

@ -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) {

26
scss/main.scss
View File

@ -237,16 +237,24 @@ table {
font-weight: bold;
}
.sidebar table th:nth-child(2),
.sidebar table td:nth-child(2) {
.sidebar table:not(.node-links) th:first-child,
.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 td:first-child {
.sidebar table.node-links th:nth-child(2),
.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;
}