Added button fragment and did the do.

inventory/templates/fragments/_button_fragment.html

@@ -1,14 +1,15 @@
 {% import "fragments/_icon_fragment.html" as icons %}
 
 {% macro render_button(id, icon, style='primary', logic = None) %}
+    <!-- Button Fragment -->
     <button type="submit" class="btn btn-{{ style }}" id="{{ id }}Button">{{ icons.render_icon(icon, 16) }}</button>
     {% if logic %}
         <script>
-            document.addEventListener("DOMContentLoaded", () => {
+            document.addEventListener("DOMContentLoaded", (e) => {
             {{ id }}Button = document.getElementById("{{ id }}Button");
 
             {{ id }}Button.addEventListener("click", async () =>{
-                {{ logic }}
+                {{ logic | safe }}
             });
         });
         </script>

inventory/templates/inventory.html

@@ -3,22 +3,134 @@
 
 {% block title %}{{ title }}{% endblock %}
 
-{% block content %}
-    {{ breadcrumbs.breadcrumb_header(
+{% block precontent %}
+    {% set saveLogic %}
+        e.preventDefault();
+
+        const payload = {
+            timestamp: document.querySelector("input[name='timestamp']").value,
+            condition: document.querySelector("select[name='condition']").value,
+            type_id: parseInt(document.querySelector("select[name='type']").value),
+            name: document.querySelector("input[name='name']").value || null,
+            serial: document.querySelector("input[name='serial']").value || null,
+            model: document.querySelector("input[name='model']").value || null,
+            notes: document.querySelector("textarea[name='editornotes']").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);
+            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" });
+            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) {
+            console.error(err);
+            renderToast({ message: `Error: ${err}`, type: "danger" });
+        }
+    {% endset %}
+    {% set buttonBar %}
+        <div class="btn-group">
+            {{ buttons.render_button(
+                id='save',
+                icon='floppy',
+                logic=saveLogic
+            ) }}
+            {% if item.id != None %}
+                {{ buttons.render_button(
+                    id='delete',
+                    icon='trash',
+                    style='danger',
+                    logic=deleteLogic
+                ) }}
+            {% endif %}
+        </div>
+    {% endset %}
+    {{ toolbars.render_toolbar(
+        id='inventory',
+        left=breadcrumbs.breadcrumb_header(
+            breadcrumbs=[
+                {'label': "Inventory", 'url': url_for('main.list_inventory')}
+            ],
+            title=title
+        ),
+        right=buttonBar
+    ) }}
+    {# { breadcrumbs.breadcrumb_header(
         breadcrumbs=[
             {'label': "Inventory", 'url': url_for('main.list_inventory')}
         ],
         title=title,
         save_button=True,
         delete_button= item.id != None
-    ) }}
+    ) } #}
 
     {% if item.condition in ["Removed", "Disposed"] %}
         <div class="alert alert-danger">
             This item is not available and cannot be edited.
         </div>
     {% endif %}
+{% endblock %}
 
+{% block content %}
     <input type="hidden" id="inventoryId" value="{{ item.id }}">
     <div class="container">
         <div class="row">
@@ -171,97 +283,3 @@
         </div>
     </div>
 {% endblock %}
-
-{% block script %}
-    const saveButton = document.getElementById("saveButton");
-    const deleteButton = document.getElementById("deleteButton");
-
-    if (saveButton) {
-        saveButton.addEventListener("click", async (e) => {
-            e.preventDefault();
-
-            const payload = {
-                timestamp: document.querySelector("input[name='timestamp']").value,
-                condition: document.querySelector("select[name='condition']").value,
-                type_id: parseInt(document.querySelector("select[name='type']").value),
-                name: document.querySelector("input[name='name']").value || null,
-                serial: document.querySelector("input[name='serial']").value || null,
-                model: document.querySelector("input[name='model']").value || null,
-                notes: document.querySelector("textarea[name='editornotes']").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);
-                renderToast({ message: `Error: ${err}`, type: "danger" });
-            }
-        });
-    }
-
-    if (deleteButton) {
-        deleteButton.addEventListener("click", async () => {
-            const id = document.querySelector("#inventoryId").value;
-
-            if (!id || id === "None") {
-                renderToast({ message: "No item ID found to delete.", type: "danger" });
-                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) {
-                console.error(err);
-                renderToast({ message: `Error: ${err}`, type: "danger" });
-            }
-        });
-    }
-{% endblock %}

inventory/templates/user.html

@@ -3,20 +3,69 @@
 
 {% block title %}{{ title }}{% endblock %}
 
-{% block content %}
+{% block precontent %}
+    {% set saveLogic %}
+        e.preventDefault();
 
