1
from flask import Flask, session, request, render_template, redirect, url_for
2
from datetime import datetime
3

4
app = Flask(__name__)
5
app.secret_key = b'notAGoodSecretKey'
6
if __name__ == '__main__':
7
    app.config["ENV"] = "development"
8
    app.run(debug=True, host='0.0.0.0', port=4999)
9

10
# Root of the app. We should do at least something here.
11
@app.route('/')
12
def view():
13
    # If the user already has a to-do list, draw it.
14
    if "todoes" in session:
15
        # Ensure completed list exists in session (starts empty)
16
        completed = session.get("completed", [])
17
        return render_template("todos.html", todos=session["todoes"], completedTasks=completed)
18
    else:
19
        # Else, display the new user blank page.
20
        completed = session.get("completed", [])
21
        return render_template("new.html", completedTasks=completed)
22

23

24
# Add task
25
# Remember, imput from the web is RADIOACTIVE. Validate it like crazy. Then
26
# validate it some more.
27
@app.route('/add', methods=["POST"])
28
def add():
29
    # Just in case a mangled form submission was made
30
    addedTask = None
31
    if "newTask" in request.form:
32
        addedTask = request.form["newTask"].strip()
33
        # If the user already has todoes, add it..
34
        if "todoes" in session:
35
            # We have to do this this way because Flask doesn't properly
36
            # detect in place updates to members of the session dict
37
            todoes = session["todoes"]
38
            todoes.append(request.form["newTask"])
39
            session["todoes"] = todoes
40
        else:
41
            # Make the added task their first todo
42
            session["todoes"] = [request.form["newTask"]]
43

44
    # If the form was mangled and the user had no todoes before,
45
    # todoes might still be missing
46
    # If the form was mangled and the user had no todoes before,
47
    # todoes might still be missing
48
    completed = session.get("completed", [])
49
    if "todoes" not in session:
50
        return render_template("new.html", completedTasks=completed)
51
    else:
52
        return render_template("todos.html", todos=session["todoes"], addedTask=addedTask, completedTasks=completed)
53

54
# Route for completing a task
55
@app.route('/complete', methods=["POST"])
56
def complete():
57
    # If somehow this got accessed when todoes is blank, bail out.
58
    if "todoes" not in session:
59
        return render_template("new.html")
60

61
    # Collect the task numbers to delete by looping through form keys.
62
    delTaskNums = []
63
    completedTasks = []
64
    for key in request.form:
65
       if key.startswith("complete_"):
66
           # C O M P L E T E _ is 9 characters, so the rest of the key after
67
           # that should be the task index
68
           taskNumString = key[9:]
69
           # As usual, since web input is radioactive we have to allow for
70
           # it not being a number or being an invalid number before we
71
           # try to use it
72
           try:
73
               realTaskNum = int(taskNumString)
74
               if realTaskNum >= 0:
75
                   if realTaskNum < len(session["todoes"]):
76
                       delTaskNums.append(realTaskNum)
77
           except ValueError:
78
               pass
79
    # If more than one task is selected and the user has not confirmed yet,
80
    # render a server-side confirmation page listing the tasks and asking
81
    # whether to proceed. The confirmation form will POST back to this
82
    # same route with the same complete_... fields plus a 'confirm' flag.
83
    if len(delTaskNums) > 1 and 'confirm' not in request.form:
84
        # Store the pending selection server-side and redirect to a GET
85
        # confirmation page. This avoids accidental completion on cancel
86
        # and prevents relying on hidden fields in the browser.
87
        session['pending_complete'] = delTaskNums
88
        return redirect(url_for('confirm_complete_view'))
89

90
    # If the user has confirmed via the confirmation page, we may have a
91
    # pending list stored in the session. Use that instead of relying on
92
    # request.form values (which may be absent on the confirm POST).
93
    if 'confirm' in request.form and 'pending_complete' in session:
94
        delTaskNums = session.pop('pending_complete')
95
    # Delete the todoes in reverse order so that the indices of later entries
96
    # aren't changed by the deletion of earlier entries
97
    delTaskNums.sort()
98
    todoes = session["todoes"]
99
    # Collect the completed tasks before deleting them so that we can move them
100
    # into the completed list instead of deleting them
101
    for taskIndex in delTaskNums:
102
        try:
103
            # Append the task text together with the current date/time
104
            task_text = todoes[taskIndex]
105
            timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
106
            completedTasks.append(f"{task_text} (completed at {timestamp})")
107
        except IndexError:
108
            pass
109

110
    # Remove tasks from todoes by deleting in reverse order
111
    for delTask in sorted(delTaskNums, reverse=True):
112
        try:
113
            del todoes[delTask]
114
        except IndexError:
115
            pass
116

117
    session["todoes"] = todoes
118

119
    # Prepend the newly completed tasks to the top of the completed list
120
    existing_completed = session.get("completed", [])
121
    # Place the newly completed tasks (in the same relative order) at the front
122
    session["completed"] = completedTasks + existing_completed
123

124
    return render_template("todos.html", todos=session["todoes"], completedTasks=session["completed"], completedTasksRecent=completedTasks)
125

126

127
# Route for clearing the completed tasks list
128
@app.route('/clear_completed', methods=["POST"])
129
def clear_completed():
130
    # Reset the completed tasks list in session to an empty list
131
    session['completed'] = []
132
    # Use PRG pattern: redirect back to the main view so the browser shows the updated state
133
    return redirect(url_for('view'))
134

135

136
# GET confirmation page for completing multiple tasks
137
@app.route('/confirm_complete', methods=['GET'])
138
def confirm_complete_view():
139
    pending = session.get('pending_complete')
140
    if not pending:
141
        # Nothing to confirm; go back to main view
