Greg/SportAttendanceSheet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add clear season indicator on main attendance page

Browse Source 
- Season label always visible above table (e.g. "Season 2025/2026")
- Green highlighted banner when viewing next season ("⚡ Next Season — 2026/2027")
- Next Season button turns green and active when selected

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Greg 2026-03-08 13:47:59 +01:00
parent 1434e906fd
commit a141cd32f2
2 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
static/app.js
View File

@ -22,16 +22,32 @@ function currentSeasonYear() {
function fetchData() { function fetchData() {
fetch('/api/data').then(r => r.json()).then(d => { fetch('/api/data').then(r => r.json()).then(d => {
data = d; data = d;
updateSeasonButton(); updateSeasonUI();
renderTable(); renderTable();
}); });
} }
function updateSeasonButton() { function updateSeasonUI() {
const thisSeason = currentSeasonYear(); const thisSeason = currentSeasonYear();
const hasNextSeason = (data.dates || []).some(d => getSeasonYear(d) === thisSeason + 1); const hasNextSeason = (data.dates || []).some(d => getSeasonYear(d) === thisSeason + 1);
const btn = document.getElementById('next-season-btn'); const btn = document.getElementById('next-season-btn');
if (btn) btn.style.display = hasNextSeason ? '' : 'none'; if (btn) {
btn.style.display = hasNextSeason ? '' : 'none';
btn.classList.toggle('active', viewingNextSeason);
btn.textContent = viewingNextSeason ? 'Current Season' : 'Next Season';
}
const banner = document.getElementById('season-banner');
if (banner) {
if (viewingNextSeason) {
banner.className = 'next';
banner.textContent = `\u26a1 Next Season \u2014 ${thisSeason + 1}/${thisSeason + 2}`;
} else {
banner.className = 'current';
banner.textContent = `Season ${thisSeason}/${thisSeason + 1}`;
}
}
} }
function saveData() { function saveData() {
@ -210,11 +226,11 @@ document.addEventListener('DOMContentLoaded', () => {
if (nextSeasonBtn) { if (nextSeasonBtn) {
nextSeasonBtn.onclick = () => { nextSeasonBtn.onclick = () => {
viewingNextSeason = !viewingNextSeason; viewingNextSeason = !viewingNextSeason;
nextSeasonBtn.textContent = viewingNextSeason ? 'Current Season' : 'Next Season';
// Reset "show all" toggle when switching seasons // Reset "show all" toggle when switching seasons
showAllMatches = false; showAllMatches = false;
if (toggleBtn) toggleBtn.textContent = 'Show All Matches'; if (toggleBtn) toggleBtn.textContent = 'Show All Matches';
initialLoad = true; initialLoad = true;
updateSeasonUI();
renderTable(); renderTable();
}; };
} }

22
templates/index.html
View File

@ -92,6 +92,25 @@
background: #948979; background: #948979;
color: #222831; color: #222831;
} }
#season-banner {
margin-bottom: 0.7em;
font-size: 0.95em;
font-weight: bold;
}
#season-banner.current { color: #948979; }
#season-banner.next {
display: inline-block;
background: #1e2e1e;
border: 1px solid #6aab69;
border-radius: 10px;
padding: 0.4em 1em;
color: #6aab69;
}
#next-season-btn.active {
background: #6aab69;
color: #222831;
border-color: #6aab69;
}
@media (max-width: 900px) { @media (max-width: 900px) {
body { margin: 1em; } body { margin: 1em; }
.name-col { width: 110px; min-width: 80px; max-width: 140px; font-size: 0.95em; } .name-col { width: 110px; min-width: 80px; max-width: 140px; font-size: 0.95em; }
@ -109,9 +128,10 @@
<script async defer src="https://umami-ikow84gco0wcw8cgsc8o08g8.reflectonai.com/script.js" data-website-id="1e85082c-2652-4d6c-a0b2-fa55082982a7"></script> <script async defer src="https://umami-ikow84gco0wcw8cgsc8o08g8.reflectonai.com/script.js" data-website-id="1e85082c-2652-4d6c-a0b2-fa55082982a7"></script>
</head> </head>
<body> <body>
<div style="text-align: left; margin-bottom: 1em;"> <div style="text-align: left; margin-bottom: 0.5em;">
<h1 style="margin: 0;">Padel Nivelles</h1> <h1 style="margin: 0;">Padel Nivelles</h1>
</div> </div>
<div id="season-banner" class="current"></div>
<div class="table-container"> <div class="table-container">
<div id="attendance-table"></div> <div id="attendance-table"></div>
</div> </div>