+ sorting of wallets table

assets/scripts/tablesort.min.js

@@ -0,0 +1,5 @@
+/*!
+ * tablesort v5.0.2 (2017-11-12)
+ * http://tristen.ca/tablesort/demo/
+ * Copyright (c) 2017 ; Licensed MIT
+*/!function(){function a(b,c){if(!(this instanceof a))return new a(b,c);if(!b||"TABLE"!==b.tagName)throw new Error("Element must be a table");this.init(b,c||{})}var b=[],c=function(a){var b;return window.CustomEvent&&"function"==typeof window.CustomEvent?b=new CustomEvent(a):(b=document.createEvent("CustomEvent"),b.initCustomEvent(a,!1,!1,void 0)),b},d=function(a){return a.getAttribute("data-sort")||a.textContent||a.innerText||""},e=function(a,b){return a=a.trim().toLowerCase(),b=b.trim().toLowerCase(),a===b?0:a<b?1:-1},f=function(a,b){return function(c,d){var e=a(c.td,d.td);return 0===e?b?d.index-c.index:c.index-d.index:e}};a.extend=function(a,c,d){if("function"!=typeof c||"function"!=typeof d)throw new Error("Pattern and sort must be a function");b.push({name:a,pattern:c,sort:d})},a.prototype={init:function(a,b){var c,d,e,f,g=this;if(g.table=a,g.thead=!1,g.options=b,a.rows&&a.rows.length>0)if(a.tHead&&a.tHead.rows.length>0){for(e=0;e<a.tHead.rows.length;e++)if("thead"===a.tHead.rows[e].getAttribute("data-sort-method")){c=a.tHead.rows[e];break}c||(c=a.tHead.rows[a.tHead.rows.length-1]),g.thead=!0}else c=a.rows[0];if(c){var h=function(){g.current&&g.current!==this&&g.current.removeAttribute("aria-sort"),g.current=this,g.sortTable(this)};for(e=0;e<c.cells.length;e++)f=c.cells[e],f.setAttribute("role","columnheader"),"none"!==f.getAttribute("data-sort-method")&&(f.tabindex=0,f.addEventListener("click",h,!1),null!==f.getAttribute("data-sort-default")&&(d=f));d&&(g.current=d,g.sortTable(d))}},sortTable:function(a,g){var h=this,i=a.cellIndex,j=e,k="",l=[],m=h.thead?0:1,n=a.getAttribute("data-sort-method"),o=a.getAttribute("aria-sort");if(h.table.dispatchEvent(c("beforeSort")),g||(o="ascending"===o?"descending":"descending"===o?"ascending":h.options.descending?"descending":"ascending",a.setAttribute("aria-sort",o)),!(h.table.rows.length<2)){if(!n){for(;l.length<3&&m<h.table.tBodies[0].rows.length;)k=d(h.table.tBodies[0].rows[m].cells[i]),k=k.trim(),k.length>0&&l.push(k),m++;if(!l)return}for(m=0;m<b.length;m++)if(k=b[m],n){if(k.name===n){j=k.sort;break}}else if(l.every(k.pattern)){j=k.sort;break}for(h.col=i,m=0;m<h.table.tBodies.length;m++){var p,q=[],r={},s=0,t=0;if(!(h.table.tBodies[m].rows.length<2)){for(p=0;p<h.table.tBodies[m].rows.length;p++)k=h.table.tBodies[m].rows[p],"none"===k.getAttribute("data-sort-method")?r[s]=k:q.push({tr:k,td:d(k.cells[h.col]),index:s}),s++;for("descending"===o?q.sort(f(j,!0)):(q.sort(f(j,!1)),q.reverse()),p=0;p<s;p++)r[p]?(k=r[p],t++):k=q[p-t].tr,h.table.tBodies[m].appendChild(k)}}h.table.dispatchEvent(c("afterSort"))}},refresh:function(){void 0!==this.current&&this.sortTable(this.current,!0)}},"undefined"!=typeof module&&module.exports?module.exports=a:window.Tablesort=a}();

assets/scripts/tablesort.number.min.js

