yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor updates section in worklog template to enhance user experience and streamline update entry

Browse source
This commit is contained in:
Yaro Kasear 2025-07-09 16:15:53 -05:00
parent 39a8e64c90
commit 3df70c15ee
1 changed files with 61 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

75
inventory/templates/worklog.html
View file

@ -97,17 +97,28 @@
</div> </div>
</div> </div>
#} #}
<label class="form-label">Updates</label> <div class="container" id="updates-container">
{% for update in log.updates %}
<div class="row"> <div class="row">
<div class="col-11">
<label class="form-label">Updates</label>
</div>
<div class="col"> <div class="col">
<div class="input-group mb-3"> <button class="btn btn-primary mb-3" id="addUpdateButton">
<span class="input-group-text">{{ update.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span> {{ icons.render_icon('plus-lg', 16) }}
<textarea name="update{{ loop.index0 }}" id="" class="form-control" rows="5" data-note-id="{{ update.id if update.id }}">{{ update.content }}</textarea> </button>
</div>
</div> </div>
</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> </div>
</nav> </nav>
{% endblock %} {% endblock %}
@ -115,20 +126,56 @@
{% block script %} {% block script %}
const saveButton = document.getElementById("saveButton"); const saveButton = document.getElementById("saveButton");
const deleteButton = document.getElementById("deleteButton"); const deleteButton = document.getElementById("deleteButton");
const addUpdateButton = document.getElementById("addUpdateButton");
const updateTextareas = Array.from(document.querySelectorAll("textarea[name^='update']")); if (addUpdateButton) {
const updates = updateTextareas.map(el => { addUpdateButton.addEventListener("click", (e) => {
const id = el.dataset.noteId; const row = document.createElement("div");
const content = el.value; row.classList.add("row");
return id ? { id, content } : { content };
}); 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) { if (saveButton) {
saveButton.addEventListener("click", async (e) => { saveButton.addEventListener("click", async (e) => {
e.preventDefault(); e.preventDefault();
const updateTextareas = Array.from(document.querySelectorAll("textarea[name^='update']")); 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 = { const payload = {
start_time: document.querySelector("input[name='start']").value, start_time: document.querySelector("input[name='start']").value,