BTCPrivate
/
BarterDEX
mirror of https://github.com/BTCPrivate/BarterDEX.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

gui interface update

This commit is contained in:
satindergrewal 2017-12-06 05:40:44 +13:00
parent a99e046ffe
commit 5c48404a22
3 changed files with 114 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
gui/css/custom.css
View File

@ -112,12 +112,21 @@ textarea {
width: 100%;
}
#exchange_coin_asks, #exchange_coin_bids, .exchange_trade_status_body {
.exchange_trade_status_body {
overflow: hidden;
height: 285px;
}
#exchange_coin_asks, #exchange_coin_bids {
overflow: hidden;
height: 431px;
}
#exchange_coin_asks_togl, #exchange_coin_bids_togl {
overflow: hidden;
max-height: 431px;
}
.zeroconf_settings_table_div {
overflow: hidden;
height: 385px;

112
gui/index.html
View File

@ -518,13 +518,14 @@
<!--<button class="btn btn-xs btn-exchangeclose coinexchange" data-coin="COIN" style="float: right; margin: 6px 6px 0px 3px;">BACK</button>
<button class="btn btn-xs btn-exchangerefresh coinexchange" data-coin="COIN" style="float: right; margin: 6px 6px 0px 3px;"><span class="glyphicon glyphicon-refresh"></span></button>-->
<ul class="nav nav-tabs">
<li class="active"><a href="#exchange_myorders" data-toggle="tab">My Orders <button class="btn btn-xs btn-myordersrefresh coinexchange" data-coin="COIN"><span class="glyphicon glyphicon-refresh"></span></button></a></li>
<li><a href="#exchange_botlist" data-toggle="tab">Auto Traders List <button class="btn btn-xs btn-botlistrefresh coinexchange" data-coin="COIN"><span class="glyphicon glyphicon-refresh"></span></button></a></li>
<li><a href="#exchange_myorders" data-toggle="tab">My Orders <button class="btn btn-xs btn-myordersrefresh coinexchange" data-coin="COIN"><span class="glyphicon glyphicon-refresh"></span></button></a></li>
<li class="autobot_tab"><a href="#exchange_botlist" data-toggle="tab">Auto Traders List <button class="btn btn-xs btn-botlistrefresh coinexchange" data-coin="COIN"><span class="glyphicon glyphicon-refresh"></span></button></a></li>
<li class="active"><a href="#exchange_tradestatus" data-toggle="tab">Trade Status <button class="btn btn-xs btn-botlistrefresh coinexchange" data-coin="COIN"><span class="glyphicon glyphicon-refresh"></span></button></a></li>
</ul>
</div>
<div class=""> <!-- panel-body -->
<div class="tab-content">
<div class="tab-pane fade in active" id="exchange_myorders">
<div class="tab-pane fade" id="exchange_myorders">
<table class="table table-striped exchange_my_orders_tbl" style="margin-bottom: 0;">
<thead>
@ -554,6 +555,28 @@
<tbody></tbody>
</table>
</div>
<div class="tab-pane fade in active" id="exchange_tradestatus">
<div class="exchange_trade_status_body">
<table class="table table-striped exchange_swap_status_tbl fixed_headers" width="100%" style="margin-bottom: 0;">
<thead>
<th>Status</th>
<th>Quote ID</th>
<th>Request ID</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
<svg id="exchange-swap-status-spinner" class="exchange-swap-status-spinner">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path2" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path3" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path4" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
</svg>
</div>
</div>
</div>
</div>
</div>
@ -571,21 +594,82 @@
<div class="col-sm-7" style="padding: 2px;">
<div class="row">
<div class="col-sm-12">
<div class="hidden-xs hidden-sm hidden-md col-lg-6 col-xl-6" style="padding-right: 2px;">
<div class="panel panel-default">
<div class="panel-heading">
SELLERS: <span class="orderbook_numasks"></span>
<button class="btn btn-xs btn-exchangeclose coinexchange" data-coin="COIN" style="float: right; margin: 0px -8px 0px 3px;">BACK</button>
<button class="btn btn-xs btn-exchangerefresh coinexchange" data-coin="COIN" style="float: right; margin: 0px 0px 0px 3px;"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
<div class=""> <!-- panel-body -->
<div class="mCustomScrollbar" data-mcs-theme="minimal-dark" id="exchange_coin_bids">
<table class="table table-striped orderbook_bids" width="100%" style="margin-bottom: 0;">
<thead><th>Price in <span class="orderbook_rel_coin"></span></th>
<!--<th>Min <span class="orderbook_rel_coin"></span></th>
<th>Max <span class="orderbook_rel_coin"></span></th>-->
<th>Avg. Volume</th>
<th>Depth</th>
<!--<th>Trader Pubkey</th>-->
<th>Age</th>
<th>UTXOs</th>
<th>ZCredits</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-6 col-xl-6" style="padding-left: 2px;">
<div class="panel panel-default">
<div class="panel-heading">
BUYERS: <span class="orderbook_numbids"></span>
<button class="btn btn-xs btn-exchangeclose coinexchange" data-coin="COIN" style="float: right; margin: 0px -8px 0px 3px;">BACK</button>
<button class="btn btn-xs btn-exchangerefresh coinexchange" data-coin="COIN" style="float: right; margin: 0px 0px 0px 3px;"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
<div class=""> <!-- panel-body -->
<div class="mCustomScrollbar" data-mcs-theme="minimal-dark" id="exchange_coin_asks">
<table class="table table-striped orderbook_asks" width="100%" style="margin-bottom: 0;">
<thead><th>Price in <span class="orderbook_rel_coin"></span></th>
<!--<th>Size(Min-Max <span class="orderbook_base_coin"></span>)</th>
<th>Size(Min-Max <span class="orderbook_rel_coin"></span>)</th>
<th>Sum(<span class="orderbook_rel_coin"></span>)</th>-->
<th>Avg. Volume</th>
<th>Depth</th>
<!--<th>Trader Pubkey</th>-->
<th>Age</th>
<th>UTXOs</th>
<th>ZCredits</th>
</thead>
<tbody></tbody>
</table>
<svg id="orderbook-asks-spinner" class="orderbook-asks-spinner">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path2" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path3" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path4" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
</svg>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 hidden-lg hidden-xl">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<button class="btn btn-xs btn-exchangeclose coinexchange" data-coin="COIN" style="float: right; margin: 6px 6px 0px 3px;">BACK</button>
<button class="btn btn-xs btn-exchangerefresh coinexchange" data-coin="COIN" style="float: right; margin: 6px 6px 0px 3px;"><span class="glyphicon glyphicon-refresh"></span></button>
<ul class="nav nav-tabs">
<li class="active"><a href="#exchange_coin_asks" data-toggle="tab">SELLERS: <span class="orderbook_numasks"></span></a></li>
<li><a href="#exchange_coin_bids" data-toggle="tab">BUYERS: <span class="orderbook_numbids"></span></a></li>
<li class="active"><a href="#exchange_coin_asks_togl" data-toggle="tab">SELLERS: <span class="orderbook_numasks"></span></a></li>
<li><a href="#exchange_coin_bids_togl" data-toggle="tab">BUYERS: <span class="orderbook_numbids"></span></a></li>
</ul>
</div>
<div class=""> <!-- panel-body -->
<div class="tab-content">
<div class="tab-pane fade in active mCustomScrollbar" data-mcs-theme="minimal-dark" id="exchange_coin_asks">
<div class="tab-pane fade in active mCustomScrollbar" data-mcs-theme="minimal-dark" id="exchange_coin_asks_togl">
<table class="table table-striped orderbook_asks fixed_headers" width="100%" style="margin-bottom: 0;">
<table class="table table-striped orderbook_asks" width="100%" style="margin-bottom: 0;">
<thead><th>Price in <span class="orderbook_rel_coin"></span></th>
<!--<th>Size(Min-Max <span class="orderbook_base_coin"></span>)</th>
<th>Size(Min-Max <span class="orderbook_rel_coin"></span>)</th>
@ -599,14 +683,14 @@
</thead>
<tbody></tbody>
</table>
<svg id="orderbook-asks-spinner">
<svg id="orderbook-asks-spinner" class="orderbook-asks-spinner">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path2" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path3" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path4" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
</svg>
</div>
<div class="tab-pane fade mCustomScrollbar" data-mcs-theme="minimal-dark" id="exchange_coin_bids">
<div class="tab-pane fade mCustomScrollbar" data-mcs-theme="minimal-dark" id="exchange_coin_bids_togl">
<table class="table table-striped orderbook_bids" width="100%" style="margin-bottom: 0;">
<thead><th>Price in <span class="orderbook_rel_coin"></span></th>
@ -628,13 +712,13 @@
</div>
<div class="col-sm-12">
<!--<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Trade Status</strong></h3>
<button class="btn btn-xs btn-swapstatusrefresh coinexchange" data-coin="COIN" style="float: right; margin: -20px -8px 0px 0px"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
<div class="exchange_trade_status_body"> <!-- panel-body -->
<div class="exchange_trade_status_body">
<table class="table table-striped exchange_swap_status_tbl fixed_headers" width="100%" style="margin-bottom: 0;">
<thead>
<th>Status</th>
@ -645,7 +729,7 @@
<tbody>
</tbody>
</table>
<svg id="exchange-swap-status-spinner">
<svg id="exchange-swap-status-spinner" class="exchange-swap-status-spinner">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path2" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
<circle class="path3" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
@ -653,7 +737,7 @@
</svg>
</div>
</div>
</div>
</div>-->
</div>
</div>

10
gui/js/simpledexactions.js
View File

@ -2695,14 +2695,14 @@ function CheckOrderBookFn(sig) {
//orderbook_bids_tr += '<td>' + colorpbk.firstpart + '<font style="color: #' + colorpbk.colorpart1 + '; background-color: #' + colorpbk.colorpart1 + ';">' + colorpbk.char1 + '</font><font style="color: #' + colorpbk.colorpart2 + '; background-color: #' + colorpbk.colorpart2 + ';">' + colorpbk.char2 + '</font><font style="color: #' + colorpbk.colorpart3 + '; background-color: #' + colorpbk.colorpart3 + ';">' + colorpbk.char3 + '</font>' + colorpbk.lastpart + '</td>';
orderbook_bids_tr += '<td>' + val.age + '</td>';
orderbook_bids_tr += '<td>' + val.numutxos + '</td>';
orderbook_bids_tr += '<td><span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span> ' + val.zcredits + '</td>';
orderbook_bids_tr += '<td><span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span> ' + val.zcredits.toFixed(2) + '</td>';
$('.orderbook_bids tbody').append(orderbook_bids_tr);
})
$('.orderbook_asks tbody').empty();
if (data.asks &&
data.asks.length) {
$('#orderbook-asks-spinner').hide();
$('.orderbook-asks-spinner').hide();
}
$.each(data.asks, function(index, val) {
//console.log(index);
@ -2734,7 +2734,7 @@ function CheckOrderBookFn(sig) {
//orderbook_asks_tr += '<td>' + colorpbk.firstpart + '<font style="color: #' + colorpbk.colorpart1 + '; background-color: #' + colorpbk.colorpart1 + ';">' + colorpbk.char1 + '</font><font style="color: #' + colorpbk.colorpart2 + '; background-color: #' + colorpbk.colorpart2 + ';">' + colorpbk.char2 + '</font><font style="color: #' + colorpbk.colorpart3 + '; background-color: #' + colorpbk.colorpart3 + ';">' + colorpbk.char3 + '</font>' + colorpbk.lastpart + '</td>';
orderbook_asks_tr += '<td>' + val.age + '</td>';
orderbook_asks_tr += '<td>' + val.numutxos + '</td>';
orderbook_asks_tr += '<td><span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span> ' + val.zcredits + '</td>';
orderbook_asks_tr += '<td><span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span> ' + val.zcredits.toFixed(2) + '</td>';
orderbook_asks_tr += '</tr>';
$('.orderbook_asks tbody').append(orderbook_asks_tr);
})
@ -4795,9 +4795,9 @@ function check_swap_status(sig) {
$('.exchange_swap_status_tbl tbody').empty();
/*if (reversed_swap_list &&
reversed_swap_list.length) {
$('#exchange-swap-status-spinner').hide();
$('.exchange-swap-status-spinner').hide();
}*/
$('#exchange-swap-status-spinner').hide();
$('.exchange-swap-status-spinner').hide();
$.each(reversed_swap_list, function(index, val) {
//console.log(index);
//console.log(val);