More work on buttons.

inventory/templates/fragments/_button_fragment.html

@@ -6,8 +6,8 @@
         else '' }}</button>
     {% if logic %}
         <script>
-            document.addEventListener("DOMContentLoaded", (e) => {
+            document.addEventListener("DOMContentLoaded", () => {
-                document.getElementById("{{ id }}Button").addEventListener("click", async () => {
+                document.getElementById("{{ id }}Button").addEventListener("click", async (e) => {
                     {{ logic | safe }}
                 });
             });

inventory/templates/inventory.html

@@ -92,14 +92,15 @@
             {{ buttons.render_button(
                 id='save',
                 icon='floppy',
-                logic=saveLogic
+                logic=saveLogic,
+                style="outline-primary rounded-start"
             ) }}
             {% if item.id != None %}
                 {{ buttons.render_button(
                     id='delete',
                     icon='trash',
-                    style='danger',
+                    logic=deleteLogic,
-                    logic=deleteLogic
+                    style="outline-danger rounded-end"
                 ) }}
             {% endif %}
         </div>

inventory/templates/table.html

@@ -7,13 +7,20 @@
     {% set createButtonLogic %}
         window.location.href = '/{{ entry_route }}/new';
     {% endset %}
+    {% set toolbarButtons %}
+        <div class="btn-group">
+            {{ buttons.render_button(id='export', icon='box-arrow-up', style='outline-primary rounded-start') }}
+            {{ buttons.render_button(id='import', icon='box-arrow-in-down', style='outline-primary') }}
+            {{ buttons.render_button(id='create', icon='plus-lg', logic=createButtonLogic, style='outline-primary rounded-end') }}
+        </div>
+    {% endset %}
     {{ toolbars.render_toolbar(
         'table',
         left = breadcrumbs.breadcrumb_header(
             title=title,
             breadcrumbs=breadcrumb
         ),
-        right = buttons.render_button(id='create', icon='plus-lg', logic=createButtonLogic)
+        right = toolbarButtons
     ) }}
 {% endblock %}
 {% block content %}

inventory/templates/user.html

@@ -57,7 +57,8 @@
         right = buttons.render_button(
             id = 'save',
             icon = 'floppy',
-            logic = saveLogic
+            logic = saveLogic,
+            style = 'outline-primary'
         )
     ) }}
 {% if not user.active %}

inventory/templates/worklog.html

@@ -98,13 +98,14 @@
             {{ buttons.render_button(
                 id='save',
                 icon='floppy',
-                logic=saveLogic
+                logic=saveLogic,
+                style='outline-primary rounded-start'
             ) }}
             {% if log.id != None %}
                 {{ buttons.render_button(
                     id='delete',
                     icon='trash',
-                    style='danger',
+                    style='outline-danger rounded-end',
                     logic=deleteLogic
                 ) }}
             {% endif %}
@@ -120,14 +121,6 @@
         ),
         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
-    ) } #}
     {% if log.complete %}
         <div class="alert alert-success">
             This work item is complete. You cannot make any further changes.
@@ -218,9 +211,29 @@
                 <label class="form-label">Updates</label>
             </div>
             <div class="col">
+                {#
                 <button class="btn btn-primary mb-3" id="addUpdateButton"{% if log.complete %} disabled{% endif %}>
                     {{ icons.render_icon('plus-lg', 16) }}
                 </button>
+                #}
+                {% set addUpdateLogic %}
+                    function formatDate(date) {
+                        const pad = (n) => String(n).padStart(2, '0');
+                        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} `
+                            + `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+                    }
+
+                    const template = document.getElementById("editor-template");
+                    const newEditor = EditorWidget.createEditorWidget(template, EditorWidget.createTempId("new"), formatDate(new Date()));
+
+                    const updatesContainer = document.getElementById("updates-container");
+                    updatesContainer.appendChild(newEditor);
+                {% endset %}
+                {{ buttons.render_button(
+                    id='addUpdate',
+                    icon='plus-lg',
+                    logic=addUpdateLogic
+                ) }}
             </div>
         </div>
         {% for update in log.updates %}
@@ -238,24 +251,3 @@
     </div>
 </div>
 {% endblock %}
-
-{% block script %}
-    const deleteButton = document.getElementById("deleteButton");
-    const addUpdateButton = document.getElementById("addUpdateButton");
-
-    function formatDate(date) {
-        const pad = (n) => String(n).padStart(2, '0');
-        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} `
-            + `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
-    }
-
-    if (addUpdateButton) {
-        addUpdateButton.addEventListener("click", (e) => {
-            const template = document.getElementById("editor-template");
-            const newEditor = EditorWidget.createEditorWidget(template, EditorWidget.createTempId("new"), formatDate(new Date()));
-
-            const updatesContainer = document.getElementById("updates-container");
-            updatesContainer.appendChild(newEditor);
-        });
-    }
-{% endblock %}