diff options
| author | Egor Tensin <Egor.Tensin@gmail.com> | 2022-11-28 11:22:40 +0100 |
|---|---|---|
| committer | Egor Tensin <Egor.Tensin@gmail.com> | 2022-11-28 11:22:40 +0100 |
| commit | 3387471aa4efa481f003481bc928b007a569dea4 (patch) | |
| tree | f99523c720bdee58fc9a5a3b0ed01837deb1b786 | |
| parent | html: remove a redundant space (diff) | |
| download | wg-api-web-3387471aa4efa481f003481bc928b007a569dea4.tar.gz wg-api-web-3387471aa4efa481f003481bc928b007a569dea4.zip | |
html: make the peers table sortablev0.2.0
| -rw-r--r-- | html/index.html | 43 |
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> |