From 3387471aa4efa481f003481bc928b007a569dea4 Mon Sep 17 00:00:00 2001 From: Egor Tensin Date: Mon, 28 Nov 2022 11:22:40 +0100 Subject: html: make the peers table sortable --- html/index.html | 43 +++++++++++++++++++++++++++++++++---------- 1 file 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 @@ + @@ -59,15 +64,15 @@ td, th[scope="row"] { - +

- + - + @@ -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 == "") - 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(); + -- cgit v1.2.3

Peer	Last handshake	Endpoint	Endpoint	Rx	Tx	Allowed IPs	Allowed IPs	Preshared key?