Fine tune loading for submit page

public/scripts/form.js

@@ -111,7 +111,7 @@ export async function populateDivisions (divisionDropdown, selectedSportID, sele
     }
 }
 
-export async function populateTeams(teamDropdown, selectedSportID, selectedTeamID = undefined, data = undefined) {
+export async function populateTeams(teamDropdown, selectedSportID, selectedTeamID = undefined, data = undefined, useOpponent = false) {
     teamDropdown.innerHTML = "";
 
     if(data) {
@@ -128,13 +128,18 @@ export async function populateTeams(teamDropdown, selectedSportID, selectedTeamI
 
         let currentIndex = 0;
         let selectedTeamIndex;    
+
+        if(data) {
+            selectedTeamID = useOpponent ? data.latestGame.team2ID : data.latestGame.team1ID;
+        }
+
         teamsList.forEach(team => {
             const option = document.createElement('option');
             option.text = team.name;
             option.value = team.id;
             teamDropdown.appendChild(option);
 
-            if(team.id == selectedTeamID || (data && team.id == data.latestGame.team1ID)) selectedTeamIndex = currentIndex;
+            if(team.id == selectedTeamID) selectedTeamIndex = currentIndex;
             currentIndex++;    
         });
         

public/scripts/manage/game.js

@@ -15,6 +15,7 @@ const team2ScoreTextbox = document.getElementById('team2-score-textbox');
 const nameTextbox = document.getElementById('name-textbox');
 const submitButton = document.getElementById('submit-button');
 const deleteButton = document.getElementById('delete-button');
+const loadingSpan = document.getElementById('loading-span');
 
 
 async function initializeForm() {
@@ -41,24 +42,23 @@ async function initializeForm() {
         team2ScoreTextbox.value = game.team2Score;
     }
     else {
-        try {
-            const game = await Data.getLatestGame(true);
+        /*try {*/
+            const data = await (await fetch(`/fetch/index/dropdown`)).json();
 
-            Form.populateSeasons(seasonDropdown, game.seasonID);
-            const data = await Data.getDivision(game.divisionID)
-            await Form.populateSports(sportDropdown, data.sportID)
-            await Form.populateGenders(genderDropdown, sportDropdown.value, data.gender.name)
-            await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value, game.divisionID);
-            await Form.populateTeams(team1Dropdown, sportDropdown.value, game.team1ID);
-            await Form.populateTeams(team2Dropdown, sportDropdown.value, game.team2ID);    
-        } catch {
+            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(team1Dropdown, null, null, data);
+            await Form.populateTeams(team2Dropdown, null, null, data, true);    
+        /*} catch {
             await Form.populateSeasons(seasonDropdown);
             await Form.populateSports(sportDropdown)
             await Form.populateGenders(genderDropdown, sportDropdown.value)
             await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value);
             await Form.populateTeams(team1Dropdown, sportDropdown.value);
             await Form.populateTeams(team2Dropdown, sportDropdown.value);    
-        }
+        }*/
 
         dateInput.value = (new Date()).toISOString().slice(0,10);
     }
@@ -95,6 +95,9 @@ async function initializeForm() {
     team2ScoreTextbox.addEventListener('keyup', checkDataValidity);
     if(nameTextbox) nameTextbox.addEventListener('keyup', checkDataValidity);
 
+    loadingSpan.textContent = '';
+    submissionForm.style.visibility = 'visible';
+
     checkDataValidity();
 }
 initializeForm();

public/stylesheets/form.css

@@ -48,4 +48,8 @@ form {
 
   .flat-form-section {
       flex-direction: row;
-  }
+  }
+
+#submission-form {
+    visibility: hidden;
+}

routes/fetch.js

@@ -75,4 +75,55 @@ router.get('/index/scores', async function (req, res, next) {
     }
 });
 
+
+router.get('/submit', async function(req, res, next) {
+    let latestGame;
+    let seasonsData;
+    let sportsData;
+    let gendersData;
+    let divisionsData;
+    let teamsData;
+
+    const userID = req.user ? req.user[0] : null;
+
+    try {
+        latestGame = await games.getLatest(userID);
+
+        let division = await divisions.getFromID(latestGame.divisionID);
+        latestGame.sportID = division.sportID;
+        latestGame.gender = division.gender;
+    } catch {
+        latestGame = null;
+    }
+
+
+    try {
+        if(latestGame) {
+            seasonsData = await seasons.retrieveAll();
+            sportsData = await sports.retrieveAll();
+            gendersData = await genders.retrieveBySport(latestGame.sportID);
+            divisionsData = await divisions.retrieve(latestGame.sportID);
+            teamsData = await teams.retrieve(latestGame.sportID);
+        } else {
+            seasonsData = await seasons.retrieveAll();
+            sportsData = await sports.retrieveAll();
+            gendersData = await genders.retrieveBySport(sportsData[0].id);
+            divisionsData = await divisions.retrieve(sportsData[0].id);
+            teamsData = await teams.retrieve(sportsData[0].id);
+        }
+
+        res.json({
+            seasons : seasonsData,
+            sports : sportsData,
+            genders : gendersData,
+            divisions : divisionsData,
+            teams: teamsData,
+            latestGame
+        });
+    } catch(err) {
+        console.error("ERROR: " + err.message);
+        res.status(500).send("An error has occurred");
+    }
+});
+
 module.exports = router;

views/manage/addgame.pug

@@ -5,6 +5,7 @@ block stylesheets
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
+    span#loading-span Loading...
     form#submission-form(action='./game', method='POST')
       span(class='form-section')
         label Year