haikal/templates/tasks/task_list.html

{% extends "base.html" %}
{% load static i18n %}

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">Background Tasks</h1>

    <!-- Task Count and Refresh Button -->
    <div class="d-flex justify-content-between mb-3">
        <div>
            <span class="badge bg-primary">Total Tasks: {{ page_obj.paginator.count }}</span>
        </div>
        <div>
            <a href="{% url 'task_list' %}" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-arrow-clockwise"></i> Refresh
            </a>
        </div>
    </div>

    <!-- Task Table -->
    <div class="table-responsive">
        <table class="table table-sm fs-9 mb-0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Task Name</th>
                    <th>Status</th>
                    <th>Created At</th>
                    <th>Scheduled Run</th>
                    <th>Last Run</th>
                    <th>Attempts</th>
                    <th>Priority</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for task in page_obj %}
                <tr>
                    <td>{{ task.id }}</td>
                    <td>
                        <span class="d-inline-block text-truncate" style="max-width: 150px;">
                            {{ task.task_name }}
                        </span>
                    </td>
                    <td>
                        {% if task.locked_at %}
                            <span class="badge bg-warning text-dark">Running</span>
                        {% elif task.last_run_at and task.has_error %}
                            <span class="badge bg-danger">Failed</span>
                        {% elif task.last_run_at %}
                            <span class="badge bg-success">Completed</span>
                        {% else %}
                            <span class="badge bg-info text-dark">Pending</span>
                        {% endif %}
                    </td>
                    <td>{{ task.created_at|date:"Y-m-d H:i" }}</td>
                    <td>{{ task.run_at|date:"Y-m-d H:i" }}</td>
                    <td>
                        {% if task.last_run_at %}
                            {{ task.last_run_at|date:"Y-m-d H:i" }}
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td>{{ task.attempts }}</td>
                    <td>{{ task.priority }}</td>
                    {% comment %} <td>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-sm btn-phoenix-primary" data-bs-toggle="modal"
                                    data-bs-target="#taskDetailModal"
                                    data-task-id="{{ task.id }}">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </td> {% endcomment %}
                </tr>
                {% empty %}
                <tr>
                    <td colspan="9" class="text-center">No tasks found</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if page_obj.paginator.num_pages > 1 %}
    <nav aria-label="Task pagination">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1">&laquo; First</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                </li>
            {% endif %}

            <li class="page-item active">
                <span class="page-link">
                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                </span>
            </li>

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last &raquo;</a>
                </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>

<!-- Task Detail Modal -->
<div class="modal fade" id="taskDetailModal" tabindex="-1" aria-labelledby="taskDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="taskDetailModalLabel">Task Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="taskDetailsContent">
                    Loading task details...
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Load task details in modal
document.getElementById('taskDetailModal').addEventListener('show.bs.modal', function (event) {
    const button = event.relatedTarget;
    const taskId = button.getAttribute('data-task-id');
    const modal = this;

    fetch(`/tasks/${taskId}/detail/`)
        .then(response => response.text())
        .then(html => {
            modal.querySelector('#taskDetailsContent').innerHTML = html;
        })
        .catch(error => {
            modal.querySelector('#taskDetailsContent').innerHTML =
                `<div class="alert alert-danger">Error loading task details: ${error}</div>`;
        });
});
</script>
{% endblock %}