You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
4.7 KiB
128 lines
4.7 KiB
<html>
|
|
<head>
|
|
<link rel="stylesheet" src="/static/css/noty.css" />
|
|
<link rel="stylesheet" src="/static/css/noty-relax.css" />
|
|
</head>
|
|
<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>
|
|
<script src="/static/js/noty.js"></script>
|
|
<script type="text/babel">
|
|
|
|
'use strict';
|
|
|
|
const e = React.createElement;
|
|
|
|
class App extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
looping: false
|
|
}
|
|
}
|
|
|
|
// new Noty({
|
|
// theme: 'relax',
|
|
// layout: 'topCenter',
|
|
// text: 'yo doggy',
|
|
// timeout: 4500
|
|
// }).show();
|
|
|
|
render() {
|
|
// fetch latest data for the UI
|
|
let updateAllData;
|
|
// trigger background tasks to store data
|
|
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) => {
|
|
console.log(res);
|
|
});
|
|
fetch('{{ url_for("api.get_balances") }}');
|
|
fetch('{{ url_for("api.get_bitcoin_price") }}');
|
|
fetch('{{ url_for("api.get_orders") }}');
|
|
fetch('{{ url_for("api.get_trade_history") }}');
|
|
}
|
|
|
|
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);
|
|
updateAllData = setInterval(getAllData(), 10000);
|
|
}
|
|
|
|
return(
|
|
<div>
|
|
<h1>we trade a lil {{ trade_currency | lower }}</h1>
|
|
{this.state.looping && (
|
|
<div>
|
|
<p>market making is started</p>
|
|
<button onClick={() => {
|
|
this.setState({looping: false});
|
|
clearInterval(storeMarketData);
|
|
clearInterval(storeBalances);
|
|
clearInterval(storeBitcoinPrice);
|
|
clearInterval(storeOrderStatuses);
|
|
clearInterval(storeTradeHistory);
|
|
clearInterval(updateAllData);
|
|
}}>Stop</button>
|
|
</div>
|
|
) || (
|
|
<div>
|
|
<p>market making is stopped</p>
|
|
<button onClick={() => {
|
|
this.setState({looping: true});
|
|
getAllData();
|
|
}}>Start</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
// this.setState(prevState => {
|
|
// let jasper = { ...prevState.jasper }; // creating copy of state variable jasper
|
|
// jasper.name = 'someothername'; // store the name property, assign a new value
|
|
// return { jasper }; // return new object jasper object
|
|
// });
|
|
|
|
const domContainer = document.querySelector('#container');
|
|
const root = ReactDOM.createRoot(domContainer);
|
|
root.render(e(App));
|
|
|
|
// setInterval(function() {
|
|
// fetch('{{ url_for("tasks.store_ticker_data") }}');
|
|
// }, 10000)
|
|
|
|
</script> |