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

app.py

@@ -18,6 +18,7 @@ class Task(db.Model):
     status = db.Column(db.String(10), default='pending')
     due_date = db.Column(db.Date, nullable=True)  # Due date for the task
     completed_at = db.Column(db.DateTime, nullable=True)  # Timestamp for when the task was completed
+    start_time = db.Column(db.Time, nullable=True)  # Start time for the task
 
 def format_duration(minutes):
     """Convert duration in minutes to 'H M' format."""
@@ -49,15 +50,19 @@ def index():
 
     # Dynamically sort tasks based on the parameter
     if sort_by == 'priority':
-        tasks = Task.query.filter(Task.status == 'pending').order_by(Task.priority).all()
+        in_progress_tasks = Task.query.filter(Task.status == 'in_progress').order_by(Task.priority).all()
+        pending_tasks = Task.query.filter(Task.status == 'pending').order_by(Task.priority).all()
     elif sort_by == 'due_date':
-        tasks = Task.query.filter(Task.status == 'pending').order_by(Task.due_date).all()
+        in_progress_tasks = Task.query.filter(Task.status == 'in_progress').order_by(Task.due_date).all()
+        pending_tasks = Task.query.filter(Task.status == 'pending').order_by(Task.due_date).all()
     elif sort_by == 'duration':
-        tasks = Task.query.filter(Task.status == 'pending').order_by(Task.duration).all()
+        in_progress_tasks = Task.query.filter(Task.status == 'in_progress').order_by(Task.duration).all()
+        pending_tasks = Task.query.filter(Task.status == 'pending').order_by(Task.duration).all()
     else:
-        tasks = Task.query.filter(Task.status == 'pending').all()  # Default: no sorting
+        in_progress_tasks = Task.query.filter(Task.status == 'in_progress').all()  # Default: no sorting
+        pending_tasks = Task.query.filter(Task.status == 'pending').all()
 
-    return render_template('index.html', tasks=tasks, sort_by=sort_by)
+    return render_template('index.html', in_progress_tasks=in_progress_tasks, pending_tasks=pending_tasks, sort_by=sort_by)
 
 @app.route('/add_task', methods=['POST'])
 def add_task():
@@ -106,9 +111,47 @@ def complete_task(task_id):
         task.status = 'completed'
         task.completed_at = datetime.utcnow()  # Store the timestamp in UTC
         db.session.commit()
-        socketio.emit('task_update', {'action': 'complete', 'task_id': task_id})
+        # Emit a real-time update to notify all clients
+        socketio.emit('task_update', {
+            'action': 'complete',
+            'task_id': task_id,
+            'status': 'completed'
+        })
     return redirect(url_for('index'))
 
+@app.route('/start_task/<int:task_id>')
+def start_task(task_id):
+    task = Task.query.get(task_id)
+    if task:
+        task.status = 'in_progress'
+        db.session.commit()
+        socketio.emit('task_update', {'action': 'start', 'task_id': task_id})
+    return redirect(url_for('index'))
+
+@app.route('/move_to_pending/<int:task_id>')
+def move_to_pending(task_id):
+    task = Task.query.get(task_id)
+    if task and task.status == 'in_progress':  # Ensure the task is currently "in_progress"
+        task.status = 'pending'
+        db.session.commit()
+        socketio.emit('task_update', {'action': 'move_to_pending', 'task_id': task_id})
+    return redirect(url_for('index'))
+
+@app.route('/move_to_pending_from_completed/<int:task_id>')
+def move_to_pending_from_completed(task_id):
+    task = Task.query.get(task_id)
+    if task and task.status == 'completed':  # Ensure the task is currently "completed"
+        task.status = 'pending'
+        task.completed_at = None  # Clear the completed timestamp
+        db.session.commit()
+        # Emit a real-time update to all connected clients
+        socketio.emit('task_update', {
+            'action': 'move_to_pending',
+            'task_id': task_id,
+            'status': 'pending'
+        })
+    return redirect(url_for('completed_tasks'))
+
 @app.route('/completed_tasks')
 def completed_tasks():
     cleanup_completed_tasks()  # Remove old completed tasks
