Add leaderboard period functionality to currency tab

- Implemented a tabbed interface for the currency leaderboard, allowing users to switch between weekly, monthly, quarterly, and yearly views.
- Enhanced the rendering of leaderboard data based on the selected period, improving user experience and data visibility.
- Added JavaScript functionality to dynamically update the leaderboard and URL parameters based on user selection.
This commit is contained in:
2026-03-31 12:47:11 -05:00
parent 36ce29f7bb
commit 98c1649a32
2 changed files with 154 additions and 6 deletions
+47
View File
@@ -1157,6 +1157,53 @@
window.alert(err.message || 'Could not reverse transaction');
});
});
var periodDataEl = document.getElementById('currencyLeaderboardPeriodData');
var periodBodyEl = document.getElementById('currencyLeaderboardPeriodBody');
var periodTabsEl = document.getElementById('currencyLeaderboardPeriodTabs');
if (periodDataEl && periodBodyEl && periodTabsEl) {
var periodData = {};
try {
periodData = JSON.parse(periodDataEl.textContent || '{}');
} catch (e) {
periodData = {};
}
function renderLeaderboardPeriod(periodKey) {
var rows = Array.isArray(periodData[periodKey]) ? periodData[periodKey] : [];
var sym = periodBodyEl.getAttribute('data-currency-symbol') || '';
var html = '';
rows.forEach(function (row, idx) {
var total = Number(row.period_total || 0);
var isSelf = Boolean(row.is_self);
html += '<tr class="' + (isSelf ? 'table-primary' : '') + '">';
html += '<td class="text-muted">' + String(idx + 1) + '</td>';
html += '<td>' + escapeHtml(row.name || '') + (isSelf ? ' <span class="badge text-bg-info">You</span>' : '') + '</td>';
html += '<td class="text-end text-nowrap"><strong>' + escapeHtml(total.toFixed(2)) + '</strong> ' + escapeHtml(sym) + '</td>';
html += '</tr>';
});
periodBodyEl.innerHTML = html;
}
periodTabsEl.querySelectorAll('[data-lb-period]').forEach(function (btn) {
btn.addEventListener('click', function () {
var next = btn.getAttribute('data-lb-period') || 'weekly';
periodTabsEl.querySelectorAll('[data-lb-period]').forEach(function (b) {
b.classList.remove('active');
b.setAttribute('aria-selected', 'false');
});
btn.classList.add('active');
btn.setAttribute('aria-selected', 'true');
renderLeaderboardPeriod(next);
var params = new URLSearchParams(window.location.search);
params.set('tab', 'currency');
params.set('lb_period', next);
var nextUrl = window.location.pathname + '?' + params.toString();
window.history.replaceState({}, '', nextUrl);
});
});
}
}
function bindPeopleTable() {