Refactor inventory and layout templates: streamline script handling and improve toast message display

templates/inventory.html

@@ -130,103 +130,94 @@
 {% endblock %}
 
 {% block script %}
-    document.addEventListener("DOMContentLoaded", () => {
+    const saveButton = document.getElementById("saveButton");
-        const saveButton = document.getElementById("saveButton");
+    const deleteButton = document.getElementById("deleteButton");
-        const deleteButton = document.getElementById("deleteButton");
 
-        const toastData = localStorage.getItem("toastMessage");
+    if (saveButton) {
-        if (toastData) {
+        saveButton.addEventListener("click", async (e) => {
-            const { message, type } = JSON.parse(toastData);
+            e.preventDefault();
-            renderToast({ message, type });
-            localStorage.removeItem("toastMessage");
-        }
 
-        if (saveButton) {
+            const payload = {
-            saveButton.addEventListener("click", async (e) => {
+                timestamp: document.querySelector("input[name='timestamp']").value,
-                e.preventDefault();
+                condition: document.querySelector("select[name='condition']").value,
+                needed: "", // ← either add a field for this or drop it if obsolete
+                type_id: parseInt(document.querySelector("select[name='type']").value),
+                inventory_name: document.querySelector("input[name='inventory_name']").value || null,
+                serial: document.querySelector("input[name='serial']").value || null,
+                model: document.querySelector("input[name='model']").value || null,
+                notes: document.querySelector("textarea[name='notes']").value || null,
+                owner_id: parseInt(document.querySelector("select#userList").value) || null,
+                brand_id: parseInt(document.querySelector("select[name='brand']").value) || null,
+                location_id: parseInt(document.querySelector("select#room").value) || null,
+                barcode: document.querySelector("input[name='barcode']").value || null,
+                shared: document.querySelector("input[name='shared']").checked
+            };
 
-                const payload = {
+            try {
-                    timestamp: document.querySelector("input[name='timestamp']").value,
-                    condition: document.querySelector("select[name='condition']").value,
-                    needed: "", // ← either add a field for this or drop it if obsolete
-                    type_id: parseInt(document.querySelector("select[name='type']").value),
-                    inventory_name: document.querySelector("input[name='inventory_name']").value || null,
-                    serial: document.querySelector("input[name='serial']").value || null,
-                    model: document.querySelector("input[name='model']").value || null,
-                    notes: document.querySelector("textarea[name='notes']").value || null,
-                    owner_id: parseInt(document.querySelector("select#userList").value) || null,
-                    brand_id: parseInt(document.querySelector("select[name='brand']").value) || null,
-                    location_id: parseInt(document.querySelector("select#room").value) || null,
-                    barcode: document.querySelector("input[name='barcode']").value || null,
-                    shared: document.querySelector("input[name='shared']").checked
-                };
-
-                try {
-                    const id = document.querySelector("#inventoryId").value;
-                    const isEdit = id && id !== "None";
-
-                    const endpoint = isEdit ? `/api/inventory/${id}` : "/api/inventory"
-                    const method = isEdit ? "PUT" : "POST";
-
-                    const response = await fetch(endpoint, {
-                        method,
-                        headers: {
-                            "Content-Type": "application/json"
-                        },
-                        body: JSON.stringify(payload)
-                    });
-
-                    const result = await response.json();
-                    if(result.success) {
-                        localStorage.setItem("toastMessage", JSON.stringify({
-                            message: isEdit ? "Inventory item updated!" : "Inventory item created!",
-                            type: "success"
-                        }));
-
-                        window.location.href = `/inventory_item/${result.id}`;
-                    } else {
-                        renderToast({message: `Error: ${result.error}`, type: "danger"});
-                    }
-                } catch (err) {
-                    console.error(err);
-                }
-            });
-        }
-
-        if (deleteButton) {
-            deleteButton.addEventListener("click", async () => {
                 const id = document.querySelector("#inventoryId").value;
+                const isEdit = id && id !== "None";
 
-                if (!id || id === "None") {
+                const endpoint = isEdit ? `/api/inventory/${id}` : "/api/inventory"
-                    renderToast({ message: "No item ID found to delete." });
+                const method = isEdit ? "PUT" : "POST";
-                    return;
-                }
 
-                if(!confirm("Are you sure you want to delete this inventory item? This action cannot be undone.")) {
+                const response = await fetch(endpoint, {
-                    return;
+                    method,
-                }
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify(payload)
+                });
 
-                try {
+                const result = await response.json();
-                    const response = await fetch(`/api/inventory/${id}`, {
+                if (result.success) {
-                        method: "DELETE"
+                    localStorage.setItem("toastMessage", JSON.stringify({
-                    });
+                        message: isEdit ? "Inventory item updated!" : "Inventory item created!",
+                        type: "success"
+                    }));
 
-                    const result = await response.json();
+                    window.location.href = `/inventory_item/${result.id}`;
-
+                } else {
-                    if (result.success) {
-                        localStorage.setItem("toastMessage", JSON.stringify({
-                            message: "Inventory item deleted.",
-                            type: "success"
-                        }));
-
-                        window.location.href = "/inventory";
-                    } else {
-                        renderToast({ message: `Error: ${result.error}`, type: "danger" });
-                    }
-                } catch (err) {
                     renderToast({ message: `Error: ${result.error}`, type: "danger" });
                 }
-            });
+            } catch (err) {
-        }
+                console.error(err);
-    });
+            }
+        });
+    }
+
+    if (deleteButton) {
+        deleteButton.addEventListener("click", async () => {
+            const id = document.querySelector("#inventoryId").value;
+
+            if (!id || id === "None") {
+                renderToast({ message: "No item ID found to delete." });
+                return;
+            }
+
+            if (!confirm("Are you sure you want to delete this inventory item? This action cannot be undone.")) {
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/inventory/${id}`, {
+                    method: "DELETE"
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    localStorage.setItem("toastMessage", JSON.stringify({
+                        message: "Inventory item deleted.",
+                        type: "success"
+                    }));
+
+                    window.location.href = "/inventory";
+                } else {
+                    renderToast({ message: `Error: ${result.error}`, type: "danger" });
+                }
+            } catch (err) {
+                renderToast({ message: `Error: ${result.error}`, type: "danger" });
+            }
+        });
+    }
 {% endblock %}

templates/layout.html

@@ -78,7 +78,16 @@
         searchInput.addEventListener('input', () => {
             searchButton.disabled = searchInput.value.trim() === '';
         });
-        {% block script %} {% endblock %}
+
+        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>
 </body>
 

templates/table.html

@@ -11,4 +11,7 @@
 ) }}
 
 {{ tables.render_table(headers=header, rows=rows, id='table', entry_route=entry_route) }}
-{% endblock %}
+{% endblock %}
+
+{% block script %}
+{% endblock %}