mirror of
https://github.com/basicswap/basicswap.git
synced 2025-01-19 17:14:33 +00:00
ui: Update new bid section.
This commit is contained in:
gerlofvanek
parent
878a145420
commit
a3645c286d
1 changed files with 452 additions and 194 deletions
|
|
@ -392,21 +392,11 @@
|
|||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Value</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600 h-20">
|
||||
<td class="py-3 px-6">Amount you will get <span class="bold" id="bid_amt_from">{{ data.amt_from }}</span> {{ data.tla_from }}
|
||||
{% if data.xmr_type == true %}
|
||||
(excluding estimated {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees).
|
||||
{% else %}
|
||||
(excluding a tx fee).
|
||||
{% endif %}</td>
|
||||
<td class="py-3 px-6">Amount you will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<td class="py-3 px-6 bold">Send From Address</td>
|
||||
<td class="py-3 px-6">
|
||||
|
|
@ -475,21 +465,131 @@ if (document.readyState === 'loading') {
|
|||
handleBidsPageAddress();
|
||||
}
|
||||
</script>
|
||||
{% if data.amount_negotiable == true %}
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<td class="py-3 px-6 bold">Amount</td>
|
||||
<td class="py-3 px-6">
|
||||
<input type="text" class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" id="bid_amount" name="bid_amount" value="{{ data.bid_amount }}" onchange="updateBidParams('amount');">
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if data.rate_negotiable == true %}
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<td class="py-3 px-6 bold">Rate</td>
|
||||
<td class="py-3 px-6"> <input type="text" class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-100 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" id="bid_rate" name="bid_rate" value="{{ data.bid_rate }}" onchange="updateBidParams('rate');">
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if data.amount_negotiable == true %}
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<td class="px-6">
|
||||
<span class="inline-flex bold align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
|
||||
<img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
|
||||
</span>
|
||||
<span class="bold">Sending ({{ data.tla_to }})</span>
|
||||
</td>
|
||||
<td class="py-3 px-6">
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
class="bg-gray-50 text-gray-900 appearance-none pr-28 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"
|
||||
id="bid_amount_send"
|
||||
name="bid_amount_send"
|
||||
value="{{ data.amt_to }}"
|
||||
max="{{ data.amt_to }}"
|
||||
onchange="validateMaxAmount(this, {{ data.amt_to }}); updateBidParams('sending');">
|
||||
<div class="absolute inset-y-0 right-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-300 text-sm">
|
||||
max {{ data.amt_to }} ({{ data.tla_to }})
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<td class="px-6">
|
||||
<span class="inline-flex bold align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
|
||||
<img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
|
||||
</span>
|
||||
<span class="bold">Receiving ({{ data.tla_from }})</span>
|
||||
</td>
|
||||
<td class="py-3 px-6">
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
class="bg-gray-50 text-gray-900 appearance-none pr-28 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"
|
||||
id="bid_amount"
|
||||
name="bid_amount"
|
||||
value="{{ data.bid_amount }}"
|
||||
max="{{ data.amt_from }}"
|
||||
onchange="validateMaxAmount(this, {{ data.amt_from }}); updateBidParams('receiving');">
|
||||
<div class="absolute inset-y-0 right-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-300 text-sm">
|
||||
max {{ data.amt_from }} ({{ data.tla_from }})
|
||||
</div>
|
||||
</div>
|
||||
{% if data.xmr_type == true %}
|
||||
<div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(excluding estimated <span class="bold">{{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span> in tx fees)</div>
|
||||
{% else %}
|
||||
<div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(excluding a tx fee)</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<td class="px-6">
|
||||
<span class="inline-flex bold align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
|
||||
<img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
|
||||
</span>
|
||||
<span class="bold">Sending ({{ data.tla_to }})</span>
|
||||
</td>
|
||||
<td class="py-3 px-6">
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
class="bg-gray-50 text-gray-900 appearance-none pr-28 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 cursor-not-allowed"
|
||||
id="bid_amount_send"
|
||||
name="bid_amount_send"
|
||||
value="{{ data.amt_to }}"
|
||||
max="{{ data.amt_to }}"
|
||||
disabled>
|
||||
<div class="absolute inset-y-0 right-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-300 text-sm">
|
||||
max {{ data.amt_to }} ({{ data.tla_to }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(Amount not variable)</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<td class="px-6">
|
||||
<span class="inline-flex bold align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
|
||||
<img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
|
||||
</span>
|
||||
<span class="bold">Receiving ({{ data.tla_from }})</span>
|
||||
</td>
|
||||
<td class="py-3 px-6">
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
class="bg-gray-50 text-gray-900 appearance-none pr-28 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 cursor-not-allowed"
|
||||
id="bid_amount"
|
||||
name="bid_amount"
|
||||
value="{{ data.bid_amount }}"
|
||||
max="{{ data.amt_from }}"
|
||||
disabled>
|
||||
<div class="absolute inset-y-0 right-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-300 text-sm">
|
||||
max {{ data.amt_from }} ({{ data.tla_from }})
|
||||
</div>
|
||||
</div>
|
||||
{% if data.xmr_type == true %}
|
||||
<div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(excluding estimated <span class="bold">{{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span> in tx fees)</div>
|
||||
{% else %}
|
||||
<div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(excluding a tx fee)</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<td class="py-3 px-6 bold">Rate </td>
|
||||
<td class="py-3 px-6">
|
||||
{% if data.rate_negotiable == true %}
|
||||
<input type="text"
|
||||
class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"
|
||||
id="bid_rate"
|
||||
name="bid_rate"
|
||||
value="{{ data.bid_rate }}"
|
||||
placeholder="Current rate: {{ data.rate }}"
|
||||
onchange="updateBidParams('rate')">
|
||||
{% else %}
|
||||
<input type="text"
|
||||
class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 cursor-not-allowed"
|
||||
id="bid_rate"
|
||||
name="bid_rate"
|
||||
value="{{ data.rate }}"
|
||||
title="Rate is not negotiable"
|
||||
disabled>
|
||||
<div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(Rate is not negotiable)</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<td class="py-3 px-6 bold">Minutes valid</td>
|
||||
<td class="py-3 px-6">
|
||||
|
|
@ -519,15 +619,24 @@ if (document.readyState === 'loading') {
|
|||
</div>
|
||||
<div class="rounded-b-md">
|
||||
<div class="w-full md:w-0/12">
|
||||
<div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
|
||||
<div class="w-full md:w-auto p-1.5 ml-2">
|
||||
<div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<button type="button" onclick="resetForm()" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">
|
||||
Clear Form
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-full md:w-auto p-1.5 ml-2">
|
||||
<input type="hidden" name="confirm" value="true">
|
||||
<button name="sendbid" value="Send Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Send Bid</button>
|
||||
</div>
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
<button name="sendbid" value="Send Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
|
||||
Send Bid
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO:
|
||||
<div class="w-full md:w-auto p-1.5 ml-2"><button name="check_rates" value="Lookup Rates" type="button" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="mr-2"
|
||||
|
|
@ -538,15 +647,12 @@ if (document.readyState === 'loading') {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="confirmModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-300 ease-out"></div>
|
||||
|
||||
<div class="relative z-50 min-h-screen px-4 flex items-center justify-center">
|
||||
<div class="bg-white dark:bg-gray-500 rounded-lg max-w-2xl w-full p-6 shadow-lg transition-opacity duration-300 ease-out">
|
||||
<div class="text-center">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Confirm Bid</h2>
|
||||
|
||||
<div class="space-y-4 text-left mb-8">
|
||||
<div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Amount you will get:</div>
|
||||
|
|
@ -556,7 +662,6 @@ if (document.readyState === 'loading') {
|
|||
<div class="text-sm text-gray-500 dark:text-gray-400 mt-1" id="modal-fee-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Amount you will send:</div>
|
||||
<div class="font-medium text-gray-900 dark:text-white text-lg">
|
||||
|
|
@ -564,20 +669,17 @@ if (document.readyState === 'loading') {
|
|||
<span id="modal-send-currency"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Send From Address:</div>
|
||||
<div class="font-mono text-sm p-2 bg-white dark:bg-gray-500 rounded border border-gray-300 dark:border-gray-400 overflow-x-auto text-gray-900 dark:text-white">
|
||||
<span id="modal-addr-from"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Minutes valid:</div>
|
||||
<div class="font-medium text-gray-900 dark:text-white text-lg" id="modal-valid-mins"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center gap-4">
|
||||
<button type="submit" name="sendbid" value="confirm"
|
||||
class="px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
|
||||
|
|
@ -592,115 +694,333 @@ if (document.readyState === 'loading') {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function updateBidParams(value_changed) {
|
||||
const coin_from = document.getElementById('coin_from').value;
|
||||
const coin_to = document.getElementById('coin_to').value;
|
||||
const amt_var = document.getElementById('amt_var').value;
|
||||
const rate_var = document.getElementById('rate_var').value;
|
||||
|
||||
let amt_from = '';
|
||||
let rate = '';
|
||||
|
||||
if (amt_var == 'True') {
|
||||
amt_from = document.getElementById('bid_amount').value;
|
||||
} else {
|
||||
amt_from = document.getElementById('amount_from').value;
|
||||
}
|
||||
|
||||
if (rate_var == 'True') {
|
||||
rate = document.getElementById('bid_rate').value;
|
||||
} else {
|
||||
rate = document.getElementById('offer_rate').value;
|
||||
}
|
||||
|
||||
if (value_changed == 'amount') {
|
||||
document.getElementById('bid_amt_from').innerHTML = amt_from;
|
||||
}
|
||||
|
||||
xhr_bid_params.open('POST', '/json/rate');
|
||||
xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr_bid_params.send('coin_from=' + coin_from + '&coin_to=' + coin_to + '&rate=' + rate + '&amt_from=' + amt_from);
|
||||
const xhr_rates = new XMLHttpRequest();
|
||||
xhr_rates.onload = () => {
|
||||
if (xhr_rates.status == 200) {
|
||||
const obj = JSON.parse(xhr_rates.response);
|
||||
const inner_html = '<h4 class="bold>Rates</h4><pre><code>' + JSON.stringify(obj, null, ' ') + '</code></pre>';
|
||||
const ratesDisplay = document.getElementById('rates_display');
|
||||
if (ratesDisplay) {
|
||||
ratesDisplay.innerHTML = inner_html;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const xhr_bid_params = new XMLHttpRequest();
|
||||
xhr_bid_params.onload = () => {
|
||||
if (xhr_bid_params.status == 200) {
|
||||
const obj = JSON.parse(xhr_bid_params.response);
|
||||
const bidAmountSendInput = document.getElementById('bid_amount_send');
|
||||
if (bidAmountSendInput) {
|
||||
bidAmountSendInput.value = obj['amount_to'];
|
||||
}
|
||||
updateModalValues();
|
||||
}
|
||||
};
|
||||
|
||||
function lookup_rates() {
|
||||
const coin_from = document.getElementById('coin_from')?.value;
|
||||
const coin_to = document.getElementById('coin_to')?.value;
|
||||
|
||||
if (!coin_from || !coin_to || coin_from === '-1' || coin_to === '-1') {
|
||||
alert('Coins from and to must be set first.');
|
||||
return;
|
||||
}
|
||||
|
||||
const ratesDisplay = document.getElementById('rates_display');
|
||||
if (ratesDisplay) {
|
||||
ratesDisplay.innerHTML = '<h4>Rates</h4><p>Updating...</p>';
|
||||
}
|
||||
|
||||
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 updateModalValues() {
|
||||
document.getElementById('modal-amt-receive').textContent = document.getElementById('bid_amt_from').textContent;
|
||||
document.getElementById('modal-amt-send').textContent = document.getElementById('bid_amt_to').textContent;
|
||||
document.getElementById('modal-receive-currency').textContent = '{{ data.tla_from }}';
|
||||
document.getElementById('modal-send-currency').textContent = '{{ data.tla_to }}';
|
||||
|
||||
{% if data.xmr_type == true %}
|
||||
document.getElementById('modal-fee-info').textContent = `(excluding estimated {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees)`;
|
||||
{% else %}
|
||||
document.getElementById('modal-fee-info').textContent = '(excluding a tx fee)';
|
||||
{% endif %}
|
||||
|
||||
const addrSelect = document.querySelector('select[name="addr_from"]');
|
||||
const selectedText = addrSelect.options[addrSelect.selectedIndex].text;
|
||||
const addrText = selectedText === 'New Address' ? selectedText : selectedText.split(' ')[0];
|
||||
document.getElementById('modal-addr-from').textContent = addrText;
|
||||
|
||||
document.getElementById('modal-valid-mins').textContent = document.querySelector('input[name="validmins"]').value;
|
||||
function resetForm() {
|
||||
const bidAmountSendInput = document.getElementById('bid_amount_send');
|
||||
const bidAmountInput = document.getElementById('bid_amount');
|
||||
const bidRateInput = document.getElementById('bid_rate');
|
||||
const validMinsInput = document.querySelector('input[name="validmins"]');
|
||||
const addrFromSelect = document.querySelector('select[name="addr_from"]');
|
||||
|
||||
if (bidAmountSendInput) {
|
||||
const defaultSendAmount = bidAmountSendInput.getAttribute('max');
|
||||
bidAmountSendInput.value = defaultSendAmount;
|
||||
}
|
||||
|
||||
if (bidAmountInput) {
|
||||
const defaultReceiveAmount = bidAmountInput.getAttribute('max');
|
||||
bidAmountInput.value = defaultReceiveAmount;
|
||||
}
|
||||
|
||||
if (bidRateInput && !bidRateInput.disabled) {
|
||||
const defaultRate = document.getElementById('offer_rate')?.value || '';
|
||||
bidRateInput.value = defaultRate;
|
||||
}
|
||||
|
||||
if (validMinsInput) {
|
||||
validMinsInput.value = "60";
|
||||
}
|
||||
|
||||
if (addrFromSelect) {
|
||||
if (addrFromSelect.options.length > 1) {
|
||||
addrFromSelect.selectedIndex = 1;
|
||||
} else {
|
||||
addrFromSelect.selectedIndex = 0;
|
||||
}
|
||||
const selectedOption = addrFromSelect.options[addrFromSelect.selectedIndex];
|
||||
saveAddress(selectedOption.value, selectedOption.text);
|
||||
}
|
||||
|
||||
updateBidParams('rate');
|
||||
updateModalValues();
|
||||
|
||||
const errorMessages = document.querySelectorAll('.error-message');
|
||||
errorMessages.forEach(msg => msg.remove());
|
||||
|
||||
const inputs = document.querySelectorAll('input');
|
||||
inputs.forEach(input => {
|
||||
input.classList.remove('border-red-500', 'focus:border-red-500');
|
||||
});
|
||||
}
|
||||
|
||||
function updateBidParams(value_changed) {
|
||||
const coin_from = document.getElementById('coin_from')?.value;
|
||||
const coin_to = document.getElementById('coin_to')?.value;
|
||||
const amt_var = document.getElementById('amt_var')?.value;
|
||||
const rate_var = document.getElementById('rate_var')?.value;
|
||||
const bidAmountInput = document.getElementById('bid_amount');
|
||||
const bidAmountSendInput = document.getElementById('bid_amount_send');
|
||||
const amountFromInput = document.getElementById('amount_from');
|
||||
const bidRateInput = document.getElementById('bid_rate');
|
||||
const offerRateInput = document.getElementById('offer_rate');
|
||||
|
||||
if (!coin_from || !coin_to || !amt_var || !rate_var) return;
|
||||
|
||||
const rate = rate_var === 'True' && bidRateInput ?
|
||||
parseFloat(bidRateInput.value) || 0 :
|
||||
parseFloat(offerRateInput?.value || '0');
|
||||
|
||||
if (!rate) return;
|
||||
|
||||
if (value_changed === 'rate') {
|
||||
if (bidAmountSendInput && bidAmountInput) {
|
||||
const sendAmount = parseFloat(bidAmountSendInput.value) || 0;
|
||||
const receiveAmount = (sendAmount / rate).toFixed(8);
|
||||
bidAmountInput.value = receiveAmount;
|
||||
}
|
||||
} else if (value_changed === 'sending') {
|
||||
if (bidAmountSendInput && bidAmountInput) {
|
||||
const sendAmount = parseFloat(bidAmountSendInput.value) || 0;
|
||||
const receiveAmount = (sendAmount / rate).toFixed(8);
|
||||
bidAmountInput.value = receiveAmount;
|
||||
}
|
||||
} else if (value_changed === 'receiving') {
|
||||
if (bidAmountInput && bidAmountSendInput) {
|
||||
const receiveAmount = parseFloat(bidAmountInput.value) || 0;
|
||||
const sendAmount = (receiveAmount * rate).toFixed(8);
|
||||
bidAmountSendInput.value = sendAmount;
|
||||
}
|
||||
}
|
||||
|
||||
validateAmountsAfterChange();
|
||||
|
||||
xhr_bid_params.open('POST', '/json/rate');
|
||||
xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr_bid_params.send(`coin_from=${coin_from}&coin_to=${coin_to}&rate=${rate}&amt_from=${bidAmountInput?.value || '0'}`);
|
||||
|
||||
updateModalValues();
|
||||
}
|
||||
|
||||
function validateAmountsAfterChange() {
|
||||
const bidAmountSendInput = document.getElementById('bid_amount_send');
|
||||
const bidAmountInput = document.getElementById('bid_amount');
|
||||
|
||||
if (bidAmountSendInput) {
|
||||
const maxSend = parseFloat(bidAmountSendInput.getAttribute('max'));
|
||||
validateMaxAmount(bidAmountSendInput, maxSend);
|
||||
}
|
||||
if (bidAmountInput) {
|
||||
const maxReceive = parseFloat(bidAmountInput.getAttribute('max'));
|
||||
validateMaxAmount(bidAmountInput, maxReceive);
|
||||
}
|
||||
}
|
||||
|
||||
function validateMaxAmount(input, maxAmount) {
|
||||
if (!input) return;
|
||||
const value = parseFloat(input.value) || 0;
|
||||
if (value > maxAmount) {
|
||||
input.value = maxAmount;
|
||||
}
|
||||
}
|
||||
|
||||
function showConfirmModal() {
|
||||
updateModalValues();
|
||||
document.getElementById('confirmModal').classList.remove('hidden');
|
||||
return false;
|
||||
updateModalValues();
|
||||
const modal = document.getElementById('confirmModal');
|
||||
if (modal) {
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function hideConfirmModal() {
|
||||
document.getElementById('confirmModal').classList.add('hidden');
|
||||
return false;
|
||||
const modal = document.getElementById('confirmModal');
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function updateModalValues() {
|
||||
const bidAmountInput = document.getElementById('bid_amount');
|
||||
const bidAmountSendInput = document.getElementById('bid_amount_send');
|
||||
|
||||
if (bidAmountInput) {
|
||||
const modalAmtReceive = document.getElementById('modal-amt-receive');
|
||||
if (modalAmtReceive) {
|
||||
modalAmtReceive.textContent = bidAmountInput.value;
|
||||
}
|
||||
|
||||
const modalReceiveCurrency = document.getElementById('modal-receive-currency');
|
||||
if (modalReceiveCurrency) {
|
||||
modalReceiveCurrency.textContent = ' {{ data.tla_from }}';
|
||||
}
|
||||
}
|
||||
|
||||
if (bidAmountSendInput) {
|
||||
const modalAmtSend = document.getElementById('modal-amt-send');
|
||||
if (modalAmtSend) {
|
||||
modalAmtSend.textContent = bidAmountSendInput.value;
|
||||
}
|
||||
|
||||
const modalSendCurrency = document.getElementById('modal-send-currency');
|
||||
if (modalSendCurrency) {
|
||||
modalSendCurrency.textContent = ' {{ data.tla_to }}';
|
||||
}
|
||||
}
|
||||
|
||||
const modalFeeInfo = document.getElementById('modal-fee-info');
|
||||
if (modalFeeInfo) {
|
||||
{% if data.xmr_type == true %}
|
||||
modalFeeInfo.textContent = `(excluding estimated {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees)`;
|
||||
{% else %}
|
||||
modalFeeInfo.textContent = '(excluding a tx fee)';
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
const addrSelect = document.querySelector('select[name="addr_from"]');
|
||||
if (addrSelect) {
|
||||
const modalAddrFrom = document.getElementById('modal-addr-from');
|
||||
if (modalAddrFrom) {
|
||||
const selectedOption = addrSelect.options[addrSelect.selectedIndex];
|
||||
const addrText = selectedOption.value === '-1' ? 'New Address' : selectedOption.text.split(' ')[0];
|
||||
modalAddrFrom.textContent = addrText;
|
||||
}
|
||||
}
|
||||
|
||||
const validMinsInput = document.querySelector('input[name="validmins"]');
|
||||
if (validMinsInput) {
|
||||
const modalValidMins = document.getElementById('modal-valid-mins');
|
||||
if (modalValidMins) {
|
||||
modalValidMins.textContent = validMinsInput.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleBidsPageAddress() {
|
||||
const selectElement = document.querySelector('select[name="addr_from"]');
|
||||
const STORAGE_KEY = 'lastUsedAddressBids';
|
||||
|
||||
if (!selectElement) return;
|
||||
|
||||
function loadInitialAddress() {
|
||||
try {
|
||||
const savedAddressJSON = localStorage.getItem(STORAGE_KEY);
|
||||
if (savedAddressJSON) {
|
||||
const savedAddress = JSON.parse(savedAddressJSON);
|
||||
if (savedAddress && savedAddress.value) {
|
||||
selectElement.value = savedAddress.value;
|
||||
} else {
|
||||
selectFirstAddress();
|
||||
}
|
||||
} else {
|
||||
selectFirstAddress();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error loading saved address:', e);
|
||||
selectFirstAddress();
|
||||
}
|
||||
}
|
||||
|
||||
function selectFirstAddress() {
|
||||
if (selectElement.options.length > 1) {
|
||||
const firstOption = selectElement.options[1];
|
||||
if (firstOption) {
|
||||
selectElement.value = firstOption.value;
|
||||
saveAddress(firstOption.value, firstOption.text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
selectElement.addEventListener('change', (event) => {
|
||||
if (event.target.selectedOptions[0]) {
|
||||
saveAddress(event.target.value, event.target.selectedOptions[0].text);
|
||||
}
|
||||
});
|
||||
|
||||
loadInitialAddress();
|
||||
}
|
||||
|
||||
function saveAddress(value, text) {
|
||||
try {
|
||||
const addressData = { value, text };
|
||||
localStorage.setItem('lastUsedAddressBids', JSON.stringify(addressData));
|
||||
} catch (e) {
|
||||
console.error('Error saving address:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function confirmPopup() {
|
||||
return confirm("Are you sure?");
|
||||
}
|
||||
|
||||
function handleCancelClick(event) {
|
||||
event.preventDefault();
|
||||
window.location.href = `/offer/${window.location.pathname.split('/')[2]}`;
|
||||
if (event) event.preventDefault();
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const offerId = pathParts[pathParts.indexOf('offer') + 1];
|
||||
window.location.href = `/offer/${offerId}`;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sendBidBtn = document.querySelector('button[name="sendbid"][value="Send Bid"]');
|
||||
if (sendBidBtn) {
|
||||
sendBidBtn.onclick = showConfirmModal;
|
||||
}
|
||||
|
||||
const modalCancelBtn = document.querySelector('#confirmModal .flex button:last-child');
|
||||
if (modalCancelBtn) {
|
||||
modalCancelBtn.onclick = hideConfirmModal;
|
||||
}
|
||||
const sendBidBtn = document.querySelector('button[name="sendbid"][value="Send Bid"]');
|
||||
if (sendBidBtn) {
|
||||
sendBidBtn.onclick = showConfirmModal;
|
||||
}
|
||||
|
||||
const mainCancelBtn = document.querySelector('button[name="cancel"]');
|
||||
if (mainCancelBtn) {
|
||||
mainCancelBtn.onclick = handleCancelClick;
|
||||
}
|
||||
|
||||
// Input change listeners
|
||||
const validMinsInput = document.querySelector('input[name="validmins"]');
|
||||
if (validMinsInput) {
|
||||
validMinsInput.addEventListener('input', updateModalValues);
|
||||
}
|
||||
|
||||
const addrFromSelect = document.querySelector('select[name="addr_from"]');
|
||||
if (addrFromSelect) {
|
||||
addrFromSelect.addEventListener('change', updateModalValues);
|
||||
}
|
||||
const modalCancelBtn = document.querySelector('#confirmModal .flex button:last-child');
|
||||
if (modalCancelBtn) {
|
||||
modalCancelBtn.onclick = hideConfirmModal;
|
||||
}
|
||||
|
||||
const bidAmountInput = document.getElementById('bid_amount');
|
||||
if (bidAmountInput) {
|
||||
bidAmountInput.addEventListener('change', () => {
|
||||
updateBidParams('amount');
|
||||
updateModalValues();
|
||||
});
|
||||
}
|
||||
const mainCancelBtn = document.querySelector('button[name="cancel"]');
|
||||
if (mainCancelBtn) {
|
||||
mainCancelBtn.onclick = handleCancelClick;
|
||||
}
|
||||
|
||||
const bidRateInput = document.getElementById('bid_rate');
|
||||
if (bidRateInput) {
|
||||
bidRateInput.addEventListener('change', () => {
|
||||
updateBidParams('rate');
|
||||
updateModalValues();
|
||||
});
|
||||
}
|
||||
const validMinsInput = document.querySelector('input[name="validmins"]');
|
||||
if (validMinsInput) {
|
||||
validMinsInput.addEventListener('input', updateModalValues);
|
||||
}
|
||||
|
||||
const addrFromSelect = document.querySelector('select[name="addr_from"]');
|
||||
if (addrFromSelect) {
|
||||
addrFromSelect.addEventListener('change', updateModalValues);
|
||||
}
|
||||
|
||||
handleBidsPageAddress();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -768,67 +1088,5 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
</section>
|
||||
</div>
|
||||
{% include 'footer.html' %}
|
||||
<script>
|
||||
const xhr_rates = new XMLHttpRequest();
|
||||
xhr_rates.onload = () => {
|
||||
if (xhr_rates.status == 200) {
|
||||
const obj = JSON.parse(xhr_rates.response);
|
||||
inner_html = '<h4 class="bold>Rates</h4><pre><code>' + JSON.stringify(obj, null, ' ') + '</code></pre>';
|
||||
document.getElementById('rates_display').innerHTML = inner_html;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
const xhr_bid_params = new XMLHttpRequest();
|
||||
xhr_bid_params.onload = () => {
|
||||
if (xhr_bid_params.status == 200) {
|
||||
const obj = JSON.parse(xhr_bid_params.response);
|
||||
document.getElementById('bid_amt_to').innerHTML = obj['amount_to'];
|
||||
}
|
||||
}
|
||||
|
||||
function updateBidParams(value_changed) {
|
||||
const coin_from = document.getElementById('coin_from').value;
|
||||
const coin_to = document.getElementById('coin_to').value;
|
||||
const amt_var = document.getElementById('amt_var').value;
|
||||
const rate_var = document.getElementById('rate_var').value;
|
||||
let amt_from = '';
|
||||
let rate = '';
|
||||
if (amt_var == 'True') {
|
||||
amt_from = document.getElementById('bid_amount').value;
|
||||
}
|
||||
else {
|
||||
amt_from = document.getElementById('amount_from').value;
|
||||
}
|
||||
if (rate_var == 'True') {
|
||||
rate = document.getElementById('bid_rate').value;
|
||||
}
|
||||
else {
|
||||
rate = document.getElementById('offer_rate').value;
|
||||
}
|
||||
if (value_changed == 'amount') {
|
||||
document.getElementById('bid_amt_from').innerHTML = amt_from;
|
||||
}
|
||||
xhr_bid_params.open('POST', '/json/rate');
|
||||
xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xhr_bid_params.send('coin_from=' + coin_from + '&coin_to=' + coin_to + '&rate=' + rate + '&amt_from=' + amt_from);
|
||||
}
|
||||
|
||||
function confirmPopup() {
|
||||
return confirm("Are you sure?");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue