score-tracker/public/scripts/index.js

import * as Data from "./data.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');





async function listSeasons() {
    seasonDropdown.innerHTML = "";
    
    const seasonsList = await Data.getSeasons();

    seasonsList.forEach(season => {
        const option = document.createElement('option');
        option.text = (season.year - 1) + "-" + season.year;
        option.value = season.id;
        seasonDropdown.appendChild(option);
    });
}
listSeasons();

async function listSports() {
    sportDropdown.innerHTML = "";

    const sportsList = await Data.getSports();
    
    sportsList.forEach(sport => {
        const option = document.createElement('option');
        option.text = sport.name;
        option.value = sport.id;
        sportDropdown.appendChild(option);
    });
    
    listGenders();
}
listSports();

async function listGenders() {
    genderDropdown.innerHTML = "";

    const selectedSportID = sportDropdown.value;
    const gendersList = await Data.getGenders(selectedSportID);

    if(selectedSportID) {
        gendersList.forEach(gender => {
            const option = document.createElement('option');
            option.text = (gender.name == "female") ? "Female" : (gender.name == "male") ? "Male" : "";
            option.value = gender.name;
            genderDropdown.appendChild(option);
        });
    }

    listDivisions();
}

async function listDivisions() {
    divisionDropdown.innerHTML = "";

    const selectedSportID = sportDropdown.value;
    const selectedGender = genderDropdown.value;

    if(selectedGender) {
        const divisionsList = await Data.getDivisions(selectedSportID, selectedGender);

        divisionsList.forEach(division => {
            const option = document.createElement('option');
            option.text = division.name;
            option.value = division.id;
            divisionDropdown.appendChild(option);
        });
    }
    listTeams();
}

async function listTeams() {
    teamDropdown.innerHTML = "";

    const selectedSportID = sportDropdown.value;

    if(selectedSportID) {
        const teamsList = await Data.getTeams(selectedSportID);

        teamsList.forEach(team => {
            const option = document.createElement('option');
            option.text = team.name;
            option.value = team.id;
            teamDropdown.appendChild(option);
        });
    }

    listGames();
}

async function listGames() {
    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.getTeamName(game.team2ID)
                    .then(data => opponentCell.textContent = data);
                row.appendChild(opponentCell);
    
                const dateCell = document.createElement('td');
                dateCell.textContent = game.date;
                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);
}





sportDropdown.onchange = (() => { 
    listGenders();
    listTeams();
});
genderDropdown.onchange = listDivisions;
teamDropdown.onchange = listGames;
seasonDropdown.onchange = listGames;