This repository has been archived on 2024-04-05. You can view files and clone it, but cannot push or open issues/pull-requests.
score-tracker/public/scripts/index.js

130 lines
4.6 KiB
JavaScript

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}`;
noScoresMessage.textContent = "Loading scores...";
const requestURL = `/fetch/index/scores?team=${+selectedTeamID}&division=${+selectedDivisionID}&season=${+selectedSeasonID}`;
const gamesList = await (await fetch(requestURL)).json();
noScoresMessage.textContent = "";
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'
});
}