60 lines
No EOL
2.3 KiB
HTML
60 lines
No EOL
2.3 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 -->
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Priority</th>
|
|
<th>Duration</th>
|
|
<th>Due Date</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for task in tasks %}
|
|
<tr>
|
|
<td>{{ task.name }}</td>
|
|
<td>{{ task.priority }}</td>
|
|
<td>{{ format_duration(task.duration) }}</td>
|
|
<td>{{ task.due_date }}</td>
|
|
<td>
|
|
<a href="/move_to_pending_from_completed/{{ task.id }}" class="btn btn-secondary btn-sm">Move to Pending</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</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> |