Tweak scores view page

public/scripts/index.js

@@ -7,6 +7,7 @@ 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');
 
 
 
@@ -101,43 +102,49 @@ async function listTeams() {
 async function listGames() {
     gamesTable.innerHTML = "";
     gamesTableHeader.textContent = "";
+    noScoresMessage.textContent = "";
 
     const selectedTeamID = teamDropdown.value;
     const selectedDivisionID = divisionDropdown.value;
     const selectedSeasonID = seasonDropdown.value;
 
     if(selectedTeamID && selectedDivisionID) {
-        await setupGamesTable();
+        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) => {
+            gamesList.forEach((game) => {
-            const row = document.createElement('tr');
+                const row = document.createElement('tr');
-            
+                
-            const scoreCell = document.createElement('td');
+                const scoreCell = document.createElement('td');
-            const winLossLine = document.createElement('span');
+                const winLossLine = document.createElement('span');
-            winLossLine.textContent = (game.team1Score > game.team2Score) ? "Win" : (game.team1Score < game.team2Score) ? "Loss" : "Tie";
+                winLossLine.textContent = (game.team1Score > game.team2Score) ? "Win" : (game.team1Score < game.team2Score) ? "Loss" : "Tie";
-            scoreCell.appendChild(winLossLine);
+                scoreCell.appendChild(winLossLine);
-            const scoreLine = document.createElement('span');
+                const scoreLine = document.createElement('span');
-            scoreLine.textContent = game.team1Score + "-" + game.team2Score;
+                scoreLine.textContent = game.team1Score + "-" + game.team2Score;
-            scoreCell.appendChild(scoreLine);
+                scoreCell.appendChild(scoreLine);
-            row.appendChild(scoreCell);
+                row.appendChild(scoreCell);
-
+    
-            const opponentCell = document.createElement('td');
+                const opponentCell = document.createElement('td');
-            Data.getTeamName(game.team2ID)
+                Data.getTeamName(game.team2ID)
-                .then(data => opponentCell.textContent = data);
+                    .then(data => opponentCell.textContent = data);
-            row.appendChild(opponentCell);
+                row.appendChild(opponentCell);
-
+    
-            const dateCell = document.createElement('td');
+                const dateCell = document.createElement('td');
-            dateCell.textContent = game.date;
+                dateCell.textContent = game.date;
-            row.appendChild(dateCell);
+                row.appendChild(dateCell);
-
+    
-            gamesTable.appendChild(row);
+                gamesTable.appendChild(row);
-        });
+            });
+        }
+        else {
+            noScoresMessage.textContent = "No scores available";
+        }
     }
 }
-async function setupGamesTable() {
+async function setupGamesTableHeaders() {
-    gamesTableHeader.textContent = `Scores for ${teamDropdown.options[teamDropdown.selectedIndex].text}`;
 
     const row = document.createElement('tr');
 
@@ -165,4 +172,5 @@ sportDropdown.onchange = (() => {
     listTeams();
 });
 genderDropdown.onchange = listDivisions;
-teamDropdown.onchange = listGames;
+teamDropdown.onchange = listGames;
+seasonDropdown.onchange = listGames;

views/index.pug

@@ -25,6 +25,7 @@ block content
         span(class='form-section')
     div 
         h2#games-table-header
+        span#no-scores-message
         table
             colgroup   
                 col#score-column(span="1")