+        const payload = {
+            staff: document.querySelector("input[name='staffCheck']").checked,
+            active: document.querySelector("input[name='activeCheck']").checked,
+            last_name: document.querySelector("input[name='lastName']").value,
+            first_name: document.querySelector("input[name='firstName']").value,
+            supervisor_id: parseInt(document.querySelector("select[name='supervisor']").value) || null,
+            location_id: parseInt(document.querySelector("select[name='location']").value) || null
+        };
 
-{{ breadcrumbs.breadcrumb_header(
+        try {
+            const id = document.querySelector("#userId").value;
+            const isEdit = id && id !== "None";
+
+            const endpoint = isEdit ? `/api/user/${id}` : "/api/user";
+            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 ? "User updated!" : "User created!",
+                    type: "success"
+                }));
+
+                window.location.href = `/user/${result.id}`;
+            } else {
+                renderToast({ message: `Error: ${result.error}`, type: "danger" });
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    {% endset %}
+    {{ toolbars.render_toolbar(
+        id = 'newUser',
+        left = breadcrumbs.breadcrumb_header(
             title=title,
             breadcrumbs=[
                 {'label': 'Users', 'url': url_for('main.list_users')}
-    ],
-    save_button = True
-) }}
+            ]
+        ),
+        right = buttons.render_button(
+            id = 'save',
+            icon = 'floppy',
+            logic = saveLogic
+        )
+    ) }}
 {% if not user.active %}
 <div class="alert alert-danger">This user is inactive. You will not be able to make any changes to this record.</div>
 {% endif %}
+{% endblock %}
 
+{% block content %}
 <input type="hidden" id="userId" value="{{ user.id }}">
 <div class="container">
     <form action="POST">
@@ -90,53 +139,3 @@
     </div>
 </div>
 {% endblock %}
-
-{% block script %}
-    const saveButton = document.getElementById("saveButton");
-    const deleteButton = document.getElementById("deleteButton");
-
-    if (saveButton) {
-        saveButton.addEventListener("click", async (e) => {
-            e.preventDefault();
-
-            const payload = {
-                staff: document.querySelector("input[name='staffCheck']").checked,
-                active: document.querySelector("input[name='activeCheck']").checked,
-                last_name: document.querySelector("input[name='lastName']").value,
-                first_name: document.querySelector("input[name='firstName']").value,
-                supervisor_id: parseInt(document.querySelector("select[name='supervisor']").value) || null,
-                location_id: parseInt(document.querySelector("select[name='location']").value) || null
-            };
-
-            try {
-                const id = document.querySelector("#userId").value;
-                const isEdit = id && id !== "None";
-
-                const endpoint = isEdit ? `/api/user/${id}` : "/api/user";
-                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 ? "User updated!" : "User created!",
-                        type: "success"
-                    }));
-
-                    window.location.href = `/user/${result.id}`;
-                } else {
-                    renderToast({ message: `Error: ${result.error}`, type: "danger" });
-                }
-            } catch (err) {
-                console.error(err);
-            }
-        });
-    }
-{% endblock %}

inventory/templates/worklog.html

@@ -3,23 +3,139 @@
 
 {% block title %}{{ title }}{% endblock %}
 
