Add ability to edit games

database/scores/games.js

@@ -71,10 +71,34 @@ async function retrieve(teamID, divisionID, seasonID) {
     return gamesList;
 }
 
+async function edit(gameID, divisionID, seasonID, date, team1ID, team2ID, team1Score, team2Score) {
+    const query = `UPDATE scores.games
+    SET division_id = $2,
+        season_id = $3,
+        game_date = $4,
+        team1_id = $5,
+        team2_id = $6,
+        team1_score = $7,
+        team2_score = $8
+    WHERE game_id = $1;`;
+    await database.executeQuery(query, [gameID, divisionID, seasonID, date, team1ID, team2ID, team1Score, team2Score]);
+    return new Game(gameID, date, team1ID, team2ID, team1Score, team2Score, divisionID, seasonID);
+}
+
+async function getFromID(gameID) {
+    const query = `SELECT game_id, division_id, season_id, game_date, team1_id, team2_id, team1_score, team2_score
+            FROM scores.games
+            WHERE game_id = $1;`;
+    const row = (await database.executeQuery(query, [gameID]))[0];
+    return new Game(row[0], row[3].toISOString().slice(0,10), row[4], row[5], row[6], row[7], row[1], row[2]);
+}
+
 
 
 
 
 exports.add = add;
 exports.remove = remove;
-exports.retrieve = retrieve;
+exports.retrieve = retrieve;
+exports.edit = edit;
+exports.getFromID = getFromID;

public/scripts/data.js

@@ -63,4 +63,10 @@ export async function getGames(teamID = undefined, divisionID = undefined, seaso
     const response = await fetch(URL);
     const gamesList = await response.json();
     return gamesList;
+}
+
+export async function getGame(gameID) {
+    const response = await fetch(`/data/game?game=${gameID}`);
+    const game = await response.json();
+    return game;
 }

public/scripts/form.js

@@ -20,6 +20,92 @@ export async function populateSports(sportDropdown, selectedSportID = undefined)
     if(selectedSportIndex) sportDropdown.selectedIndex = selectedSportIndex;
 }
 
