Add ImageWidget for image upload and deletion functionality with toast notifications

inventory/static/js/csv.js

@@ -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' });
     }
 }

inventory/static/js/image.js

@@ -0,0 +1,52 @@
+const ImageWidget = (() => {
+    function submitImageUpload(id) {
+        const form = document.getElementById(`image-upload-form-${id}`);
+        const formData = new FormData(form);
+
+        fetch("/api/images", {
+            method: "POST",
+            body: formData
+        }).then(async response => {
+            if (!response.ok) {
+                // Try to parse JSON, fallback to text
+                const contentType = response.headers.get("Content-Type") || "";
+                let errorDetails;
+                if (contentType.includes("application/json")) {
+                    errorDetails = await response.json();
+                } else {
+                    errorDetails = { error: await response.text() };
+                }
+                throw errorDetails;
+            }
+            return response.json();
+        }).then(data => {
+            Toast.renderToast({ message: `Image uploaded.`, type: "success" });
+            location.reload();
+        }).catch(err => {
+            const msg = typeof err === "object" && err.error ? err.error : err.toString();
+            Toast.renderToast({ message: `Upload failed: ${msg}`, type: "danger" });
+        });
+    }
+
+    function deleteImage(inventoryId, imageId) {
+        if (!confirm("Are you sure you want to delete this image?")) return;
+
+        fetch(`/api/images/${imageId}`, {
+            method: "DELETE"
+        }).then(response => response.json()).then(data => {
+            if (data.success) {
+                Toast.renderToast({ message: "Image deleted.", type: "success" });
+                location.reload();  // Update view
+            } else {
+                Toast.renderToast({ message: `Failed to delete: ${data.error}`, type: "danger" });
+            }
+        }).catch(err => {
+            Toast.renderToast({ message: `Error deleting image: ${err}`, type: "danger" });
+        });
+    }
+
+    return {
+        submitImageUpload,
+        deleteImage
+    }
+})();

inventory/static/js/toast.js

@@ -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
+    };
+})();

inventory/static/js/widget.js

@@ -1,111 +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}`);
-        const formData = new FormData(form);
-
-        fetch("/api/images", {
-            method: "POST",
-            body: formData
-        }).then(async response => {
-            if (!response.ok) {
-                // Try to parse JSON, fallback to text
-                const contentType = response.headers.get("Content-Type") || "";
-                let errorDetails;
-                if (contentType.includes("application/json")) {
-                    errorDetails = await response.json();
-                } else {
-                    errorDetails = { error: await response.text() };
-                }
-                throw errorDetails;
-            }
-            return response.json();
-        }).then(data => {
-            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" });
-        });
-    }
-
-    function deleteImage(inventoryId, imageId) {
-        if (!confirm("Are you sure you want to delete this image?")) return;
-
-        fetch(`/api/images/${imageId}`, {
-            method: "DELETE"
-        }).then(response => response.json()).then(data => {
-            if (data.success) {
-                renderToast({ message: "Image deleted.", type: "success" });
-                location.reload();  // Update view
-            } else {
-                renderToast({ message: `Failed to delete: ${data.error}`, type: "danger" });
-            }
-        }).catch(err => {
-            renderToast({ message: `Error deleting image: ${err}`, type: "danger" });
-        });
-    }
-
-    return {
-        submitImageUpload,
-        deleteImage
-    }
-})();
-
 const EditorWidget = (() => {
     let tempIdCounter = 1;
 

inventory/templates/fragments/_dropdown_fragment.html

@@ -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;

inventory/templates/fragments/_image_fragment.html

@@ -6,7 +6,7 @@
     {% if image %}
         <img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-thumbnail w-100"
             style="height: auto;" data-bs-toggle="modal" data-bs-target="#imageModal-{{ id }}">
-            <div class="modal fade" id="imageModal-{{ id }}" tabindex="-1">
+            <div class="modal fade" id="imageModal-{{ id }}" tabindex="-1" style="z-index: 9999;">
                 <div class="modal-dialog modal-dialog-centered modal-lg">
                     <div class="modal-content">
                         <div class="modal-body text-center">
@@ -17,7 +17,7 @@
                             <button class="btn btn-danger" onclick="ImageWidget.deleteImage('{{ id }}', '{{ image.id }}')">
                                 {{ icons.render_icon('trash') }}
                             </button>
-                        
+
                             <form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
                                 <input type="file" id="image-upload-input-{{ id }}" name="file"
                                        onchange="ImageWidget.submitImageUpload('{{ id }}')">
@@ -25,7 +25,7 @@
                                 <input type="hidden" name="model_id" value="{{ id }}">
                                 <input type="hidden" name="caption" value="Uploaded via UI">
                             </form>
-                        
+
                             <label class="btn btn-secondary mb0" for="image-upload-input-{{ id }}">
                                 {{ icons.render_icon('upload') }}
                             </label>

inventory/templates/inventory.html

@@ -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 %}

inventory/templates/layout.html

@@ -76,6 +76,8 @@
         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/image.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 +88,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>

inventory/templates/settings.html

@@ -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(

inventory/templates/user.html

@@ -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);

inventory/templates/worklog.html

@@ -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 %}