Add worklog form fields and enhance templates for better data handling

- Introduced worklog form fields for start and end timestamps, contact, work item, completion status, follow-up, analysis, and notes.
- Updated worklog.html to include a save button and improved layout.
- Enhanced datalist.js for dynamic data binding between input fields and datalists.
- Refactored inventory.html and user.html for consistency and readability.
- Added form.html template for future use.

routes.py

@@ -63,6 +63,17 @@ worklog_headers = {
     "Quick Analysis?": lambda i: {"text": i.analysis, "type": "bool", "html": checked_box if i.analysis else unchecked_box},
 }
 
+worklog_form_fields = {
+    "start": lambda log: {"label": "Start Timestamp", "type": "date", "value": log.start_time.date().isoformat() if log.start_time else ""},
+    "end": lambda log: {"label": "End Timestamp", "type": "date", "value": log.end_time.date().isoformat() if log.end_time else ""},
+    "contact": lambda log: {"label": "Contact", "type": "datalist", "value": log.contact.full_name if log.contact else "", "list": "contactList"},
+    "item": lambda log: {"label": "Work Item", "type": "datalist", "value": log.work_item.identifier if log.work_item else "", "list": "itemList"},
+    "complete": lambda log: {"label": "Complete?", "type": "checkbox", "value": log.complete},
+    "followup": lambda log: {"label": "Follow Up?", "type": "checkbox", "value": log.followup},
+    "analysis": lambda log: {"label": "Quick Analysis?", "type": "checkbox", "value": log.analysis},
+    "notes": lambda log: {"label": "Notes", "type": "textarea", "value": log.notes or "", "rows": 15}
+}
+
 def make_paginated_data(
     query,
     page: int,
@@ -233,4 +244,4 @@ def worklog_entry(id):
     users = eager_load_user_relationships(user_query).all()
     item_query = db.session.query(Inventory)
     items = eager_load_inventory_relationships(item_query).all()
-    return render_template("worklog.html", title=f"Work Log #{id}", log=log, users=users, items=items)
+    return render_template("worklog.html", title=f"Work Log #{id}", log=log, users=users, items=items, form_fields=worklog_form_fields)

static/js/datalist.js

@@ -0,0 +1,20 @@
+document.querySelectorAll('[data-datalist-bind]').forEach(input => {
+    const datalistSelector = input.dataset.datalistBind;
+    const hiddenSelector = input.dataset.hiddenTarget;
+    const datalist = document.querySelector(datalistSelector);
+    const hidden = document.querySelector(hiddenSelector);
+
+    if (!datalist || !hidden) return;
+
+    input.addEventListener('input', function () {
+        const value = this.value;
+        const options = datalist.querySelectorAll('option');
+        let foundId = '';
+        options.forEach(option => {
+            if (option.value === value) {
+                foundId = option.dataset.id || '';
+            }
+        });
+        hidden.value = foundId;
+    });
+});

templates/form.html

@@ -0,0 +1,10 @@
+<!-- templates/worklog.html -->
+{% extends "layout.html" %}
+
+{% import "_table_fragment.html" as tables %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+
+{% endblock %}

templates/inventory.html

@@ -9,8 +9,10 @@
 <nav>
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('index') }}">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
-                <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
+                    viewBox="0 0 16 16">
+                    <path
+                        d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z" />
                 </svg>
             </a></li>
         <li class="breadcrumb-item"><a href="{{ url_for('main.list_inventory') }}">Inventory</a></li>
@@ -23,7 +25,8 @@
         <div class="row">
             <div class="col-6">
                 <label for="timestamp" class="form-label">Date Entered</label>
-                <input type="date" class="form-control" name="timestamp" value="{{ item.timestamp.date().isoformat() }}">
+                <input type="date" class="form-control" name="timestamp"
+                    value="{{ item.timestamp.date().isoformat() }}">
             </div>
             <div class="col-6">
                 <label for="identifier" class="form-label">Identifier</label>
@@ -33,21 +36,25 @@
         <div class="row">
             <div class="col-4">
                 <label for="inventory_name" class="form-label">Inventory #</label>
-                <input type="text" class="form-control" name="inventory_name" placeholder="-" value="{{ item.inventory_name if item.inventory_name else '' }}">
+                <input type="text" class="form-control" name="inventory_name" placeholder="-"
+                    value="{{ item.inventory_name if item.inventory_name else '' }}">
             </div>
             <div class="col-4">
                 <label for="serial" class="form-label">Serial #</label>
-                <input type="text" class="form-control" name="serial" placeholder="-" value="{{ item.serial if item.serial else '' }}">
+                <input type="text" class="form-control" name="serial" placeholder="-"
+                    value="{{ item.serial if item.serial else '' }}">
             </div>
             <div class="col-4">
                 <label for="barcode" class="form-label">Bar Code #</label>
