diff --git a/public/scripts/form.js b/public/scripts/form.js new file mode 100644 index 0000000..9d4ee93 --- /dev/null +++ b/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(); + } + }); +} \ No newline at end of file diff --git a/public/scripts/manage.js b/public/scripts/manage.js index 8b0221b..a30c179 100644 --- a/public/scripts/manage.js +++ b/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}` } )); diff --git a/public/scripts/manage/division.js b/public/scripts/manage/division.js index 6b37492..fb623c5 100644 --- a/public/scripts/manage/division.js +++ b/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(); \ No newline at end of file +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"); + diff --git a/routes/manage.js b/routes/manage.js index 145dfa0..4b6683f 100644 --- a/routes/manage.js +++ b/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")); + } } }); diff --git a/views/manage/adddivision.pug b/views/manage/adddivision.pug index 4b8d7d1..5db737c 100644 --- a/views/manage/adddivision.pug +++ b/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") \ No newline at end of file