sortable neighbourslist table

This commit is contained in:
Nils Schneider 2015-03-22 20:23:57 +01:00
parent 7290e6c3e7
commit 8bd5196059
3 changed files with 87 additions and 6 deletions

View file

@ -12,6 +12,34 @@
font-size: 11pt;
}
th.sort-header::selection {
background: transparent;
}
th.sort-header {
cursor: pointer;
}
table th.sort-header:after {
font-family: "ionicons";
padding-left: 0.25em;
content: '\f10d';
visibility: hidden;
}
table th.sort-header:hover:after {
visibility: visible;
}
table th.sort-up:after, table th.sort-down:after, table th.sort-down:hover:after {
visibility: visible;
opacity: 0.4;
}
table th.sort-up:after {
content: '\f104';
}
table.attributes {
width: auto !important;
}
@ -149,7 +177,11 @@
width: 100%;
}
#sidebardata td:not(:first-child) {
#sidebardata table th {
text-align: left;
}
#sidebardata td:not(:first-child), #sidebardata th:not(:first-child) {
text-align: right;
}
@ -224,6 +256,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/3.0.2/tablesort.min.js"></script>
<script src="vendor/tablesort.numeric.js"></script>
<script src="history.js"></script>
</head>
<body>

View file

@ -480,12 +480,28 @@ function showNodeinfo(config, gotoAnything, d) {
el.appendChild(h3)
var table = document.createElement("table")
var thead = document.createElement("thead")
var neighbours = d.neighbours.slice().sort( function (a, b) {
return a.node.nodeinfo.hostname.localeCompare(b.node.nodeinfo.hostname)
})
var tr = document.createElement("tr")
var th1 = document.createElement("th")
th1.textContent = "Knoten"
th1.classList.add("sort-default")
tr.appendChild(th1)
neighbours.forEach( function (d) {
var th2 = document.createElement("th")
th2.textContent = "TQ"
tr.appendChild(th2)
var th3 = document.createElement("th")
th3.textContent = "Entfernung"
tr.appendChild(th3)
thead.appendChild(tr)
table.appendChild(thead)
var tbody = document.createElement("tbody")
d.neighbours.forEach( function (d) {
var tr = document.createElement("tr")
var td1 = document.createElement("td")
@ -522,11 +538,16 @@ function showNodeinfo(config, gotoAnything, d) {
a3.textContent = showDistance(d.link)
a3.onclick = gotoAnything.link(d.link)
td3.appendChild(a3)
td3.setAttribute("data-sort", d.link.distance !== undefined ? d.link.distance : -1)
tr.appendChild(td3)
table.appendChild(tr)
tbody.appendChild(tr)
})
table.appendChild(tbody)
new Tablesort(table)
el.appendChild(table)
}

26
vendor/tablesort.numeric.js vendored Normal file
View file

@ -0,0 +1,26 @@
(function(){
var cleanNumber = function(i) {
return i.replace(/[^\-?0-9.]/g, '');
},
compareNumber = function(a, b) {
a = parseFloat(a);
b = parseFloat(b);
a = isNaN(a) ? 0 : a;
b = isNaN(b) ? 0 : b;
return a - b;
};
Tablesort.extend('number', function(item) {
return item.match(/^-?[£\x24Û¢´€]?\d+\s*([,\.]\d{0,2})/) || // Prefixed currency
item.match(/^-?\d+\s*([,\.]\d{0,2})?[£\x24Û¢´€]/) || // Suffixed currency
item.match(/^-?(\d)*-?([,\.]){0,1}-?(\d)+([E,e][\-+][\d]+)?%?$/); // Number
}, function(a, b) {
a = cleanNumber(a);
b = cleanNumber(b);
return compareNumber(b, a);
});
}());