50 lines
No EOL
2 KiB
HTML
50 lines
No EOL
2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Completed Tasks</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<h1>Completed Tasks</h1>
|
|
<a href="/" class="btn btn-primary mb-3">Back to Pending Tasks</a>
|
|
|
|
<!-- Sorting Options -->
|
|
<div class="mb-3">
|
|
<label for="sort_by" class="form-label">Sort By:</label>
|
|
<select id="sort_by" class="form-select" onchange="sortTasks()">
|
|
<option value="completed_at" {% if sort_by == 'completed_at' %}selected{% endif %}>Completed At</option>
|
|
<option value="priority" {% if sort_by == 'priority' %}selected{% endif %}>Priority</option>
|
|
<option value="due_date" {% if sort_by == 'due_date' %}selected{% endif %}>Due Date</option>
|
|
<option value="duration" {% if sort_by == 'duration' %}selected{% endif %}>Duration</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Completed Task List -->
|
|
<ul class="list-group">
|
|
{% for task in tasks %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<strong>{{ task.name }}</strong>
|
|
(Priority: {{ task.priority }}, Duration: {{ format_duration(task.duration) }})
|
|
{% if task.due_date %}
|
|
- Due: {{ task.due_date }}
|
|
{% endif %}
|
|
- Completed At: {{ task.completed_at }}
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
// Redirect to the selected sorting option
|
|
function sortTasks() {
|
|
const sortBy = document.getElementById('sort_by').value;
|
|
window.location.href = `/completed_tasks?sort_by=${sortBy}`;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |