From 35af76c90f7e4d4acf1979c1c8ce259881ea68e3 Mon Sep 17 00:00:00 2001
From: sudoer777 <78781902+sudoer777@users.noreply.github.com>
Date: Mon, 22 Nov 2021 22:03:02 -0700
Subject: [PATCH] Add ability to edit sports in manage page

---
 public/scripts/manage.js       | 12 ++++++----
 public/scripts/manage/sport.js | 43 ++++++++++++++++++++++++++++++++++
 public/stylesheets/form.css    |  4 ++++
 routes/manage.js               | 13 +++++-----
 views/manage/addsport.pug      | 13 ++++++----
 5 files changed, 69 insertions(+), 16 deletions(-)
 create mode 100644 public/scripts/manage/sport.js

diff --git a/public/scripts/manage.js b/public/scripts/manage.js
index 1f4ff7e..8b0221b 100644
--- a/public/scripts/manage.js
+++ b/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);
 
diff --git a/public/scripts/manage/sport.js b/public/scripts/manage/sport.js
new file mode 100644
index 0000000..2b12593
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/public/stylesheets/form.css b/public/stylesheets/form.css
index 85b34bc..21abe10 100644
--- a/public/stylesheets/form.css
+++ b/public/stylesheets/form.css
@@ -31,4 +31,8 @@ form {
   
   #submit-button {
       margin-top: 1.5em;
+  }
+
+  #delete-button {
+      visibility: hidden;
   }
\ No newline at end of file
diff --git a/routes/manage.js b/routes/manage.js
index 04b2b9a..a42f734 100644
--- a/routes/manage.js
+++ b/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) {
diff --git a/views/manage/addsport.pug b/views/manage/addsport.pug
index 7f7e5ad..5251b7e 100644
--- a/views/manage/addsport.pug
+++ b/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")
\ No newline at end of file
+  script(src='/scripts/manage/sport.js' type="module")
\ No newline at end of file