Teil 21: Übersicht & Filter – Zeige nur, was du sehen willst

---

🎯 Ziel dieses Teils

✅ Zeige Anzahl offener und erledigter Aufgaben
✅ Möglichkeit, nur offene Aufgaben anzuzeigen
✅ Sortiere Aufgaben: offen zuerst, dann erledigt
✅ Alles bleibt im Browser klickbar und einfach

---

Schritt 1: Aufgaben beim Anzeigen sortieren

In deiner app.py, bearbeite die startseite()-Funktion:

@app.route("/")
def startseite():
    # Sortieren: offen (False) vor erledigt (True)
    sortierte_aufgaben = sorted(aufgaben, key=lambda a: a["erledigt"])
    return render_template("index.html", aufgaben=sortierte_aufgaben)

Das sorgt dafür, dass nicht erledigte Aufgaben oben stehen.

---

Schritt 2: Offene & erledigte Aufgaben zählen

In startseite() erweitere den Rückgabe-Befehl:

@app.route("/")
def startseite():
    sortierte_aufgaben = sorted(aufgaben, key=lambda a: a["erledigt"])
    anzahl_offen = sum(1 for a in aufgaben if not a["erledigt"])
    anzahl_erledigt = sum(1 for a in aufgaben if a["erledigt"])
    return render_template(
        "index.html",
        aufgaben=sortierte_aufgaben,
        offen=anzahl_offen,
        erledigt=anzahl_erledigt
    )

---

Schritt 3: Anzeige in index.html

Zeige die Zahlen über der Liste an:

<h2>Status</h2>
<p>
    🔄 Noch offen: {{ offen }} <br>
    ✅ Erledigt: {{ erledigt }}
</p>

Das kannst du z. B. zwischen Überschrift und Liste setzen.

---

Optional: Nur offene anzeigen (per Filter)

Wenn du möchtest, kannst du einen Link einbauen:

<p>
    <a href="/?filter=offen">Nur offene anzeigen</a> |
    <a href="/">Alle anzeigen</a>
</p>

Und in app.py änderst du startseite():

from flask import request

@app.route("/")
def startseite():
    filter_wert = request.args.get("filter")

    if filter_wert == "offen":
        gefiltert = [a for a in aufgaben if not a["erledigt"]]
    else:
        gefiltert = aufgaben

    sortierte_aufgaben = sorted(gefiltert, key=lambda a: a["erledigt"])

    anzahl_offen = sum(1 for a in aufgaben if not a["erledigt"])
    anzahl_erledigt = sum(1 for a in aufgaben if a["erledigt"])

    return render_template(
        "index.html",
        aufgaben=sortierte_aufgaben,
        offen=anzahl_offen,
        erledigt=anzahl_erledigt
    )

Damit kannst du zwischen „alle“ und „nur offene“ Aufgaben umschalten – ganz ohne JavaScript.

---

Was du jetzt kannst

Funktion	Technik dahinter
Aufgaben zählen	sum(...)
Liste sortieren	sorted(..., key=...)
Aufgaben filtern	request.args.get(...)
Daten an HTML übergeben	render_template(...)
HTML anzeigen	{{ offen }}, {{ erledigt }}

---

Was du gelernt hast

• Filterung & Sortierung mit Python-Logik
• Übergabe mehrerer Variablen an HTML
• Dynamische Anzeige im Template
• GET-Parameter (?filter=offen) auswerten

---

Bonus-Ideen für Teil 22

• 🔄 Aufgaben wieder auf „offen“ setzen (Rückgängig)
• 📅 Fälligkeitsdatum anzeigen oder sortieren
• 🔍 Suchfeld nach Stichworten
• 🎨 Besseres Layout mit Farben oder CSS