+ sorting of wallets table
This commit is contained in:
Taegus
5
assets/scripts/tablesort.min.js
vendored
Normal file
5
assets/scripts/tablesort.min.js
vendored
Normal file
@@ -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}();
|
||||
5
assets/scripts/tablesort.number.min.js
vendored
Normal file
5
assets/scripts/tablesort.number.min.js
vendored
Normal file
@@ -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)})}();
|
||||
33
assets/styles/tablesort.css
Normal file
33
assets/styles/tablesort.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -1,77 +1,94 @@
|
||||
<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="btnRefreshAddress"><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>
|
||||
<span class="sumDollars" id="labelSumDollars">/ 0.00 $ / 0.00 $ per ETHO</span></div>
|
||||
<button type="button" class="btn btn-etho" id="btnNewAddress">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-etho" id="btnRefreshAddress">
|
||||
<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>
|
||||
<span class="sumDollars" id="labelSumDollars">/ 0.00 $ / 0.00 $ per ETHO</span></div>
|
||||
</div>
|
||||
<div id="addressList" class="{{#if addressData.length}}walletsWrapper{{else}}noWalletsWrapper{{/if}}">
|
||||
{{#if addressData.length}}
|
||||
<table class="bordered" id="addressTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"></th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Address</th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col">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>
|
||||
<td>{{name}}</td>
|
||||
<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}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{else}}
|
||||
<div id="noWalletsPresent">You don't have any wallets, please import them, or create a new one</div>
|
||||
{{/if}}
|
||||
{{#if addressData.length}}
|
||||
<table class="bordered" id="addressTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-sort-method='none'></th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Address</th>
|
||||
<th scope="col" data-sort-method='none'></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>
|
||||
<td>{{name}}</td>
|
||||
<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}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{else}}
|
||||
<div id="noWalletsPresent">You don't have any wallets, please import them, or create a new one</div>
|
||||
{{/if}}
|
||||
</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 class="modalBody">
|
||||
<div class="form-group">
|
||||
<label for="usr">Type Password:</label>
|
||||
<input type="password" class="form-control" id="walletPasswordFirst">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="walletPasswordSecond">Confirm Password:</label>
|
||||
<input type="password" class="form-control" id="walletPasswordSecond">
|
||||
</div>
|
||||
<button type="button" class="btn btn-etho btn-dialog-confirm" id="btnCreateWalletConfirm">Confirm</button>
|
||||
<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>
|
||||
<input type="password" class="form-control" id="walletPasswordFirst">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="walletPasswordSecond">Confirm Password:</label>
|
||||
<input type="password" class="form-control" id="walletPasswordSecond">
|
||||
</div>
|
||||
<button type="button" class="btn btn-etho btn-dialog-confirm" id="btnCreateWalletConfirm">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="modalBody">
|
||||
<div class="form-group">
|
||||
<label for="inputWalletName">Type Name:</label>
|
||||
<input type="text" class="form-control" id="inputWalletName">
|
||||
</div>
|
||||
<button type="button" class="btn btn-etho btn-dialog-confirm" id="btnChangeWalletNameConfirm">Confirm</button>
|
||||
</div>
|
||||
<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>
|
||||
<input type="text" class="form-control" id="inputWalletName">
|
||||
</div>
|
||||
<button type="button" class="btn btn-etho btn-dialog-confirm" id="btnChangeWalletNameConfirm">Confirm</button>
|
||||
</div>
|
||||
</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 class="modalBody">
|
||||
<div class="form-group">
|
||||
<label for="inputPrivateKey">Private Key:</label>
|
||||
<input type="password" class="form-control" id="inputPrivateKey">
|
||||
</div>
|
||||
<button type="button" class="btn btn-etho btn-dialog-confirm" id="btnImportFromPrivateKeyConfirm">Import</button>
|
||||
</div>
|
||||
<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>
|
||||
<input type="password" class="form-control" id="inputPrivateKey">
|
||||
</div>
|
||||
<button type="button" class="btn btn-etho btn-dialog-confirm" id="btnImportFromPrivateKeyConfirm">Import</button>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user