todo-app/src/templates/index.html at 93f33c625d3dd2a0ea4784b68e6efc055ff095de · labworksdev/todo-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <title>Todo App</title>
    <style>
        .overdue { color: red; }
    </style>
</head>
<body>
    <h1>Todo App</h1>
    <p><small>Signed in as: <strong>{{ username }}</strong> &mdash; you can only view and modify your own todos.</small></p>

    <form action="/add" method="POST">
        <input type="text" name="title" placeholder="Add a todo" required>
        <input type="date" name="due_date">
        <button type="submit">Add</button>
    </form>

    <hr>

    {% if todos %}
    <p>
        Sort by:
        <a href="/?sort=created_at">Created date</a> |
        <a href="/?sort=due_date">Due date</a>
    </p>
    <table border="1" cellpadding="5">
        <tr>
            <th>ID</th>
            <th>Task</th>
            <th>Due Date</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
        {% for todo in todos %}
        {% set overdue = todo.due_date and todo.due_date < today and not todo.completed %}
        <tr{% if overdue %} class="overdue"{% endif %}>
            <td>{{ todo.id }}</td>
            <td>{{ todo.title }}</td>
            <td>{{ todo.due_date if todo.due_date else "—" }}</td>
            <td>{{ "Done" if todo.completed else "Open" }}</td>
            <td>
                <!-- Server enforces ownership: only todos belonging to the authenticated user are shown and actions are verified server-side -->
                <a href="/toggle/{{ todo.id }}">[toggle]</a>
                <a href="/delete/{{ todo.id }}">[delete]</a>
                <form action="/edit/{{ todo.id }}" method="POST" style="display:inline">
                    <input type="text" name="title" value="{{ todo.title }}" required>
                    <input type="date" name="due_date" value="{{ todo.due_date if todo.due_date else '' }}">
                    <button type="submit">[save]</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </table>
    {% else %}
    <p>No todos yet.</p>
    {% endif %}
</body>
</html>