Add ability to edit divisions

public/scripts/form.js

@@ -0,0 +1,40 @@
+import * as Data from "./data.js";
+
+export async function populateSports(sportDropdown, selectedSportID = undefined) {
+    sportDropdown.innerHTML = "";
+
+    const sportsList = await Data.getSports();
+    
+    let currentIndex = 0;
+    let selectedSportIndex;
+    sportsList.forEach(sport => {
+        const option = document.createElement('option');
+        option.text = sport.name;
+        option.value = sport.id;
+        sportDropdown.appendChild(option);
+
+        if(sport.id == selectedSportID) selectedSportIndex = currentIndex;
+        currentIndex++;
+    });
+
+    if(selectedSportIndex) sportDropdown.selectedIndex = selectedSportIndex;
+}
+
+export async function addHiddenValue(name, value, form) {
+    const valueInput = document.createElement('input');
+    valueInput.setAttribute('name', name);
+    valueInput.setAttribute('value', value);
+    valueInput.setAttribute('type', 'hidden');
+    form.appendChild(valueInput);
+}
+
+export async function addRemoveFunction(removeButton, form, objectTitle) {
+    removeButton.addEventListener('click', async () => {
+        const verified = confirm(`This ${objectTitle} will be removed.`);
+    
+        if(verified) {
+            await addHiddenValue('remove', 1, form);
+            form.submit();
+        }
+    });
+}

public/scripts/manage.js

@@ -135,10 +135,10 @@ CATEGORIES.push(new Category(
         row.appendChild(sportCell);
     },
     async function addDivision() {
-        window.location.href = "/manage/adddivision";
+        window.location.href = "/manage/division";
     },
-    async function editDivision() {
-
+    async function editDivision(id) {
+        window.location.href = `/manage/division?division=${id}`
     }
 ));
 

public/scripts/manage/division.js

@@ -1,18 +1,57 @@
 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 genderDropdown = document.getElementById('gender-dropdown');
+const nameTextbox = document.getElementById('name-textbox');
+const submitButton = document.getElementById('submit-button');
+const deleteButton = document.getElementById('delete-button');
 
-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);
-    });
+async function initializeForm() {
+    let params = new URLSearchParams(location.search);
+    let divisionID = params.get('division');
+    if(divisionID) {
+        const division = await Data.getDivision(divisionID);
+
+        nameTextbox.value = division.name;
+
+        deleteButton.style.visibility = "visible";
+        deleteButton.disabled = false;
+
+        const gender = division.gender.name;
+
+        if(gender == 'female') genderDropdown.selectedIndex = 1;
+        else genderDropdown.selectedIndex = 2;
+
+        Form.populateSports(sportDropdown, division.sportID);
+
+        Form.addHiddenValue('division', divisionID, submissionForm);
+    }
+    else {
+        Form.populateSports(sportDropdown);
+
+        genderDropdown.disabled = false;
+
+        sportDropdown.disabled = false;
+    }
+
+    nameTextbox.disabled = false;
+    nameTextbox.addEventListener('keyup', checkDataValidity);
 }
-listSports();
+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, "division");
+

routes/manage.js

@@ -57,24 +57,34 @@ router.post('/sport', function(req, res, next) {
   else sports.add(name).then(res.redirect('/manage'));
 });
 
-router.get('/adddivision', function(req, res, next) {
-  res.render('manage/adddivision', { title: 'Add division' });
+router.get('/division', function(req, res, next) {
+  let title = req.query.division ? 'Edit Division' : 'Add Division'
+
+  res.render('manage/adddivision', { title });
 });
 
-router.post('/submitdivision', function(req, res, next) {
+router.post('/division', function(req, res, next) {
   const name = req.body['name'];
   const sport = req.body['sport'];
   const genderName = req.body['gender'];
 
-  if(genderName == "both") {
-    divisions.add(name, genders.FEMALE, sport)
-      .then(divisions.add(name, genders.MALE, sport)
-        .then(res.send("SUCCESS")));
-  }
+  const id = req.body['division'];
+  const remove = req.body['remove'];
+
+
+  if(remove) divisions.remove(id).then(res.redirect('/manage'));
+  else if(id) divisions.rename(id, name).then(res.redirect('/manage'));
   else {
-    const gender = (genderName == "female") ? genders.FEMALE : genders.MALE;
-    divisions.add(name, gender, sport)
-      .then(res.send("SUCCESS"));
+    if(genderName == "both") {
+      divisions.add(name, genders.FEMALE, sport)
+        .then(divisions.add(name, genders.MALE, sport)
+          .then(res.redirect("/manage")));
+    }
+    else {
+      const gender = (genderName == "female") ? genders.FEMALE : genders.MALE;
+      divisions.add(name, gender, sport)
+        .then(res.redirect("/manage"));
+    }
   }
 });
 

views/manage/adddivision.pug

@@ -6,25 +6,27 @@ block stylesheets
 
 block content
   div#mobile-view
-    h1 Add Division
-    form(action='./submitdivision', method='POST')
+    h1 #{title}
+    form#submission-form(action='./division', 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 Gender
         span(class='form-section-input')
-          select#gender-dropdown(name="gender" class="form-main-dropdown")
+          select#gender-dropdown(name="gender" class="form-main-dropdown" disabled)
             option(value="both") Both
             option(value="female") Female
             option(value="male") Male
       span(class='form-section')
         label Division 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/division.js' type="module")