110 lines
No EOL
4.7 KiB
HTML
110 lines
No EOL
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Task Manager</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>Task Manager</h1>
|
|
|
|
<!-- 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="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>
|
|
|
|
<!-- Add Task Form -->
|
|
<form method="POST" action="/add_task" class="mb-4">
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="text" name="name" class="form-control" placeholder="Task Name" required>
|
|
</div>
|
|
<div class="col">
|
|
<select name="priority" class="form-control" required>
|
|
<option value="A">A</option>
|
|
<option value="B">B</option>
|
|
<option value="C">C</option>
|
|
<option value="D">D</option>
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" name="duration" class="form-control" placeholder="Duration (e.g., 10M or 2H)" required>
|
|
</div>
|
|
<div class="col">
|
|
<input type="date" name="due_date" class="form-control" placeholder="Due Date (YYYY-MM-DD)">
|
|
</div>
|
|
<div class="col">
|
|
<button type="submit" class="btn btn-primary">Add Task</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<a href="/completed_tasks" class="btn btn-secondary mb-3">View Completed Tasks</a>
|
|
|
|
<!-- Task List -->
|
|
<h2>Tasks</h2>
|
|
<ul id="task-list" class="list-group">
|
|
{% for task in tasks %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" id="task-{{ task.id }}">
|
|
<div>
|
|
<strong>{{ task.name }}</strong>
|
|
(Priority: {{ task.priority }}, Duration: {{ task.duration }} mins / {{ format_duration(task.duration) }})
|
|
{% if task.due_date %}
|
|
- Due: {{ task.due_date }}
|
|
{% endif %}
|
|
</div>
|
|
{% if task.status == 'pending' %}
|
|
<a href="/complete_task/{{ task.id }}" class="btn btn-success btn-sm">Complete</a>
|
|
{% else %}
|
|
<span class="badge bg-success">Completed</span>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
|
|
<script>
|
|
const socket = io();
|
|
|
|
// Handle task updates
|
|
socket.on('task_update', (data) => {
|
|
if (data.action === 'add') {
|
|
const task = data.task;
|
|
const taskList = document.getElementById('task-list');
|
|
const li = document.createElement('li');
|
|
li.className = 'list-group-item d-flex justify-content-between align-items-center';
|
|
li.id = `task-${task.id}`;
|
|
li.innerHTML = `
|
|
<div>
|
|
<strong>${task.name}</strong>
|
|
(Priority: ${task.priority}, Duration: ${task.duration} mins)
|
|
${task.due_date ? `- Due: ${task.due_date}` : ''}
|
|
</div>
|
|
<a href="/complete_task/${task.id}" class="btn btn-success btn-sm">Complete</a>
|
|
`;
|
|
taskList.appendChild(li);
|
|
} else if (data.action === 'complete') {
|
|
const taskId = data.task_id;
|
|
const taskElement = document.getElementById(`task-${taskId}`);
|
|
if (taskElement) {
|
|
taskElement.innerHTML += '<span class="badge bg-success">Completed</span>';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Redirect to the selected sorting option
|
|
function sortTasks() {
|
|
const sortBy = document.getElementById('sort_by').value;
|
|
window.location.href = `/?sort_by=${sortBy}`;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |