adding pagination and limiting to 50 per sign up on leaderboard

This commit is contained in:
Gabriel Bo
2026-03-16 15:58:39 -07:00
parent 59b5295b20
commit 14733433b0
5 changed files with 874 additions and 21 deletions
+70 -21
View File
@@ -5,6 +5,10 @@
var SUPABASE_ANON_KEY =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im10YnRncHd6cmJvc3R3ZWFhbnByIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzMxODk0OTQsImV4cCI6MjA4ODc2NTQ5NH0._xMlqCfljtXpwPj54H-ghxfLFO-jiq4W2WhpU8vVL1c";
var PAGE_SIZE = 50;
var allRows = [];
var currentPage = 0;
function escapeHtml(s) {
var el = document.createElement("span");
el.textContent = s;
@@ -19,6 +23,67 @@
return n.toLocaleString();
}
function totalPages() {
return Math.max(1, Math.ceil(allRows.length / PAGE_SIZE));
}
function renderPage() {
var tbody = document.getElementById("leaderboard-body");
if (!tbody) return;
var start = currentPage * PAGE_SIZE;
var end = Math.min(start + PAGE_SIZE, allRows.length);
var pageRows = allRows.slice(start, end);
var html = "";
for (var j = 0; j < pageRows.length; j++) {
var rank = start + j + 1;
var rankClass = rank <= 3 ? " lb-rank-" + rank : "";
var medal =
rank === 1 ? "\uD83E\uDD47" : rank === 2 ? "\uD83E\uDD48" : rank === 3 ? "\uD83E\uDD49" : "";
var row = pageRows[j];
html +=
"<tr>" +
'<td><span class="lb-rank' + rankClass + '">' + (medal || rank) + "</span></td>" +
'<td class="lb-name">' + escapeHtml(row.display_name) + "</td>" +
'<td class="lb-number">$' + Number(row.dollar_savings || 0).toFixed(4) + "</td>" +
'<td class="lb-number">' + Number(row.energy_wh_saved || 0).toFixed(2) + "</td>" +
'<td class="lb-number">' + fmtLarge(Number(row.flops_saved || 0)) + "</td>" +
'<td class="lb-number">' + Number(row.total_calls || 0).toLocaleString() + "</td>" +
'<td class="lb-number">' + Number(row.total_tokens || 0).toLocaleString() + "</td>" +
"</tr>";
}
tbody.innerHTML = html;
renderPagination();
}
function renderPagination() {
var container = document.getElementById("leaderboard-pagination");
if (!container) return;
var pages = totalPages();
if (pages <= 1) {
container.innerHTML = "";
return;
}
var prevDisabled = currentPage === 0;
var nextDisabled = currentPage >= pages - 1;
container.innerHTML =
'<button class="lb-page-btn"' + (prevDisabled ? " disabled" : "") + ' id="lb-prev">' +
"\u2190 Prev</button>" +
'<span class="lb-page-info">Page ' + (currentPage + 1) + " of " + pages + "</span>" +
'<button class="lb-page-btn"' + (nextDisabled ? " disabled" : "") + ' id="lb-next">' +
"Next \u2192</button>";
var prevBtn = document.getElementById("lb-prev");
var nextBtn = document.getElementById("lb-next");
if (prevBtn) prevBtn.onclick = function () { if (currentPage > 0) { currentPage--; renderPage(); } };
if (nextBtn) nextBtn.onclick = function () { if (currentPage < pages - 1) { currentPage++; renderPage(); } };
}
function loadLeaderboard() {
var tbody = document.getElementById("leaderboard-body");
if (!tbody) return;
@@ -32,7 +97,7 @@
fetch(
SUPABASE_URL +
"/rest/v1/savings_entries?select=display_name,dollar_savings,energy_wh_saved,flops_saved,total_calls,total_tokens&order=dollar_savings.desc&limit=100",
"/rest/v1/savings_entries?select=display_name,dollar_savings,energy_wh_saved,flops_saved,total_calls,total_tokens&order=dollar_savings.desc&limit=1000",
{
headers: {
apikey: SUPABASE_ANON_KEY,
@@ -52,6 +117,9 @@
return;
}
allRows = rows;
currentPage = 0;
var totalMembers = rows.length;
var totalDollars = 0;
var totalRequests = 0;
@@ -72,25 +140,7 @@
if (elRequests) elRequests.textContent = totalRequests.toLocaleString();
if (elTokens) elTokens.textContent = fmtLarge(totalTokens);
var html = "";
for (var j = 0; j < rows.length; j++) {
var rank = j + 1;
var rankClass = rank <= 3 ? " lb-rank-" + rank : "";
var medal =
rank === 1 ? "\uD83E\uDD47" : rank === 2 ? "\uD83E\uDD48" : rank === 3 ? "\uD83E\uDD49" : "";
var row = rows[j];
html +=
"<tr>" +
'<td><span class="lb-rank' + rankClass + '">' + (medal || rank) + "</span></td>" +
'<td class="lb-name">' + escapeHtml(row.display_name) + "</td>" +
'<td class="lb-number">$' + Number(row.dollar_savings || 0).toFixed(4) + "</td>" +
'<td class="lb-number">' + Number(row.energy_wh_saved || 0).toFixed(2) + "</td>" +
'<td class="lb-number">' + fmtLarge(Number(row.flops_saved || 0)) + "</td>" +
'<td class="lb-number">' + Number(row.total_calls || 0).toLocaleString() + "</td>" +
'<td class="lb-number">' + Number(row.total_tokens || 0).toLocaleString() + "</td>" +
"</tr>";
}
tbody.innerHTML = html;
renderPage();
})
.catch(function (err) {
tbody.innerHTML =
@@ -101,7 +151,6 @@
});
}
// Run on page load and refresh every 60s
if (document.getElementById("leaderboard-body")) {
loadLeaderboard();
setInterval(loadLeaderboard, 60000);