ui: Rates table example

This commit is contained in:
tecnovert
2022-08-04 11:47:27 +02:00
parent 412770d399
commit 80f0098a3d
4 changed files with 67 additions and 5 deletions

View File

@@ -48,6 +48,7 @@
<input name="continue" type="submit" value="Continue">
<input name="check_rates" type="button" value="Lookup Rates" onclick='lookup_rates();'>
<input name="show_rates_table" type="button" value="Show Rates Table" onclick='lookup_rates_table();'>
<input type="hidden" name="formid" value="{{ form_id }}">
<input type="hidden" name="step1" value="a">
</form>
@@ -83,6 +84,43 @@ xhr_rate.onload = () => {
}
}
const xhr_rates_table = new XMLHttpRequest();
xhr_rates_table.onload = () => {
if (xhr_rates_table.status == 200) {
const list = JSON.parse(xhr_rates_table.response);
headings = ['Source', 'Coin From', 'Coin To', 'Coin From USD Rate', 'Coin To USD Rate', 'Coin From BTC Rate', 'Coin To BTC Rate', 'Relative Rate'];
table = document.createElement('table');
headings_row = document.createElement('tr');
for (let i = 0; i < headings.length; i++) {
column = document.createElement('th');
column.textContent = headings[i];
headings_row.appendChild(column);
}
table.appendChild(headings_row);
for (let i = 0; i < list.length; i++) {
data_row = document.createElement('tr');
for (let j = 0; j < list[i].length; j++) {
column = document.createElement('td');
column.textContent = list[i][j];
data_row.appendChild(column);
}
table.appendChild(data_row);
}
// Clear existing
const display_node = document.getElementById("rates_display");
while (display_node.lastElementChild) {
display_node.removeChild(display_node.lastElementChild);
}
heading = document.createElement('h4');
heading.textContent = 'Rates'
display_node.appendChild(heading);
display_node.appendChild(table);
}
}
function lookup_rates() {
const coin_from = document.getElementById('coin_from').value;
const coin_to = document.getElementById('coin_to').value;
@@ -100,6 +138,22 @@ function lookup_rates() {
xhr_rates.send('coin_from='+coin_from+'&coin_to='+coin_to);
}
function lookup_rates_table() {
const coin_from = document.getElementById('coin_from').value;
const coin_to = document.getElementById('coin_to').value;
if (coin_from == '-1' || coin_to == '-1') {
alert('Coins from and to must be set first.');
return;
}
inner_html = '<h4>Rates</h4><p>Updating...</p>';
document.getElementById('rates_display').innerHTML = inner_html;
xhr_rates_table.open('GET', '/json/rateslist?from='+coin_from+'&to='+coin_to);
xhr_rates_table.send();
}
function set_rate(value_changed) {
const coin_from = document.getElementById('coin_from').value;
const coin_to = document.getElementById('coin_to').value;