quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Statistique page cleanup #31

Merged
quoije merged 1 commits from cursor/statistique-page-cleanup-3226 into 2026 2025-12-21 15:54:16 -05:00
Conversation 1 Commits 1 Files Changed 2
+130 -70
2 changed files with 130 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/app_user-stat.js
+98 -59
View File
@@ -41,11 +41,15 @@ window.onload = async function () {
}
function renderWinners(winners) {
const winnersList = document.getElementById('winners-list');
if (!winnersList) return;
const tbody = document.getElementById('winners-table-body');
if (!tbody) return;
const list = Array.isArray(winners) ? winners : [];
if (!list.length) {
winnersList.innerHTML = '<div class="list-group-item text-muted">Aucun gagnant défini.</div>';
tbody.innerHTML = `
<tr>
<td colspan="2" class="text-muted">Aucun gagnant défini.</td>
</tr>
`;
return;
}
@@ -64,7 +68,7 @@ window.onload = async function () {
});
const years = Array.from(byYear.keys()).map(Number).sort((a, b) => b - a);
winnersList.innerHTML = '';
tbody.innerHTML = '';
years.forEach((year) => {
const winnersForYear = byYear.get(String(year)) || [];
@@ -77,35 +81,56 @@ window.onload = async function () {
return String(a.name || '').localeCompare(String(b.name || ''), 'fr', { sensitivity: 'base' });
});
const item = document.createElement('div');
item.className = 'list-group-item';
const tieLabel = sorted.length > 1 ? ' <span class="text-muted">(égalité)</span>' : '';
const tr = document.createElement('tr');
const tdYear = document.createElement('td');
tdYear.className = 'fw-semibold';
tdYear.textContent = String(year);
if (sorted.length > 1) {
const small = document.createElement('div');
small.className = 'text-muted small';
small.textContent = 'égalité';
tdYear.appendChild(document.createElement('br'));
tdYear.appendChild(small);
}
const tdWinners = document.createElement('td');
sorted.forEach((w, idx) => {
const row = document.createElement('div');
if (idx > 0) row.classList.add('mt-1');
const name = document.createElement('span');
name.className = 'fw-semibold';
name.textContent = w?.name || '(utilisateur supprimé)';
row.appendChild(name);
const winnersHtml = sorted
.map((w) => {
const pts = w.points === null || Number.isNaN(w.points) ? null : w.points;
const ptsLabel = pts === null ? '' : ` <span class="text-muted">— ${pts} pts</span>`;
return `<div><strong>${w.name}</strong>${ptsLabel}</div>`;
})
.join('');
if (pts !== null) {
const ptsSpan = document.createElement('span');
ptsSpan.className = 'text-muted';
ptsSpan.textContent = ` — ${pts} pts`;
row.appendChild(ptsSpan);
}
item.innerHTML = `
<div class="d-flex justify-content-between align-items-center">
<div class="fw-semibold">${year}${tieLabel}</div>
<span class="badge bg-secondary">${sorted.length}</span>
</div>
<div class="mt-2">${winnersHtml}</div>
`;
winnersList.appendChild(item);
tdWinners.appendChild(row);
});
tr.appendChild(tdYear);
tr.appendChild(tdWinners);
tbody.appendChild(tr);
});
}
function renderCompletions(completions) {
const root = document.getElementById('completers-by-year');
if (!root) return;
const tbody = document.getElementById('completers-table-body');
if (!tbody) return;
if (!completions || typeof completions !== 'object') {
root.innerHTML = '<div class="text-muted">Impossible de charger les finisseurs 100%.</div>';
tbody.innerHTML = `
<tr>
<td colspan="4" class="text-muted">Impossible de charger les finisseurs 100%.</td>
</tr>
`;
return;
}
@@ -114,48 +139,62 @@ window.onload = async function () {
const byYear = completions?.completersByYear && typeof completions.completersByYear === 'object' ? completions.completersByYear : {};
if (!years.length) {
root.innerHTML = '<div class="text-muted">Aucune année trouvée.</div>';
tbody.innerHTML = `
<tr>
<td colspan="4" class="text-muted">Aucune année trouvée.</td>
</tr>
`;
return;
}
// Build a simple accordion
const accordionId = 'completersAccordion';
root.innerHTML = `<div class="accordion" id="${accordionId}"></div>`;
const acc = root.querySelector('.accordion');
const sortedYears = years
.map((y) => Number(y))
.filter((y) => Number.isInteger(y))
.sort((a, b) => b - a);
years.forEach((y, idx) => {
tbody.innerHTML = '';
sortedYears.forEach((y) => {
const yearStr = String(y);
const total = Number(totals?.[yearStr] ?? 0);
const completers = Array.isArray(byYear?.[yearStr]) ? byYear[yearStr] : [];
const count = completers.length;
const collapseId = `completers-${yearStr}`;
const headingId = `heading-${yearStr}`;
const show = idx === 0 ? 'show' : '';
const collapsed = idx === 0 ? '' : 'collapsed';
const expanded = idx === 0 ? 'true' : 'false';
const tr = document.createElement('tr');
const bodyHtml = count
? `<ul class="list-group list-group-flush">
${completers.map((u) => `<li class="list-group-item">${u?.name || '(sans nom)'}</li>`).join('')}
</ul>`
: `<div class="text-muted">Aucun utilisateur à 100%.</div>`;
const tdYear = document.createElement('td');
tdYear.className = 'fw-semibold';
tdYear.textContent = yearStr;
const item = document.createElement('div');
item.className = 'accordion-item';
item.innerHTML = `
<h2 class="accordion-header" id="${headingId}">
<button class="accordion-button ${collapsed}" type="button" data-bs-toggle="collapse" data-bs-target="#${collapseId}" aria-expanded="${expanded}" aria-controls="${collapseId}">
${yearStr} — ${count} finisseur(s) (total films: ${total})
</button>
</h2>
<div id="${collapseId}" class="accordion-collapse collapse ${show}" aria-labelledby="${headingId}" data-bs-parent="#${accordionId}">
<div class="accordion-body">
${bodyHtml}
</div>
</div>
`;
acc.appendChild(item);
const tdCount = document.createElement('td');
const badge = document.createElement('span');
badge.className = 'badge bg-secondary';
badge.textContent = String(count);
tdCount.appendChild(badge);
const tdTotal = document.createElement('td');
tdTotal.textContent = String(Number.isFinite(total) ? total : 0);
const tdNames = document.createElement('td');
if (!count) {
tdNames.className = 'text-muted';
tdNames.textContent = '—';
} else {
const wrap = document.createElement('div');
wrap.className = 'd-flex flex-wrap gap-1';
completers.forEach((u) => {
const name = document.createElement('span');
name.className = 'badge bg-light text-dark border';
name.textContent = u?.name || '(sans nom)';
wrap.appendChild(name);
});
tdNames.appendChild(wrap);
}
tr.appendChild(tdYear);
tr.appendChild(tdCount);
tr.appendChild(tdTotal);
tr.appendChild(tdNames);
tbody.appendChild(tr);
});
}
@@ -241,8 +280,8 @@ window.onload = async function () {
});
// Hide spinner and show table after loading
spinner.style.display = 'none';
table.style.display = 'table';
if (spinner) spinner.classList.add('d-none');
if (table) table.classList.remove('d-none');
if (statsError) statsError.classList.add('d-none');
// Add event listener for user links
@@ -275,8 +314,8 @@ window.onload = async function () {
const spinner = document.getElementById('loading-spinner');
const table = document.querySelector('.user-table');
const statsError = document.getElementById('stats-error');
if (spinner) spinner.style.display = 'none';
if (table) table.style.display = 'none';
if (spinner) spinner.classList.add('d-none');
if (table) table.classList.add('d-none');
if (statsError) {
statsError.textContent = "Impossible de charger le classement pour le moment.";
statsError.classList.remove('d-none');
public/user-stat.html
+31 -10
View File
@@ -20,10 +20,6 @@
.user-table {
margin-top: 20px;
}
.ratio {
font-weight: bold;
margin-top: 10px;
}
.navbar-toggler {
border-color: white; /* Make the border white */
}
@@ -100,7 +96,7 @@
</div>
<!-- Table for users and movies watched -->
<table class="table user-table" style="display: none;">
<table class="table table-striped table-hover align-middle user-table d-none">
<thead>
<tr>
<th scope="col">Nom</th>
@@ -117,9 +113,20 @@
<!-- Winners tab -->
<div class="tab-pane fade" id="pane-winners" role="tabpanel" aria-labelledby="tab-winners" tabindex="0">
<h4 class="mb-2">Gagnants</h4>
<div class="text-muted mb-2">Définis dans l’admin (optionnel).</div>
<div id="winners-list" class="list-group mb-4">
<div class="list-group-item text-muted">Chargement…</div>
<div class="table-responsive mb-4">
<table class="table table-sm table-striped align-middle mb-0">
<thead>
<tr>
<th scope="col" style="width: 110px;">Année</th>
<th scope="col">Gagnant(s)</th>
</tr>
</thead>
<tbody id="winners-table-body">
<tr>
<td colspan="2" class="text-muted">Chargement…</td>
</tr>
</tbody>
</table>
</div>
</div>
@@ -127,8 +134,22 @@
<div class="tab-pane fade" id="pane-completion" role="tabpanel" aria-labelledby="tab-completion" tabindex="0">
<h4 class="mb-2">Utilisateurs ayant terminé 100% (par année)</h4>
<div class="text-muted mb-2">Completion = 100% pour l’année (tous les films de l’année vus).</div>
<div id="completers-by-year" class="mb-4">
<div class="text-muted">Chargement…</div>
<div class="table-responsive mb-4">
<table class="table table-sm table-striped align-middle mb-0">
<thead>
<tr>
<th scope="col" style="width: 110px;">Année</th>
<th scope="col" style="width: 140px;">Finisseur(s)</th>
<th scope="col" style="width: 140px;">Total films</th>
<th scope="col">Noms</th>
</tr>
</thead>
<tbody id="completers-table-body">
<tr>
<td colspan="4" class="text-muted">Chargement…</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>