Project-Name-Here/assetflow
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improved UI Toast Tooling

Browse Source
This commit is contained in:
Sören Oesterwind 2023-05-17 17:46:51 +02:00
parent bd9f629690
commit e98e46e1a2
7 changed files with 52 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/frontend/partials/controls.eta.html
View File

@ -34,7 +34,13 @@
</div> </div>
</div> </div>
</header> </header>
<div class="toast-container position-fixed bottom-0 end-0 p-3"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="masterToast" style="z-index: 2000">
<div class="d-flex">
<div class="toast-body">Hello, world! This is a toast message.</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastMainController">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="generalToast" style="z-index: 2000"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="generalToast" style="z-index: 2000">
<div class="d-flex"> <div class="d-flex">
<div class="toast-body">Hello, world! This is a toast message.</div> <div class="toast-body">Hello, world! This is a toast message.</div>

1
src/frontend/partials/head.eta.html
View File

@ -13,6 +13,7 @@
<script src="/js/normalizeToast.js"></script> <script src="/js/normalizeToast.js"></script>
<script src="/static/jquery/dist/jquery.min.js"></script> <script src="/static/jquery/dist/jquery.min.js"></script>
<script src="/js/toastHandler.js"></script>
<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" /> <link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
<link href="/css/dashboard.css" rel="stylesheet" /> <link href="/css/dashboard.css" rel="stylesheet" />

35
static/js/editCategory.js
View File

@ -20,13 +20,7 @@ function getDataForEdit(name) {
$('.loader-overlay').removeClass('active'); $('.loader-overlay').removeClass('active');
// Close the modal // Close the modal
$('.modal').modal('hide'); $('.modal').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.', "text-bg-danger")
$('#generalToast').addClass('text-bg-danger');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.');
setTimeout(() => {
window.location.reload();
}, 3000);
} }
}); });
} }
@ -53,10 +47,7 @@ function deleteEntry(id) {
data: { id: id }, data: { id: id },
success: function (data) { success: function (data) {
$('#staticBackdrop').modal('hide'); $('#staticBackdrop').modal('hide');
$('#generalToast').removeClass('text-bg-primary'); createNewToast('<i class="bi bi-check2"></i> Category deleted successfully.', "text-bg-success")
$('#generalToast').addClass('text-bg-success');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Category deleted successfully.');
confetti({ confetti({
spread: 360, spread: 360,
ticks: 100, ticks: 100,
@ -72,24 +63,12 @@ function deleteEntry(id) {
} }
} }
}); });
setTimeout(() => {
$('#generalToast').toast('hide');
$('#generalToast').removeClass('text-bg-success');
$('#generalToast').addClass('text-bg-primary');
window.location.reload();
}, 2000);
}, },
error: function (data) { error: function (data) {
// hide the staticBackdrop modal // hide the staticBackdrop modal
$('#staticBackdrop').modal('hide'); $('#staticBackdrop').modal('hide');
normalizeToast()
$('#generalToast').addClass('text-bg-danger'); createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
setTimeout(() => {
$('#generalToast').toast('hide');
}, 3000);
} }
}); });
} }
@ -118,13 +97,7 @@ function preFillDeleteModal(name) {
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted'; document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
$('#staticBackdrop').modal('hide'); $('#staticBackdrop').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.', "text-bg-danger")
$('#generalToast').addClass('text-bg-danger');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.');
setTimeout(() => {
window.location.reload();
}, 3000);
} }
}); });
} }

69
static/js/editStorages.js
View File

