From 3df70c15eec4af3d8134bc3643b6c9ad5ec858be Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Wed, 9 Jul 2025 16:15:53 -0500
Subject: [PATCH] Refactor updates section in worklog template to enhance user
 experience and streamline update entry

---
 inventory/templates/worklog.html | 75 ++++++++++++++++++++++++++------
 1 file changed, 61 insertions(+), 14 deletions(-)

diff --git a/inventory/templates/worklog.html b/inventory/templates/worklog.html
index 5bd2209..4b43f27 100644
--- a/inventory/templates/worklog.html
+++ b/inventory/templates/worklog.html
@@ -97,17 +97,28 @@
                 </div>
             </div>
             #}
-            <label class="form-label">Updates</label>
-            {% for update in log.updates %}
+            <div class="container" id="updates-container">
                 <div class="row">
+                    <div class="col-11">
+                        <label class="form-label">Updates</label>
+                    </div>
                     <div class="col">
-                        <div class="input-group mb-3">
-                            <span class="input-group-text">{{ update.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
-                            <textarea name="update{{ loop.index0 }}" id="" class="form-control" rows="5" data-note-id="{{ update.id if update.id }}">{{ update.content }}</textarea>
-                        </div>
+                        <button class="btn btn-primary mb-3" id="addUpdateButton">
+                            {{ icons.render_icon('plus-lg', 16) }}
+                        </button>
                     </div>
                 </div>
-            {% endfor %}
+                {% for update in log.updates %}
+                    <div class="row">
+                        <div class="col">
+                            <div class="input-group mb-3">
+                                <span class="input-group-text">{{ update.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
+                                <textarea name="update{{ loop.index0 }}" id="" class="form-control" rows="5" data-note-id="{{ update.id if update.id }}">{{ update.content }}</textarea>
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
         </div>
 </nav>
 {% endblock %}
@@ -115,20 +126,56 @@
 {% block script %}
     const saveButton = document.getElementById("saveButton");
     const deleteButton = document.getElementById("deleteButton");
+    const addUpdateButton = document.getElementById("addUpdateButton");
 
-    const updateTextareas = Array.from(document.querySelectorAll("textarea[name^='update']"));
-    const updates = updateTextareas.map(el => {
-        const id = el.dataset.noteId;
-        const content = el.value;
-        return id ? { id, content } : { content };
-    });
+    if (addUpdateButton) {
+        addUpdateButton.addEventListener("click", (e) => {
+            const row = document.createElement("div");
+            row.classList.add("row");
+
+            const col = document.createElement("div");
+            col.classList.add("col");
+
+            const igroup = document.createElement("div");
+            igroup.classList.add("input-group", "mb-3");
+
+            // Timestamp span (just display the current time)
+            const ts = document.createElement("span");
+            ts.classList.add("input-group-text");
+            const now = new Date().toLocaleString(); // you could go full ISO if you're feeling spicy
+            ts.textContent = now;
+
+            // Textarea for update content
+            const updateContent = document.createElement("textarea");
+            updateContent.classList.add("form-control");
+            updateContent.placeholder = "Enter update...";
+            updateContent.dataset.noteId = "";
+            updateContent.name = "updateNew";
+
+            // Stitch it all together
+            igroup.appendChild(ts);
+            igroup.appendChild(updateContent);
+            col.appendChild(igroup);
+            row.appendChild(col);
+
+            const updatesContainer = document.getElementById("updates-container");
+            updatesContainer.appendChild(row);
+        });
+    }
 
     if (saveButton) {
         saveButton.addEventListener("click", async (e) => {
             e.preventDefault();
 
             const updateTextareas = Array.from(document.querySelectorAll("textarea[name^='update']"));
-            const updates = updateTextareas.map(el => el.value).filter(val => val.trim() !== '');
+            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,