style(templates): Refactor HTML structure for improved readability and consistency
This commit is contained in:
Ross
@@ -5,19 +5,19 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex align-items-start justify-content-between mb-3">
|
||||
<h2 class="mb-0">Collections</h2>
|
||||
{% if request.user.is_staff %}
|
||||
<a class="btn btn-sm btn-primary" href="{% url 'atlas:exam_create' %}">Create collection</a>
|
||||
{% endif %}
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex align-items-start justify-content-between mb-3">
|
||||
<h2 class="mb-0">Collections</h2>
|
||||
{% if request.user.is_staff %}
|
||||
<a class="btn btn-sm btn-primary" href="{% url 'atlas:exam_create' %}">Create collection</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<p class="mb-3">Manage and browse case collections. Use filters to narrow results.</p>
|
||||
|
||||
{% render_table table %}
|
||||
|
||||
{% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}
|
||||
</div>
|
||||
|
||||
<p class="mb-3">Manage and browse case collections. Use filters to narrow results.</p>
|
||||
|
||||
{% render_table table %}
|
||||
|
||||
{% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -34,42 +34,41 @@
|
||||
{% render_table table %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('bulk-delete-form').addEventListener('submit', function(e) {
|
||||
<script>
|
||||
document.getElementById('bulk-delete-form').addEventListener('submit', function(e) {
|
||||
// Remove any previously added hidden inputs
|
||||
document.querySelectorAll('#bulk-delete-form input[name="series_ids"]').forEach(el => el.remove());
|
||||
document.querySelectorAll('#bulk-delete-form input[name="series_ids"]').forEach(el => el.remove());
|
||||
|
||||
// Find all checked checkboxes
|
||||
const checked = document.querySelectorAll('input[name="selection"]:checked');
|
||||
if (checked.length === 0) {
|
||||
alert("Please select at least one series to delete.");
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
const checked = document.querySelectorAll('input[name="selection"]:checked');
|
||||
if (checked.length === 0) {
|
||||
alert("Please select at least one series to delete.");
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
// Add hidden inputs for each checked series
|
||||
checked.forEach(cb => {
|
||||
const hidden = document.createElement('input');
|
||||
hidden.type = 'hidden';
|
||||
hidden.name = 'series_ids';
|
||||
hidden.value = cb.value;
|
||||
this.appendChild(hidden);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
checked.forEach(cb => {
|
||||
const hidden = document.createElement('input');
|
||||
hidden.type = 'hidden';
|
||||
hidden.name = 'series_ids';
|
||||
hidden.value = cb.value;
|
||||
this.appendChild(hidden);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="exam-options"></div>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block css %}
|
||||
<style>
|
||||
</style>
|
||||
</style>
|
||||
{% endblock css %}
|
||||
|
||||
@@ -5,199 +5,199 @@
|
||||
{% block content_container_class %}container-fluid content-wide px-3{% endblock %}
|
||||
|
||||
{% block title %}
|
||||
Atlas Task Overview
|
||||
Atlas Task Overview
|
||||
{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-3 px-3">
|
||||
<style>
|
||||
.task-overview-table {
|
||||
min-width: 1650px;
|
||||
}
|
||||
|
||||
.task-overview-table th,
|
||||
.task-overview-table td {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.task-overview-table .task-col,
|
||||
.task-overview-table .generated-col,
|
||||
.task-overview-table .error-col,
|
||||
.task-overview-table .actions-col {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.task-overview-table .generated-col {
|
||||
min-width: 220px;
|
||||
}
|
||||
</style>
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
|
||||
<h2 class="h4 mb-0">Atlas Task Overview</h2>
|
||||
<div class="d-flex gap-2">
|
||||
<a class="btn btn-outline-secondary btn-sm" href="?status=all">All</a>
|
||||
<a class="btn btn-outline-warning btn-sm" href="?status=active">Active</a>
|
||||
<a class="btn btn-outline-success btn-sm" href="?status=completed">Completed</a>
|
||||
<a class="btn btn-outline-danger btn-sm" href="?status=failed">Failed</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if backend_missing %}
|
||||
<div class="alert alert-warning">
|
||||
django_tasks_db backend is not available in this environment. Install and migrate it to see task records.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-warning">
|
||||
<div class="card-body py-2">
|
||||
<div class="small text-muted">Active</div>
|
||||
<div class="h4 mb-0 text-warning">{{ counts.active }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-success">
|
||||
<div class="card-body py-2">
|
||||
<div class="small text-muted">Completed</div>
|
||||
<div class="h4 mb-0 text-success">{{ counts.completed }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-danger">
|
||||
<div class="card-body py-2">
|
||||
<div class="small text-muted">Failed</div>
|
||||
<div class="h4 mb-0 text-danger">{{ counts.failed }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="post" class="mb-3">
|
||||
{% csrf_token %}
|
||||
<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
|
||||
<select class="form-select form-select-sm" name="task_action" style="max-width: 320px;">
|
||||
<option value="">Choose task action...</option>
|
||||
<option value="reset_failed">Reset FAILED to READY</option>
|
||||
<option value="reset_selected">Reset selected to READY (skip RUNNING)</option>
|
||||
<option value="delete_completed">Delete selected COMPLETED</option>
|
||||
<option value="delete_failed">Delete selected FAILED</option>
|
||||
<option value="delete_selected_all">Delete ALL selected (including RUNNING)</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Apply to selected</button>
|
||||
<div class="form-check ms-2">
|
||||
<input class="form-check-input" type="checkbox" id="select-all-tasks">
|
||||
<label class="form-check-label small" for="select-all-tasks">Select all</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-striped align-middle task-overview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 36px;"></th>
|
||||
<th class="task-col">Task</th>
|
||||
<th>Status</th>
|
||||
<th class="generated-col">Generated Series</th>
|
||||
<th>Queue</th>
|
||||
<th>Enqueued</th>
|
||||
<th>Started</th>
|
||||
<th>Finished</th>
|
||||
<th>Worker</th>
|
||||
<th class="error-col">Error</th>
|
||||
<th class="actions-col">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for task in tasks %}
|
||||
<tr>
|
||||
<td>
|
||||
<input class="form-check-input task-select" type="checkbox" name="task_ids" value="{{ task.id }}">
|
||||
</td>
|
||||
<td class="task-col">
|
||||
<div class="small fw-semibold">{{ task.task_path }}</div>
|
||||
<div class="small text-muted">{{ task.id }}</div>
|
||||
</td>
|
||||
<td>
|
||||
{% if task.status == "FAILED" %}
|
||||
<span class="badge bg-danger">{{ task.status }}</span>
|
||||
{% elif task.status == "SUCCESSFUL" %}
|
||||
<span class="badge bg-success">{{ task.status }}</span>
|
||||
{% elif task.status == "RUNNING" or task.status == "READY" %}
|
||||
<span class="badge bg-warning text-dark">{{ task.status }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">{{ task.status }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="small generated-col">
|
||||
{% if task.generated_series %}
|
||||
{% for series in task.generated_series %}
|
||||
<a class="d-block" target="_blank" href="{{ series.url }}">{{ series.description }}</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<span class="text-muted">-</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ task.queue_name }}</td>
|
||||
<td class="small">{{ task.enqueued_at|date:"Y-m-d H:i:s" }}</td>
|
||||
<td class="small">{{ task.started_at|date:"Y-m-d H:i:s" }}</td>
|
||||
<td class="small">{{ task.finished_at|date:"Y-m-d H:i:s" }}</td>
|
||||
<td class="small">{{ task.worker_ids }}</td>
|
||||
<td class="small text-danger error-col">{{ task.exception_class_path|default:"" }}</td>
|
||||
<td class="small actions-col">
|
||||
{% if task.traceback %}
|
||||
<button
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#traceback-{{ task.id }}"
|
||||
aria-expanded="false"
|
||||
aria-controls="traceback-{{ task.id }}"
|
||||
>
|
||||
View full traceback
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="text-muted">-</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% if task.traceback %}
|
||||
<tr class="collapse" id="traceback-{{ task.id }}">
|
||||
<td></td>
|
||||
<td colspan="10">
|
||||
<div class="border rounded bg-dark-subtle p-2">
|
||||
<div class="small fw-semibold mb-1">Full traceback</div>
|
||||
<pre class="small mb-0" style="white-space: pre-wrap;">{{ task.traceback }}</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="11" class="text-muted">No tasks found for this filter.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const selectAll = document.getElementById('select-all-tasks');
|
||||
const rows = Array.from(document.querySelectorAll('.task-select'));
|
||||
if (!selectAll || !rows.length) {
|
||||
return;
|
||||
<div class="container-fluid py-3 px-3">
|
||||
<style>
|
||||
.task-overview-table {
|
||||
min-width: 1650px;
|
||||
}
|
||||
|
||||
selectAll.addEventListener('change', function () {
|
||||
rows.forEach((cb) => {
|
||||
cb.checked = selectAll.checked;
|
||||
.task-overview-table th,
|
||||
.task-overview-table td {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.task-overview-table .task-col,
|
||||
.task-overview-table .generated-col,
|
||||
.task-overview-table .error-col,
|
||||
.task-overview-table .actions-col {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.task-overview-table .generated-col {
|
||||
min-width: 220px;
|
||||
}
|
||||
</style>
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
|
||||
<h2 class="h4 mb-0">Atlas Task Overview</h2>
|
||||
<div class="d-flex gap-2">
|
||||
<a class="btn btn-outline-secondary btn-sm" href="?status=all">All</a>
|
||||
<a class="btn btn-outline-warning btn-sm" href="?status=active">Active</a>
|
||||
<a class="btn btn-outline-success btn-sm" href="?status=completed">Completed</a>
|
||||
<a class="btn btn-outline-danger btn-sm" href="?status=failed">Failed</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if backend_missing %}
|
||||
<div class="alert alert-warning">
|
||||
django_tasks_db backend is not available in this environment. Install and migrate it to see task records.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-warning">
|
||||
<div class="card-body py-2">
|
||||
<div class="small text-muted">Active</div>
|
||||
<div class="h4 mb-0 text-warning">{{ counts.active }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-success">
|
||||
<div class="card-body py-2">
|
||||
<div class="small text-muted">Completed</div>
|
||||
<div class="h4 mb-0 text-success">{{ counts.completed }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-danger">
|
||||
<div class="card-body py-2">
|
||||
<div class="small text-muted">Failed</div>
|
||||
<div class="h4 mb-0 text-danger">{{ counts.failed }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="post" class="mb-3">
|
||||
{% csrf_token %}
|
||||
<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
|
||||
<select class="form-select form-select-sm" name="task_action" style="max-width: 320px;">
|
||||
<option value="">Choose task action...</option>
|
||||
<option value="reset_failed">Reset FAILED to READY</option>
|
||||
<option value="reset_selected">Reset selected to READY (skip RUNNING)</option>
|
||||
<option value="delete_completed">Delete selected COMPLETED</option>
|
||||
<option value="delete_failed">Delete selected FAILED</option>
|
||||
<option value="delete_selected_all">Delete ALL selected (including RUNNING)</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Apply to selected</button>
|
||||
<div class="form-check ms-2">
|
||||
<input class="form-check-input" type="checkbox" id="select-all-tasks">
|
||||
<label class="form-check-label small" for="select-all-tasks">Select all</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-striped align-middle task-overview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 36px;"></th>
|
||||
<th class="task-col">Task</th>
|
||||
<th>Status</th>
|
||||
<th class="generated-col">Generated Series</th>
|
||||
<th>Queue</th>
|
||||
<th>Enqueued</th>
|
||||
<th>Started</th>
|
||||
<th>Finished</th>
|
||||
<th>Worker</th>
|
||||
<th class="error-col">Error</th>
|
||||
<th class="actions-col">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for task in tasks %}
|
||||
<tr>
|
||||
<td>
|
||||
<input class="form-check-input task-select" type="checkbox" name="task_ids" value="{{ task.id }}">
|
||||
</td>
|
||||
<td class="task-col">
|
||||
<div class="small fw-semibold">{{ task.task_path }}</div>
|
||||
<div class="small text-muted">{{ task.id }}</div>
|
||||
</td>
|
||||
<td>
|
||||
{% if task.status == "FAILED" %}
|
||||
<span class="badge bg-danger">{{ task.status }}</span>
|
||||
{% elif task.status == "SUCCESSFUL" %}
|
||||
<span class="badge bg-success">{{ task.status }}</span>
|
||||
{% elif task.status == "RUNNING" or task.status == "READY" %}
|
||||
<span class="badge bg-warning text-dark">{{ task.status }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">{{ task.status }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="small generated-col">
|
||||
{% if task.generated_series %}
|
||||
{% for series in task.generated_series %}
|
||||
<a class="d-block" target="_blank" href="{{ series.url }}">{{ series.description }}</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<span class="text-muted">-</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ task.queue_name }}</td>
|
||||
<td class="small">{{ task.enqueued_at|date:"Y-m-d H:i:s" }}</td>
|
||||
<td class="small">{{ task.started_at|date:"Y-m-d H:i:s" }}</td>
|
||||
<td class="small">{{ task.finished_at|date:"Y-m-d H:i:s" }}</td>
|
||||
<td class="small">{{ task.worker_ids }}</td>
|
||||
<td class="small text-danger error-col">{{ task.exception_class_path|default:"" }}</td>
|
||||
<td class="small actions-col">
|
||||
{% if task.traceback %}
|
||||
<button
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#traceback-{{ task.id }}"
|
||||
aria-expanded="false"
|
||||
aria-controls="traceback-{{ task.id }}"
|
||||
>
|
||||
View full traceback
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="text-muted">-</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% if task.traceback %}
|
||||
<tr class="collapse" id="traceback-{{ task.id }}">
|
||||
<td></td>
|
||||
<td colspan="10">
|
||||
<div class="border rounded bg-dark-subtle p-2">
|
||||
<div class="small fw-semibold mb-1">Full traceback</div>
|
||||
<pre class="small mb-0" style="white-space: pre-wrap;">{{ task.traceback }}</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="11" class="text-muted">No tasks found for this filter.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const selectAll = document.getElementById('select-all-tasks');
|
||||
const rows = Array.from(document.querySelectorAll('.task-select'));
|
||||
if (!selectAll || !rows.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectAll.addEventListener('change', function () {
|
||||
rows.forEach((cb) => {
|
||||
cb.checked = selectAll.checked;
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user