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() {
    let latestGame;

    try {
        latestGame = await Data.getLatestGame();
    } catch {
        latestGame = null;
    }

    if(latestGame) {
        Form.populateSeasons(seasonDropdown, latestGame.seasonID);

        const division = await Data.getDivision(latestGame.divisionID);
        await Form.populateSports(sportDropdown, division.sportID);
        await Form.populateGenders(genderDropdown, sportDropdown.value, division.gender.name);
        await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value, latestGame.divisionID);
        await Form.populateTeams(teamDropdown, sportDropdown.value, latestGame.team1ID);
    } else {
        Form.populateSeasons(seasonDropdown);
        await Form.populateSports(sportDropdown);
        await Form.populateGenders(genderDropdown, sportDropdown.value);
        await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value);
        await Form.populateTeams(teamDropdown, sportDropdown.value);
    }

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

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

    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 gamesList = await Data.getGames(selectedTeamID, selectedDivisionID, selectedSeasonID);
        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');
                Data.getTeam(game.team2ID)
                    .then(data => opponentCell.textContent = data.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'
    });
}