Add table of games to index page

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;
 }

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;
+genderDropdown.onchange = listDivisions;
+teamDropdown.onchange = listGames;

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;
 }

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;

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