-{% block content %}
-<nav>
-    {{ breadcrumbs.breadcrumb_header(
+{% block precontent %}
+    {% set saveLogic %}
+        e.preventDefault();
+
+        const updateTextareas = Array.from(document.querySelectorAll("textarea[name^='editor']"));
+        const updates = updateTextareas
+            .map(el => {
+                const content = el.value.trim();
+                if (!content) return null;
+                const id = el.dataset.noteId;
+                return id ? { id, content } : { content };
+            })
+            .filter(u => u !== null);
+
+        const payload = {
+            start_time: document.querySelector("input[name='start']").value,
+            end_time: document.querySelector("input[name='end']").value,
+            complete: document.querySelector("input[name='complete']").checked,
+            analysis: document.querySelector("input[name='analysis']").checked,
+            followup: document.querySelector("input[name='followup']").checked,
+            contact_id: parseInt(document.querySelector("select[name='contact']").value) || null,
+            work_item_id: parseInt(document.querySelector("select[name='item']").value) || null,
+            updates: updates
+        };
+
+        try {
+            const id = document.querySelector("#logId").value;
+            const isEdit = id && id !== "None";
+
+            const endpoint = isEdit ? `/api/worklog/${id}` : "/api/worklog";
+            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 ? "Work Log entry updated!" : "Work Log entry created!",
+                    type: "success"
+                }));
+
+                window.location.href = `/worklog/${result.id}`;
+            } else {
+                renderToast({ message: `Error: ${result.error}`, type: "danger" });
+            }
+        } catch (err) {
+            console.error(err)
+            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" });
+            return;
+        }
+
+        if (!confirm("Are you sure you want to delete this work log entry? This action cannot be undone.")) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/worklog/${id}`, {
+                method: "DELETE"
+            });
+
+            const result = await response.json();
+
+            if (result.success) {
+                localStorage.setItem("toastMessage", JSON.stringify({
+                    message: "Work log entry deleted.",
+                    type: "success"
+                }));
+
+                window.location.href = "/worklog";
+            } else {
+                renderToast({ message: `Error: ${result.error}`, type: "danger" });
+            }
+        } catch (err) {
+            console.log(err);
+            renderToast({ message: `Error: ${err}`, type: "danger" });
+        }
+    {% endset %}
+    {% set iconBar %}
+        <div class="btn-group">
+            {{ buttons.render_button(
+                id='save',
+                icon='floppy',
+                logic=saveLogic
+            ) }}
+            {% if log.id != None %}
+                {{ buttons.render_button(
+                    id='delete',
+                    icon='trash',
+                    style='danger',
+                    logic=deleteLogic
+                ) }}
+            {% endif %}
+        </div>
+    {% endset %}
+    {{ toolbars.render_toolbar(
+        id='newWorklog',
+        left=breadcrumbs.breadcrumb_header(
+            breadcrumbs=[
+                {'label': 'Work Log', 'url': url_for('main.list_worklog')}
+            ],
+            title=title
+        ),
+        right=iconBar
+    ) }}
+    {# { breadcrumbs.breadcrumb_header(
         breadcrumbs=[
             {'label': 'Work Log', 'url': url_for('main.list_worklog')}
         ],
         title=title,
         save_button=True,
         delete_button=log.id != None
-    ) }}
-</nav>
-{% if log.complete %}
+    ) } #}
+    {% if log.complete %}
         <div class="alert alert-success">
             This work item is complete. You cannot make any further changes.
         </div>
-{% endif %}
+    {% endif %}
+{% endblock %}
 
+{% block content %}
 <input type="hidden" id="logId" value="{{ log.id }}">
 <div class="container">
     <div class="row">
@@ -124,7 +240,6 @@
 {% endblock %}
 
 {% block script %}
-    const saveButton = document.getElementById("saveButton");
     const deleteButton = document.getElementById("deleteButton");
     const addUpdateButton = document.getElementById("addUpdateButton");
 
@@ -143,99 +258,4 @@
             updatesContainer.appendChild(newEditor);
         });
     }
-
-    if (saveButton) {
-        saveButton.addEventListener("click", async (e) => {
-            e.preventDefault();
-
-            const updateTextareas = Array.from(document.querySelectorAll("textarea[name^='editor']"));
-            const updates = updateTextareas
-                .map(el => {
-                    const content = el.value.trim();
-                    if (!content) return null;
-                    const id = el.dataset.noteId;
-                    return id ? { id, content } : { content };
-                })
-                .filter(u => u !== null);
-
-            const payload = {
-                start_time: document.querySelector("input[name='start']").value,
-                end_time: document.querySelector("input[name='end']").value,
-                complete: document.querySelector("input[name='complete']").checked,
-                analysis: document.querySelector("input[name='analysis']").checked,
-                followup: document.querySelector("input[name='followup']").checked,
-                contact_id: parseInt(document.querySelector("select[name='contact']").value) || null,
-                work_item_id: parseInt(document.querySelector("select[name='item']").value) || null,
-                updates: updates
-            };
-
-            try {
-                const id = document.querySelector("#logId").value;
-                const isEdit = id && id !== "None";
-
-                const endpoint = isEdit ? `/api/worklog/${id}` : "/api/worklog";
-                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 ? "Work Log entry updated!" : "Work Log entry created!",
-                        type: "success"
-                    }));
-
-                    window.location.href = `/worklog/${result.id}`;
-                } else {
-                    renderToast({ message: `Error: ${result.error}`, type: "danger" });
-                }
-            } catch (err) {
-                console.error(err)
-                renderToast({ message: `Error: ${err}`, type: "danger" });
-            }
-        });
-    }
-
-    if (deleteButton) {
-        deleteButton.addEventListener("click", async () => {
-            const id = document.querySelector("#logId").value;
-
-            if (!id || id === "None") {
-                renderToast({ message: "No item ID found to delete.", type: "danger" });
-                return;
-            }
-
-            if (!confirm("Are you sure you want to delete this work log entry? This action cannot be undone.")) {
-                return;
-            }
-
-            try {
-                const response = await fetch(`/api/worklog/${id}`, {
-                    method: "DELETE"
-                });
-
-                const result = await response.json();
-
-                if (result.success) {
-                    localStorage.setItem("toastMessage", JSON.stringify({
-                        message: "Work log entry deleted.",
-                        type: "success"
-                    }));
-
-                    window.location.href = "/worklog";
-                } else {
-                    renderToast({ message: `Error: ${result.error}`, type: "danger" });
-                }
-            } catch (err) {
-                console.log(err);
-                renderToast({ message: `Error: ${err}`, type: "danger" });
-            }
-        });
-    }
 {% endblock %}