@@ -0,0 +1,5 @@
+/*!
+ * tablesort v5.0.2 (2017-11-12)
+ * http://tristen.ca/tablesort/demo/
+ * Copyright (c) 2017 ; Licensed MIT
+*/!function(){var a=function(a){return a.replace(/[^\-?0-9.]/g,"")},b=function(a,b){return a=parseFloat(a),b=parseFloat(b),a=isNaN(a)?0:a,b=isNaN(b)?0:b,a-b};Tablesort.extend("number",function(a){return a.match(/^[-+]?[£\x24Û¢´€]?\d+\s*([,\.]\d{0,2})/)||a.match(/^[-+]?\d+\s*([,\.]\d{0,2})?[£\x24Û¢´€]/)||a.match(/^[-+]?(\d)*-?([,\.]){0,1}-?(\d)+([E,e][\-+][\d]+)?%?$/)},function(c,d){return c=a(c),d=a(d),b(d,c)})}();

assets/styles/tablesort.css

@@ -0,0 +1,33 @@
+th[role=columnheader]:not(.no-sort) {
+	cursor: pointer;
+}
+
+th[role=columnheader]:not(.no-sort):after {
+	content: '';
+	float: right;
+	margin-top: 7px;
+	border-width: 0 8px 8px;
+	border-style: solid;
+	border-color: #7A1336 transparent;
+	visibility: hidden;
+	opacity: 0;
+	-ms-user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+th[aria-sort=ascending]:not(.no-sort):after {
+	border-bottom: none;
+	border-width: 8px 8px 0;
+}
+
+th[aria-sort]:not(.no-sort):after {
+	visibility: visible;
+	opacity: 0.6;
+}
+
+th[role=columnheader]:not(.no-sort):hover:after {
+	visibility: visible;
+	opacity: 1;
+}

assets/templates/wallets.html

@@ -1,9 +1,19 @@
 <div id="walletsToolbar">
-    <button type="button" class="btn btn-etho" id="btnNewAddress"><i class="fas fa-plus"></i></button>    
+  <button type="button" class="btn btn-etho" id="btnNewAddress">
-    <button type="button" class="btn btn-etho" id="btnRefreshAddress"><i class="fas fa-sync-alt"></i></button>        
+    <i class="fas fa-plus"></i>
-    <button type="button" class="btn btn-etho" id="btnExportAccounts"><i class="fas fa-file-export"></i></button>    
+  </button>
-    <button type="button" class="btn btn-etho" id="btnImportAccounts"><i class="fas fa-file-import"></i></button>    
+  <button type="button" class="btn btn-etho" id="btnRefreshAddress">
-    <button type="button" class="btn btn-etho" id="btnImportFromPrivateKey"><i class="fas fa-key"></i></button>    
+    <i class="fas fa-sync-alt"></i>
+  </button>
+  <button type="button" class="btn btn-etho" id="btnExportAccounts">
+    <i class="fas fa-file-export"></i>
+  </button>
+  <button type="button" class="btn btn-etho" id="btnImportAccounts">
+    <i class="fas fa-file-import"></i>
+  </button>
+  <button type="button" class="btn btn-etho" id="btnImportFromPrivateKey">
+    <i class="fas fa-key"></i>
+  </button>
   <div id="sumBalance">
     <span class="sumBalance" id="labelSumBalance">{{sumBalance}}</span>
     <span class="sumCurrency" id="labelSumCurrency">ETHO</span>
@@ -14,20 +24,27 @@
     <table class="bordered" id="addressTable">
       <thead>
         <tr>
-                <th scope="col"></th>
+          <th scope="col" data-sort-method='none'></th>
           <th scope="col">Name</th>
           <th scope="col">Address</th>
-                <th scope="col"></th>
+          <th scope="col" data-sort-method='none'></th>
-                <th scope="col">Balance</th>
+          <th scope="col" data-sort-method='number'>Balance</th>
         </tr>
       </thead>
       <tbody>
         {{#addressData}}
           <tr>
-                        <th scope="row" class="colEdit"><button type="button" class="btn btn-etho btnChangWalletName" data-wallet="{{address}}" data-name="{{name}}">Edit</button></th>
+            <th scope="row" class="colEdit">
+              <button type="button" class="btn btn-etho btnChangWalletName" data-wallet="{{address}}" data-name="{{name}}">Edit</button>
+            </th>
             <td>{{name}}</td>
-                        <td><span class="textAddress">{{address}}</span></td>
+            <td>
-                        <td><button type="button" class="btn btn-etho btnShowAddressTransactions" data-wallet="{{address}}"><i class="fas fa-exchange-alt"></i></button></td>
+              <span class="textAddress">{{address}}</span></td>
+            <td>
+              <button type="button" class="btn btn-etho btnShowAddressTransactions" data-wallet="{{address}}">
+                <i class="fas fa-exchange-alt"></i>
+              </button>
+            </td>
             <td>{{balance}}</td>
           </tr>
         {{/addressData}}
@@ -39,7 +56,7 @@
 </div>
 
 <!-- The modal for new wallet -->
-<div id="dlgCreateWalletPassword" class="modalDialog" data-iziModal-title="Wallet Password" data-iziModal-subtitle="Make sure to write it down or remember it!!!" data-iziModal-icon="icon-home">
+<div id="dlgCreateWalletPassword" class="modalDialog" data-izimodal-title="Wallet Password" data-izimodal-subtitle="Make sure to write it down or remember it!!!" data-izimodal-icon="icon-home">
   <div class="modalBody">
     <div class="form-group">
       <label for="usr">Type Password:</label>
@@ -55,7 +72,7 @@
 </div>
 
 <!-- The modal to change wallet name -->
-<div id="dlgChangeWalletName" class="modalDialog" data-iziModal-title="Wallet Name" data-iziModal-subtitle="Enter the name for this address" data-iziModal-icon="icon-home">
+<div id="dlgChangeWalletName" class="modalDialog" data-izimodal-title="Wallet Name" data-izimodal-subtitle="Enter the name for this address" data-izimodal-icon="icon-home">
 <div class="modalBody">
   <div class="form-group">
     <label for="inputWalletName">Type Name:</label>
@@ -66,7 +83,7 @@
 </div>
 
 <!-- The modal to import from private key -->
-<div id="dlgImportFromPrivateKey" class="modalDialog" data-iziModal-title="Import private ley" data-iziModal-subtitle="Import account from private key" data-iziModal-icon="icon-home">
+<div id="dlgImportFromPrivateKey" class="modalDialog" data-izimodal-title="Import private ley" data-izimodal-subtitle="Import account from private key" data-izimodal-icon="icon-home">
 <div class="modalBody">
   <div class="form-group">
     <label for="inputPrivateKey">Private Key:</label>

index.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="./assets/styles/transactions.css">
     <link rel="stylesheet" href="./assets/styles/please-wait.css">
     <link rel="stylesheet" href="./assets/styles/indicators.css">
+    <link rel="stylesheet" href="./assets/styles/tablesort.css">
     <link rel="stylesheet" href="./assets/styles/all.min.css">
     <link rel="stylesheet" href="./assets/styles/spinner.css">
     <link rel="stylesheet" href="./assets/styles/buttons.css">
@@ -41,6 +42,8 @@
     <script src="./assets/scripts/datetime-moment.js"></script>
     <script src="./assets/scripts/datatables-absolute.js"></script>
     <script src="./assets/scripts/jquery.floatThead.min.js"></script>
+    <script src="./assets/scripts/tablesort.min.js"></script>
+    <script src="./assets/scripts/tablesort.number.min.js"></script>
     <script src="./assets/scripts/all.min.js"></script>
     <script src="./assets/scripts/Chart.js"></script>
 
@@ -150,7 +153,8 @@
           </div>
           <div class="infoText" id="aboutInfoLicence">Made under
             <a id="urlOpenLicence" href="https://choosealicense.com/licenses/gpl-3.0">GPL v3.0</a>
-            licence</div>
+            licence
+          </div>
           <div class="infoText" id="aboutInfoVersion">Version:
             <span id="versionNumber"></span></div>
         </div>

renderer/wallets.js

@@ -96,6 +96,7 @@ class Wallets {
 
 // the event to tell us that the wallets are rendered
 $(document).on("render_wallets", function () {
+  new Tablesort(document.getElementById("addressTable"));
   $("#addressTable").floatThead();
 
   $("#btnNewAddress").off("click").on("click", function () {