-                <input type="text" class="form-control" name="barcode" placeholder="-" value="{{ item.barcode if item.barcode else '' }}">
+                <input type="text" class="form-control" name="barcode" placeholder="-"
+                    value="{{ item.barcode if item.barcode else '' }}">
             </div>
         </div>
         <div class="row">
             <div class="col-4">
                 <label for="brand" class="form-label">Brand</label>
-                <input list="brandList" id="brand" name="brand" class="form-control" placeholder="-" value="{{ item.brand.name }}">
+                <input list="brandList" id="brand" name="brand" class="form-control" placeholder="-"
+                    value="{{ item.brand.name }}">
                 <input type="hidden" id="brandId">
                 <datalist id="brandList">
                     {% for brand in brands %}
@@ -61,13 +68,15 @@
             </div>
             <div class="col-4">
                 <label for="category" class="form-label">Category</label>
-                <input type="text" class="form-control" name="category" placeholder="-" value="{{ item.item.description }}">
+                <input type="text" class="form-control" name="category" placeholder="-"
+                    value="{{ item.item.description }}">
             </div>
         </div>
         <div class="row">
             <div class="col-4">
                 <label for="owner" class="form-label">Contact</label>
-                <input list="userList" id="owner" class="form-control" name="owner" placeholder="-" value="{{ item.owner.full_name }}">
+                <input list="userList" id="owner" class="form-control" name="owner" placeholder="-"
+                    value="{{ item.owner.full_name }}" data-datalist-bind="#userList" data-hidden-target="#userId">
                 <input type="hidden" id="userId">
                 <datalist id="userList">
                     {% for user in users %}
@@ -77,7 +86,8 @@
             </div>
             <div class="col-4">
                 <label for="location" class="form-label">Location</label>
-                <input list="roomList" id="location" class="form-control" name="location" placeholder="-" value="{{ item.location.full_name }}">
+                <input list="roomList" id="location" class="form-control" name="location" placeholder="-"
+                    value="{{ item.location.full_name }}" data-datalist-bind="#roomList" data-hidden-target="#roomId">
                 <input type="hidden" id="roomId">
                 <datalist id="roomList">
                     {% for room in rooms %}
@@ -88,14 +98,16 @@
             <div class="col-2">
                 <label for="condition" class="form-label">Condition</label>
                 <select name="condition" id="" class="form-select" value="{{ item.condition }}">
-                    {% for condition in ["Working", "Deployed", "Partially Inoperable", "Inoperable", "Unverified", "Removed", "Disposed"] %}
+                    {% for condition in ["Working", "Deployed", "Partially Inoperable", "Inoperable", "Unverified",
+                    "Removed", "Disposed"] %}
                     <option value="{{ condition }}">{{ condition }}</option>
                     {% endfor %}
                 </select>
             </div>
             <div class="col-2 d-flex align-items-center justify-content-center" style="margin-top: 1.9rem;">
                 <div class="form-check mb-0">
-                    <input type="checkbox" class="form-check-input" id="shared" name="shared" {% if item.shared %}checked{% endif %}>
+                    <input type="checkbox" class="form-check-input" id="shared" name="shared" {% if item.shared
+                        %}checked{% endif %}>
                     <label for="shared" class="form-check-label">Shared?</label>
                 </div>
             </div>
@@ -103,7 +115,8 @@
         <div class="row">
             <div class="col-{% if worklog %}6{% else %}12{% endif %}">
                 <label for="notes" class="form-label">Notes &amp; Comments</label>
-                <textarea name="notes" id="notes" class="form-control" rows="10">{{ item.notes if item.notes else '' }}</textarea>
+                <textarea name="notes" id="notes" class="form-control"
+                    rows="10">{{ item.notes if item.notes else '' }}</textarea>
             </div>
             {% if worklog %}
             <div class="col-6">

templates/layout.html

@@ -47,6 +47,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
         crossorigin="anonymous"></script>
+    <script src="{{ url_for('static', filename='js/datalist.js') }}"></script>
     <script>{% block script %}{% endblock %}</script>
 </body>
 

templates/user.html

@@ -9,8 +9,10 @@
 <nav>
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('index') }}">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
-                    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
+                    viewBox="0 0 16 16">
+                    <path
+                        d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z" />
                 </svg>
             </a></li>
         <li class="breadcrumb-item"><a href="{{ url_for('main.list_users') }}">Users</a></li>
@@ -36,7 +38,8 @@
             <div class="col-6">
                 <label for="supervisor" class="form-label">Supervisor</label>
                 <input list="supervisorList" id="supervisor" name="supervisorName" class="form-control"
-                        value="{{ user.supervisor.full_name }}">
+                    value="{{ user.supervisor.full_name }}" data-datalist-bind="#supervisorList"
+                    data-hidden-target="#supervisorId">
                 <input type="hidden" id="supervisorId">
                 <datalist id="supervisorList">
                     {% for supervisor in users %}
