feat: add season-aware views on main page and reports
- Main page: filter table by current season by default; show Next Season button when next season dates exist in DB - Reports page: filter charts to current season; add Last Season toggle button when previous season data exists - Admin archive: export all dates/players as CSV (no season filter) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
abb3f47a57
commit
1434e906fd
163
static/app.js
163
static/app.js
@ -1,12 +1,39 @@
|
||||
let data = {};
|
||||
let showAllMatches = false;
|
||||
let viewingNextSeason = false;
|
||||
let initialLoad = true;
|
||||
|
||||
function parseDate(str) {
|
||||
const [d, m, y] = str.split('/').map(Number);
|
||||
return new Date(2000 + y, m - 1, d);
|
||||
}
|
||||
|
||||
function getSeasonYear(dateStr) {
|
||||
const [d, m, y] = dateStr.split('/').map(Number);
|
||||
return m >= 4 ? 2000 + y : 1999 + y;
|
||||
}
|
||||
|
||||
function currentSeasonYear() {
|
||||
const now = new Date();
|
||||
const m = now.getMonth() + 1;
|
||||
return m >= 4 ? now.getFullYear() : now.getFullYear() - 1;
|
||||
}
|
||||
|
||||
function fetchData() {
|
||||
fetch('/api/data').then(r => r.json()).then(d => {
|
||||
data = d;
|
||||
updateSeasonButton();
|
||||
renderTable();
|
||||
});
|
||||
}
|
||||
|
||||
function updateSeasonButton() {
|
||||
const thisSeason = currentSeasonYear();
|
||||
const hasNextSeason = (data.dates || []).some(d => getSeasonYear(d) === thisSeason + 1);
|
||||
const btn = document.getElementById('next-season-btn');
|
||||
if (btn) btn.style.display = hasNextSeason ? '' : 'none';
|
||||
}
|
||||
|
||||
function saveData() {
|
||||
fetch('/api/data', {
|
||||
method: 'POST',
|
||||
@ -15,17 +42,12 @@ function saveData() {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
let showAllMatches = false; // false = future matches only; true = all matches
|
||||
|
||||
let initialLoad = true;
|
||||
function renderTable() {
|
||||
const container = document.getElementById('attendance-table');
|
||||
// Save scroll position of the container
|
||||
const scrollTop = window.scrollY;
|
||||
container.innerHTML = '';
|
||||
const table = document.createElement('table');
|
||||
|
||||
// Header row
|
||||
const thead = document.createElement('thead');
|
||||
const headRow = document.createElement('tr');
|
||||
@ -36,50 +58,44 @@ function renderTable() {
|
||||
dateTh.style.maxWidth = '140px';
|
||||
dateTh.style.textAlign = 'left';
|
||||
headRow.appendChild(dateTh);
|
||||
data.players.forEach((name, i) => {
|
||||
data.players.forEach(name => {
|
||||
const th = document.createElement('th');
|
||||
th.innerText = name;
|
||||
th.classList.add('name-col');
|
||||
headRow.appendChild(th);
|
||||
});
|
||||
// Guest Name column (per date)
|
||||
const guestNameTh = document.createElement('th');
|
||||
guestNameTh.innerText = 'Guest Name';
|
||||
guestNameTh.classList.add('name-col');
|
||||
headRow.appendChild(guestNameTh);
|
||||
thead.appendChild(headRow);
|
||||
table.appendChild(thead);
|
||||
|
||||
// Body rows
|
||||
const tbody = document.createElement('tbody');
|
||||
if (!data.guestNames) data.guestNames = {};
|
||||
// Custom order: last played date (<= today) on top, next date (> today) second, others after
|
||||
|
||||
const today = new Date();
|
||||
// Parse dates as DD/MM/YY
|
||||
function parseDate(str) {
|
||||
const [d, m, y] = str.split('/').map(Number);
|
||||
// Assume 20xx for years < 100
|
||||
return new Date(2000 + y, m - 1, d);
|
||||
const thisSeason = currentSeasonYear();
|
||||
const targetSeason = viewingNextSeason ? thisSeason + 1 : thisSeason;
|
||||
|
||||
let filteredDates = (data.dates || []).filter(d => getSeasonYear(d) === targetSeason);
|
||||
if (!viewingNextSeason && !showAllMatches) {
|
||||
filteredDates = filteredDates.filter(date => parseDate(date) > today);
|
||||
}
|
||||
// Filter dates based on toggle
|
||||
let filteredDates = [];
|
||||
if (showAllMatches) {
|
||||
filteredDates = data.dates;
|
||||
} else {
|
||||
filteredDates = data.dates.filter(date => parseDate(date) > today);
|
||||
}
|
||||
// Find closest date for scroll (from filtered)
|
||||
|
||||
// Find closest date for auto-scroll
|
||||
let closestIdx = 0;
|
||||
let minDiff = Infinity;
|
||||
filteredDates.forEach((date, rowIdx) => {
|
||||
const diff = Math.abs(parseDate(date) - today);
|
||||
if (diff < minDiff) {
|
||||
minDiff = diff;
|
||||
closestIdx = rowIdx;
|
||||
}
|
||||
if (diff < minDiff) { minDiff = diff; closestIdx = rowIdx; }
|
||||
});
|
||||
|
||||
filteredDates.forEach((date, rowIdx) => {
|
||||
const tr = document.createElement('tr');
|
||||
if (rowIdx === closestIdx) tr.id = 'current-match-row';
|
||||
|
||||
// Date cell
|
||||
const dateTd = document.createElement('td');
|
||||
dateTd.style.width = '120px';
|
||||
@ -95,59 +111,38 @@ function renderTable() {
|
||||
dateTd.innerText = date;
|
||||
}
|
||||
tr.appendChild(dateTd);
|
||||
// Player attendance
|
||||
|
||||
// Player attendance cells
|
||||
data.players.forEach((player, colIdx) => {
|
||||
const td = document.createElement('td');
|
||||
td.className = 'clickable name-col';
|
||||
const key = `${date}|${colIdx}`;
|
||||
if (data.attendance[key] === true) {
|
||||
td.innerText = 'Yes';
|
||||
td.classList.add('yes');
|
||||
td.classList.remove('no', 'maybe');
|
||||
} else if (data.attendance[key] === 'no') {
|
||||
td.innerText = 'No';
|
||||
td.classList.add('no');
|
||||
td.classList.remove('yes', 'maybe');
|
||||
} else if (data.attendance[key] === 'maybe') {
|
||||
td.innerText = 'Maybe';
|
||||
td.classList.add('maybe');
|
||||
td.classList.remove('yes', 'no');
|
||||
} else {
|
||||
td.innerText = '';
|
||||
td.classList.remove('yes', 'no', 'maybe');
|
||||
}
|
||||
td.onclick = () => {
|
||||
if (!data.attendance[key]) {
|
||||
data.attendance[key] = true;
|
||||
} else if (data.attendance[key] === true) {
|
||||
data.attendance[key] = 'no';
|
||||
} else if (data.attendance[key] === 'no') {
|
||||
data.attendance[key] = 'maybe';
|
||||
} else if (data.attendance[key] === 'maybe') {
|
||||
delete data.attendance[key];
|
||||
}
|
||||
// Immediately update the cell UI
|
||||
if (data.attendance[key] === true) {
|
||||
td.innerText = 'Yes';
|
||||
td.classList.add('yes');
|
||||
td.classList.remove('no', 'maybe');
|
||||
} else if (data.attendance[key] === 'no') {
|
||||
td.innerText = 'No';
|
||||
td.classList.add('no');
|
||||
td.classList.remove('yes', 'maybe');
|
||||
} else if (data.attendance[key] === 'maybe') {
|
||||
td.innerText = 'Maybe';
|
||||
td.classList.add('maybe');
|
||||
td.classList.remove('yes', 'no');
|
||||
|
||||
const setCell = val => {
|
||||
if (val === true) {
|
||||
td.innerText = 'Yes'; td.className = 'clickable name-col yes';
|
||||
} else if (val === 'no') {
|
||||
td.innerText = 'No'; td.className = 'clickable name-col no';
|
||||
} else if (val === 'maybe') {
|
||||
td.innerText = 'Maybe'; td.className = 'clickable name-col maybe';
|
||||
} else {
|
||||
td.innerText = '';
|
||||
td.classList.remove('yes', 'no', 'maybe');
|
||||
td.innerText = ''; td.className = 'clickable name-col';
|
||||
}
|
||||
};
|
||||
setCell(data.attendance[key]);
|
||||
|
||||
td.onclick = () => {
|
||||
const cur = data.attendance[key];
|
||||
if (!cur) data.attendance[key] = true;
|
||||
else if (cur === true) data.attendance[key] = 'no';
|
||||
else if (cur === 'no') data.attendance[key] = 'maybe';
|
||||
else delete data.attendance[key];
|
||||
setCell(data.attendance[key]);
|
||||
saveData();
|
||||
};
|
||||
tr.appendChild(td);
|
||||
});
|
||||
// Guest Name column (input per date)
|
||||
|
||||
// Guest Name column
|
||||
const guestNameTd = document.createElement('td');
|
||||
guestNameTd.classList.add('name-col');
|
||||
const guestNameInput = document.createElement('input');
|
||||
@ -157,28 +152,24 @@ function renderTable() {
|
||||
guestNameInput.maxLength = 50;
|
||||
guestNameInput.onchange = e => {
|
||||
let value = e.target.value;
|
||||
// Allow clearing the guest name (empty string is valid)
|
||||
if (value === "") {
|
||||
if (value === '') {
|
||||
delete data.guestNames[date];
|
||||
saveData();
|
||||
return;
|
||||
}
|
||||
// Only allow plain text, disallow HTML/script tags, max 50 chars
|
||||
if (/</.test(value) || />/.test(value) || /["'`\\]/.test(value)) {
|
||||
alert("Guest name cannot contain code or special characters like <, >, \", \\, or backticks.");
|
||||
alert('Guest name cannot contain special characters like <, >, ", \\, or backticks.');
|
||||
guestNameInput.value = data.guestNames[date] || '';
|
||||
return;
|
||||
}
|
||||
// Only allow a-z, A-Z, 0-9, spaces, hyphens, periods
|
||||
if (!/^([a-zA-Z0-9 .-]+)$/.test(value)) {
|
||||
alert('Guest name can only contain letters, numbers, spaces, hyphens, and periods.');
|
||||
guestNameInput.value = data.guestNames[date] || '';
|
||||
return;
|
||||
}
|
||||
if (value.length > 50) {
|
||||
alert('Guest name cannot be longer than 50 characters.');
|
||||
guestNameInput.value = value.slice(0, 50);
|
||||
value = value.slice(0, 50);
|
||||
guestNameInput.value = value;
|
||||
}
|
||||
data.guestNames[date] = value;
|
||||
saveData();
|
||||
@ -187,16 +178,16 @@ function renderTable() {
|
||||
tr.appendChild(guestNameTd);
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
table.appendChild(tbody);
|
||||
container.appendChild(table);
|
||||
// Scroll to the most current match row after rendering
|
||||
|
||||
setTimeout(() => {
|
||||
if (initialLoad) {
|
||||
const row = document.getElementById('current-match-row');
|
||||
if (row) row.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
initialLoad = false;
|
||||
} else {
|
||||
// Restore previous scroll position
|
||||
window.scrollTo({ top: scrollTop });
|
||||
}
|
||||
}, 0);
|
||||
@ -204,6 +195,7 @@ function renderTable() {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
fetchData();
|
||||
|
||||
const toggleBtn = document.getElementById('toggle-matches-btn');
|
||||
if (toggleBtn) {
|
||||
toggleBtn.textContent = 'Show All Matches';
|
||||
@ -213,4 +205,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
renderTable();
|
||||
};
|
||||
}
|
||||
|
||||
const nextSeasonBtn = document.getElementById('next-season-btn');
|
||||
if (nextSeasonBtn) {
|
||||
nextSeasonBtn.onclick = () => {
|
||||
viewingNextSeason = !viewingNextSeason;
|
||||
nextSeasonBtn.textContent = viewingNextSeason ? 'Current Season' : 'Next Season';
|
||||
// Reset "show all" toggle when switching seasons
|
||||
showAllMatches = false;
|
||||
if (toggleBtn) toggleBtn.textContent = 'Show All Matches';
|
||||
initialLoad = true;
|
||||
renderTable();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
@ -154,6 +154,14 @@
|
||||
<a href="/reports">Reports</a>
|
||||
</div>
|
||||
|
||||
<!-- ARCHIVE -->
|
||||
<div class="section">
|
||||
<h2>Archive</h2>
|
||||
<p style="margin: 0 0 0.8em 0; font-size: 0.95em;">Download all attendance data (all seasons, all players) as a CSV file.</p>
|
||||
<button class="btn" onclick="downloadAllCSV()">Download CSV</button>
|
||||
<div class="msg" id="archive-msg"></div>
|
||||
</div>
|
||||
|
||||
<!-- DATE MANAGEMENT -->
|
||||
<div class="section">
|
||||
<h2>Date Management</h2>
|
||||
@ -440,6 +448,44 @@
|
||||
renderPlayers();
|
||||
}
|
||||
|
||||
async function downloadAllCSV() {
|
||||
const msg = document.getElementById('archive-msg');
|
||||
msg.textContent = '';
|
||||
const res = await fetch('/api/data');
|
||||
const data = await res.json();
|
||||
|
||||
const allDates = data.dates || [];
|
||||
const players = data.players || [];
|
||||
const guest = data.guest || 'Guest';
|
||||
const columns = [...players, guest];
|
||||
|
||||
const header = ['Date', ...columns];
|
||||
const rows = allDates.map(date => {
|
||||
const cells = columns.map((col, idx) => {
|
||||
const key = `${date}|${idx}`;
|
||||
const val = data.attendance[key];
|
||||
if (val === true || val === 'yes') return 'yes';
|
||||
if (val === 'no') return 'no';
|
||||
if (val === 'maybe') return 'maybe';
|
||||
if (idx === players.length) return (data.guestNames || {})[date] || '';
|
||||
return '';
|
||||
});
|
||||
return [date, ...cells];
|
||||
});
|
||||
|
||||
const csv = [header, ...rows].map(r => r.map(c => `"${c}"`).join(',')).join('\n');
|
||||
const blob = new Blob([csv], {type: 'text/csv'});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'padel-nivelles-all.csv';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
msg.className = 'msg ok';
|
||||
msg.textContent = `Downloaded ${allDates.length} dates.`;
|
||||
}
|
||||
|
||||
// Allow Enter key on add-player-name
|
||||
document.getElementById('add-player-name').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') addPlayer();
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
<div style="display: flex; justify-content: flex-start; gap: 1em; margin-top: 1em;">
|
||||
<button id="toggle-matches-btn" style="background: #948979; color: #222831; border: none; padding: 0.7em 1.5em; border-radius: 4px; font-weight: bold; font-size: 1em; transition: background 0.2s; cursor: pointer;">Show All Matches</button>
|
||||
<a href="/reports" id="reports-btn" style="background: #948979; color: #222831; border: none; padding: 0.7em 1.5em; border-radius: 4px; font-weight: bold; font-size: 1em; transition: background 0.2s; cursor: pointer; text-decoration: none;">Reports</a>
|
||||
<a href="/admin" style="background: #393E46; color: #DFD0B8; border: 1px solid #948979; padding: 0.7em 1.5em; border-radius: 18px; font-weight: bold; font-size: 1em; transition: background 0.2s; cursor: pointer; text-decoration: none;">Admin</a>
|
||||
<button id="next-season-btn" style="display:none; background: #393E46; color: #DFD0B8; border: 1px solid #948979; padding: 0.7em 1.5em; border-radius: 18px; font-weight: bold; font-size: 1em; transition: background 0.2s; cursor: pointer;">Next Season</button>
|
||||
</div>
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
|
||||
@ -23,24 +23,43 @@
|
||||
flex: 1 1 400px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chart-container.large-chart canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
/* Remove forced width: 100% to preserve aspect ratio */
|
||||
}
|
||||
h2 { color: #948979; font-size: 1.1em; margin-bottom: 0.5em; }
|
||||
a, button { color: #222831; background: #948979; border: none; padding: 0.7em 1.5em; border-radius: 18px; font-weight: bold; font-size: 1em; transition: background 0.2s; cursor: pointer; text-decoration: none; }
|
||||
a:hover, button:hover { background: #7c765c; }
|
||||
.btn {
|
||||
color: #222831;
|
||||
background: #948979;
|
||||
border: none;
|
||||
padding: 0.7em 1.5em;
|
||||
border-radius: 18px;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn:hover { background: #7c765c; }
|
||||
.btn-secondary {
|
||||
background: #393E46;
|
||||
color: #DFD0B8;
|
||||
border: 1px solid #948979;
|
||||
}
|
||||
.btn-secondary:hover { background: #948979; color: #222831; }
|
||||
#season-label { color: #948979; font-size: 0.95em; }
|
||||
@media (max-width: 900px) {
|
||||
.charts-flex { flex-direction: column; align-items: stretch; }
|
||||
.chart-container.small-chart { max-width: 100%; min-width: 0; }
|
||||
.chart-container.large-chart { max-width: 100%; min-width: 0; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
body { margin: 0.7em; }
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex; gap: 1em; align-items: center; margin-bottom: 2em;">
|
||||
<a href="/" style="display: inline-block;">Back to Attendance</a>
|
||||
<div style="display: flex; gap: 1em; align-items: center; margin-bottom: 1.5em; flex-wrap: wrap;">
|
||||
<a href="/" class="btn">← Attendance</a>
|
||||
<button id="last-season-btn" class="btn btn-secondary" style="display:none;"></button>
|
||||
<span id="season-label"></span>
|
||||
</div>
|
||||
<div class="charts-flex">
|
||||
<div class="chart-container large-chart">
|
||||
@ -53,20 +72,43 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
fetch('/api/data').then(r => r.json()).then(data => {
|
||||
function getSeasonYear(dateStr) {
|
||||
const [d, m, y] = dateStr.split('/').map(Number);
|
||||
return m >= 4 ? 2000 + y : 1999 + y;
|
||||
}
|
||||
|
||||
function currentSeasonYear() {
|
||||
const now = new Date();
|
||||
const m = now.getMonth() + 1;
|
||||
return m >= 4 ? now.getFullYear() : now.getFullYear() - 1;
|
||||
}
|
||||
|
||||
function seasonLabel(y) { return `Season ${y}/${y + 1}`; }
|
||||
|
||||
let barChart, pieChart;
|
||||
|
||||
function renderCharts(data, targetYear) {
|
||||
const seasonDates = new Set((data.dates || []).filter(d => getSeasonYear(d) === targetYear));
|
||||
const players = data.players;
|
||||
const attendance = data.attendance;
|
||||
// Calculate Yes counts per player
|
||||
|
||||
const yesCounts = Array(players.length).fill(0);
|
||||
Object.entries(attendance).forEach(([key, value]) => {
|
||||
if (value === true) {
|
||||
const [date, colIdx] = key.split('|');
|
||||
const idx = parseInt(colIdx);
|
||||
if (idx < players.length) yesCounts[idx]++;
|
||||
if (seasonDates.has(date)) {
|
||||
const idx = parseInt(colIdx);
|
||||
if (idx < players.length) yesCounts[idx]++;
|
||||
}
|
||||
}
|
||||
});
|
||||
// Bar chart
|
||||
new Chart(document.getElementById('barChart').getContext('2d'), {
|
||||
|
||||
document.getElementById('season-label').textContent = seasonLabel(targetYear);
|
||||
|
||||
if (barChart) barChart.destroy();
|
||||
if (pieChart) pieChart.destroy();
|
||||
|
||||
barChart = new Chart(document.getElementById('barChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: players,
|
||||
@ -86,17 +128,15 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
// Pie chart
|
||||
|
||||
const totalYes = yesCounts.reduce((a, b) => a + b, 0);
|
||||
new Chart(document.getElementById('pieChart').getContext('2d'), {
|
||||
pieChart = new Chart(document.getElementById('pieChart').getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: players,
|
||||
datasets: [{
|
||||
data: yesCounts,
|
||||
backgroundColor: [
|
||||
'#948979', '#DFD0B8', '#7c765c', '#393E46', '#222831', '#bfa181', '#b7b7a4', '#a7c957'
|
||||
]
|
||||
backgroundColor: ['#948979', '#DFD0B8', '#7c765c', '#393E46', '#222831', '#bfa181', '#b7b7a4', '#a7c957']
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
@ -115,8 +155,30 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
fetch('/api/data').then(r => r.json()).then(data => {
|
||||
const thisSeason = currentSeasonYear();
|
||||
const seasons = [...new Set((data.dates || []).map(getSeasonYear))].sort();
|
||||
const hasLastSeason = seasons.includes(thisSeason - 1);
|
||||
|
||||
let viewingLastSeason = false;
|
||||
renderCharts(data, thisSeason);
|
||||
|
||||
const lastSeasonBtn = document.getElementById('last-season-btn');
|
||||
if (hasLastSeason) {
|
||||
lastSeasonBtn.style.display = '';
|
||||
lastSeasonBtn.textContent = `Last Season (${thisSeason - 1}/${thisSeason})`;
|
||||
lastSeasonBtn.onclick = () => {
|
||||
viewingLastSeason = !viewingLastSeason;
|
||||
const target = viewingLastSeason ? thisSeason - 1 : thisSeason;
|
||||
renderCharts(data, target);
|
||||
lastSeasonBtn.textContent = viewingLastSeason
|
||||
? `Current Season (${thisSeason}/${thisSeason + 1})`
|
||||
: `Last Season (${thisSeason - 1}/${thisSeason})`;
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user