assetflow/static/js/editStorages.js

// Javascript to enable link to tab
// This magic js codes enables anchor links to work with bootstrap tabs
// Taken from https://stackoverflow.com/a/9393768/11317151 (and edited, like a lot)

// Also update on location change
window.addEventListener(
	'hashchange',
	function () {
		var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
		if (hash) {
			bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show();
		}
	},
	false
);
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
	bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show();
}

// Change hash for page-reload
$('.nav-link').on('click', function (e) {
	window.location.hash = e.target.id;
});

function primeCreateNew() {
	// Clear the form
	$('.form-control').val('');
	const form = document.getElementById('storageUnitModalForm');
	const form2 = document.getElementById('storageLocationModalForm');
	document.getElementById('createNewLocationSelection').disabled = false;
	document.getElementById('storageUnitModalLocationSelectText').innerText= "Select or create a new location.";
	document.getElementById('storageUnitModalLabel').innerText = "Create new storage unit";
	document.getElementById('storageLocationModalTitle').innerText = "Create new storage location";
	form.setAttribute('method', 'POST');
	form2.setAttribute('method', 'POST');
	return true;
}

function primeEdit() {
	const form = document.getElementById('storageUnitModalForm');
	const form2 = document.getElementById('storageLocationModalForm');
	// Disable create new location
	document.getElementById('createNewLocationSelection').disabled = true;
	document.getElementById('storageUnitModalLocationSelectText').innerText= "While editing you can only select already existing locations. Use the settings to create new ones.";
	document.getElementById('storageUnitModalLabel').innerText = "Edit a storage unit";
	document.getElementById('storageLocationModalTitle').innerText = "Edit a storage location"
	document.getElementById('storageUnitModalLocationSelect').value = 1
	handleSelector()
	form.setAttribute('method', 'PATCH');
	form2.setAttribute('method', 'PATCH');
	return true;
}

function handleSelector(){
	const selector = document.getElementById('storageUnitModalLocationSelect')
	const value = selector.options[selector.selectedIndex].value;
	if(value == "META_CREATENEW") {
		$('#storageUnitModalContactInfoCreator').removeClass('d-none')
		$('.requireOnCreate').attr('required', true)
	} else {
		$('#storageUnitModalContactInfoCreator').addClass('d-none')
		$('.requireOnCreate').attr('required', false)
	}
}

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',
		url: `/api/v1/storageUnits?id=${id}`,
		success: function (data) {
			const result = JSON.parse(data);

			// Get elements inside the editCategoryModal
			const modal_unitName = document.getElementById('storageUnitModalName');
			const modal_unitLocation = document.getElementById('storageUnitModalLocationSelect');
			const modal_unitId = document.getElementById('storageUnitModalLocationSelectHidden');
			// const modal_categoryid = document.getElementById('editCategoryModalId');

			modal_unitName.value = result.name;
			modal_unitId.value = result.id;

			// Select the correct location from the select based on the value of the option
			for(var i, j = 0; i = modal_unitLocation.options[j]; j++) {
				if(i.value == result.contactInfoId) {
					console.log("Found it");
					modal_unitLocation.selectedIndex = j;
					break;
				}
			}

			
		},
		error: function (data) {
			console.log('!!!! ERROR !!!!', data);
			// Hide overlay with spinner
			$('.loader-overlay').removeClass('active');
			// Close the modal
			$('.modal').modal('hide');
			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.', "text-bg-danger") 
		}
	});
}


function getDataForEditLoc(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_locationName = document.getElementById('storageLocationModalName');
			const modal_locationUnitSel = document.getElementById('storageLocationModalUnit');
			const modal_locationId = document.getElementById('storageLocationModalIdHidden');
			// const modal_categoryid = document.getElementById('editCategoryModalId');

			modal_locationName.value = result.name;
			modal_locationId.value = result.id;

			// Select the correct location from the select based on the value of the option
			for(var i, j = 0; i = modal_locationUnitSel.options[j]; j++) {
				if(i.value == result.storageUnit) {
					console.log("Found it");
					modal_locationUnitSel.selectedIndex = j;
					break;
				}
			}

			
		},
		error: function (data) {
			console.log('!!!! ERROR !!!!', data);
			// Hide overlay with spinner
			$('.loader-overlay').removeClass('active');
			// Close the modal
			$('.modal').modal('hide');
			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.', "text-bg-danger") 
		}
	});
}

handleSelector()