yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement Toast utility for consistent toast notifications across the application

Browse source
This commit is contained in:
Yaro Kasear 2025-07-25 08:31:33 -05:00
parent e5755066c3
commit 8710c09917
9 changed files with 92 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

4
inventory/static/js/csv.js
View file

@ -25,9 +25,9 @@ async function export_csv(ids, csv_route, filename=`${csv_route}_export.csv`) {
URL.revokeObjectURL(url);
} else {
renderToast({ message: `Export failed: ${result.error}`, type: 'danger' });
Toast.renderToast({ message: `Export failed: ${result.error}`, type: 'danger' });
}
} 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
View 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
};
})();

65
inventory/static/js/widget.js
View file

@ -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 = (() => {
function submitImageUpload(id) {
const form = document.getElementById(`image-upload-form-${id}`);
@ -75,11 +20,11 @@ const ImageWidget = (() => {
}
return response.json();
}).then(data => {
renderToast({ message: `Image uploaded.`, type: "success" });
Toast.renderToast({ message: `Image uploaded.`, type: "success" });
location.reload();
}).catch(err => {
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"
}).then(response => response.json()).then(data => {
if (data.success) {
renderToast({ message: "Image deleted.", type: "success" });
Toast.renderToast({ message: "Image deleted.", type: "success" });
location.reload(); // Update view
} else {
renderToast({ message: `Failed to delete: ${data.error}`, type: "danger" });
Toast.renderToast({ message: `Failed to delete: ${data.error}`, type: "danger" });
}
}).catch(err => {
renderToast({ message: `Error deleting image: ${err}`, type: "danger" });
Toast.renderToast({ message: `Error deleting image: ${err}`, type: "danger" });
});
}

1
inventory/templates/fragments/_dropdown_fragment.html
View file

@ -33,6 +33,7 @@
function {{ id }}SetButton(id, identifier) {
const button = document.getElementById("{{ id }}Button");
const input = document.getElementById("{{ id }}");
button.dataset.invValue = id;
button.textContent = identifier;
input.value = id;

10
inventory/templates/inventory.html
View file

@ -46,18 +46,18 @@
window.location.href = `/inventory_item/${result.id}`;
} else {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
console.error(err);
renderToast({ message: `Error: ${err}`, type: "danger" });
Toast.renderToast({ message: `Error: ${err}`, type: "danger" });
}
{% endset %}
{% set deleteLogic %}
const id = document.querySelector("#inventoryId").value;
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;
}
@ -80,11 +80,11 @@
window.location.href = "/inventory";
} else {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
console.error(err);
renderToast({ message: `Error: ${err}`, type: "danger" });
Toast.renderToast({ message: `Error: ${err}`, type: "danger" });
}
{% endset %}
{% set buttonBar %}

8
inventory/templates/layout.html
View file

@ -76,6 +76,7 @@
crossorigin="anonymous"></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/toast.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/widget.js') }}"></script>
<script>
const searchInput = document.querySelector('#search');
@ -86,13 +87,6 @@
});
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 %}
});
</script>

4
inventory/templates/settings.html
View file

@ -90,10 +90,10 @@
}
const data = await response.json();
renderToast({ message: 'Settings updated successfully.', type: 'success' });
Toast.renderToast({ message: 'Settings updated successfully.', type: 'success' });
} catch (err) {
renderToast({ message: `Failed to update settings, ${err}`, type: 'danger' });
Toast.renderToast({ message: `Failed to update settings, ${err}`, type: 'danger' });
}
{% endset %}
{{ toolbars.render_toolbar(

2
inventory/templates/user.html
View file

@ -40,7 +40,7 @@
window.location.href = `/user/${result.id}`;
} else {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
console.error(err);

10
inventory/templates/worklog.html
View file

@ -52,18 +52,18 @@
window.location.href = `/worklog/${result.id}`;
} else {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
console.error(err)
renderToast({ message: `Error: ${err}`, type: "danger" });
Toast.renderToast({ message: `Error: ${err}`, type: "danger" });
}
{% endset %}
{% set deleteLogic %}
const id = document.querySelector("#logId").value;
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;
}
@ -86,10 +86,10 @@
window.location.href = "/worklog";
} else {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
Toast.renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
renderToast({ message: `Error: ${err}`, type: "danger" });
Toast.renderToast({ message: `Error: ${err}`, type: "danger" });
}
{% endset %}
{% set iconBar %}