Add ability to edit sports in manage page

public/scripts/manage.js

@@ -10,13 +10,12 @@ function getGenderLetter(genderName) {
 }
 
 class Category {
-    constructor(name, getItems, listHeaders, listItem, addItem, submitItem, editItem) {
+    constructor(name, getItems, listHeaders, listItem, addItem, editItem) {
         this.name = name;
         this.getItems = getItems;
         this.listHeaders = listHeaders;
         this.listItem = listItem;
         this.addItem = addItem;
-        this.submitItem = submitItem;
         this.editItem = editItem;
     }
 }
@@ -85,10 +84,10 @@ CATEGORIES.push(new Category(
         row.appendChild(spacerCell);
     },
     async function addSport() {
-        window.location.href = "/manage/addsport";
+        window.location.href = `/manage/sport`;
     },
-    async function editSport() {
-
+    async function editSport(id) {
+        window.location.href = `/manage/sport?sport=${id}`
     }
 ));
 
@@ -294,6 +293,9 @@ async function listItems(category) {
         const editSpan = document.createElement('span');
         const editButton = document.createElement('button');
         editButton.textContent = "E";
+        editButton.addEventListener('click', () => {
+            CATEGORIES[categoryDropdown.selectedIndex].editItem(item.id);
+        });
         editSpan.appendChild(editButton);
         manageCell.appendChild(editSpan);
 

public/scripts/manage/sport.js

@@ -0,0 +1,43 @@
+import * as Data from "../data.js";
+
+
+const mainHeader = document.getElementById('main-header');
+const nameTextbox = document.getElementById('name-textbox');
+const submitButton = document.getElementById('submit-button');
+const deleteButton = document.getElementById('delete-button');
+const submissionForm = document.getElementById('submission-form');
+
+
+async function initializeForm() {
+    let params = new URLSearchParams(location.search);
+    let sportID = params.get('sport')
+    if(sportID) {
+        mainHeader.textContent = "Edit Sport";
+
+        const sportName = await Data.getSportName(sportID);
+
+        nameTextbox.value = sportName;
+        deleteButton.style.visibility = "visible";
+        deleteButton.disabled = false;
+
+        const sportIDInput = document.createElement('input');
+        sportIDInput.setAttribute('name', 'sport');
+        sportIDInput.setAttribute('value', sportID);
+        sportIDInput.setAttribute('type', 'hidden');
+        submissionForm.appendChild(sportIDInput);
+    }
+    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;
+}

public/stylesheets/form.css

@@ -32,3 +32,7 @@ form {
   #submit-button {
       margin-top: 1.5em;
   }
+
+  #delete-button {
+      visibility: hidden;
+  }

routes/manage.js

@@ -33,7 +33,7 @@ router.post('/submitgame', function(req, res, next) {
 });
 
 router.get('/addseason', function(req, res, next) {
-  res.render('manage/addseason', { title: 'Add season', currentYear : (new Date()).getFullYear() });
+  res.render('manage/addseason', { title: 'Add Season', currentYear : (new Date()).getFullYear() });
 });
 
 router.post('/submitseason', function(req, res, next) {
@@ -43,15 +43,16 @@ router.post('/submitseason', function(req, res, next) {
     .then(res.send("SUCCESS"));
 });
 
-router.get('/addsport', function(req, res, next) {
-  res.render('manage/addsport', { title: 'Add sport' });
+router.get('/sport', function(req, res, next) {
+  res.render('manage/addsport', { title: 'Add Sport' });
 });
 
-router.post('/submitsport', function(req, res, next) {
+router.post('/sport', function(req, res, next) {
   const name = req.body['name'];
+  const id = req.body['sport'];
 
-  sports.add(name)
-    .then(res.send("SUCCESS"));
+  if(id) sports.rename(id, name).then(res.redirect('/manage'));
+  else sports.add(name).then(res.redirect('/manage'));
 });
 
 router.get('/adddivision', function(req, res, next) {

views/manage/addsport.pug

@@ -6,14 +6,17 @@ block stylesheets
 
 block content
   div#mobile-view
-    h1 Add Sport
-    form(action='./submitsport', method='POST')
+    h1#main-header Add Sport
+    form#submission-form(action='./sport', method='POST')
       span(class='form-section')
         label Sport 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/sport.js' type="module")
+  script(src='/scripts/manage/sport.js' type="module")