mirror of
https://github.com/basicswap/basicswap.git
synced 2025-01-18 16:44:34 +00:00
ui: Chart and dynamic table(s) fixes
This commit is contained in:
gerlofvanek
parent
39aad231cd
commit
c6f3c684a8
3 changed files with 180 additions and 136 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;
|
||||
|
|
|
|||
|
|
@ -866,69 +866,75 @@ const app = {
|
|||
},
|
||||
|
||||
init: () => {
|
||||
window.addEventListener('load', app.onLoad);
|
||||
app.loadLastRefreshedTime();
|
||||
},
|
||||
|
||||
onLoad: async () => {
|
||||
ui.showLoader();
|
||||
try {
|
||||
volumeToggle.init();
|
||||
await app.updateBTCPrice();
|
||||
const chartContainer = document.getElementById('coin-chart');
|
||||
if (chartContainer) {
|
||||
chartModule.initChart();
|
||||
chartModule.showChartLoader();
|
||||
} else {
|
||||
console.warn('Chart container not found, skipping chart initialization');
|
||||
}
|
||||
for (const coin of config.coins) {
|
||||
await app.loadCoinData(coin);
|
||||
}
|
||||
if (chartModule.chart) {
|
||||
config.currentResolution = 'month';
|
||||
await chartModule.updateChart('BTC');
|
||||
app.updateResolutionButtons('BTC');
|
||||
}
|
||||
ui.setActiveContainer('btc-container');
|
||||
config.coins.forEach(coin => {
|
||||
const container = document.getElementById(`${coin.symbol.toLowerCase()}-container`);
|
||||
if (container) {
|
||||
container.addEventListener('click', () => {
|
||||
ui.setActiveContainer(`${coin.symbol.toLowerCase()}-container`);
|
||||
if (chartModule.chart) {
|
||||
if (coin.symbol === 'WOW') {
|
||||
config.currentResolution = 'day';
|
||||
}
|
||||
chartModule.updateChart(coin.symbol);
|
||||
app.updateResolutionButtons(coin.symbol);
|
||||
}
|
||||
});
|
||||
window.addEventListener('load', async () => {
|
||||
ui.showLoader();
|
||||
try {
|
||||
volumeToggle.init();
|
||||
await app.updateBTCPrice();
|
||||
|
||||
chartModule.initChart();
|
||||
chartModule.showChartLoader();
|
||||
} else {
|
||||
console.warn('Chart container not found, skipping chart initialization');
|
||||
}
|
||||
|
||||
const coinDataPromises = config.coins.map(coin => app.loadCoinData(coin));
|
||||
await Promise.all(coinDataPromises);
|
||||
|
||||
if (chartModule.chart) {
|
||||
config.currentResolution = 'month';
|
||||
await chartModule.updateChart('BTC');
|
||||
app.updateResolutionButtons('BTC');
|
||||
}
|
||||
|
||||
ui.setActiveContainer('btc-container');
|
||||
|
||||
// Set up event listeners for coin containers
|
||||
config.coins.forEach(coin => {
|
||||
const container = document.getElementById(`${coin.symbol.toLowerCase()}-container`);
|
||||
if (container) {
|
||||
container.addEventListener('click', () => {
|
||||
ui.setActiveContainer(`${coin.symbol.toLowerCase()}-container`);
|
||||
if (chartModule.chart) {
|
||||
if (coin.symbol === 'WOW') {
|
||||
config.currentResolution = 'day';
|
||||
}
|
||||
chartModule.updateChart(coin.symbol);
|
||||
app.updateResolutionButtons(coin.symbol);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.initializeSelectImages();
|
||||
app.initAutoRefresh();
|
||||
|
||||
const refreshAllButton = document.getElementById('refresh-all');
|
||||
if (refreshAllButton) {
|
||||
refreshAllButton.addEventListener('click', app.refreshAllData);
|
||||
}
|
||||
|
||||
const headers = document.querySelectorAll('th');
|
||||
headers.forEach((header, index) => {
|
||||
header.addEventListener('click', () => app.sortTable(index, header.classList.contains('disabled')));
|
||||
});
|
||||
|
||||
const closeErrorButton = document.getElementById('close-error');
|
||||
if (closeErrorButton) {
|
||||
closeErrorButton.addEventListener('click', ui.hideErrorMessage);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error during initialization:', error);
|
||||
ui.displayErrorMessage('Failed to initialize the dashboard. Please try refreshing the page.');
|
||||
} finally {
|
||||
ui.hideLoader();
|
||||
if (chartModule.chart) {
|
||||
chartModule.hideChartLoader();
|
||||
}
|
||||
});
|
||||
const refreshAllButton = document.getElementById('refresh-all');
|
||||
if (refreshAllButton) {
|
||||
refreshAllButton.addEventListener('click', app.refreshAllData);
|
||||
}
|
||||
app.initializeSelectImages();
|
||||
const headers = document.querySelectorAll('th');
|
||||
headers.forEach((header, index) => {
|
||||
header.addEventListener('click', () => app.sortTable(index, header.classList.contains('disabled')));
|
||||
});
|
||||
const closeErrorButton = document.getElementById('close-error');
|
||||
if (closeErrorButton) {
|
||||
closeErrorButton.addEventListener('click', ui.hideErrorMessage);
|
||||
}
|
||||
app.initAutoRefresh();
|
||||
} catch (error) {
|
||||
console.error('Error during initialization:', error);
|
||||
ui.displayErrorMessage('Failed to initialize the dashboard. Please try refreshing the page.');
|
||||
} finally {
|
||||
ui.hideLoader();
|
||||
if (chartModule.chart) {
|
||||
chartModule.hideChartLoader();
|
||||
}
|
||||
}
|
||||
});
|
||||
app.loadLastRefreshedTime();
|
||||
},
|
||||
|
||||
loadCoinData: async (coin) => {
|
||||
|
|
|
|||
|
|
@ -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