142
        return redirect(url_for('view'))
143
    todoes = session.get('todoes', [])
144
    tasks_to_confirm = []
145
    for idx in pending:
146
        try:
147
            tasks_to_confirm.append((idx, todoes[idx]))
148
        except IndexError:
149
            pass
150
    return render_template('confirm_complete.html', tasks=tasks_to_confirm)
151

152

153
# Cancel the confirmation (clear pending selection and go back)
154
@app.route('/cancel_confirm', methods=['POST'])
155
def cancel_confirm():
156
    session.pop('pending_complete', None)
157
    return redirect(url_for('view'))

1
<!doctype html>
2
<html>
3
    <head>
4
        <title>Welcome!</title>
5
        <link rel="stylesheet" type="text/css" href="static/style.css">
6
    </head>
7

8
    <body>
9
        <h1>My to-do list-Empty</h1>
10
    </body>
11

12
    <p>This is a bad to-do list app because it stores the list in a cookie, which gets destroyed easily. Still, here we go.</p>
13

14
    <div class="addBox">
15
        <form action="/add" method="POST">
16
            Add your first task: <input name="newTask" type="text" autofocus></input> <button type="submit">Add!</button>
17
        </form>
18
    </div>
19

20
    <div class="completedBox">
21
        <h2>Completed tasks</h2>
22
        {% if completedTasks %}
23
            <ul>
24
            {% for task in completedTasks %}
25
                <li>{{ task }}</li>
26
            {% endfor %}
27
            </ul>
28
            <form action="/clear_completed" method="POST" style="margin-top:8px;">
29
                <button type="submit">Clear completed</button>
30
            </form>
31
        {% else %}
32
            <p>No completed tasks yet.</p>
33
        {% endif %}
34
    </div>
35
</html>

1
<!doctype html>
2
<html>
3
    <head>
4
        <title>Welcome!</title>
5
        <link rel="stylesheet" type="text/css" href="static/style.css">
6
    </head>
7

8
    <body>
9
        <h1>My to-do list</h1>
10
    </body>
11

12
    {% if addedTask %}
13
        <p>{{ addedTask }} was added.</p>
14
    {% endif %}
15
    {# Completed tasks are now shown below the Add box instead of here #}
16
    <form action="/complete" method="POST">
17
        <table>
18
        {% for todo in todos %}
19
            <tr>
20
                <td id="task_{{ loop.index0 }}">{{ todo }}</td>
21
                <td class="checkbox">
22
                    <input name="complete_{{loop.index0}}" type="checkbox" onchange="toggleTask({{ loop.index0 }})"></input>
23
                </td>
24
            </tr>
25
        {% endfor %}
26
        </table>
27
        <button type="submit">Mark as completed</button>
28
    </form>
29

30
    <div class="addBox">
31
        <form action="/add" method="POST">
32
            Add another task: <input name="newTask" type="text" autofocus></input>
33
            <button type="submit">Add!</button>
34
        </form>
35
    </div>
36

37
    <div class="completedBox">
38
        <h2>Completed tasks</h2>
39
        {% if completedTasks %}
40
            <ul>
41
            {% for task in completedTasks %}
42
                <li>{{ task }}</li>
43
            {% endfor %}
44
            </ul>
45
            <!-- Button to clear all completed tasks -->
46
            <form action="/clear_completed" method="POST" style="margin-top:8px;">
47
                <button type="submit">Clear completed</button>
48
            </form>
49
        {% else %}
50
            <p>No completed tasks yet.</p>
51
        {% endif %}
52
    </div>
53

54
    <script>
55
        function toggleTask(taskId) {
56
            let taskElement = document.getElementById("task_" + taskId);
57
            taskElement.classList.toggle('crossed-out');
58
        }
59
        // Try "loop.index" and "loop.index0" here, observe the differences
60
        {% for todo in todos %}
61
            console.log("Task {{ loop.index0 }}: {{ todo }}");
62
        {% endfor %}
63
    </script>
64
</html>

1
<!doctype html>
2
<html>
3
    <head>
4
        <title>Confirm completing tasks</title>
5
        <link rel="stylesheet" type="text/css" href="static/style.css">
6
    </head>
7
    <body>
8
        <h1>Confirm completing tasks</h1>
9
        <p>You have selected multiple tasks to complete. Are you sure you want to mark the following tasks as completed?</p>
10
        <ul>
11
        {% for idx, text in tasks %}
12
            <li>{{ text }}</li>
13
        {% endfor %}
14
        </ul>
15

16
        <form action="/complete" method="POST" style="display:inline-block; margin-right:8px;">
17
            {# Only send a confirm flag; server will use the pending list stored in session #}
18
            <input type="hidden" name="confirm" value="1"></input>
19
            <button type="submit">Confirm</button>
20
        </form>
21
        <form action="/cancel_confirm" method="POST" style="display:inline-block;">
22
            <button type="submit">Cancel</button>
23
        </form>
24
    </body>
25
</html>

1
h1 {
2
  font-family: sans-serif;
3
  text-align: center;
4
  border: 2px solid black;
5
}
6

7
table {
8
  font-family: sans-serif;
9
  border: 2px solid black;
10
  border-collapse: collapse;
11
  width: 70%;
12

13
}
14

15
table td {
16
  border: 2px solid black;
17
}
18

19
table td.checkbox {
20
  width:40px;
21
}
22

23

24
table tr:nth-child(odd) {
25
  background: LightSkyBlue;
26
}
27

28
table tr:nth-child(even) {
29
  background: white;
30
}
31

32
.addBox {
33
  border: 1px black solid;
34
  background: greenyellow;
35
  padding: 10px;
36
}
37

38
.crossed-out {
39
  text-decoration: line-through;
40
}