assetflow/static/js/formHandler.js

var amountOfForms = $('.frontendForm').length;
$('.frontendForm').each(function () {
	// TODO Handle empty strings as null or undefined, not as ''
	$(this).on('submit', function (e) {
		e.preventDefault(); // Prevent the form from submitting via the browser

		var form = $(this); // Get the form

		// Show overlay with spinner
		$('.loader-overlay').addClass('loaderActive');
		
		// Get the form data
		formData = form.serializeArray();

		$.ajax({
			type: $(this).attr('method'),
			url: $(this).attr('data-target'),
			data: formData,
			dataType: 'json',
			success: function (data) {
				console.log('success');
				// Hide overlay with spinner
				$('.loader-overlay').removeClass('loaderActive');
				// Close the modal
				$('.modal').modal('hide');
				// Clear all fields
				form.find('input, textarea').val('');
				// Create toast
				createNewToast('<i class="bi bi-check2"></i> Changes saved successfully.', "text-bg-success")
			},
			error: function (data) {
				console.log('error');
				// Hide overlay with spinner
				$('.loader-overlay').removeClass('loaderActive');

				// 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 {
					createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> 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(`<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.")