From c0d9b7c1612813c3bf9f8a205c8c041f0370ba01 Mon Sep 17 00:00:00 2001 From: Gerlof van Ek Date: Mon, 14 Oct 2024 16:37:42 +0200 Subject: [PATCH] ui: Sort on Time and Trade (table). --- basicswap/static/js/offerstable.js | 2 +- basicswap/static/js/pricechart.js | 126 ++++++++++++++++++++++------- basicswap/templates/offers.html | 12 +-- 3 files changed, 104 insertions(+), 36 deletions(-) diff --git a/basicswap/static/js/offerstable.js b/basicswap/static/js/offerstable.js index c48eb32..8d39961 100644 --- a/basicswap/static/js/offerstable.js +++ b/basicswap/static/js/offerstable.js @@ -745,7 +745,7 @@ function updateProfitLoss(row, fromCoin, toCoin, fromAmount, toAmount, isOwnOffe function createTableRow(offer, isSentOffers) { const row = document.createElement('tr'); row.className = `opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600`; - row.setAttribute('data-offer-id', offer.offer_id); + row.setAttribute('data-offer-id', `${offer.offer_id}_${offer.created_at}`); const coinFrom = offer.coin_from ? (symbolToCoinName[coinNameToSymbol[offer.coin_from]] || offer.coin_from) : 'Unknown'; const coinTo = offer.coin_to ? (symbolToCoinName[coinNameToSymbol[offer.coin_to]] || offer.coin_to) : 'Unknown'; diff --git a/basicswap/static/js/pricechart.js b/basicswap/static/js/pricechart.js index 03fce34..9e6b811 100644 --- a/basicswap/static/js/pricechart.js +++ b/basicswap/static/js/pricechart.js @@ -1170,37 +1170,103 @@ const app = { console.log('Current BTC price:', app.btcPriceUSD); }, - sortTable: (columnIndex) => { - const sortableColumns = [5, 6]; - if (!sortableColumns.includes(columnIndex)) return; - const table = document.querySelector('table'); - if (!table) { - console.error("Table not found for sorting."); - return; +sortTable: (columnIndex) => { + console.log(`Sorting column: ${columnIndex}`); + const sortableColumns = [1, 5, 6, 7]; // 1: Time, 5: Rate, 6: Market +/-, 7: Trade + if (!sortableColumns.includes(columnIndex)) { + console.log(`Column ${columnIndex} is not sortable`); + return; + } + const table = document.querySelector('table'); + if (!table) { + console.error("Table not found for sorting."); + return; + } + const rows = Array.from(table.querySelectorAll('tbody tr')); + console.log(`Found ${rows.length} rows to sort`); + const sortIcon = document.getElementById(`sort-icon-${columnIndex}`); + if (!sortIcon) { + console.error("Sort icon not found."); + return; + } + const sortOrder = sortIcon.textContent === '↓' ? 1 : -1; + sortIcon.textContent = sortOrder === 1 ? '↑' : '↓'; + + const getSafeTextContent = (element) => element ? element.textContent.trim() : ''; + + rows.sort((a, b) => { + let aValue, bValue; + switch (columnIndex) { + case 1: // Time column + aValue = getSafeTextContent(a.querySelector('td:first-child .text-xs:first-child')); + bValue = getSafeTextContent(b.querySelector('td:first-child .text-xs:first-child')); + // console.log(`Comparing times: "${aValue}" vs "${bValue}"`); + + const parseTime = (timeStr) => { + const [value, unit] = timeStr.split(' '); + const numValue = parseFloat(value); + switch(unit) { + case 'seconds': return numValue; + case 'minutes': return numValue * 60; + case 'hours': return numValue * 3600; + case 'days': return numValue * 86400; + default: return 0; + } + }; + return (parseTime(bValue) - parseTime(aValue)) * sortOrder; + + case 5: // Rate + case 6: // Market +/- + aValue = getSafeTextContent(a.cells[columnIndex]); + bValue = getSafeTextContent(b.cells[columnIndex]); + console.log(`Comparing values: "${aValue}" vs "${bValue}"`); + + aValue = parseFloat(aValue.replace(/[^\d.-]/g, '') || '0'); + bValue = parseFloat(bValue.replace(/[^\d.-]/g, '') || '0'); + return (aValue - bValue) * sortOrder; + + case 7: // Trade + const aCell = a.cells[columnIndex]; + const bCell = b.cells[columnIndex]; + console.log('aCell:', aCell ? aCell.outerHTML : 'null'); + console.log('bCell:', bCell ? bCell.outerHTML : 'null'); + + aValue = getSafeTextContent(aCell.querySelector('a')) || + getSafeTextContent(aCell.querySelector('button')) || + getSafeTextContent(aCell); + bValue = getSafeTextContent(bCell.querySelector('a')) || + getSafeTextContent(bCell.querySelector('button')) || + getSafeTextContent(bCell); + + aValue = aValue.toLowerCase(); + bValue = bValue.toLowerCase(); + + console.log(`Comparing trade actions: "${aValue}" vs "${bValue}"`); + + if (aValue === bValue) return 0; + if (aValue === "swap") return -1 * sortOrder; + if (bValue === "swap") return 1 * sortOrder; + return aValue.localeCompare(bValue) * sortOrder; + + default: + aValue = getSafeTextContent(a.cells[columnIndex]); + bValue = getSafeTextContent(b.cells[columnIndex]); + console.log(`Comparing default values: "${aValue}" vs "${bValue}"`); + return aValue.localeCompare(bValue, undefined, { + numeric: true, + sensitivity: 'base' + }) * sortOrder; } - const rows = Array.from(table.querySelectorAll('tbody tr')); - const sortIcon = document.getElementById(`sort-icon-${columnIndex}`); - if (!sortIcon) { - console.error("Sort icon not found."); - return; - } - const sortOrder = sortIcon.textContent === '↓' ? 1 : -1; - sortIcon.textContent = sortOrder === 1 ? '↑' : '↓'; - rows.sort((a, b) => { - const aValue = a.cells[columnIndex]?.textContent.trim() || ''; - const bValue = b.cells[columnIndex]?.textContent.trim() || ''; - return aValue.localeCompare(bValue, undefined, { - numeric: true, - sensitivity: 'base' - }) * sortOrder; - }); - const tbody = table.querySelector('tbody'); - if (tbody) { - rows.forEach(row => tbody.appendChild(row)); - } else { - console.error("Table body not found."); - } - }, + }); + + const tbody = table.querySelector('tbody'); + if (tbody) { + rows.forEach(row => tbody.appendChild(row)); + } else { + // console.error("Table body not found."); + } + // console.log('Sorting completed'); +}, initializeSelectImages: () => { const updateSelectedImage = (selectId) => { diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html index 99d5031..3fc4a73 100644 --- a/basicswap/templates/offers.html +++ b/basicswap/templates/offers.html @@ -296,9 +296,10 @@ function getAPIKeys() { - - + Trade + ↓ + +
+
Time + ↓
+
- Trade -
-