@@ -48,7 +51,8 @@
             <div class="col-6">
                 <label for="location" class="form-label">Location</label>
                 <input list="locationList" id="location" name="locationName" class="form-control"
-                        value="{{ user.location.full_name }}">
+                    value="{{ user.location.full_name }}" data-datalist-bind="#locationList"
+                    data-hidden-target="#locationId">
                 <input type="hidden" id="locationId">
                 <datalist id="locationList">
                     {% for location in rooms %}
@@ -114,17 +118,3 @@
     </div>
 </div>
 {% endblock %}
-
-{% block script %}
-document.getElementById('supervisor').addEventListener('input', function() {
-    const input = this.value;
-    const options = document.querySelectorAll('#supervisorList option');
-    let foundId = '';
-    options.forEach(option => {
-        if (option.value === input) {
-            foundId = option.dataset.id;
-        }
-    })
-    document.getElementById('supervisorId').value = foundId;
-});
-{% endblock %}

templates/worklog.html

@@ -7,42 +7,57 @@
 
 {% block content %}
 <nav>
+    <form action="POST">
+        <div class="row d-flex mb-3 justify-content-between">
+            <div class="col">
                 <ol class="breadcrumb">
                     <li class="breadcrumb-item"><a href="{{ url_for('index') }}">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
+                                class="bi bi-house" viewBox="0 0 16 16">
+                                <path
+                                    d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z" />
                             </svg>
                         </a></li>
                     <li class="breadcrumb-item"><a href="{{ url_for('main.list_worklog') }}">Work Log</a></li>
                     <li class="breadcrumb-item active">{{ title }}</li>
                 </ol>
+            </div>
+            <div class="col text-end">
+                <button type="submit" class="btn btn-primary">Save</button>
+            </div>
+        </div>
 
         <div class="container">
-        <form action="POST">
             <div class="row">
                 <div class="col-6">
                     <label for="start" class="form-label">Start Timestamp</label>
-                    <input type="date" class="form-control" name="start" placeholder="-" value="{{ log.start_time.date().isoformat() if log.start_time }}">
+                    <input type="date" class="form-control" name="start" placeholder="-"
+                        value="{{ log.start_time.date().isoformat() if log.start_time }}">
                 </div>
                 <div class="col-6">
                     <label for="end" class="form-label">End Timestamp</label>
-                    <input type="date" class="form-control" name="end" placeholder="-" value="{{ log.end_time.date().isoformat() if log.end_time }}">
+                    <input type="date" class="form-control" name="end" placeholder="-"
+                        value="{{ log.end_time.date().isoformat() if log.end_time }}">
                 </div>
             </div>
             <div class="row">
                 <div class="col-4">
                     <label for="contact" class="form-label">Contact</label>
-                    <input list="contactList" class="form-control" id="contact" value="{{ log.contact.full_name }}">
+                    <input list="contactList" class="form-control" id="contact" value="{{ log.contact.full_name }}"
+                        data-datalist-bind="#contactList" data-hidden-target="#contactId">
                     <input type="hidden" id="contactId">
                     <datalist id="contactList">
                         {% for contact in users %}
-                        <option data-id="{{ contact.id }}" value="{{ contact.full_name }}">{{ contact.full_name }}</option>
+                        <option data-id="{{ contact.id }}" value="{{ contact.full_name }}">{{ contact.full_name }}
+                        </option>
                         {% endfor %}
                     </datalist>
                 </div>
                 <div class="col-4">
                     <label for="item" class="form-label">Work Item</label>
-                    <input list="itemList" class="form-control" id="item" placeholder="-" value="{{ log.work_item.identifier }}">
+                    <input list="itemList" class="form-control" id="item" placeholder="-"
+                        value="{{ log.work_item.identifier }}" data-datalist-bind="#itemList"
+                        data-hidden-target="#itemId">
                     <input type="hidden" id="itemId">
                     <datalist id="itemList">
                         {% for item in items %}
@@ -51,10 +66,43 @@
                     </datalist>
                 </div>
                 <div class="col-4">
-                    
+                    <div class="row">
+                        <div class="col">
+                            <input type="checkbox" id="complete" class="form-check-input" {% if log.complete %}checked{%
+                                endif %}>
+                            <label for="complete" class="form-check-label">
+                                Complete?
+                            </label>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <input type="checkbox" id="followup" class="form-check-input" {% if log.followup %}checked{%
+                                endif %}>
+                            <label for="followup" class="form-check-label">
+                                Follow Up?
+                            </label>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <input type="checkbox" id="analysis" class="form-check-input" {% if log.analysis %}checked{%
+                                endif %}>
+                            <label for="analysis" class="form-check-label">
+                                Quick Analysis?
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12">
+                    <label for="notes" class="form-label">Notes</label>
+                    <textarea name="notes" id="notes" class="form-control"
+                        rows="15">{{ log.notes if log.notes else '' }}</textarea>
                 </div>
             </div>
-        </form>
         </div>
 </nav>
+</form>
 {% endblock %}