Header row with show menu
This commit is contained in:
parent
9987faba08
commit
caf1a1c611
@ -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(); };
|
||||
});
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user