score-tracker/public/scripts/index.js

import * as Data from "./data.js";
import * as Form from "./form.js";

const sportDropdown = document.getElementById('sport-dropdown');
const seasonDropdown = document.getElementById('year-dropdown');
const genderDropdown = document.getElementById('gender-dropdown');
const divisionDropdown = document.getElementById('division-dropdown');
const teamDropdown = document.getElementById('team-dropdown');
const gamesTable = document.getElementById('games-table');
const gamesTableHeader = document.getElementById('games-table-header');
const noScoresMessage = document.getElementById('no-scores-message');
const addScoreButton = document.getElementById('add-score-button');
const manageButton = document.getElementById('manage-button');





async function initializeForm() {
    const data = await (await fetch(`/fetch/index/dropdown`)).json();

    await Form.populateSeasons(seasonDropdown, null, data);
    await Form.populateSports(sportDropdown, null, data);
    await Form.populateGenders(genderDropdown, null, null, data);
    await Form.populateDivisions(divisionDropdown, null, null, null, data);
    await Form.populateTeams(teamDropdown, null, null, data);
    
    seasonDropdown.onchange = loadTable;

    sportDropdown.onchange = async () => {
        await Form.populateGenders(genderDropdown, sportDropdown.value)
        await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value);
        await Form.populateTeams(teamDropdown, sportDropdown.value);
        loadTable();
    };

    genderDropdown.onchange = async () => {
        await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value);
        loadTable();
    };

    divisionDropdown.onchange = loadTable;
    teamDropdown.onchange = loadTable;

    loadTable();


}
initializeForm();

async function loadTable() {
    gamesTable.innerHTML = "";
    gamesTableHeader.textContent = "";
    noScoresMessage.textContent = "";

    const selectedTeamID = teamDropdown.value;
    const selectedDivisionID = divisionDropdown.value;
    const selectedSeasonID = seasonDropdown.value;

    if(selectedTeamID && selectedDivisionID) {
        gamesTableHeader.textContent = `Scores for ${teamDropdown.options[teamDropdown.selectedIndex].text}`;

        const requestURL = `/fetch/index/scores?team=${+selectedTeamID}&division=${+selectedDivisionID}&season=${+selectedSeasonID}`;
        const gamesList = await (await fetch(requestURL)).json();
        if(gamesList.length > 0) {
            await setupGamesTableHeaders();

            gamesList.forEach((game) => {
                const row = document.createElement('tr');
                
                const scoreCell = document.createElement('td');
                const winLossLine = document.createElement('span');
                winLossLine.textContent = (game.team1Score > game.team2Score) ? "Win" : (game.team1Score < game.team2Score) ? "Loss" : "Tie";
                scoreCell.appendChild(winLossLine);
                const scoreLine = document.createElement('span');
                scoreLine.textContent = game.team1Score + "-" + game.team2Score;
                scoreCell.appendChild(scoreLine);
                row.appendChild(scoreCell);
    
                const opponentCell = document.createElement('td');
                opponentCell.textContent = game.opponent.name;
                row.appendChild(opponentCell);
    
                const dateCell = document.createElement('td');
                dateCell.textContent = game.date;
                dateCell.style['white-space'] = 'nowrap';
                row.appendChild(dateCell);
    
                gamesTable.appendChild(row);
            });
        }
        else {
            noScoresMessage.textContent = "No scores available";
        }
    }
}

async function setupGamesTableHeaders() {
    const row = document.createElement('tr');

    const scoresHeader = document.createElement('th');
    scoresHeader.textContent = "Score"
    row.appendChild(scoresHeader);

    const opponentHeader = document.createElement('th');
    opponentHeader.textContent = "Opponent";
    row.appendChild(opponentHeader);

    const dateHeader = document.createElement('th');
    dateHeader.textContent = "Date";
    row.appendChild(dateHeader);

    gamesTable.appendChild(row);
}



if(addScoreButton) {
    addScoreButton.addEventListener('click', () => {
        window.location.href = '/manage/game';
    });
}

if(manageButton) {
    manageButton.addEventListener('click', () => {
        window.location.href = '/manage'
    });
}