From 9b4575c666d15044823e251a61026a3d53f66d47 Mon Sep 17 00:00:00 2001 From: sudoer777 <78781902+sudoer777@users.noreply.github.com> Date: Sun, 21 Nov 2021 19:07:44 -0700 Subject: [PATCH] Begin index page --- public/scripts/index.js | 106 ++++++++++++++++++++++++++++++++++ public/stylesheets/form.css | 34 +++++++++++ public/stylesheets/index.css | 3 + public/stylesheets/style.css | 8 +++ public/stylesheets/submit.css | 38 ------------ routes/index.js | 2 +- views/index.pug | 36 ++++++++++++ views/submit.pug | 58 ++++++++++--------- 8 files changed, 218 insertions(+), 67 deletions(-) create mode 100644 public/scripts/index.js create mode 100644 public/stylesheets/form.css create mode 100644 public/stylesheets/index.css diff --git a/public/scripts/index.js b/public/scripts/index.js new file mode 100644 index 0000000..38627c0 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/public/stylesheets/form.css b/public/stylesheets/form.css new file mode 100644 index 0000000..85b34bc --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css new file mode 100644 index 0000000..e4d4d83 --- /dev/null +++ b/public/stylesheets/index.css @@ -0,0 +1,3 @@ +h1 { + text-align: left; +} \ No newline at end of file diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 6a727df..b6a5c49 100644 --- a/public/stylesheets/style.css +++ b/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; +} + diff --git a/public/stylesheets/submit.css b/public/stylesheets/submit.css index 80a8146..af4e239 100644 --- a/public/stylesheets/submit.css +++ b/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; } \ No newline at end of file diff --git a/routes/index.js b/routes/index.js index c806b1c..4cb7f20 100644 --- a/routes/index.js +++ b/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; diff --git a/views/index.pug b/views/index.pug index e69de29..8a93bd0 100644 --- a/views/index.pug +++ b/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") \ No newline at end of file diff --git a/views/submit.pug b/views/submit.pug index 97d7b37..85f352f 100644 --- a/views/submit.pug +++ b/views/submit.pug @@ -2,36 +2,38 @@ extends layout block stylesheets link(rel='stylesheet', href='/stylesheets/submit.css') + link(rel='stylesheet', href='/stylesheets/form.css') block content - 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") - span(class='form-section') - label Sport - span(class='form-section-input') - select#sport-dropdown(name="sport" class="main-dropdown") - select#gender-dropdown(name="gender") - select#division-dropdown(name="division") - span(class='form-section') - label Date of match - span(class='form-section-input') - input(type="date", name="date", value=date) - 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") - 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") - span(class='form-section') - button(type="submit") Submit + 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="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 Date of match + span(class='form-section-input') + input(type="date", name="date", value=date) + span(class='form-section') + label Your team + span(class='form-section-input') + 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="form-main-dropdown") + input(class="form-score-input", type="number", name="team2-score", value="0") + span(class='form-section') + button#submit-button(type="submit") Submit block scripts script(src='/scripts/submit.js' type="module") \ No newline at end of file