inventory/templates/worklog.html

<!-- templates/worklog.html -->
{% extends "layout.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<nav>
        {{ breadcrumbs.breadcrumb_header(
            breadcrumbs=[
                {'label': 'Work Log', 'url': url_for('main.list_worklog')}
            ],
            title=title,
            save_button=True,
            delete_button=log.id != None
        ) }}

        <input type="hidden" id="logId" value="{{ log.id }}">
        <div class="container">
            <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 }}">
                </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 }}">
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <label for="contact" class="form-label">
                        Contact
                        {% if log.contact_id %}
                            {{ links.entry_link('user', log.contact_id) }}
                        {% endif %}
                    </label>
                    <select class="form-select" name="contact" id="contact">
                        <option value="">-</option>
                        {% for contact in users %}
                        <option value="{{ contact.id }}"{% if contact.id == log.contact_id %} selected{% endif %}>{{ contact.full_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-4">
                    <label for="item" class="form-label">
                        Work Item
                        {% if log.work_item_id %}
                            {{ links.entry_link('inventory_item', log.work_item_id) }}
                        {% endif %}
                    </label>
                    <select id="item" name="item" class="form-select">
                        <option value="">-</option>
                        {% for item in items %}
                        <option value="{{ item.id }}"{% if item.id == log.work_item_id %} selected{% endif %}>{{ item.identifier }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-4">
                    <div class="row">
                        <div class="col">
                            <input type="checkbox" id="complete" class="form-check-input" name="complete"{% 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" name="followup"{% 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" name="analysis"{% 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>
        </div>
</nav>
{% endblock %}

{% block script %}
    const saveButton = document.getElementById("saveButton");
    const deleteButton = document.getElementById("deleteButton");

    if (saveButton) {
        saveButton.addEventListener("click", async (e) => {
            e.preventDefault();

            const payload = {
                start_time: document.querySelector("input[name='start']").value,
                end_time: document.querySelector("input[name='end']").value,
                notes: document.querySelector("textarea[name='notes']").value,
                complete: document.querySelector("input[name='complete']").checked,
                analysis: document.querySelector("input[name='analysis']").checked,
                followup: document.querySelector("input[name='followup']").checked,
                contact_id: document.querySelector("select[name='contact']").value || null,
                work_item_id: document.querySelector("select[name='item']").value || null,
            };

            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 %}