Header row with show menu

This commit is contained in:
Greg 2025-05-10 18:00:02 +02:00
parent 9987faba08
commit caf1a1c611
2 changed files with 48 additions and 5 deletions

View File

@ -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(); };
});
};

View File

@ -68,7 +68,20 @@
</style>
</head>
<body>
<h1>Padel Nivelles</h1>
<div style="display: flex; align-items: center; justify-content: space-between;">
<h1 style="margin: 0;">Padel Nivelles</h1>
<nav class="menu-bar">
<ul>
<li class="dropdown">
<span id="show-menu-btn">Show ▾</span>
<ul class="dropdown-content" id="show-menu-dropdown">
<li id="show-all-matches">Show all matches</li>
<li id="show-future-matches">Show future matches</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="table-container">
<div id="attendance-table"></div>
</div>