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

Header row with show menu

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
static/app.js
View File

@ -15,6 +15,8 @@ function saveData() {
}); });
} }
let matchViewMode = 'fromLast'; // 'fromLast', 'all', 'future'
function renderTable() { function renderTable() {
const container = document.getElementById('attendance-table'); const container = document.getElementById('attendance-table');
container.innerHTML = ''; container.innerHTML = '';
@ -58,17 +60,33 @@ function renderTable() {
const lastMatch = pastDates.length > 0 ? pastDates.reduce((a, b) => parseDate(a) > parseDate(b) ? a : b) : null; const lastMatch = pastDates.length > 0 ? pastDates.reduce((a, b) => parseDate(a) > parseDate(b) ? a : b) : null;
// Find next match (soonest future date) // Find next match (soonest future date)
const nextMatch = futureDates.length > 0 ? futureDates.reduce((a, b) => parseDate(a) < parseDate(b) ? a : b) : null; 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 closestIdx = 0;
let minDiff = Infinity; let minDiff = Infinity;
data.dates.forEach((date, rowIdx) => { filteredDates.forEach((date, rowIdx) => {
const diff = Math.abs(parseDate(date) - today); const diff = Math.abs(parseDate(date) - today);
if (diff < minDiff) { if (diff < minDiff) {
minDiff = diff; minDiff = diff;
closestIdx = rowIdx; closestIdx = rowIdx;
} }
}); });
data.dates.forEach((date, rowIdx) => { filteredDates.forEach((date, rowIdx) => {
const tr = document.createElement('tr'); const tr = document.createElement('tr');
if (rowIdx === closestIdx) tr.id = 'current-match-row'; if (rowIdx === closestIdx) tr.id = 'current-match-row';
// Date cell // 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(); };
});
};

15
templates/index.html
View File

@ -68,7 +68,20 @@
</style> </style>
</head> </head>
<body> <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 class="table-container">
<div id="attendance-table"></div> <div id="attendance-table"></div>
</div> </div>