+export async function populateSeasons(seasonDropdown, selectedSeasonID = undefined) {
+    seasonDropdown.innerHTML = "";
+    
+    const seasonsList = await Data.getSeasons();
+
+    let currentIndex = 0;
+    let selectedSeasonIndex;
+    seasonsList.forEach(season => {
+        const option = document.createElement('option');
+        option.text = (season.year - 1) + "-" + season.year;
+        option.value = season.id;
+        seasonDropdown.appendChild(option);
+
+        if(season.id == selectedSeasonID) selectedSeasonIndex = currentIndex;
+        currentIndex++;
+    });
+
+    if(selectedSeasonIndex) seasonDropdown.selectedIndex = selectedSeasonIndex;
+}
+
+export async function populateGenders(genderDropdown, selectedSportID, selectedGender = undefined) {
+    genderDropdown.innerHTML = "";
+
+    const gendersList = await Data.getGenders(selectedSportID);
+
+    if(selectedSportID) {
+        let currentIndex = 0;
+        let selectedGenderIndex;    
+        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);
+
+            if(gender.name == selectedGender) selectedGenderIndex = currentIndex;
+            currentIndex++;    
+        });
+
+        if(selectedGenderIndex) genderDropdown.selectedIndex = selectedGenderIndex;
+    }
+}
+
+export async function populateDivisions (divisionDropdown, selectedSportID, selectedGender, selectedDivisionID = undefined) {
+    divisionDropdown.innerHTML = "";
+
+    if(selectedSportID && selectedGender) {
+        const divisionsList = await Data.getDivisions(selectedSportID, selectedGender);
+
+        let currentIndex = 0;
+        let selectedDivisionIndex;
+        divisionsList.forEach(division => {
+            const option = document.createElement('option');
+            option.text = division.name;
+            option.value = division.id;
+            divisionDropdown.appendChild(option);
+
+            if(division.id == selectedDivisionID) selectedDivisionIndex = currentIndex;
+            currentIndex++;    
+        });
+
+        if(selectedDivisionIndex) divisionDropdown.selectedIndex = selectedDivisionIndex;
+    }
+}
+
+export async function populateTeams(teamDropdown, selectedSportID, selectedTeamID) {
+    teamDropdown.innerHTML = "";
+
+    if(selectedSportID) {
+        const teamsList = await Data.getTeams(selectedSportID);
+
+        let currentIndex = 0;
+        let selectedTeamIndex;    
+        teamsList.forEach(team => {
+            const option = document.createElement('option');
+            option.text = team.name;
+            option.value = team.id;
+            teamDropdown.appendChild(option);
+
+            if(team.id == selectedTeamID) selectedTeamIndex = currentIndex;
+            currentIndex++;    
+        });
+        
+        if(selectedTeamIndex) teamDropdown.selectedIndex = selectedTeamIndex;
+    }
+}
+
 export async function addHiddenValue(name, value, form) {
     const valueInput = document.createElement('input');
     valueInput.setAttribute('name', name);

public/scripts/manage.js

@@ -267,10 +267,10 @@ CATEGORIES.push(new Category(
         row.appendChild(dateCell);
     },
     async function addGame() {
-        window.location.href = "/manage/addgame";
+        window.location.href = "/manage/game";
     },
-    async function editSeason() {
+    async function editGame(id) {
-
+        window.location.href = `/manage/game?game=${id}`;
     }
 ));
 

public/scripts/manage/game.js

@@ -0,0 +1,71 @@
+import * as Data from "./../data.js";
+import * as Form from "./../form.js";
+
+
+const submissionForm = document.getElementById('submission-form');
+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 dateInput = document.getElementById('date-input');
+const team1Dropdown = document.getElementById('team1-dropdown');
+const team2Dropdown = document.getElementById('team2-dropdown');
+const team1ScoreTextbox = document.getElementById('team1-score-textbox');
+const team2ScoreTextbox = document.getElementById('team2-score-textbox');
+const submitButton = document.getElementById('submit-button');
+const deleteButton = document.getElementById('delete-button');
+
+
+async function initializeForm() {
+    let params = new URLSearchParams(location.search);
+    let gameID = params.get('game');
+    if(gameID) {
+        deleteButton.style.visibility = "visible";
+        deleteButton.disabled = false;
+
+        const game = await Data.getGame(gameID);
+
+        Form.populateSeasons(seasonDropdown, game.seasonID);
+        Data.getDivision(game.divisionID)
+            .then(data => {
+                Form.populateSports(sportDropdown, data.sportID)
+                    .then(() => {
+                        Form.populateGenders(genderDropdown, sportDropdown.value, data.gender.name)
+                            .then(() => {
+                                Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value, game.divisionID);
+                            });
+                        Form.populateTeams(team1Dropdown, sportDropdown.value, game.team1ID);
+                        Form.populateTeams(team2Dropdown, sportDropdown.value, game.team2ID);
+                    });
+            });
+        dateInput.value = game.date;
+        team1ScoreTextbox.value = game.team1Score;
+        team2ScoreTextbox.value = game.team2Score;
+    }
+    else {
+        Form.populateSeasons(seasonDropdown);
+        Form.populateSports(sportDropdown)
+                    .then(() => {
+                        Form.populateGenders(genderDropdown, sportDropdown.value)
+                            .then(() => {
+                                Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value);
+                            });
+                        Form.populateTeams(team1Dropdown, sportDropdown.value);
+                        Form.populateTeams(team2Dropdown, sportDropdown.value);
+                    });
+        dateInput.value = (new Date()).toISOString().slice(0,10);
+    }
+    seasonDropdown.disabled = false;
+    sportDropdown.disabled = false;
+    genderDropdown.disabled = false;
+    divisionDropdown.disabled = false;
+    dateInput.disabled = false;
+    team1Dropdown.disabled = false;
+    team2Dropdown.disabled = false;
+    team1ScoreTextbox.disabled = false;
+    team2ScoreTextbox.disabled = false;
+    submitButton.disabled = false;
+}
+initializeForm();
+
+Form.addRemoveFunction(deleteButton, submissionForm, "game");

routes/data.js

@@ -56,4 +56,9 @@ router.get('/games', function(req, res, next) {
         .then(data => res.json(data));
 })
 
