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>