timeman/templates/index.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>

        <!-- 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: {{ format_duration(task.duration) }})
                        {% if task.due_date %}
                            - Due: {{ task.due_date }}
                        {% endif %}
                    </div>
                    <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>
                    </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>
        // 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>