@ -88,14 +88,7 @@ function preFillDeleteModal(id) {
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted'; document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
$('#staticBackdrop').modal('hide'); $('#staticBackdrop').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storageUnit does no longer exist.', "text-bg-danger")
$('#generalToast').addClass('text-bg-danger');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storageUnit does no longer exist.');
setTimeout(() => {
window.location.reload();
}, 3000);
} }
}); });
} }
@ -125,14 +118,7 @@ function preFillDeleteModalLoc(id) {
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted'; document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
$('#staticBackdrop').modal('hide'); $('#staticBackdrop').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage location does no longer exist.', "text-bg-danger")
$('#generalToast').addClass('text-bg-danger');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage location does no longer exist.');
setTimeout(() => {
window.location.reload();
}, 3000);
} }
}); });
} }
@ -145,11 +131,8 @@ function deleteEntry(id) {
data: { id: id }, data: { id: id },
success: function (data) { success: function (data) {
$('#staticBackdrop').modal('hide'); $('#staticBackdrop').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-check2"></i> Storage Unit deleted successfully.', "text-bg-success")
$('#generalToast').addClass('text-bg-success');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Storage Unit deleted successfully.');
confetti({ confetti({
spread: 360, spread: 360,
ticks: 100, ticks: 100,
@ -165,21 +148,11 @@ function deleteEntry(id) {
} }
} }
}); });
setTimeout(() => {
$('#generalToast').toast('hide');
window.location.reload();
}, 2000);
}, },
error: function (data) { error: function (data) {
// hide the staticBackdrop modal // hide the staticBackdrop modal
$('#staticBackdrop').modal('hide'); $('#staticBackdrop').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
$('#generalToast').addClass('text-bg-danger');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
setTimeout(() => {
$('#generalToast').toast('hide');
}, 3000);
} }
}); });
} }
@ -193,11 +166,7 @@ function deleteEntryLoc(id) {
data: { id: id }, data: { id: id },
success: function (data) { success: function (data) {
$('#staticBackdrop').modal('hide'); $('#staticBackdrop').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-check2"></i> Storage Unit deleted successfully.', "text-bg-success")
$('#generalToast').addClass('text-bg-success');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Storage Unit deleted successfully.');
confetti({ confetti({
spread: 360, spread: 360,
ticks: 100, ticks: 100,
@ -213,21 +182,11 @@ function deleteEntryLoc(id) {
} }
} }
}); });
setTimeout(() => {
$('#generalToast').toast('hide');
window.location.reload();
}, 2000);
}, },
error: function (data) { error: function (data) {
// hide the staticBackdrop modal // hide the staticBackdrop modal
$('#staticBackdrop').modal('hide'); $('#staticBackdrop').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
$('#generalToast').addClass('text-bg-danger');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
setTimeout(() => {
$('#generalToast').toast('hide');
}, 3000);
} }
}); });
} }
@ -266,13 +225,7 @@ function getDataForEdit(id) {
$('.loader-overlay').removeClass('active'); $('.loader-overlay').removeClass('active');
// Close the modal // Close the modal
$('.modal').modal('hide'); $('.modal').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.', "text-bg-danger")
$('#generalToast').addClass('text-bg-danger');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.');
setTimeout(() => {
window.location.reload();
}, 3000);
} }
}); });
} }
@ -311,13 +264,7 @@ function getDataForEditLoc(id) {
$('.loader-overlay').removeClass('active'); $('.loader-overlay').removeClass('active');
// Close the modal // Close the modal
$('.modal').modal('hide'); $('.modal').modal('hide');
normalizeToast() createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.', "text-bg-danger")
$('#generalToast').addClass('text-bg-danger');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.');
setTimeout(() => {
window.location.reload();
}, 3000);
} }
}); });
} }

23
static/js/formHandler.js
View File

@ -24,15 +24,8 @@ $('.frontendForm').each(function() {
$('.modal').modal('hide'); $('.modal').modal('hide');
// Clear all fields // Clear all fields
form.find('input, textarea').val(''); form.find('input, textarea').val('');
// Create toast
normalizeToast() createNewToast('<i class="bi bi-check2"></i> Changes saved successfully.', "text-bg-success")
$('#generalToast').addClass('text-bg-success');
$('#generalToast').toast('show');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Changes saved successfully.');
setTimeout(() => {
$('#generalToast').toast('hide');;
window.location.reload();
}, 1500);
}, },
error: function(data) { error: function(data) {
console.log('error'); console.log('error');
@ -40,19 +33,11 @@ $('.frontendForm').each(function() {
$('.loader-overlay').removeClass('loaderActive'); $('.loader-overlay').removeClass('loaderActive');
// Check for response code 409 // Check for response code 409
normalizeToast()
$('#generalToast').addClass('text-bg-danger');
$('#generalToast').toast('show');
if (data.status == 409) { if (data.status == 409) {
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> The element you tried to create already exists.'); createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> The element you tried to create already exists.', "text-bg-danger", 3000, false)
}else { }else {
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.'); createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
} }
setTimeout(() => {
$('#generalToast').toast('hide');
}, 3000);
} }
}); });
}) })

1
static/js/normalizeToast.js
View File

@ -1,4 +1,5 @@
function normalizeToast(){ function normalizeToast(){
console.warn("Something is using the deprecated function normalizeToast(). Please use createNewToast() instead.")
$('#generalToast').removeClass('text-bg-primary'); $('#generalToast').removeClass('text-bg-primary');
$('#generalToast').removeClass('text-bg-success'); $('#generalToast').removeClass('text-bg-success');
$('#generalToast').removeClass('text-bg-danger'); $('#generalToast').removeClass('text-bg-danger');

27
static/js/toastHandler.js Normal file
View File

@ -0,0 +1,27 @@
const currentToasts = [];
function createNewToast(message, colorSelector, autoHideTime = 3000, autoReload = true){
const targetContainer = document.getElementById('toastMainController');
const masterToast = document.getElementById('masterToast');
const newToast = masterToast.cloneNode(true);
newToast.classList.add(colorSelector)
newToast.id = `toast-${currentToasts.length}`;
console.log(newToast.childNodes[1]);
newToast.childNodes[1].childNodes[1].innerHTML = message;
targetContainer.appendChild(newToast);
currentToasts.push(newToast);
$(newToast).toast('show');
setTimeout(() => {
destroyToast(newToast.id);
if(autoReload){
location.reload();
}
}, autoHideTime);
}
function destroyToast(id){
const targetContainer = document.getElementById('toastMainController');
const targetToast = document.getElementById(id);
targetContainer.removeChild(targetToast);
currentToasts.splice(currentToasts.indexOf(targetToast), 1);
}