SportAttendanceSheet/static/app.js

let data = {};

function fetchData() {
    fetch('/api/data').then(r => r.json()).then(d => {
        data = d;
        renderTable();
    });
}

function saveData() {
    fetch('/api/data', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    });
}



let showAllMatches = false; // false = future matches only; true = all matches

function renderTable() {
    const container = document.getElementById('attendance-table');
    container.innerHTML = '';
    const table = document.createElement('table');
    // Header row
    const thead = document.createElement('thead');
    const headRow = document.createElement('tr');
    headRow.appendChild(document.createElement('th')).innerText = 'Date';
    data.players.forEach((name, i) => {
        const th = document.createElement('th');
        th.innerText = name;
        th.classList.add('name-col');
        headRow.appendChild(th);
    });
    // Guest column
    const guestTh = document.createElement('th');
    guestTh.innerText = data.guest || 'Guest';
    guestTh.classList.add('name-col');
    headRow.appendChild(guestTh);
    // 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);
    }
    // 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)
    let closestIdx = 0;
    let minDiff = Infinity;
    filteredDates.forEach((date, rowIdx) => {
        const diff = Math.abs(parseDate(date) - today);
        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');
        if (date === '29/05/25' || date === '25/12/25') {
            const strong = document.createElement('strong');
            strong.innerText = date;
            dateTd.appendChild(strong);
            dateTd.title = 'Public Holiday';
        } else {
            dateTd.innerText = date;
        }
        tr.appendChild(dateTd);
        // Player attendance
        [...data.players, data.guest].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');
            } else if (data.attendance[key] === 'no') {
                td.innerText = 'No';
                td.classList.add('no');
                td.classList.remove('yes');
            } else {
                td.innerText = '';
                td.classList.remove('yes', 'no');
            }
            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') {
                    delete data.attendance[key];
                }
                saveData();
                renderTable();
            };
            tr.appendChild(td);
        });
        // Guest Name column (input per date)
        const guestNameTd = document.createElement('td');
        guestNameTd.classList.add('name-col');
        const guestNameInput = document.createElement('input');
        guestNameInput.type = 'text';
        guestNameInput.value = data.guestNames[date] || '';
        guestNameInput.placeholder = 'Enter guest name';
        guestNameInput.maxLength = 50;
        guestNameInput.onchange = e => {
            let value = e.target.value;
            // Allow clearing the guest name (empty string is valid)
            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.");
                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);
            }
            data.guestNames[date] = value;
            saveData();
        };
        guestNameTd.appendChild(guestNameInput);
        tr.appendChild(guestNameTd);
        tbody.appendChild(tr);
    });
    table.appendChild(tbody);
    container.appendChild(table);
    // Scroll to the most current match row after rendering
    setTimeout(() => {
        const row = document.getElementById('current-match-row');
        if (row) row.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }, 0);
}

document.addEventListener('DOMContentLoaded', () => {
    fetchData();
    const toggleBtn = document.getElementById('toggle-matches-btn');
    if (toggleBtn) {
        toggleBtn.textContent = 'Show All Matches';
        toggleBtn.onclick = () => {
            showAllMatches = !showAllMatches;
            toggleBtn.textContent = showAllMatches ? 'Show Future Matches' : 'Show All Matches';
            renderTable();
        };
    }
});