From caf1a1c611f4a19b0f3c850ffb57e376ce347ced Mon Sep 17 00:00:00 2001 From: Greg Date: Sat, 10 May 2025 18:00:02 +0200 Subject: [PATCH] Header row with show menu --- static/app.js | 38 ++++++++++++++++++++++++++++++++++---- templates/index.html | 15 ++++++++++++++- 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/static/app.js b/static/app.js index 3ff20ce..9906389 100644 --- a/static/app.js +++ b/static/app.js @@ -15,6 +15,8 @@ function saveData() { }); } +let matchViewMode = 'fromLast'; // 'fromLast', 'all', 'future' + function renderTable() { const container = document.getElementById('attendance-table'); container.innerHTML = ''; @@ -58,17 +60,33 @@ function renderTable() { const lastMatch = pastDates.length > 0 ? pastDates.reduce((a, b) => parseDate(a) > parseDate(b) ? a : b) : null; // Find next match (soonest future date) const nextMatch = futureDates.length > 0 ? futureDates.reduce((a, b) => parseDate(a) < parseDate(b) ? a : b) : null; - // Render all dates in original chronological order + // Filter dates based on view mode + let filteredDates = []; + if (matchViewMode === 'all') { + filteredDates = data.dates; + } else if (matchViewMode === 'future') { + filteredDates = data.dates.filter(date => parseDate(date) > today); + } else { + // Default: show from last played match and all after + const pastDates = data.dates.filter(date => parseDate(date) <= today); + const lastMatch = pastDates.length > 0 ? pastDates.reduce((a, b) => parseDate(a) > parseDate(b) ? a : b) : null; + let found = false; + filteredDates = data.dates.filter(date => { + if (date === lastMatch) found = true; + return found; + }); + } + // Find closest date to today for scroll let closestIdx = 0; let minDiff = Infinity; - data.dates.forEach((date, rowIdx) => { + filteredDates.forEach((date, rowIdx) => { const diff = Math.abs(parseDate(date) - today); if (diff < minDiff) { minDiff = diff; closestIdx = rowIdx; } }); - data.dates.forEach((date, rowIdx) => { + filteredDates.forEach((date, rowIdx) => { const tr = document.createElement('tr'); if (rowIdx === closestIdx) tr.id = 'current-match-row'; // Date cell @@ -169,4 +187,16 @@ document.getElementById('add-date').onclick = function() { } }; -window.onload = fetchData; +window.onload = () => { + fetchData(); + // Menu bar event listeners + document.addEventListener('DOMContentLoaded', () => { + const showAll = document.getElementById('show-all-matches'); + const showFuture = document.getElementById('show-future-matches'); + if (showAll) showAll.onclick = () => { matchViewMode = 'all'; renderTable(); }; + if (showFuture) showFuture.onclick = () => { matchViewMode = 'future'; renderTable(); }; + // Clicking the menu resets to default + const showMenuBtn = document.getElementById('show-menu-btn'); + if (showMenuBtn) showMenuBtn.onclick = () => { matchViewMode = 'fromLast'; renderTable(); }; + }); +}; diff --git a/templates/index.html b/templates/index.html index 0c54b45..f698295 100644 --- a/templates/index.html +++ b/templates/index.html @@ -68,7 +68,20 @@ -

Padel Nivelles

+
+

Padel Nivelles

+ +