mirror of
https://github.com/basicswap/basicswap.git
synced 2025-01-18 16:44:34 +00:00
Merge pull request #128 from gerlofvanek/chart
Some checks failed
lint / build (3.12) (push) Has been cancelled
Some checks failed
lint / build (3.12) (push) Has been cancelled
ui: Main price chart fixes/updates.
This commit is contained in:
Cryptoguard
GitHub
commit
75fa008f0a
3 changed files with 143 additions and 95 deletions
|
|
@ -485,7 +485,8 @@ function fetchOffers(manualRefresh = false) {
|
|||
created_at: Number(offer.created_at || 0),
|
||||
expire_at: Number(offer.expire_at || 0),
|
||||
is_own_offer: Boolean(offer.is_own_offer),
|
||||
amount_negotiable: Boolean(offer.amount_negotiable)
|
||||
amount_negotiable: Boolean(offer.amount_negotiable),
|
||||
unique_id: `${offer.offer_id}_${offer.created_at}_${offer.coin_from}_${offer.coin_to}`
|
||||
}));
|
||||
|
||||
if (!isSentOffers) {
|
||||
|
|
@ -610,7 +611,7 @@ function filterAndSortData() {
|
|||
|
||||
const formData = new FormData(filterForm);
|
||||
const filters = Object.fromEntries(formData);
|
||||
console.log('Raw filters:', filters);
|
||||
console.log('Processed filters:', filters);
|
||||
|
||||
if (filters.coin_to !== 'any') {
|
||||
filters.coin_to = coinIdToName[filters.coin_to] || filters.coin_to;
|
||||
|
|
@ -623,41 +624,49 @@ function filterAndSortData() {
|
|||
|
||||
const currentTime = Math.floor(Date.now() / 1000);
|
||||
|
||||
let filteredData = originalJsonData.filter(offer => {
|
||||
const uniqueOffersMap = new Map();
|
||||
|
||||
originalJsonData.forEach(offer => {
|
||||
const coinFrom = (offer.coin_from || '').toLowerCase();
|
||||
const coinTo = (offer.coin_to || '').toLowerCase();
|
||||
const isExpired = offer.expire_at <= currentTime;
|
||||
|
||||
if (!isSentOffers && isExpired) {
|
||||
return false;
|
||||
return;
|
||||
}
|
||||
|
||||
let passesFilter = true;
|
||||
|
||||
if (isSentOffers) {
|
||||
if (filters.coin_to !== 'any' && coinFrom.toLowerCase() !== filters.coin_to.toLowerCase()) {
|
||||
return false;
|
||||
passesFilter = false;
|
||||
}
|
||||
if (filters.coin_from !== 'any' && coinTo.toLowerCase() !== filters.coin_from.toLowerCase()) {
|
||||
return false;
|
||||
passesFilter = false;
|
||||
}
|
||||
} else {
|
||||
if (filters.coin_to !== 'any' && coinTo.toLowerCase() !== filters.coin_to.toLowerCase()) {
|
||||
return false;
|
||||
passesFilter = false;
|
||||
}
|
||||
if (filters.coin_from !== 'any' && coinFrom.toLowerCase() !== filters.coin_from.toLowerCase()) {
|
||||
return false;
|
||||
passesFilter = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (isSentOffers && filters.active && filters.active !== 'any') {
|
||||
const offerState = isExpired ? 'expired' : 'active';
|
||||
if (filters.active !== offerState) {
|
||||
return false;
|
||||
passesFilter = false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
if (passesFilter) {
|
||||
uniqueOffersMap.set(offer.unique_id, offer);
|
||||
}
|
||||
});
|
||||
|
||||
let filteredData = Array.from(uniqueOffersMap.values());
|
||||
|
||||
console.log('Filtered data length:', filteredData.length);
|
||||
|
||||
const sortBy = filters.sort_by || 'created_at';
|
||||
|
|
@ -822,6 +831,7 @@ function prepareOfferData(offer, isSentOffers) {
|
|||
};
|
||||
}
|
||||
|
||||
// to-do revoked
|
||||
function getButtonProperties(isActuallyExpired, isSentOffers, isTreatedAsSentOffer, isRevoked) {
|
||||
if (isRevoked) {
|
||||
return {
|
||||
|
|
@ -865,8 +875,7 @@ function updateProfitLoss(row, fromCoin, toCoin, fromAmount, toAmount) {
|
|||
const colorClass = getProfitColorClass(profitLossPercentage);
|
||||
profitLossElement.textContent = `${profitLossPercentage > 0 ? '+' : ''}${profitLossPercentage}%`;
|
||||
profitLossElement.className = `profit-loss text-lg font-bold ${colorClass}`;
|
||||
|
||||
// Update the tooltip content
|
||||
|
||||
const tooltipId = `percentage-tooltip-${row.getAttribute('data-offer-id')}`;
|
||||
const tooltipElement = document.getElementById(tooltipId);
|
||||
if (tooltipElement) {
|
||||
|
|
@ -955,6 +964,7 @@ function getMarketRate(fromCoin, toCoin) {
|
|||
});
|
||||
}
|
||||
|
||||
// todo
|
||||
function getTimerColor(offer) {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const offerAge = now - offer.created_at;
|
||||
|
|
@ -1015,21 +1025,19 @@ function createDetailsColumn(offer) {
|
|||
`;
|
||||
}
|
||||
|
||||
function createTakerAmountColumn(offer, coinFrom, coinTo) {
|
||||
const fromAmount = parseFloat(offer.amount_from);
|
||||
function createOrderbookColumn(offer, coinFrom, coinTo) {
|
||||
const toAmount = parseFloat(offer.amount_to);
|
||||
const fromSymbol = getCoinSymbol(coinFrom);
|
||||
const fromPriceUSD = latestPrices[coinNameToSymbol[coinFrom]]?.usd || 0;
|
||||
const fromValueUSD = fromAmount * fromPriceUSD;
|
||||
|
||||
return `
|
||||
<td class="py-0 px-0 text-left text-sm">
|
||||
<a data-tooltip-target="tooltip-wallet${offer.offer_id}" href="/wallet/${fromSymbol}" class="items-center monospace">
|
||||
<div class="coinname bold w-32" data-coinname="${coinFrom}">
|
||||
${fromAmount.toFixed(4)}
|
||||
<div class="text-gray-600 dark:text-gray-300 text-xs">${coinFrom}</div>
|
||||
<div class="text-gray-600 dark:text-gray-300 text-xs">USD: (${fromValueUSD.toFixed(2)})</div>
|
||||
</div>
|
||||
</a>
|
||||
<td class="py-0">
|
||||
<div class="py-3 px-4 text-right">
|
||||
<a data-tooltip-target="tooltip-wallet${offer.offer_id}" href="/wallet/${fromSymbol}" class="items-center monospace">
|
||||
<div class="pr-2">
|
||||
<div class="text-sm font-semibold">${toAmount.toFixed(4)}</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">${coinFrom}</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
}
|
||||
|
|
@ -1053,19 +1061,16 @@ function createSwapColumn(offer, coinFrom, coinTo) {
|
|||
`;
|
||||
}
|
||||
|
||||
function createOrderbookColumn(offer, coinTo, coinFrom) {
|
||||
const toAmount = parseFloat(offer.amount_to);
|
||||
function createTakerAmountColumn(offer, coinTo, coinFrom) {
|
||||
const fromAmount = parseFloat(offer.amount_from);
|
||||
const toSymbol = getCoinSymbol(coinTo);
|
||||
const toPriceUSD = latestPrices[coinNameToSymbol[coinTo]]?.usd || 0;
|
||||
const toValueUSD = toAmount * toPriceUSD;
|
||||
return `
|
||||
<td class="p-0">
|
||||
<div class="py-3 px-4 text-right">
|
||||
<a data-tooltip-target="tooltip-wallet-maker${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(toSymbol)}" class="block">
|
||||
<div class="pr-2">
|
||||
<div class="text-sm font-semibold">${toAmount.toFixed(4)}</div>
|
||||
<div class="py-3 px-4 text-left">
|
||||
<a data-tooltip-target="tooltip-wallet-maker${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(toSymbol)}" class="items-center monospace">
|
||||
<div class="pr-2">
|
||||
<div class="text-sm font-semibold">${fromAmount.toFixed(4)}</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">${coinTo}</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">USD: (${toValueUSD.toFixed(2)})</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -1083,11 +1088,9 @@ function createRateColumn(offer, coinFrom, coinTo) {
|
|||
const fromSymbol = getCoinSymbol(coinFrom);
|
||||
const toSymbol = getCoinSymbol(coinTo);
|
||||
|
||||
// Get USD prices
|
||||
const fromPriceUSD = latestPrices[coinNameToSymbol[coinFrom]]?.usd || 0;
|
||||
const toPriceUSD = latestPrices[coinNameToSymbol[coinTo]]?.usd || 0;
|
||||
|
||||
// Calculate USD equivalent of the rate
|
||||
const rateInUSD = rate * toPriceUSD;
|
||||
|
||||
console.log(`Rate calculation for ${fromSymbol} to ${toSymbol}:`);
|
||||
|
|
@ -1101,15 +1104,15 @@ function createRateColumn(offer, coinFrom, coinTo) {
|
|||
<td class="py-3 pl-6 bold monospace text-xs text-right items-center rate-table-info">
|
||||
<div class="relative">
|
||||
<div class="flex flex-col items-end" data-tooltip-target="tooltip-rate-${offer.offer_id}">
|
||||
<span class="font-bold text-gray-700 dark:text-white">
|
||||
<span class="text-gray-700 dark:text-white">
|
||||
$${rateInUSD.toFixed(2)}/${fromSymbol}
|
||||
</span>
|
||||
<span class="text-gray-700 dark:text-white">
|
||||
${rate.toFixed(6)} ${toSymbol}/${fromSymbol}
|
||||
</span>
|
||||
<span class="text-gray-500 dark:text-white">
|
||||
<span class="text-gray-700 dark:text-white">
|
||||
${inverseRate.toFixed(6)} ${fromSymbol}/${toSymbol}
|
||||
</span>
|
||||
<span class="text-gray-400 dark:text-gray-400">
|
||||
($${rateInUSD.toFixed(2)})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -1152,10 +1155,8 @@ function createTooltips(offer, isSentOffers, coinFrom, coinTo, postedTime, expir
|
|||
const toPriceUSD = latestPrices[toSymbol]?.usd || 0;
|
||||
const rateInUSD = rate * toPriceUSD;
|
||||
|
||||
|
||||
const combinedRateTooltip = createCombinedRateTooltip(offer, coinFrom, coinTo);
|
||||
|
||||
|
||||
const fromAmount = parseFloat(offer.amount_from);
|
||||
const toAmount = parseFloat(offer.amount_to);
|
||||
const percentageTooltipContent = createTooltipContent(isSentOffers, coinFrom, coinTo, fromAmount, toAmount);
|
||||
|
|
@ -1177,7 +1178,7 @@ function createTooltips(offer, isSentOffers, coinFrom, coinTo, postedTime, expir
|
|||
</div>
|
||||
|
||||
<div id="tooltip-wallet${offer.offer_id}" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
||||
<div class="active-revoked-expired"><span class="bold">${isSentOffers ? 'My' : ''} ${coinFrom} Wallet</span></div>
|
||||
<div class="active-revoked-expired"><span class="bold">${isSentOffers ? 'My' : ''} ${coinTo} Wallet</span></div>
|
||||
<div class="tooltip-arrow pl-1" data-popper-arrow></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1187,7 +1188,7 @@ function createTooltips(offer, isSentOffers, coinFrom, coinTo, postedTime, expir
|
|||
</div>
|
||||
|
||||
<div id="tooltip-wallet-maker${offer.offer_id}" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
||||
<div class="active-revoked-expired"><span class="bold">${isSentOffers ? 'My' : ''} ${coinTo} Wallet</span></div>
|
||||
<div class="active-revoked-expired"><span class="bold">${isSentOffers ? 'My' : ''} ${coinFrom} Wallet</span></div>
|
||||
<div class="tooltip-arrow pl-1" data-popper-arrow></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1260,6 +1261,7 @@ function createTooltipContent(isSentOffers, coinFrom, coinTo, fromAmount, toAmou
|
|||
"As a buyer, a positive percentage indicates potential </br> savings compared to current market rates."}</p>
|
||||
`;
|
||||
}
|
||||
|
||||
function createCombinedRateTooltip(offer, coinFrom, coinTo) {
|
||||
const rate = parseFloat(offer.rate);
|
||||
const inverseRate = 1 / rate;
|
||||
|
|
|
|||
|
|
@ -1061,27 +1061,37 @@ const app = {
|
|||
},
|
||||
|
||||
updateAutoRefreshButton: () => {
|
||||
const button = document.getElementById('toggle-auto-refresh');
|
||||
if (button) {
|
||||
if (app.isAutoRefreshEnabled) {
|
||||
button.classList.remove('text-gray-600', 'dark:text-gray-400');
|
||||
button.classList.add('text-green-500', 'dark:text-green-400');
|
||||
} else {
|
||||
button.classList.remove('text-green-500', 'dark:text-green-400');
|
||||
button.classList.add('text-gray-600', 'dark:text-gray-400');
|
||||
}
|
||||
button.title = app.isAutoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh';
|
||||
|
||||
const svg = button.querySelector('svg');
|
||||
if (svg) {
|
||||
if (app.isAutoRefreshEnabled) {
|
||||
svg.classList.add('animate-spin');
|
||||
} else {
|
||||
svg.classList.remove('animate-spin');
|
||||
}
|
||||
}
|
||||
const button = document.getElementById('toggle-auto-refresh');
|
||||
if (button) {
|
||||
if (app.isAutoRefreshEnabled) {
|
||||
button.classList.remove('text-gray-600', 'dark:text-gray-400');
|
||||
button.classList.add('text-green-500', 'dark:text-green-400');
|
||||
app.startSpinAnimation();
|
||||
} else {
|
||||
button.classList.remove('text-green-500', 'dark:text-green-400');
|
||||
button.classList.add('text-gray-600', 'dark:text-gray-400');
|
||||
app.stopSpinAnimation();
|
||||
}
|
||||
},
|
||||
button.title = app.isAutoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh';
|
||||
}
|
||||
},
|
||||
|
||||
startSpinAnimation: () => {
|
||||
const svg = document.querySelector('#toggle-auto-refresh svg');
|
||||
if (svg) {
|
||||
svg.classList.add('animate-spin');
|
||||
setTimeout(() => {
|
||||
svg.classList.remove('animate-spin');
|
||||
}, 2000); // Remove the animation after 2 seconds
|
||||
}
|
||||
},
|
||||
|
||||
stopSpinAnimation: () => {
|
||||
const svg = document.querySelector('#toggle-auto-refresh svg');
|
||||
if (svg) {
|
||||
svg.classList.remove('animate-spin');
|
||||
}
|
||||
},
|
||||
|
||||
refreshAllData: async () => {
|
||||
ui.showLoader();
|
||||
|
|
|
|||
|
|
@ -195,7 +195,6 @@ function getAPIKeys() {
|
|||
{% endif %}
|
||||
|
||||
<script src="/static/js/pricechart.js"></script>
|
||||
|
||||
<section>
|
||||
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
|
||||
<div class="border-coolGray-100">
|
||||
|
|
@ -208,34 +207,69 @@ function getAPIKeys() {
|
|||
<div class="container flex flex-wrap justify-center">
|
||||
<div class="md:w-auto p-1.5 hover-container">
|
||||
<div class="flex">
|
||||
<!-- Coin From Filter (now for Bids) -->
|
||||
<button id="coin_from_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled></button>
|
||||
<div class="relative">
|
||||
{{ input_arrow_down_svg | safe }}
|
||||
<select name="coin_from" id="coin_from" 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-none rounded-r-lg outline-none block w-full p-2.5 focus:ring-0">
|
||||
<option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Filter {% if sent_offers %}Sending{% else %}Bids{% endif %}</option>
|
||||
{% for c in coins %}
|
||||
<option class="text-sm" value="{{ c[0] }}" {% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<p class="text-sm font-heading">{{ arrow_right_svg | safe }}</p>
|
||||
{% if sent_offers %}
|
||||
|
||||
<button id="coin_to_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled></button>
|
||||
<div class="relative">
|
||||
{{ input_arrow_down_svg | safe }}
|
||||
<select name="coin_to" id="coin_to" 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-none rounded-r-lg outline-none block w-full p-2.5 focus:ring-0">
|
||||
<option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Filter {% if sent_offers %}Sending{% else %}Bids{% endif %}</option>
|
||||
{% for c in coins_from %}
|
||||
<option class="text-sm" value="{{ c[0] }}" {% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Coin To Filter (now for Offers) -->
|
||||
<button id="coin_to_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled></button>
|
||||
<div class="relative">
|
||||
{{ input_arrow_down_svg | safe }}
|
||||
<select name="coin_to" id="coin_to" 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-none rounded-r-lg outline-none block w-full p-2.5 focus:ring-0">
|
||||
<option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Filter {% if sent_offers %}Receiving{% else %}Offers{% endif %}</option>
|
||||
{% for c in coins_from %}
|
||||
<option class="text-sm" value="{{ c[0] }}" {% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<p class="text-sm font-heading">{{ arrow_right_svg | safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="coin_from_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled></button>
|
||||
<div class="relative">
|
||||
{{ input_arrow_down_svg | safe }}
|
||||
<select name="coin_from" id="coin_from" 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-none rounded-r-lg outline-none block w-full p-2.5 focus:ring-0">
|
||||
<option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Filter {% if sent_offers %}Receiving{% else %}Offers{% endif %}</option>
|
||||
{% for c in coins %}
|
||||
<option class="text-sm" value="{{ c[0] }}" {% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="md:w-auto p-1.5 hover-container">
|
||||
<div class="flex">
|
||||
|
||||
<button id="coin_from_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled></button>
|
||||
<div class="relative">
|
||||
{{ input_arrow_down_svg | safe }}
|
||||
<select name="coin_from" id="coin_from" 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-none rounded-r-lg outline-none block w-full p-2.5 focus:ring-0">
|
||||
<option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Filter {% if sent_offers %}Sending{% else %}Bids{% endif %}</option>
|
||||
{% for c in coins %}
|
||||
<option class="text-sm" value="{{ c[0] }}" {% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<p class="text-sm font-heading">{{ arrow_right_svg | safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="coin_to_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled></button>
|
||||
<div class="relative">
|
||||
{{ input_arrow_down_svg | safe }}
|
||||
<select name="coin_to" id="coin_to" 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-none rounded-r-lg outline-none block w-full p-2.5 focus:ring-0">
|
||||
<option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Filter {% if sent_offers %}Receiving{% else %}Offers{% endif %}</option>
|
||||
{% for c in coins_from %}
|
||||
<option class="text-sm" value="{{ c[0] }}" {% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="w-full md:w-auto mt-3">
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
|
|
@ -287,7 +321,7 @@ function getAPIKeys() {
|
|||
<option value="any" {% if filters.active=='any' %} selected{% endif %}>Any</option>
|
||||
<option value="active" {% if filters.active=='active' %} selected{% endif %}>Active</option>
|
||||
<option value="expired" {% if filters.active=='expired' %} selected{% endif %}>Expired</option>
|
||||
<option value="revoked" {% if filters.active=='revoked' %} selected{% endif %}>Revoked</option>
|
||||
<!-- todo <option value="revoked" {% if filters.active=='revoked' %} selected{% endif %}>Revoked</option>!-->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -334,7 +368,9 @@ function getAPIKeys() {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div id="jsonView" class="hidden mb-4">
|
||||
<pre id="jsonContent" class="bg-gray-100 p-4 rounded overflow-auto" style="max-height: 300px;"></pre>
|
||||
|
|
|
|||
Loading…
Reference in a new issue