me
/
score-tracker
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Begin index page

main
sudoer777 2021-11-21 19:07:44 -07:00
parent db2d6f2aa6
commit 9b4575c666
8 changed files with 218 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
public/scripts/index.js 100644
View File

@ -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;

34
public/stylesheets/form.css 100644
View File

@ -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;
}

3
public/stylesheets/index.css 100644
View File

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

8
public/stylesheets/style.css
View File

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

38
public/stylesheets/submit.css
View File

@ -1,41 +1,3 @@
h1 { h1 {
text-align: center; 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;
} }

2
routes/index.js
View File

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

36
views/index.pug
View File

@ -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")

58
views/submit.pug
View File

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