Add ability to edit teams

database/scores/teams.js

@@ -65,11 +65,12 @@ async function retrieve(sportID = undefined) {
 }
 
 async function getFromID(id) {
-    const query = `SELECT team_name
+    const query = `SELECT team_name, sport_id
             FROM scores.teams
             WHERE team_id = $1;`;
-    const name = (await database.executeQuery(query, [id]))[0][0];
-    return new Team(id, name);
+    const row = (await database.executeQuery(query, [id]))[0];
+    console.log(row);
+    return new Team(id, row[0], row[1]);
 }
 
 

public/scripts/data.js

@@ -47,10 +47,10 @@ export async function getTeams(sportID = undefined) {
     return teamsList;
 }
 
-export async function getTeamName(teamID) {
+export async function getTeam(teamID) {
     const response = await fetch(`/data/team?team=${+teamID}`);
     const team = await response.json();
-    return team.name;
+    return team;
 }
 
 export async function getGames(teamID = undefined, divisionID = undefined, seasonID = undefined) {

public/scripts/index.js

@@ -128,8 +128,8 @@ async function listGames() {
                 row.appendChild(scoreCell);
     
                 const opponentCell = document.createElement('td');
-                Data.getTeamName(game.team2ID)
-                    .then(data => opponentCell.textContent = data);
+                Data.getTeam(game.team2ID)
+                    .then(data => opponentCell.textContent = data.name);
                 row.appendChild(opponentCell);
     
                 const dateCell = document.createElement('td');

public/scripts/manage.js

@@ -178,10 +178,10 @@ CATEGORIES.push(new Category(
         row.appendChild(sportCell);
     },
     async function addTeam() {
-        window.location.href = "/manage/addteam";
+        window.location.href = "/manage/team";
     },
-    async function editTeam() {
-
+    async function editTeam(id) {
+        window.location.href = `/manage/team?team=${id}`;
     }
 ));
 
@@ -217,12 +217,12 @@ CATEGORIES.push(new Category(
     function listGame(game, row) {
         const teamsCell = document.createElement('td');
         const team1NameSpan = document.createElement('span');
-        Data.getTeamName(game.team1ID)
-            .then(data => team1NameSpan.textContent = data);
+        Data.getTeam(game.team1ID)
+            .then(data => team1NameSpan.textContent = data.name);
         teamsCell.appendChild(team1NameSpan);
         const team2NameSpan = document.createElement('span');
-        Data.getTeamName(game.team2ID)
-            .then(data => team2NameSpan.textContent = data);
+        Data.getTeam(game.team2ID)
+            .then(data => team2NameSpan.textContent = data.name);
         teamsCell.appendChild(team2NameSpan);
         row.appendChild(teamsCell);
 

public/scripts/manage/team.js

@@ -1,18 +1,48 @@
 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 nameTextbox = document.getElementById('name-textbox');
+const submitButton = document.getElementById('submit-button');
+const deleteButton = document.getElementById('delete-button');
 
-async function listSports() {
-    sportDropdown.innerHTML = "";
+async function initializeForm() {
+    let params = new URLSearchParams(location.search);
+    let teamID = params.get('team');
+    if(teamID) {
+        const team = await Data.getTeam(teamID);
 
-    const sportsList = await Data.getSports();
+        nameTextbox.value = team.name;
 
-    sportsList.forEach(sport => {
-        const option = document.createElement('option');
-        option.text = sport.name;
-        option.value = sport.id;
-        sportDropdown.appendChild(option);
-    });
+        deleteButton.style.visibility = "visible";
+        deleteButton.disabled = false;
+
+        Form.populateSports(sportDropdown, team.sportID);
+
+        console.log(team.sportID);
+        Form.addHiddenValue('team', teamID, submissionForm);
     }
-listSports();
+    else {
+        sportDropdown.disabled = false;
+
+        Form.populateSports(sportDropdown);
+    }
+
+    nameTextbox.disabled = false;
+    nameTextbox.addEventListener('keyup', checkDataValidity);
+}
+initializeForm();
+
+async function checkDataValidity() {
+    let dataIsValid = true;
+
+    if(!nameTextbox.value) dataIsValid = false;
+
+
+    if(dataIsValid) submitButton.disabled = false;
+    else submitButton.disabled = true;
+}
+
+Form.addRemoveFunction(deleteButton, submissionForm, "team");

routes/manage.js

@@ -88,16 +88,22 @@ router.post('/division', function(req, res, next) {
   }
 });
 
-router.get('/addteam', function(req, res, next) {
-  res.render('manage/addteam', { title: 'Add team' });
+router.get('/team', function(req, res, next) {
+  let title = req.query.team ? 'Edit Team' : 'Add Team'
+
+  res.render('manage/addteam', { title });
 });
 
-router.post('/submitteam', function(req, res, next) {
+router.post('/team', function(req, res, next) {
   const name = req.body['name'];
   const sport = req.body['sport'];
 
-  teams.add(name, sport)
-    .then(res.send("SUCCESS"));
+  const id = req.body['team'];
+  const remove = req.body['remove'];
+
+  if(remove) teams.remove(id).then(res.redirect('/manage'));
+  else if(id) teams.rename(id, name).then(res.redirect('/manage'));
+  else teams.add(name, sport).then(res.redirect("/manage"));
 });
 
 module.exports = router;

views/manage/addteam.pug

@@ -6,18 +6,20 @@ block stylesheets
 
 block content
   div#mobile-view
-    h1 Add Team
-    form(action='./submitteam', method='POST')
+    h1 #{title}
+    form#submission-form(action='./team', method='POST')
       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)
       span(class='form-section')
         label Team name
         span(class='form-section-input')
-          input(type="text", name="name")
+          input#name-textbox(type="text", name="name" 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/manage/team.js' type="module")