diff --git a/public/scripts/data.js b/public/scripts/data.js index 7e21436..61f3923 100644 --- a/public/scripts/data.js +++ b/public/scripts/data.js @@ -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; } \ No newline at end of file diff --git a/public/scripts/index.js b/public/scripts/index.js index 38627c0..4111353 100644 --- a/public/scripts/index.js +++ b/public/scripts/index.js @@ -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; \ No newline at end of file +genderDropdown.onchange = listDivisions; +teamDropdown.onchange = listGames; \ No newline at end of file diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css index e4d4d83..2f8f252 100644 --- a/public/stylesheets/index.css +++ b/public/stylesheets/index.css @@ -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; } \ No newline at end of file diff --git a/routes/data.js b/routes/data.js index fc6c947..4344d2d 100644 --- a/routes/data.js +++ b/routes/data.js @@ -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; \ No newline at end of file diff --git a/views/index.pug b/views/index.pug index 8a93bd0..6ec6e7c 100644 --- a/views/index.pug +++ b/views/index.pug @@ -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