aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/html/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'html/index.html')
-rw-r--r--html/index.html43
1 files changed, 33 insertions, 10 deletions
diff --git a/html/index.html b/html/index.html
index 1d42a37..fd8d383 100644
--- a/html/index.html
+++ b/html/index.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <link href="https://cdn.jsdelivr.net/gh/tofsjonas/sortable/sortable-base.min.css" rel="stylesheet">
<style>
html {
font-size: 16px;
@@ -35,6 +36,10 @@ td, th[scope="row"] {
text-align: left;
border-bottom: 1px solid black;
}
+
+.sortable th.no-sort {
+ pointer-events: none;
+}
</style>
</head>
<body>
@@ -59,15 +64,15 @@ td, th[scope="row"] {
</tr>
</tbody>
</table>
- <table>
+ <table class="sortable">
<thead>
<tr>
<th>Peer</th>
<th>Last handshake</th>
- <th>Endpoint</th>
+ <th class="no-sort">Endpoint</th>
<th>Rx</th>
<th>Tx</th>
- <th>Allowed IPs</th>
+ <th class="no-sort">Allowed IPs</th>
<th>Preshared key?</th>
</tr>
</thead>
@@ -166,13 +171,20 @@ Field.prototype.cell_container = function() {
return document.createElement('td');
}
+Field.prototype.sortable_value = function(value) {
+ return value;
+}
+
Field.prototype.cell_contents = function(value) {
- return [document.createTextNode(value)];
+ return [document.createTextNode(this.sortable_value(value))];
}
Field.prototype.create_cell = function(peer) {
let cell = this.cell_container();
let value = peer[this.key];
+ let sortable = this.sortable_value(value);
+ cell.setAttribute("data-sort", sortable);
+ cell.setAttribute("title", sortable);
let contents = this.cell_contents(value);
contents.forEach(function(elem) {
cell.appendChild(elem);
@@ -187,10 +199,14 @@ var PublicKey = function() {
PublicKey.prototype = Object.create(Field.prototype);
PublicKey.prototype.constructor = PublicKey;
-PublicKey.prototype.cell_contents = function(value) {
+PublicKey.prototype.sortable_value = function(value) {
if (value in aliases)
- value = aliases[value];
- return [in_code(value)];
+ return aliases[value];
+ return value;
+}
+
+PublicKey.prototype.cell_contents = function(value) {
+ return [in_code(this.sortable_value(value))];
}
var LastHandshake = function() {
@@ -201,6 +217,7 @@ LastHandshake.prototype = Object.create(Field.prototype);
LastHandshake.prototype.constructor = LastHandshake;
LastHandshake.prototype.cell_contents = function(value) {
+ value = this.sortable_value(value);
value = Date.parse(value);
value = date_to_readable(value);
return Field.prototype.cell_contents.call(this, value);
@@ -213,10 +230,10 @@ var Endpoint = function() {
Endpoint.prototype = Object.create(Field.prototype);
Endpoint.prototype.constructor = Endpoint;
-Endpoint.prototype.cell_contents = function(value) {
+Endpoint.prototype.sortable_value = function(value) {
if (value == "<nil>")
- value = '-';
- return Field.prototype.cell_contents.call(this, value);
+ return '-';
+ return value;
}
var Rx = function() {
@@ -227,6 +244,7 @@ Rx.prototype = Object.create(Field.prototype);
Rx.prototype.constructor = Rx;
Rx.prototype.cell_contents = function(value) {
+ value = this.sortable_value(value);
value = parseInt(value);
value = bytes_to_readable(value);
return Field.prototype.cell_contents.call(this, value);
@@ -248,6 +266,10 @@ var AllowedIPs = function() {
AllowedIPs.prototype = Object.create(Field.prototype);
AllowedIPs.prototype.constructor = AllowedIPs;
+AllowedIPs.prototype.sortable_value = function(value) {
+ return value.join(", ");
+}
+
AllowedIPs.prototype.cell_contents = function(value) {
let result = [];
value.forEach(function(ip) {
@@ -390,5 +412,6 @@ function main() {
main();
</script>
+ <script src="https://cdn.jsdelivr.net/gh/tofsjonas/sortable/sortable.min.js"></script>
</body>
</html>