totrader/totrader/templates/index.html

137 lines
5.3 KiB
HTML
Raw Normal View History

2023-02-24 00:42:53 +00:00
<html>
2023-02-24 03:43:48 +00:00
<head>
<link rel="stylesheet" src="/static/css/noty.css" />
<link rel="stylesheet" src="/static/css/noty-relax.css" />
</head>
2023-02-24 00:42:53 +00:00
<body>
<div id="container"></div>
</body>
</html>
<script src="/static/js/react.min.js"></script>
<script src="/static/js/react-dom.min.js"></script>
<script src="/static/js/babel.min.js"></script>
2023-02-24 03:43:48 +00:00
<script src="/static/js/noty.js"></script>
2023-02-24 00:42:53 +00:00
<script type="text/babel">
'use strict';
const e = React.createElement;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
2023-02-24 01:06:28 +00:00
looping: false
2023-02-24 00:42:53 +00:00
}
}
2023-02-24 09:57:17 +00:00
// new Noty({
// theme: 'relax',
// layout: 'topCenter',
// text: 'yo doggy',
// timeout: 4500
// }).show();
2023-02-24 00:42:53 +00:00
render() {
2023-02-24 09:57:17 +00:00
let updateAllData;
let storeMarketData;
let storeBalances;
let storeBitcoinPrice;
let storeOrderStatuses;
let storeTradeHistory;
function getAllData() {
console.log('updating data');
fetch('{{ url_for("api.get_ticker_data") }}')
.then((response) => response.json())
.then((res) => {
2023-02-27 00:59:15 +00:00
document.getElementById('get_ticker_data').innerHTML = JSON.stringify(res);
});
fetch('{{ url_for("api.get_balances") }}')
.then((response) => response.json())
.then((res) => {
document.getElementById('get_balances').innerHTML = JSON.stringify(res)
});
fetch('{{ url_for("api.get_bitcoin_price") }}')
.then((response) => response.json())
.then((res) => {
document.getElementById('get_bitcoin_price').innerHTML = JSON.stringify(res)
});
fetch('{{ url_for("api.get_orders") }}')
.then((response) => response.json())
.then((res) => {
document.getElementById('get_orders').innerHTML = JSON.stringify(res)
});
fetch('{{ url_for("api.get_trade_history") }}')
.then((response) => response.json())
.then((res) => {
document.getElementById('get_trade_history').innerHTML = JSON.stringify(res)
2023-02-24 09:57:17 +00:00
});
}
if (this.state.looping) {
storeMarketData = setInterval(function() {
console.log('updating ticker data');
fetch('{{ url_for("tasks.store_ticker_data") }}');
}, 30000);
storeBalances = setInterval(function() {
console.log('storing balances');
fetch('{{ url_for("tasks.store_balances") }}');
}, 50000);
storeBitcoinPrice = setInterval(function() {
console.log('storing bitcoin price');
fetch('{{ url_for("tasks.store_bitcoin_price") }}');
}, 300000);
storeOrderStatuses = setInterval(function() {
console.log('storing order statuses');
fetch('{{ url_for("tasks.store_orders") }}');
}, 30000);
storeTradeHistory = setInterval(function() {
console.log('storing trade history');
fetch('{{ url_for("tasks.store_trade_history") }}');
}, 60000);
2023-02-27 00:59:15 +00:00
updateAllData = setInterval(getAllData, 10000);
2023-02-24 09:57:17 +00:00
}
2023-02-24 00:42:53 +00:00
return(
<div>
2023-02-24 09:57:17 +00:00
<h1>we trade a lil {{ trade_currency | lower }}</h1>
2023-02-24 03:43:48 +00:00
{this.state.looping && (
2023-02-24 09:57:17 +00:00
<div>
<p>market making is started</p>
<button onClick={() => {
2023-02-27 00:59:15 +00:00
this.setState({...this.state, looping: false});
2023-02-24 09:57:17 +00:00
clearInterval(storeMarketData);
clearInterval(storeBalances);
clearInterval(storeBitcoinPrice);
clearInterval(storeOrderStatuses);
clearInterval(storeTradeHistory);
clearInterval(updateAllData);
}}>Stop</button>
</div>
2023-02-24 03:43:48 +00:00
) || (
<div>
2023-02-24 09:57:17 +00:00
<p>market making is stopped</p>
2023-02-24 03:43:48 +00:00
<button onClick={() => {
2023-02-27 00:59:15 +00:00
this.setState({...this.state, looping: true});
2023-02-24 09:57:17 +00:00
getAllData();
}}>Start</button>
2023-02-24 03:43:48 +00:00
</div>
)}
2023-02-27 00:59:15 +00:00
<p id="get_ticker_data"></p>
<p id="get_balances"></p>
<p id="get_bitcoin_price"></p>
<p id="get_orders"></p>
<p id="get_trade_history"></p>
2023-02-24 00:42:53 +00:00
</div>
)
}
}
const domContainer = document.querySelector('#container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(App));
</script>