Add function to list divisions in submit form

public/scripts/data.js

@@ -15,3 +15,9 @@ export async function getGenders(sportID) {
     const gendersList = await response.json();
     return gendersList;
 }
+
+export async function getDivisions(sportID, gender) {
+    const response = await fetch(`/data/divisions?sport=${+sportID}&gender=${gender}`);
+    const divisionsList = await response.json();
+    return divisionsList;
+}

public/scripts/submit.js

@@ -4,6 +4,7 @@ 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');
 
 
 
@@ -18,6 +19,8 @@ async function listSports() {
         option.value = sport.id;
         sportDropdown.appendChild(option);
     });
+
+    listSeasons();
 }
 listSports();
 
@@ -45,6 +48,26 @@ async function listGenders() {
         option.value = gender.name;
         genderDropdown.appendChild(option);
     });
+
+    listDivisions();
+}
+
+async function listDivisions() {
+    divisionDropdown.innerHTML = "";
+
+    const selectedSportID = sportDropdown.value;
+    const selectedGender = genderDropdown.value;
+
+    if(!selectedGender) return;
+
+    const divisionsList = await Data.getDivisions(selectedSportID, selectedGender);
+
+    divisionsList.forEach(division => {
+        const option = document.createElement('option');
+        option.text = division.name;
+        option.value = division.id;
+        divisionDropdown.appendChild(option);
+    })
 }
 
 
@@ -52,3 +75,4 @@ async function listGenders() {
 
 
 sportDropdown.onchange = listGenders;
+genderDropdown.onchange = listDivisions;

routes/data.js

@@ -3,6 +3,7 @@ var router = express.Router();
 var sports = require('../database/scores/sports');
 var seasons = require('../database/scores/seasons');
 var genders = require('../database/scores/genders');
+var divisions = require('../database/scores/divisions');
 
 
 router.get('/sports', function(req, res, next) {
@@ -20,4 +21,11 @@ router.get('/genders', function(req, res, next) {
         .then(data => res.json(data));
 })
 
+router.get('/divisions', function(req, res, next) {
+    const gender = req.body.gender == 'female' ? genders.FEMALE : genders.MALE;
+
+    divisions.retrieveBySportAndGender(req.query.sport, gender)
+        .then(data => res.json(data));
+})
+
 module.exports = router;

views/submit.pug

@@ -16,9 +16,6 @@ block content
         select#sport-dropdown(name="sport" class="main-dropdown") 
         select#gender-dropdown(name="gender")
         select#division-dropdown(name="division")
-          option(value="Varsity") Varsity 
-          option(value="JV-A") JV-A 
-          option(value="JV-B") JV-B
     span(class='form-section')
       label Date of match
       span(class='form-section-input')