<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<nav>
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Inifnity Trade</a>
<ul id="nav-mobile" class="right">
<li>Connection Status: <span id="status">Offline</span></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row"><div class="col s12"><h3 id="orde_amount"></h3></div></div>
<div class="row">
<div class="col xl3 s12">
<table id="my_table_balance">
<thead>
<tr>
<th>Coin</th>
<th>Free</th>
<th>Locked</th>
</tr>
</thead>
</table>
</div>
<div class="col xl9 s12">
<table id="my_table">
<thead>
<tr>
<th>PAIR</th>
<th>Actual Ask Price</th>
<th>Actual Bid Price</th>
<th>Average</th>
<th>Ideal Ask Price</th>
<th>Ideal Bid Price</th>
<th>Signal Buy</th>
<th>Signal Sell</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script>
var socketStatus = document.getElementById('status');
var table = document.getElementById("my_table");
var orderAmount = document.getElementById("orde_amount");
var tableBalance = document.getElementById("my_table_balance");
var socket = new WebSocket("ws://buckfolio.com:4321/");
socket.onopen =(event)=>socketStatus.innerHTML = "Online"
socket.onclose =(event)=>socketStatus.innerHTML = "Offline"
socket.onmessage = (message)=>{
message = JSON.parse(message.data)
// SUCCESS_ORDER
// ORDER_RETURN
orderAmount.innerHTML = "Order Amount: "+message['SUCCESS_ORDER'].length
update_table(message["MARKET_INFO"])
my_balance(message["BALANCE"])
}
var update_table = function (data) {
clearTable(table)
// Find a <table> element with id="myTable":
i = 1
for (var x in data) {
var row = table.insertRow(i);
var pair = row.insertCell(0);
var aap = row.insertCell(1);
var abp = row.insertCell(2);
var avg = row.insertCell(3);
var ap = row.insertCell(4);
var bp = row.insertCell(5);
var sb = row.insertCell(6);
var ss = row.insertCell(7);
pair.innerHTML = data[x].SYMBOL
aap.innerHTML = data[x].ASK.PRICE
abp.innerHTML = data[x].BID.PRICE
avg.innerHTML = data[x].AVERAGE_PRICE.toFixed(4)
ap.innerHTML = data[x].IDEAL_BUY
bp.innerHTML = data[x].IDEAL_SELL
sb.innerHTML = data[x].MOMENT_BUY
ss.innerHTML = data[x].MOMENT_SELL
i++;
}
}
const my_balance = (data)=>{
clearTable(tableBalance)
i = 1
for (var x in data) {
var row = tableBalance.insertRow(i);
var coin = row.insertCell(0);
var free = row.insertCell(1);
var locked = row.insertCell(2);
coin.innerHTML = x
free.innerHTML = data[x].free
locked.innerHTML = data[x].locked
i++;
}
}
const clearTable = (t)=>{
for (var i = t.rows.length - 1; i > 0; i--) {
t.deleteRow(i)
}
}
</script>
</body>
</html>