Begin index page

public/scripts/index.js

@@ -0,0 +1,106 @@
+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');
+
+
+
+
+
+async function listSeasons() {
+    seasonDropdown.innerHTML = "";
+    
+    const seasonsList = await Data.getSeasons();
+
+    seasonsList.forEach(season => {
+        const option = document.createElement('option');
+        option.text = season.year - 1 + "-" + season.year;
+        option.value = season.id;
+        seasonDropdown.appendChild(option);
+    });
+}
+listSeasons();
+
+async function listSports() {
+    sportDropdown.innerHTML = "";
+
+    const sportsList = await Data.getSports();
+    
+    sportsList.forEach(sport => {
+        const option = document.createElement('option');
+        option.text = sport.name;
+        option.value = sport.id;
+        sportDropdown.appendChild(option);
+    });
+    
+    listGenders();
+    listTeams();
+}
+listSports();
+
+async function listGenders() {
+    genderDropdown.innerHTML = "";
+
+    const selectedSportID = sportDropdown.value;
+    const gendersList = await Data.getGenders(selectedSportID);
+
+    if(selectedSportID) {
+        gendersList.forEach(gender => {
+            const option = document.createElement('option');
+            option.text = (gender.name == "female") ? "Female" : (gender.name == "male") ? "Male" : "";
+            option.value = gender.name;
+            genderDropdown.appendChild(option);
+        });
+    }
+
+    listDivisions();
+}
+
+async function listDivisions() {
+    divisionDropdown.innerHTML = "";
+
+    const selectedSportID = sportDropdown.value;
+    const selectedGender = genderDropdown.value;
+
+    if(selectedGender) {
+        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);
+        });
+    }
+}
+
+async function listTeams() {
+    teamDropdown.innerHTML = "";
+
+    const selectedSportID = sportDropdown.value;
+
+    if(selectedSportID) {
+        const teamsList = await Data.getTeams(selectedSportID);
+
+        teamsList.forEach(team => {
+            const option = document.createElement('option');
+            option.text = team.name;
+            option.value = team.id;
+            teamDropdown.appendChild(option);
+        });
+    }
+}
+
+
+
+
+
+sportDropdown.onchange = (() => { 
+    listGenders();
+    listTeams();
+});
+genderDropdown.onchange = listDivisions;

public/stylesheets/form.css

@@ -0,0 +1,34 @@
+form {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  span {
+      display: flex;
+    flex-direction: column;
+  }
+  
+  
+  .form-main-dropdown {
+      width: 100%;
+  }
+  
+  .form-section {
+      margin-bottom: 0.75em;
+  }
+  
+  .form-section-input {
+      flex-direction: row;
+  }
+  
+  input {
+      width: 100%;
+  }
+  
+  .form-score-input{
+      width: 35%;
+  }
+  
+  #submit-button {
+      margin-top: 1.5em;
+  }

public/stylesheets/index.css

@@ -0,0 +1,3 @@
+h1 {
+    text-align: left;
+}

public/stylesheets/style.css

@@ -7,3 +7,11 @@ a {
   color: #00B7FF;
 }
 
+#mobile-view {
+  max-width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+}
+

public/stylesheets/submit.css

@@ -1,41 +1,3 @@
 h1 {
     text-align: center;
 }
-
-form {
-  display: flex;
-  flex-direction: column;
-  max-width: 20em;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-span {
-    display: flex;
-  flex-direction: column;
-}
-
-
-.main-dropdown {
-    width: 100%;
-}
-
-.form-section {
-    margin-bottom: 0.75em;
-}
-
-.form-section-input {
-    flex-direction: row;
-}
-
-input {
-    width: 100%;
-}
-
-.score-input{
-    width: 35%;
-}
-
-button {
-    margin-top: 1.5em;
-}

routes/index.js

@@ -4,7 +4,7 @@ var database = require('../database/database');
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Submit Score' });
+  res.render('index', { title: 'View Scores' });
 });
 
 module.exports = router;

views/index.pug

@@ -0,0 +1,36 @@
+extends layout
+
+block stylesheets
+  link(rel='stylesheet', href='/stylesheets/index.css')
+  link(rel='stylesheet', href='/stylesheets/form.css')
+
+block content
+  div#mobile-view
+    h1 Score Tracker
+    div
+        span(class='form-section')
+            label Year
+            span(class='form-section-input')
+                select#year-dropdown(name="year" class="form-main-dropdown")
+        span(class='form-section')
+            label Sport
+            span(class='form-section-input')
+                select#sport-dropdown(name="sport" class="form-main-dropdown") 
+                select#gender-dropdown(name="gender")
+                select#division-dropdown(name="division")
+        span(class='form-section')
+            label Team
+            span(class='form-section-input')
+                select#team-dropdown(name="team" class="form-main-dropdown")
+        span(class='form-section')
+    div 
+        table 
+            tr 
+                th Win? 
+                th Opponent 
+                th Score 
+                th Date
+  
+
+block scripts 
+  script(src='/scripts/index.js' type="module")

views/submit.pug

@@ -2,18 +2,20 @@ extends layout
 
 block stylesheets
   link(rel='stylesheet', href='/stylesheets/submit.css')
+  link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
+  div#mobile-view
     h1 Submit Score
     form(action='/submit', method='POST')
       span(class='form-section')
         label Year
         span(class='form-section-input')
-        select#year-dropdown(name="year" class="main-dropdown")
+          select#year-dropdown(name="year" class="form-main-dropdown")
       span(class='form-section')
         label Sport
         span(class='form-section-input')
-        select#sport-dropdown(name="sport" class="main-dropdown") 
+          select#sport-dropdown(name="sport" class="form-main-dropdown") 
           select#gender-dropdown(name="gender")
           select#division-dropdown(name="division")
       span(class='form-section')
@@ -23,15 +25,15 @@ block content
       span(class='form-section')
         label Your team
         span(class='form-section-input')
-        select#team1-dropdown(name="team1" class="main-dropdown")
-        input(class="score-input", type="number", name="team1-score", value="0")
+          select#team1-dropdown(name="team1" class="form-main-dropdown")
+          input(class="form-score-input", type="number", name="team1-score", value="0")
       span(class='form-section')
         label Opponent
         span(class='form-section-input')
-        select#team2-dropdown(name="team2" class="main-dropdown")
-        input(class="score-input", type="number", name="team2-score", value="0")
+          select#team2-dropdown(name="team2" class="form-main-dropdown")
+          input(class="form-score-input", type="number", name="team2-score", value="0")
       span(class='form-section')
-      button(type="submit") Submit
+        button#submit-button(type="submit") Submit
 
 block scripts 
   script(src='/scripts/submit.js' type="module")