cdez/timeman
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add the task editor as a separate page/route, task sorting?

Browse source
This commit is contained in:
Charles Descamps 2025-03-25 01:38:06 -07:00
parent 15b5bd63e1
commit ec2eb211cd
4 changed files with 217 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

38
templates/completed_tasks.html
View file

@ -23,20 +23,30 @@
</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>
<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>

39
templates/edit_task.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Task</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>Edit Task</h1>
<form method="POST">
<div class="mb-3">
<label for="name" class="form-label">Task Name</label>
<input type="text" id="name" name="name" class="form-control" value="{{ task.name }}" required>
</div>
<div class="mb-3">
<label for="priority" class="form-label">Priority</label>
<select id="priority" name="priority" class="form-select" required>
<option value="A" {% if task.priority == 'A' %}selected{% endif %}>A</option>
<option value="B" {% if task.priority == 'B' %}selected{% endif %}>B</option>
<option value="C" {% if task.priority == 'C' %}selected{% endif %}>C</option>
<option value="D" {% if task.priority == 'D' %}selected{% endif %}>D</option>
</select>
</div>
<div class="mb-3">
<label for="duration" class="form-label">Duration</label>
<input type="text" id="duration" name="duration" class="form-control" value="{{ task.duration }}M" required>
</div>
<div class="mb-3">
<label for="due_date" class="form-label">Due Date</label>
<input type="date" id="due_date" name="due_date" class="form-control" value="{{ task.due_date }}">
</div>
<button type="submit" class="btn btn-primary">Save Changes</button>
<a href="/" class="btn btn-secondary">Cancel</a>
</form>
</div>
</body>
</html>

97
templates/index.html
View file

@ -48,63 +48,82 @@
<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 }}">
<!-- In Progress Tasks Section -->
<h2>In Progress Tasks</h2>
<ul class="list-group mb-4">
{% for task in in_progress_tasks %}
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<strong>{{ task.name }}</strong>
(Priority: {{ task.priority }}, Duration: {{ task.duration }} mins / {{ format_duration(task.duration) }})
(Priority: {{ task.priority }}, Duration: {{ format_duration(task.duration) }})
{% if task.due_date %}
- Due: {{ task.due_date }}
{% endif %}
</div>
{% if task.status == 'pending' %}
<div>
<!-- Consistent button order -->
<a href="/move_to_pending/{{ task.id }}" class="btn btn-secondary btn-sm">Move to Pending</a>
<a href="/edit_task/{{ task.id }}" class="btn btn-warning btn-sm">Edit</a>
<a href="/complete_task/{{ task.id }}" class="btn btn-success btn-sm">Complete</a>
{% else %}
<span class="badge bg-success">Completed</span>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
<!-- Pending Tasks Section -->
<h2>Pending Tasks</h2>
<ul class="list-group mb-4">
{% for task in pending_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 %}
</div>
<div>
<!-- Consistent button order -->
<a href="/start_task/{{ task.id }}" class="btn btn-info btn-sm">Start</a>
<a href="/edit_task/{{ task.id }}" class="btn btn-warning btn-sm">Edit</a>
<a href="/complete_task/{{ task.id }}" class="btn btn-success btn-sm">Complete</a>
</div>
</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>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script>
const socket = io(); // Connect to the Socket.IO server
// Listen for task updates
socket.on('task_update', (data) => {
console.log('Task update received:', data);
if (data.action === 'move_to_pending') {
// Handle moving a task to "Pending"
const taskElement = document.querySelector(`[data-task-id="${data.task_id}"]`);
if (taskElement) {
const pendingTasksContainer = document.getElementById('pending-tasks'); // Adjust ID as needed
pendingTasksContainer.appendChild(taskElement);
}
} else if (data.action === 'complete') {
// Handle completing a task
const taskElement = document.querySelector(`[data-task-id="${data.task_id}"]`);
if (taskElement) {
const completedTasksContainer = document.getElementById('completed-tasks'); // Adjust ID as needed
completedTasksContainer.appendChild(taskElement);
}
}
});
</script>
</body>
</html>