From 8bd519605935dd8d590f84bf40b70e67e7e14567 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Sun, 22 Mar 2015 20:23:57 +0100 Subject: [PATCH] sortable neighbourslist table --- history.html | 36 +++++++++++++++++++++++++++++++++++- history.js | 31 ++++++++++++++++++++++++++----- vendor/tablesort.numeric.js | 26 ++++++++++++++++++++++++++ 3 files changed, 87 insertions(+), 6 deletions(-) create mode 100644 vendor/tablesort.numeric.js diff --git a/history.html b/history.html index 58609b0..418d72e 100644 --- a/history.html +++ b/history.html @@ -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 @@ + + diff --git a/history.js b/history.js index 79018ce..f1ce623 100644 --- a/history.js +++ b/history.js @@ -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) } diff --git a/vendor/tablesort.numeric.js b/vendor/tablesort.numeric.js new file mode 100644 index 0000000..2e11b46 --- /dev/null +++ b/vendor/tablesort.numeric.js @@ -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); + }); +}());