Add table of games to index page

main
sudoer777 2021-11-21 21:59:07 -07:00
parent fc60e5186a
commit 4f2b496cf2
5 changed files with 114 additions and 10 deletions

View File

@ -26,4 +26,16 @@ export async function getTeams(sportID) {
const response = await fetch(`/data/teams?sport=${+sportID}`);
const teamsList = await response.json();
return teamsList;
}
export async function getTeamName(teamID) {
const response = await fetch(`/data/team?team=${+teamID}`);
const team = await response.json();
return team.name;
}
export async function getGames(teamID, divisionID, seasonID) {
const response = await fetch(`/data/games?team=${+teamID}&division=${+divisionID}&season=${+seasonID}`);
const gamesList = await response.json();
return gamesList;
}

View File

@ -1,11 +1,12 @@
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');
@ -38,7 +39,6 @@ async function listSports() {
});
listGenders();
listTeams();
}
listSports();
@ -76,6 +76,7 @@ async function listDivisions() {
divisionDropdown.appendChild(option);
});
}
listTeams();
}
async function listTeams() {
@ -93,6 +94,66 @@ async function listTeams() {
teamDropdown.appendChild(option);
});
}
listGames();
}
async function listGames() {
gamesTable.innerHTML = "";
gamesTableHeader.textContent = "";
const selectedTeamID = teamDropdown.value;
const selectedDivisionID = divisionDropdown.value;
const selectedSeasonID = seasonDropdown.value;
if(selectedTeamID && selectedDivisionID) {
await setupGamesTable();
const gamesList = await Data.getGames(selectedTeamID, selectedDivisionID, selectedSeasonID);
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);
});
}
}
async function setupGamesTable() {
gamesTableHeader.textContent = `Scores for ${teamDropdown.options[teamDropdown.selectedIndex].text}`;
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);
}
@ -103,4 +164,5 @@ sportDropdown.onchange = (() => {
listGenders();
listTeams();
});
genderDropdown.onchange = listDivisions;
genderDropdown.onchange = listDivisions;
teamDropdown.onchange = listGames;

View File

@ -1,3 +1,21 @@
h1 {
text-align: left;
}
th {
text-align: left;
}
#score-column {
width: 20%;
}
#opponent-column{
width: 60%;
}
#date-column {
width: 20%;
}
tr {
height: 3em;
}

View File

@ -5,6 +5,7 @@ var seasons = require('../database/scores/seasons');
var genders = require('../database/scores/genders');
var divisions = require('../database/scores/divisions');
var teams = require('../database/scores/teams');
var games = require('../database/scores/games');
router.get('/sports', function(req, res, next) {
@ -23,7 +24,7 @@ router.get('/genders', function(req, res, next) {
})
router.get('/divisions', function(req, res, next) {
const gender = req.body.gender == 'female' ? genders.FEMALE : genders.MALE;
const gender = req.query.gender == 'female' ? genders.FEMALE : genders.MALE;
divisions.retrieveBySportAndGender(req.query.sport, gender)
.then(data => res.json(data));
@ -34,4 +35,14 @@ router.get('/teams', function(req, res, next) {
.then(data => res.json(data));
})
router.get('/team', function(req, res, next) {
teams.getFromID(req.query.team)
.then(data => res.json(data));
})
router.get('/games', function(req, res, next) {
games.retrieveByTeamDivisionAndSeason(req.query.team, req.query.division, req.query.season)
.then(data => res.json(data));
})
module.exports = router;

View File

@ -24,12 +24,13 @@ block content
select#team-dropdown(name="team" class="form-main-dropdown")
span(class='form-section')
div
table
tr
th Win?
th Opponent
th Score
th Date
h2#games-table-header
table
colgroup
col#score-column(span="1")
col#opponent-column(span="1")
col#date-column(span="1")
tbody#games-table
block scripts