@@ -130,6 +173,53 @@ def completed_tasks():
 
     return render_template('completed_tasks.html', tasks=tasks, sort_by=sort_by)
 
+@app.route('/edit_task/<int:task_id>', methods=['GET', 'POST'])
+def edit_task(task_id):
+    task = Task.query.get(task_id)
+    if not task:
+        return "Task not found", 404
+
+    if request.method == 'POST':
+        # Update task details from the form
+        task.name = request.form['name']
+        task.priority = request.form['priority']
+        duration_input = request.form['duration']
+        due_date_input = request.form['due_date']
+
+        # Parse duration (e.g., "10M" -> 10 minutes, "2H" -> 120 minutes)
+        if duration_input.endswith('M'):
+            task.duration = int(duration_input[:-1])  # Extract the number before 'M'
+        elif duration_input.endswith('H'):
+            task.duration = int(duration_input[:-1]) * 60  # Convert hours to minutes
+        else:
+            return "Invalid duration format. Use 'M' for minutes or 'H' for hours.", 400
+
+        # Parse due date (e.g., "2025-03-30")
+        try:
+            task.due_date = datetime.strptime(due_date_input, '%Y-%m-%d').date() if due_date_input else None
+        except ValueError:
+            return "Invalid due date format. Use 'YYYY-MM-DD'.", 400
+
+        db.session.commit()
+        return redirect(url_for('index'))
+
+    return render_template('edit_task.html', task=task)
+
+@app.route('/update_task_order', methods=['POST'])
+def update_task_order():
+    data = request.get_json()
+    if not data or 'order' not in data:
+        return jsonify({'error': 'Invalid data'}), 400
+
+    # Update the order of tasks in the database (optional: add an "order" field to the Task model)
+    for index, task_id in enumerate(data['order']):
+        task = Task.query.get(task_id)
+        if task:
+            task.order = index  # Assuming you add an "order" column to the Task model
+    db.session.commit()
+
+    return jsonify({'success': True})
+
 if __name__ == '__main__':
     with app.app_context():
         # Create database tables within the app context

templates/completed_tasks.html

@@ -23,20 +23,30 @@
         </div>
 
         <!-- Completed Task List -->
-        <ul class="list-group">
+        <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 %}
-                <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <tr>
-                    <div>
+                        <td>{{ task.name }}</td>
-                        <strong>{{ task.name }}</strong> 
+                        <td>{{ task.priority }}</td>
-                        (Priority: {{ task.priority }}, Duration: {{ format_duration(task.duration) }})
+                        <td>{{ format_duration(task.duration) }}</td>
-                        {% if task.due_date %}
+                        <td>{{ task.due_date }}</td>
-                            - Due: {{ task.due_date }}
+                        <td>
-                        {% endif %}
+                            <a href="/move_to_pending_from_completed/{{ task.id }}" class="btn btn-secondary btn-sm">Move to Pending</a>
-                        - Completed At: {{ task.completed_at }}
+                        </td>
-                    </div>
+                    </tr>
-                </li>
                 {% endfor %}
-        </ul>
+            </tbody>
+        </table>
     </div>
 
     <script>

templates/edit_task.html

@@ -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>

templates/index.html

@@ -48,63 +48,82 @@
 
         <a href="/completed_tasks" class="btn btn-secondary mb-3">View Completed Tasks</a>
 
-        <!-- Task List -->
+        <!-- In Progress Tasks Section -->
-        <h2>Tasks</h2>
+        <h2>In Progress Tasks</h2>
-        <ul id="task-list" class="list-group">
+        <ul class="list-group mb-4">
-            {% for task in tasks %}
+            {% for task in in_progress_tasks %}
-                <li class="list-group-item d-flex justify-content-between align-items-center" id="task-{{ task.id }}">
+                <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 %}
+                    </div>
-                        <span class="badge bg-success">Completed</span>
+                </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>