+router.get('/game', function(req, res, next) {
+    games.getFromID(req.query.game)
+        .then(data => res.json(data));
+})
+
 module.exports = router;

routes/manage.js

@@ -13,11 +13,13 @@ router.get('/', function(req, res, next) {
   res.render('manage', { title: 'Score Management' });
 });
 
-router.get('/addgame', function(req, res, next) {
+router.get('/game', function(req, res, next) {
-  res.render('manage/addgame', { title: 'Submit Score' });
+  let title = req.query.game ? 'Edit Game' : 'Submit Score'
+  
+  res.render('manage/addgame', { title });
 });
 
-router.post('/submitgame', function(req, res, next) {
+router.post('/game', function(req, res, next) {
   const seasonID = req.body['year'];
   const sportID = req.body['sport'];
   const gender = (req.body['gender'] == "female") ? genders.FEMALE : genders.MALE;
@@ -28,8 +30,15 @@ router.post('/submitgame', function(req, res, next) {
   const team2ID = req.body['team2'];
   const team2Score = req.body['team2-score'];
 
-  games.add(divisionID, seasonID, date, team1ID, team2ID, team1Score, team2Score)
+  const id = req.body['game'];
-    .then(res.send("SUCCESS"));
+  const remove = req.body['delete'];
+
+  if(remove) games.remove(id)
+          .then(res.redirect("/manage"));
+  else if(id) games.edit(id, divisionId, seasonID, date, team1ID, team2ID, team1Score, team2Score)
+          .then(res.redirect('/manage'));
+  else games.add(divisionID, seasonID, date, team1ID, team2ID, team1Score, team2Score)
+          .then(res.redirect("/manage"));
 });
 
 router.get('/addseason', function(req, res, next) {

views/manage/addgame.pug

@@ -6,34 +6,36 @@ block stylesheets
 
 block content
   div#mobile-view
-    h1 Submit Score
+    h1 #{title}
-    form(action='./submitgame', method='POST')
+    form#submission-form(action='./submitgame', method='POST')
       span(class='form-section')
         label Year
         span(class='form-section-input')
-          select#year-dropdown(name="year" class="form-main-dropdown")
+          select#year-dropdown(name="year" class="form-main-dropdown" disabled)
       span(class='form-section')
         label Sport
         span(class='form-section-input')
-          select#sport-dropdown(name="sport" class="form-main-dropdown") 
+          select#sport-dropdown(name="sport" class="form-main-dropdown" disabled) 
-          select#gender-dropdown(name="gender")
+          select#gender-dropdown(name="gender" disabled)
-          select#division-dropdown(name="division")
+          select#division-dropdown(name="division" disabled)
       span(class='form-section')
         label Date of match
         span(class='form-section-input')
-          input(type="date", name="date", value=date)
+          input#date-input(type="date", name="date" value=date disabled)
       span(class='form-section')
         label Your team
         span(class='form-section-input')
-          select#team1-dropdown(name="team1" class="form-main-dropdown")
+          select#team1-dropdown(name="team1" class="form-main-dropdown" disabled)
-          input(class="form-score-input", type="number", name="team1-score", value="0")
+          input#team1-score-textbox(class="form-score-input", type="number", name="team1-score", value="0" disabled)
       span(class='form-section')
         label Opponent
         span(class='form-section-input')
-          select#team2-dropdown(name="team2" class="form-main-dropdown")
+          select#team2-dropdown(name="team2" class="form-main-dropdown" disabled)
-          input(class="form-score-input", type="number", name="team2-score", value="0")
+          input#team2-score-textbox(class="form-score-input", type="number", name="team2-score", value="0" disabled)
       span(class='form-section')
-        button#submit-button(type="submit") Submit
+        button#submit-button(type="submit" disabled) Submit
+    span(class='form-section')
+      button#delete-button(disabled) Delete
 
 block scripts 
-  script(src='/scripts/submit.js' type="module")
+  script(src='/scripts/manage/game.js' type="module")

views/manage/addseason.pug

@@ -16,4 +16,4 @@ block content
         button#submit-button(type="submit") Submit
 
 block scripts 
-  script(src='/scripts/season.js' type="module")
+  script(src='/scripts/manage/season.js' type="module")