basicswap_miserver/basicswap/templates/offer_new_1.html

{% include 'header.html' %}

<h3>New Offer</h3>
{% for m in messages %}
<p>{{ m }}</p>
{% endfor %}
{% for m in err_messages %}
<p class="error_msg">Error: {{ m }}</p>
{% endfor %}

<form method="post">

<table>
<tr><td>Send To</td><td><select name="addr_to">
<option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">-- Public Network --</option>
{% for a in addrs_to %}
<option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
{% endfor %}
</select></td></tr>
<tr><td>Send From Address</td><td><select name="addr_from">
{% for a in addrs %}
<option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
{% endfor %}
<option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">-- New Address --</option>
</select></td></tr>

<tr><td>Coin From</td><td>
<select id="coin_from" name="coin_from" onchange="set_rate('coin_from');"><option value="-1">-- Select Coin --</option>
{% for c in coins_from %}
<option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}">{{ c[1] }}</option>
{% endfor %}
</select>
</td><td>Amount From</td><td><input type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');"></td><td>The amount you will send.</td></tr>

<tr><td>Coin To</td><td>
<select id="coin_to" name="coin_to" onchange="set_rate('coin_to');"><option value="-1">-- Select Coin --</option>
{% for c in coins %}
<option{% if data.coin_to==c[0] %} selected{% endif %}  value="{{ c[0] }}">{{ c[1] }}</option>
{% endfor %}
</select>
</td><td>Amount To</td><td><input type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');"></td><td>The amount you will receive.</td></tr>
<tr><td>Minimum Bid Amount</td><td><input type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded"></td></tr>
<tr><td>Rate</td><td><input type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');"></td><td>Lock Rate: <input type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked></td></tr>

<tr><td>Amount Variable</td><td><input type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked=checked{% endif %}></td></tr>
<tr><td>Rate Variable</td><td><input type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked=checked{% endif %}></td></tr>
</table>

<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>

<p id="rates_display"></p>

<p><a href="/">home</a></p>
<script>
const xhr_rates = new XMLHttpRequest();
xhr_rates.onload = () => {
    if (xhr_rates.status == 200) {
        const obj = JSON.parse(xhr_rates.response);

        inner_html = '<h4>Rates</h4><pre><code>' + JSON.stringify(obj, null, '  ') + '</code></pre>';
        document.getElementById('rates_display').innerHTML = inner_html;
    }
}

const xhr_rate = new XMLHttpRequest();
xhr_rate.onload = () => {
    if (xhr_rate.status == 200) {
        const obj = JSON.parse(xhr_rate.response);

        if (obj.hasOwnProperty('rate')) {
            document.getElementById('rate').value = obj['rate'];
        } else
        if (obj.hasOwnProperty('amount_to')) {
            document.getElementById('amt_to').value = obj['amount_to'];
        } else
        if (obj.hasOwnProperty('amount_from')) {
            document.getElementById('amt_from').value = obj['amount_from'];
        }
    }
}

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;

    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.open('POST', '/json/rates');
    xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    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;
    const amt_from = document.getElementById('amt_from').value;
    const amt_to = document.getElementById('amt_to').value;
    const rate = document.getElementById('rate').value;
    const lock_rate = rate == '' ? false : document.getElementById('rate_lock').checked;

    if (coin_from == '-1' || coin_to == '-1') {
        return;
    }

    params = 'coin_from='+coin_from+'&coin_to='+coin_to;
    if (value_changed == 'rate' || (lock_rate && value_changed == 'amt_from') || (amt_to == '' && value_changed == 'amt_from')) {
        if (amt_from == '' || rate == '') {
            return;
        }
        params += '&rate='+rate+'&amt_from='+amt_from;
    } else
    if (lock_rate && value_changed == 'amt_to') {
        if (amt_to == '' || rate == '') {
            return;
        }
        params += '&amt_to='+amt_to+'&rate='+rate;
    } else {
        if (amt_from == '' || amt_to == '') {
            return;
        }
        params += '&amt_from='+amt_from+'&amt_to='+amt_to;
    }

    xhr_rate.open('POST', '/json/rate');
    xhr_rate.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr_rate.send(params);
}
</script>
<script src="static/js/new_offer.js"></script>
</body></html>