From e6238e80e89dc16b7b7d9a3f0e17314a95471975 Mon Sep 17 00:00:00 2001 From: grey Date: Wed, 17 May 2023 19:06:38 +0200 Subject: [PATCH] Unified deletion modal in frontend --- src/frontend/manage/categoryManager.eta.html | 2 +- src/frontend/manage/storageManager.eta.html | 4 +- static/js/editCategory.js | 62 --------- static/js/editStorages.js | 128 ------------------- static/js/formHandler.js | 96 ++++++++++++-- 5 files changed, 86 insertions(+), 206 deletions(-) diff --git a/src/frontend/manage/categoryManager.eta.html b/src/frontend/manage/categoryManager.eta.html index f456156..ee5812c 100644 --- a/src/frontend/manage/categoryManager.eta.html +++ b/src/frontend/manage/categoryManager.eta.html @@ -59,7 +59,7 @@ <%= user.description %> - + <% }) %> diff --git a/src/frontend/manage/storageManager.eta.html b/src/frontend/manage/storageManager.eta.html index 8ed7be8..12444fc 100644 --- a/src/frontend/manage/storageManager.eta.html +++ b/src/frontend/manage/storageManager.eta.html @@ -173,7 +173,7 @@ - + <% }) %> @@ -216,7 +216,7 @@ - + <% }) %> diff --git a/static/js/editCategory.js b/static/js/editCategory.js index a51973e..45934f6 100644 --- a/static/js/editCategory.js +++ b/static/js/editCategory.js @@ -39,65 +39,3 @@ function primeEdit() { form.setAttribute('method', 'PATCH'); return true; } - -function deleteEntry(id) { - $.ajax({ - type: 'delete', - url: `/api/v1/categories`, - data: { id: id }, - success: function (data) { - $('#staticBackdrop').modal('hide'); - createNewToast(' Category deleted successfully.', "text-bg-success") - confetti({ - spread: 360, - ticks: 100, - gravity: 0.1, - decay: 0.94, - startVelocity: 30, - particleCount: 20, - scalar: 2, - shapes: ['text'], - shapeOptions: { - text: { - value: ['❌', '🗑️', '🚫'] - } - } - }); - }, - error: function (data) { - // hide the staticBackdrop modal - $('#staticBackdrop').modal('hide'); - - createNewToast(' Something went wrong. Please try again later.', "text-bg-danger", 3000, false) - } - }); -} - -function preFillDeleteModal(name) { - $.ajax({ - type: 'get', - url: `/api/v1/categories?name=${name}`, - success: function (data) { - const result = JSON.parse(data); - - // Get elements inside the editCategoryModal - const modal_categoryName = document.getElementById('deleteNamePlaceholder'); - const modal_deleteButton = document.getElementById('deleteActionBtn'); - //const modal_categoryDescription = document.getElementById('editCategoryModalDescription'); - //const modal_categoryid = document.getElementById('editCategoryModalId'); - - modal_categoryName.innerText = result.name; - modal_deleteButton.setAttribute('onclick', `deleteEntry(${result.id})`); - - //modal_categoryDescription.value = result.description; - //modal_categoryid.value = result.id; - }, - error: function (data) { - console.log('!!!! ERROR !!!!', data); - document.getElementById('deleteNamePlaceholder').innerText = 'Deleted'; - - $('#staticBackdrop').modal('hide'); - createNewToast(' Something went wrong. The category does no longer exist.', "text-bg-danger") - } - }); -} diff --git a/static/js/editStorages.js b/static/js/editStorages.js index 7663992..cccc3f1 100644 --- a/static/js/editStorages.js +++ b/static/js/editStorages.js @@ -64,134 +64,6 @@ function handleSelector(){ } } -function preFillDeleteModal(id) { - $.ajax({ - type: 'get', - url: `/api/v1/storageUnits?id=${id}`, - success: function (data) { - const result = JSON.parse(data); - - // Get elements inside the editCategoryModal - const modal_categoryName = document.getElementById('deleteNamePlaceholder'); - const modal_deleteButton = document.getElementById('deleteActionBtn'); - //const modal_categoryDescription = document.getElementById('editCategoryModalDescription'); - //const modal_categoryid = document.getElementById('editCategoryModalId'); - - modal_categoryName.innerText = result.name; - modal_deleteButton.setAttribute('onclick', `deleteEntry(${result.id})`); - - //modal_categoryDescription.value = result.description; - //modal_categoryid.value = result.id; - }, - error: function (data) { - console.log('!!!! ERROR !!!!', data); - document.getElementById('deleteNamePlaceholder').innerText = 'Deleted'; - - $('#staticBackdrop').modal('hide'); - createNewToast(' Something went wrong. The storageUnit does no longer exist.', "text-bg-danger") - } - }); -} - - -function preFillDeleteModalLoc(id) { - $.ajax({ - type: 'get', - url: `/api/v1/storageLocations?id=${id}`, - success: function (data) { - const result = JSON.parse(data); - - // Get elements inside the editCategoryModal - const modal_categoryName = document.getElementById('deleteNamePlaceholder'); - const modal_deleteButton = document.getElementById('deleteActionBtn'); - //const modal_categoryDescription = document.getElementById('editCategoryModalDescription'); - //const modal_categoryid = document.getElementById('editCategoryModalId'); - - modal_categoryName.innerText = result.name; - modal_deleteButton.setAttribute('onclick', `deleteEntryLoc(${result.id})`); - - //modal_categoryDescription.value = result.description; - //modal_categoryid.value = result.id; - }, - error: function (data) { - console.log('!!!! ERROR !!!!', data); - document.getElementById('deleteNamePlaceholder').innerText = 'Deleted'; - - $('#staticBackdrop').modal('hide'); - createNewToast(' Something went wrong. The storage location does no longer exist.', "text-bg-danger") - } - }); -} - - -function deleteEntry(id) { - $.ajax({ - type: 'delete', - url: `/api/v1/storageUnits`, - data: { id: id }, - success: function (data) { - $('#staticBackdrop').modal('hide'); - createNewToast(' Storage Unit deleted successfully.', "text-bg-success") - - confetti({ - spread: 360, - ticks: 100, - gravity: 0.1, - decay: 0.94, - startVelocity: 30, - particleCount: 20, - scalar: 2, - shapes: ['text'], - shapeOptions: { - text: { - value: ['❌', '🗑️', '🚫'] - } - } - }); - }, - error: function (data) { - // hide the staticBackdrop modal - $('#staticBackdrop').modal('hide'); - createNewToast(' Something went wrong. Please try again later.', "text-bg-danger", 3000, false) - } - }); -} - - - -function deleteEntryLoc(id) { - $.ajax({ - type: 'delete', - url: `/api/v1/storageLocations`, - data: { id: id }, - success: function (data) { - $('#staticBackdrop').modal('hide'); - createNewToast(' Storage Unit deleted successfully.', "text-bg-success") - confetti({ - spread: 360, - ticks: 100, - gravity: 0.1, - decay: 0.94, - startVelocity: 30, - particleCount: 20, - scalar: 2, - shapes: ['text'], - shapeOptions: { - text: { - value: ['❌', '🗑️', '🚫'] - } - } - }); - }, - error: function (data) { - // hide the staticBackdrop modal - $('#staticBackdrop').modal('hide'); - createNewToast(' Something went wrong. Please try again later.', "text-bg-danger", 3000, false) - } - }); -} - - function getDataForEdit(id) { $.ajax({ type: 'get', diff --git a/static/js/formHandler.js b/static/js/formHandler.js index c55155f..b2a4583 100644 --- a/static/js/formHandler.js +++ b/static/js/formHandler.js @@ -1,22 +1,22 @@ var amountOfForms = $('.frontendForm').length; -$('.frontendForm').each(function() { - $(this).on('submit', function(e) { - e.preventDefault(); +$('.frontendForm').each(function () { + $(this).on('submit', function (e) { + e.preventDefault(); // Prevent the form from submitting via the browser - var form = $(this); + var form = $(this); // Get the form // Show overlay with spinner $('.loader-overlay').addClass('loaderActive'); - + // Get the form data formData = form.serializeArray(); - console.log('submitting form'); + $.ajax({ type: $(this).attr('method'), url: $(this).attr('data-target'), data: formData, dataType: 'json', - success: function(data) { + success: function (data) { console.log('success'); // Hide overlay with spinner $('.loader-overlay').removeClass('loaderActive'); @@ -25,22 +25,92 @@ $('.frontendForm').each(function() { // Clear all fields form.find('input, textarea').val(''); // Create toast - createNewToast(' Changes saved successfully.', "text-bg-success") + createNewToast(' Changes saved successfully.', "text-bg-success") }, - error: function(data) { + error: function (data) { console.log('error'); // Hide overlay with spinner $('.loader-overlay').removeClass('loaderActive'); - // Check for response code 409 + // Check for response code 409 (duplicate entry) if (data.status == 409) { - createNewToast(' The element you tried to create already exists.', "text-bg-danger", 3000, false) - }else { - createNewToast(' Something went wrong. Please try again later.', "text-bg-danger", 3000, false) + createNewToast(' The element you tried to create already exists.', "text-bg-danger", 3000, false) + } else { + createNewToast(' Something went wrong. Please try again later.', "text-bg-danger", 3000, false) } } }); }) }); +/** + * Generic function to handle the result of a deletion prompt + * @param {Number} id ID of the entry to delete + * @param {String} route Route to send the delete request to will be templated as /api/v1/{route} + * @param {String} name Type of entry to delete, will be templated as {name} deleted successfully. + */ +function deleteEntryNxt(id, route, name) { + $.ajax({ + type: 'delete', + url: `/api/v1/` + route, + data: { id: id }, + success: function (data) { + $('#staticBackdrop').modal('hide'); + createNewToast(` ${name} deleted successfully.`, "text-bg-success") + + confetti({ + spread: 360, + ticks: 100, + gravity: 0.1, + decay: 0.94, + startVelocity: 30, + particleCount: 20, + scalar: 2, + shapes: ['text'], + shapeOptions: { + text: { + value: ['❌', '🗑️', '🚫'] + } + } + }); + }, + error: function (data) { + // hide the staticBackdrop modal + $('#staticBackdrop').modal('hide'); + + createNewToast(' Something went wrong. Please try again later.', "text-bg-danger", 3000, false) + } + }); +} + +/** + * Generic route to trigger a prefill of the delete modal + * @param {Number} id The ID of the entry to delete + * @param {String} route The endpoint to send the delete request to, will be templated as /api/v1/{route} + * @param {String} name The name of the entry to delete, will be templated as {name} deleted successfully. + */ +function preFillDeleteModalNxt(id, route, name, requestIdent='id') { + $.ajax({ + type: 'get', + url: `/api/v1/${route}?${requestIdent}=${id}`, + success: function (data) { + const result = JSON.parse(data); + + // Get elements inside the editCategoryModal + const modal_categoryName = document.getElementById('deleteNamePlaceholder'); + const modal_deleteButton = document.getElementById('deleteActionBtn'); + + modal_categoryName.innerText = result.name; + modal_deleteButton.setAttribute('onclick', `deleteEntryNxt(${result.id},'${route}','${name}')`); + }, + error: function (data) { + console.log('!!!! ERROR !!!!', data); + document.getElementById('deleteNamePlaceholder').innerText = 'Deleted'; + + $('#staticBackdrop').modal('hide'); + createNewToast(` Something went wrong. The ${name} does no longer exist.', "text-bg-danger`) + } + }); +} + console.info("Found " + amountOfForms + " forms on this page.") \ No newline at end of file