Implement Toast utility for consistent toast notifications across the application
This commit is contained in:
parent
e5755066c3
commit
8710c09917
9 changed files with 92 additions and 82 deletions
|
@ -25,9 +25,9 @@ async function export_csv(ids, csv_route, filename=`${csv_route}_export.csv`) {
|
||||||
|
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
} else {
|
} else {
|
||||||
renderToast({ message: `Export failed: ${result.error}`, type: 'danger' });
|
Toast.renderToast({ message: `Export failed: ${result.error}`, type: 'danger' });
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
renderToast({ message: `Export failed: ${err}`, type: 'danger' });
|
Toast.renderToast({ message: `Export failed: ${err}`, type: 'danger' });
|
||||||
}
|
}
|
||||||
}
|
}
|
70
inventory/static/js/toast.js
Normal file
70
inventory/static/js/toast.js
Normal file
|
@ -0,0 +1,70 @@
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const toastData = localStorage.getItem("toastMessage");
|
||||||
|
if (toastData) {
|
||||||
|
const { message, type } = JSON.parse(toastData);
|
||||||
|
Toast.renderToast({ message, type });
|
||||||
|
localStorage.removeItem("toastMessage");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const Toast = (() => {
|
||||||
|
const ToastConfig = {
|
||||||
|
containerId: 'toast-container',
|
||||||
|
positionClasses: 'toast-container position-fixed bottom-0 end-0 p-3',
|
||||||
|
defaultType: 'info',
|
||||||
|
defaultTimeout: 3000
|
||||||
|
};
|
||||||
|
|
||||||
|
function updateToastConfig(overrides = {}) {
|
||||||
|
Object.assign(ToastConfig, overrides);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderToast({ message, type = ToastConfig.defaultType, timeout = ToastConfig.defaultTimeout }) {
|
||||||
|
if (!message) {
|
||||||
|
console.warn('renderToast was called without a message.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-create the toast container if it doesn't exist
|
||||||
|
let container = document.getElementById(ToastConfig.containerId);
|
||||||
|
if (!container) {
|
||||||
|
container = document.createElement('div');
|
||||||
|
container.id = ToastConfig.containerId;
|
||||||
|
container.className = ToastConfig.positionClasses;
|
||||||
|
document.body.appendChild(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
const toastId = `toast-${Date.now()}`;
|
||||||
|
const wrapper = document.createElement('div');
|
||||||
|
wrapper.innerHTML = `
|
||||||
|
<div id="${toastId}" class="toast align-items-center text-bg-${type}" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="toast-body">
|
||||||
|
${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>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const toastElement = wrapper.firstElementChild;
|
||||||
|
container.appendChild(toastElement);
|
||||||
|
|
||||||
|
const toast = new bootstrap.Toast(toastElement, { delay: timeout });
|
||||||
|
toast.show();
|
||||||
|
|
||||||
|
toastElement.addEventListener('hidden.bs.toast', () => {
|
||||||
|
toastElement.remove();
|
||||||
|
|
||||||
|
// Clean up container if empty
|
||||||
|
if (container.children.length === 0) {
|
||||||
|
container.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
updateToastConfig,
|
||||||
|
renderToast
|
||||||
|
};
|
||||||
|
})();
|
|
@ -1,58 +1,3 @@
|
||||||
const ToastConfig = {
|
|
||||||
containerId: 'toast-container',
|
|
||||||
positionClasses: 'toast-container position-fixed bottom-0 end-0 p-3',
|
|
||||||
defaultType: 'info',
|
|
||||||
defaultTimeout: 3000
|
|
||||||
};
|
|
||||||
|
|
||||||
function updateToastConfig(overrides = {}) {
|
|
||||||
Object.assign(ToastConfig, overrides);
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderToast({ message, type = ToastConfig.defaultType, timeout = ToastConfig.defaultTimeout }) {
|
|
||||||
if (!message) {
|
|
||||||
console.warn('renderToast was called without a message.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Auto-create the toast container if it doesn't exist
|
|
||||||
let container = document.getElementById(ToastConfig.containerId);
|
|
||||||
if (!container) {
|
|
||||||
container = document.createElement('div');
|
|
||||||
container.id = ToastConfig.containerId;
|
|
||||||
container.className = ToastConfig.positionClasses;
|
|
||||||
document.body.appendChild(container);
|
|
||||||
}
|
|
||||||
|
|
||||||
const toastId = `toast-${Date.now()}`;
|
|
||||||
const wrapper = document.createElement('div');
|
|
||||||
wrapper.innerHTML = `
|
|
||||||
<div id="${toastId}" class="toast align-items-center text-bg-${type}" role="alert" aria-live="assertive" aria-atomic="true">
|
|
||||||
<div class="d-flex">
|
|
||||||
<div class="toast-body">
|
|
||||||
${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>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const toastElement = wrapper.firstElementChild;
|
|
||||||
container.appendChild(toastElement);
|
|
||||||
|
|
||||||
const toast = new bootstrap.Toast(toastElement, { delay: timeout });
|
|
||||||
toast.show();
|
|
||||||
|
|
||||||
toastElement.addEventListener('hidden.bs.toast', () => {
|
|
||||||
toastElement.remove();
|
|
||||||
|
|
||||||
// Clean up container if empty
|
|
||||||
if (container.children.length === 0) {
|
|
||||||
container.remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const ImageWidget = (() => {
|
const ImageWidget = (() => {
|
||||||
function submitImageUpload(id) {
|
function submitImageUpload(id) {
|
||||||
const form = document.getElementById(`image-upload-form-${id}`);
|
const form = document.getElementById(`image-upload-form-${id}`);
|
||||||
|
@ -75,11 +20,11 @@ const ImageWidget = (() => {
|
||||||
}
|
}
|
||||||
return response.json();
|
return response.json();
|
||||||
}).then(data => {
|
}).then(data => {
|
||||||
renderToast({ message: `Image uploaded.`, type: "success" });
|
Toast.renderToast({ message: `Image uploaded.`, type: "success" });
|
||||||
location.reload();
|
location.reload();
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
const msg = typeof err === "object" && err.error ? err.error : err.toString();
|
const msg = typeof err === "object" && err.error ? err.error : err.toString();
|
||||||
renderToast({ message: `Upload failed: ${msg}`, type: "danger" });
|
Toast.renderToast({ message: `Upload failed: ${msg}`, type: "danger" });
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -90,13 +35,13 @@ const ImageWidget = (() => {
|
||||||
method: "DELETE"
|
method: "DELETE"
|
||||||
}).then(response => response.json()).then(data => {
|
}).then(response => response.json()).then(data => {
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
renderToast({ message: "Image deleted.", type: "success" });
|
Toast.renderToast({ message: "Image deleted.", type: "success" });
|
||||||
location.reload(); // Update view
|
location.reload(); // Update view
|
||||||
} else {
|
} else {
|
||||||
renderToast({ message: `Failed to delete: ${data.error}`, type: "danger" });
|
Toast.renderToast({ message: `Failed to delete: ${data.error}`, type: "danger" });
|
||||||
}
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
renderToast({ message: `Error deleting image: ${err}`, type: "danger" });
|
Toast.renderToast({ message: `Error deleting image: ${err}`, type: "danger" });
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -33,6 +33,7 @@
|
||||||
function {{ id }}SetButton(id, identifier) {
|
function {{ id }}SetButton(id, identifier) {
|
||||||
const button = document.getElementById("{{ id }}Button");
|
const button = document.getElementById("{{ id }}Button");
|
||||||
const input = document.getElementById("{{ id }}");
|
const input = document.getElementById("{{ id }}");
|
||||||
|
|
||||||
button.dataset.invValue = id;
|
button.dataset.invValue = id;
|
||||||
button.textContent = identifier;
|
button.textContent = identifier;
|
||||||
input.value = id;
|
input.value = id;
|
||||||
|
|
|
@ -46,18 +46,18 @@
|
||||||
|
|
||||||
window.location.href = `/inventory_item/${result.id}`;
|
window.location.href = `/inventory_item/${result.id}`;
|
||||||
} else {
|
} else {
|
||||||
renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
renderToast({ message: `Error: ${err}`, type: "danger" });
|
Toast.renderToast({ message: `Error: ${err}`, type: "danger" });
|
||||||
}
|
}
|
||||||
{% endset %}
|
{% endset %}
|
||||||
{% set deleteLogic %}
|
{% set deleteLogic %}
|
||||||
const id = document.querySelector("#inventoryId").value;
|
const id = document.querySelector("#inventoryId").value;
|
||||||
|
|
||||||
if (!id || id === "None") {
|
if (!id || id === "None") {
|
||||||
renderToast({ message: "No item ID found to delete.", type: "danger" });
|
Toast.renderToast({ message: "No item ID found to delete.", type: "danger" });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,11 +80,11 @@
|
||||||
|
|
||||||
window.location.href = "/inventory";
|
window.location.href = "/inventory";
|
||||||
} else {
|
} else {
|
||||||
renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
renderToast({ message: `Error: ${err}`, type: "danger" });
|
Toast.renderToast({ message: `Error: ${err}`, type: "danger" });
|
||||||
}
|
}
|
||||||
{% endset %}
|
{% endset %}
|
||||||
{% set buttonBar %}
|
{% set buttonBar %}
|
||||||
|
|
|
@ -76,6 +76,7 @@
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
|
||||||
<script src="{{ url_for('static', filename='js/csv.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/csv.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/toast.js') }}" defer></script>
|
||||||
<script src="{{ url_for('static', filename='js/widget.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/widget.js') }}"></script>
|
||||||
<script>
|
<script>
|
||||||
const searchInput = document.querySelector('#search');
|
const searchInput = document.querySelector('#search');
|
||||||
|
@ -86,13 +87,6 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const toastData = localStorage.getItem("toastMessage");
|
|
||||||
if (toastData) {
|
|
||||||
const { message, type } = JSON.parse(toastData);
|
|
||||||
renderToast({ message, type });
|
|
||||||
localStorage.removeItem("toastMessage");
|
|
||||||
}
|
|
||||||
|
|
||||||
{% block script %} {% endblock %}
|
{% block script %} {% endblock %}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -90,10 +90,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
renderToast({ message: 'Settings updated successfully.', type: 'success' });
|
Toast.renderToast({ message: 'Settings updated successfully.', type: 'success' });
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
renderToast({ message: `Failed to update settings, ${err}`, type: 'danger' });
|
Toast.renderToast({ message: `Failed to update settings, ${err}`, type: 'danger' });
|
||||||
}
|
}
|
||||||
{% endset %}
|
{% endset %}
|
||||||
{{ toolbars.render_toolbar(
|
{{ toolbars.render_toolbar(
|
||||||
|
|
|
@ -40,7 +40,7 @@
|
||||||
|
|
||||||
window.location.href = `/user/${result.id}`;
|
window.location.href = `/user/${result.id}`;
|
||||||
} else {
|
} else {
|
||||||
renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
|
|
|
@ -52,18 +52,18 @@
|
||||||
|
|
||||||
window.location.href = `/worklog/${result.id}`;
|
window.location.href = `/worklog/${result.id}`;
|
||||||
} else {
|
} else {
|
||||||
renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
renderToast({ message: `Error: ${err}`, type: "danger" });
|
Toast.renderToast({ message: `Error: ${err}`, type: "danger" });
|
||||||
}
|
}
|
||||||
{% endset %}
|
{% endset %}
|
||||||
{% set deleteLogic %}
|
{% set deleteLogic %}
|
||||||
const id = document.querySelector("#logId").value;
|
const id = document.querySelector("#logId").value;
|
||||||
|
|
||||||
if (!id || id === "None") {
|
if (!id || id === "None") {
|
||||||
renderToast({ message: "No item ID found to delete.", type: "danger" });
|
Toast.renderToast({ message: "No item ID found to delete.", type: "danger" });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -86,10 +86,10 @@
|
||||||
|
|
||||||
window.location.href = "/worklog";
|
window.location.href = "/worklog";
|
||||||
} else {
|
} else {
|
||||||
renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
renderToast({ message: `Error: ${err}`, type: "danger" });
|
Toast.renderToast({ message: `Error: ${err}`, type: "danger" });
|
||||||
}
|
}
|
||||||
{% endset %}
|
{% endset %}
|
||||||
{% set iconBar %}
|
{% set iconBar %}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue