Unified deletion modal in frontend

src/frontend/manage/categoryManager.eta.html

@@ -59,7 +59,7 @@
 				<td><%= user.description %></td>
 				<td>
 					<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal" onclick="primeEdit(); getDataForEdit('<%= user.name %>')"><i class="bi bi-pencil"></i></button>
-					<button class="btn btn-danger" onclick="preFillDeleteModal('<%= user.name %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
+					<button class="btn btn-danger" onclick="preFillDeleteModalNxt('<%= user.name %>','categories','Category', 'name')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
 				</td>
 			</tr>
 			<% }) %>

src/frontend/manage/storageManager.eta.html

@@ -173,7 +173,7 @@
 						<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageLocationModal" onclick="primeEdit(); getDataForEditLoc('<%= locations.id %>')">
 							<i class="bi bi-pencil"></i>
 						</button>
-						<button class="btn btn-danger" onclick="preFillDeleteModalLoc('<%= locations.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
+						<button class="btn btn-danger" onclick="preFillDeleteModalNxt('<%= locations.id %>','storageLocations','Storage Location')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
 					</td>
 				</tr>
 				<% }) %>
@@ -216,7 +216,7 @@
 						<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeEdit(); getDataForEdit('<%= units.id %>')">
 							<i class="bi bi-pencil"></i>
 						</button>
-						<button class="btn btn-danger" onclick="preFillDeleteModal('<%= units.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
+						<button class="btn btn-danger" onclick="preFillDeleteModalNxt('<%= units.id %>', 'storageUnits', 'Storage Unit')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
 					</td>
 				</tr>
 				<% }) %>

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('<i class="bi bi-check2"></i> 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('<i class="bi bi-exclamation-triangle-fill"></i> 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('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.', "text-bg-danger") 
-		}
-	});
-}

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('<i class="bi bi-exclamation-triangle-fill"></i> 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('<i class="bi bi-exclamation-triangle-fill"></i> 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('<i class="bi bi-check2"></i> 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('<i class="bi bi-exclamation-triangle-fill"></i> 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('<i class="bi bi-check2"></i> 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('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false) 
-		}
-	});
-}
-
-
 function getDataForEdit(id) {
 	$.ajax({
 		type: 'get',

static/js/formHandler.js

@@ -1,22 +1,22 @@
 var amountOfForms = $('.frontendForm').length;
-$('.frontendForm').each(function() {
+$('.frontendForm').each(function () {
-	$(this).on('submit', function(e) {
+	$(this).on('submit', function (e) {
-		e.preventDefault();
+		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');
@@ -27,15 +27,15 @@ $('.frontendForm').each(function() {
 				// Create toast
 				createNewToast('<i class="bi bi-check2"></i> 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('<i class="bi bi-exclamation-triangle-fill"></i> The element you tried to create already exists.', "text-bg-danger", 3000, false)
-				}else {
+				} else {
 					createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
 				}
 			}
@@ -43,4 +43,74 @@ $('.frontendForm').each(function() {
 	})
 });
 
+/**
+ * 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(`<i class="bi bi-check2"></i> ${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('<i class="bi bi-exclamation-triangle-fill"></i> 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(`<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The ${name} does no longer exist.', "text-bg-danger`) 
+		}
+	});
+}
+
 console.info("Found " + amountOfForms + " forms on this page.")