Etappe 2: Cockpit progressiv + Check-In + Paarung + Lehrer-Dashboard
Cockpit (V1, progressives Layout): - /cockpit zeigt nur Karten, die zum Status passen. Onboarding-Karte nur fuer Neue; Paarungs-Karte immer wenn aktiv; Drucker-Buchung erst nach L1 fertig. - Banner-System: ungelesene Lehrer-Notizen, offene Rueckfragen, eingegangene Paarungs-Anfragen. Check-In (V3 + E-021): - Modal beim ersten Cockpit-Aufruf eines Besuchstages. - "Ich arbeite weiter" als Default-Ein-Klick-Option. - Freitext optional. - POST /cockpit/check-in mit UNIQUE-Constraint pro Tag. Onboarding-Status (E-019): - /cockpit/lektion/<nr>/status (selbst-zertifiziert). - profil_lektion_status-Tabelle, ON CONFLICT-Upsert. Paarung (E-002): - profil_anfrage-Tabelle on-demand. - Anfrage stellen / annehmen / ablehnen / aufloesen. - Konflikt-Check (keine Doppel-Paarungen). - Banner im Cockpit des Adressaten. Lehrer-Dashboard (V5, docs/lehrer-dashboard.md): - /admin/dashboard mit 4 Sektionen (Wer ist heute hier / Wartet auf Review / Drucker-Status / Wer haengt fest) + Schnell-Zahlen + offene Rueckfragen. - "Notiz hinterlassen"-Quick-Action via lehrer_notiz-Tabelle. - Live-Drucker-Status kommt mit Etappe 5 (aktuell nur DB-Stand). Daten-Helper getrennt: - services/cockpit_status.py: Bundle fuer progressives Cockpit - services/dashboard_status.py: 4-Sektionen-Queries Vorgezogen aus Etappe 3: - /lektionen + /lektion/<nr> Minimal-Renderer mit Markdown - 3 Onboarding-Lektionen als Seeds (Platzhalter-Text fuer Markus) Smoke-Test bestanden: Login als neuer SuS -> Onboarding -> Check-In -> L1 fertig -> Paarung mit zweitem SuS -> Admin-Dashboard -> Lehrer-Notiz -> Banner im Cockpit.
This commit is contained in:
268
templates/cockpit.html
Normal file
268
templates/cockpit.html
Normal file
@@ -0,0 +1,268 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Cockpit — {{ vorname }}{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
{# ====== Header ====== #}
|
||||
<div class="section-header">
|
||||
<h1 style="display:flex; align-items:center; gap:0.5rem;">
|
||||
<span style="font-size: 2.2rem;">{{ tier_emoji(tier) }}</span>
|
||||
Hallo, {{ vorname }}!
|
||||
</h1>
|
||||
<a href="{{ url_for('profil.logout') }}" class="btn btn-secondary">Abmelden</a>
|
||||
</div>
|
||||
|
||||
{# ====== BANNER: Lehrer-Notizen (V5-Quick-Action) ====== #}
|
||||
{% for n in status.notizen %}
|
||||
<div class="card" style="background: #FEF9E7; border-left: 5px solid var(--warning); margin-bottom: 0.5rem;">
|
||||
<p style="margin: 0; color: #B7950B;">
|
||||
<strong>📌 Lehrer-Notiz:</strong> {{ n.text }}
|
||||
</p>
|
||||
<form method="post" action="{{ url_for('profil.notiz_gelesen', notiz_id=n.id) }}" style="margin-top: 0.5rem;">
|
||||
<button class="btn btn-secondary" style="padding: 0.2rem 0.6rem; font-size: 0.85rem;">verstanden</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# ====== BANNER: Offene Rueckfragen zu eigenen Projekten (V6) ====== #}
|
||||
{% for r in status.rueckfragen %}
|
||||
<div class="card" style="background: #FEF9E7; border-left: 5px solid var(--warning); margin-bottom: 0.5rem;">
|
||||
<p style="margin: 0; color: #B7950B;">
|
||||
<strong>❓ Rueckfrage zu „{{ r.projekt_titel }}":</strong> {{ r.text }}
|
||||
</p>
|
||||
<p style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-light);">
|
||||
Bessere das Projekt nach, dann melde es erneut zur Freigabe.
|
||||
</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# ====== BANNER: Eingegangene Paarungs-Anfragen ====== #}
|
||||
{% for a in status.offene_anfragen %}
|
||||
<div class="card" style="background: #EBF5FB; border-left: 5px solid var(--primary); margin-bottom: 0.5rem;">
|
||||
<p style="margin: 0;">
|
||||
<strong>{{ tier_emoji(a.von_tier) }} {{ a.von_vorname }}</strong> moechte mit dir
|
||||
zusammenarbeiten. Magst du?
|
||||
</p>
|
||||
<div style="margin-top: 0.5rem; display: flex; gap: 0.5rem;">
|
||||
<form method="post" action="{{ url_for('profil.paarung_anfrage_beantworten', anfrage_id=a.id, aktion='annehmen') }}">
|
||||
<button class="btn btn-primary" style="padding: 0.3rem 0.8rem;">Ja, gerne</button>
|
||||
</form>
|
||||
<form method="post" action="{{ url_for('profil.paarung_anfrage_beantworten', anfrage_id=a.id, aktion='ablehnen') }}">
|
||||
<button class="btn btn-secondary" style="padding: 0.3rem 0.8rem;">Nein, lieber nicht</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# ====== Check-In-Modal — wenn heute noch nichts gewaehlt wurde ====== #}
|
||||
{% if not status.check_in_heute %}
|
||||
<div class="card" style="border-top: 4px solid var(--primary);">
|
||||
<h2>Was machst du heute? 🎯</h2>
|
||||
<p style="color: var(--text-light); font-size: 0.9rem;">
|
||||
Damit Herb und Markus auf einen Blick sehen, woran du arbeitest.
|
||||
Ein Klick reicht — Freitext nur, wenn du willst.
|
||||
</p>
|
||||
<form method="post" action="{{ url_for('profil.check_in') }}" style="margin-top: 1rem;">
|
||||
<div class="check-in-optionen">
|
||||
{% set hat_projekte = status.aktive_projekte | length > 0 %}
|
||||
{% if hat_projekte %}
|
||||
<label class="ci-option">
|
||||
<input type="radio" name="modus" value="weiter_wie_bisher" checked>
|
||||
<span>Ich arbeite an „{{ status.aktive_projekte[0].titel }}" weiter</span>
|
||||
</label>
|
||||
{% endif %}
|
||||
<label class="ci-option">
|
||||
<input type="radio" name="modus" value="neues_projekt" {% if not hat_projekte %}checked{% endif %}>
|
||||
<span>Neues Projekt anfangen</span>
|
||||
</label>
|
||||
{% if status.ist_neu %}
|
||||
<label class="ci-option">
|
||||
<input type="radio" name="modus" value="onboarding">
|
||||
<span>Onboarding-Lektion machen</span>
|
||||
</label>
|
||||
{% endif %}
|
||||
<label class="ci-option">
|
||||
<input type="radio" name="modus" value="drucken">
|
||||
<span>Drucken / auf Drucker warten</span>
|
||||
</label>
|
||||
<label class="ci-option">
|
||||
<input type="radio" name="modus" value="helfen">
|
||||
<span>Jemandem helfen</span>
|
||||
</label>
|
||||
<label class="ci-option">
|
||||
<input type="radio" name="modus" value="sonstiges">
|
||||
<span>Sonstiges</span>
|
||||
</label>
|
||||
</div>
|
||||
<input type="text" name="freitext" placeholder="(optional) was genau …"
|
||||
style="width: 100%; padding: 0.5rem; margin-top: 0.6rem; border: 1px solid var(--border); border-radius: 4px;">
|
||||
<button class="btn btn-primary" style="margin-top: 0.6rem;">Los geht's</button>
|
||||
</form>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card" style="background: #EAFBF1; border-left: 4px solid var(--success);">
|
||||
<p style="margin: 0; font-size: 0.9rem;">
|
||||
<strong>Heute eingecheckt:</strong>
|
||||
{% if status.check_in_heute.modus == 'weiter_wie_bisher' %}Arbeite weiter
|
||||
{% elif status.check_in_heute.modus == 'neues_projekt' %}Neues Projekt
|
||||
{% elif status.check_in_heute.modus == 'onboarding' %}Onboarding
|
||||
{% elif status.check_in_heute.modus == 'drucken' %}Drucken
|
||||
{% elif status.check_in_heute.modus == 'helfen' %}Hilft anderen
|
||||
{% else %}{{ status.check_in_heute.modus }}{% endif %}
|
||||
{% if status.check_in_heute.freitext %} — „{{ status.check_in_heute.freitext }}"{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
|
||||
|
||||
{# ====== ONBOARDING-KARTE (V1: nur wenn nicht fertig) ====== #}
|
||||
{% if status.ist_neu %}
|
||||
<div class="card" style="grid-column: span 2; border-top: 4px solid var(--success);">
|
||||
<h2>Dein Onboarding-Pfad 🚀</h2>
|
||||
<p style="color: var(--text-light); margin-bottom: 1rem;">
|
||||
Drei Lektionen, damit du allein klarkommst. Du klickst selbst „fertig", wenn du soweit bist.
|
||||
</p>
|
||||
<div class="onboarding-liste">
|
||||
{% for l in status.onboarding.lektionen %}
|
||||
<div class="onb-zeile onb-{{ l.status }}{% if l.aktuell %} onb-aktuell{% endif %}">
|
||||
<span class="onb-icon">
|
||||
{% if l.status == 'fertig' %}✅
|
||||
{% elif l.status == 'laeuft' %}🟡
|
||||
{% else %}⚪{% endif %}
|
||||
</span>
|
||||
<span class="onb-titel">
|
||||
<strong>L{{ l.nummer }}</strong> — {{ l.titel }}
|
||||
</span>
|
||||
<span class="onb-aktion">
|
||||
{% if l.status != 'fertig' %}
|
||||
<a href="{{ url_for('oeffentlich.lektion_detail', nummer=l.nummer) }}"
|
||||
class="btn btn-secondary" style="padding: 0.2rem 0.6rem; font-size: 0.8rem;">
|
||||
ansehen
|
||||
</a>
|
||||
<form method="post" action="{{ url_for('profil.lektion_status_setzen', nummer=l.nummer) }}" style="display:inline;">
|
||||
{% if l.status == 'offen' %}
|
||||
<button name="status" value="laeuft" class="btn btn-secondary" style="padding: 0.2rem 0.6rem; font-size: 0.8rem;">starte</button>
|
||||
{% else %}
|
||||
<button name="status" value="fertig" class="btn btn-primary" style="padding: 0.2rem 0.6rem; font-size: 0.8rem;">fertig ✓</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
{% else %}
|
||||
<form method="post" action="{{ url_for('profil.lektion_status_setzen', nummer=l.nummer) }}" style="display:inline;">
|
||||
<button name="status" value="laeuft" class="btn btn-secondary" style="padding: 0.2rem 0.6rem; font-size: 0.75rem; opacity: 0.6;">nochmal</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if not status.darf_slots_buchen %}
|
||||
<p style="margin-top: 1rem; font-size: 0.85rem; color: var(--text-light);">
|
||||
ℹ️ Drucker reservieren kannst du, sobald <strong>L1 (Sicherheit)</strong> erledigt ist.
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ====== PROJEKT-KARTE (V1: nur wenn Projekte oder Onboarding fertig) ====== #}
|
||||
{% if status.hat_projekte or not status.ist_neu %}
|
||||
<div class="card">
|
||||
<h2>{% if status.paarung %}Euer Projekt{% else %}Dein Projekt{% endif %}</h2>
|
||||
{% if status.aktive_projekte %}
|
||||
{% for p in status.aktive_projekte %}
|
||||
<div style="margin-bottom: 0.8rem;">
|
||||
<strong>{{ p.titel }}</strong>
|
||||
{% if p.beschreibung_md %}
|
||||
<div style="margin-top: 0.3rem; font-size: 0.9rem;">{{ p.beschreibung_md|markdown }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p style="color: var(--text-light);">
|
||||
Du hast noch kein laufendes Projekt.
|
||||
</p>
|
||||
<p style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-light);">
|
||||
<em>Projekt-Anlage kommt mit Etappe 6.</em>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ====== PAARUNG / TEAM-KARTE — immer wenn Paarung aktiv, sonst nur fuer Erfahrene ====== #}
|
||||
{% if status.paarung or not status.ist_neu %}
|
||||
<div class="card">
|
||||
<h2>{% if status.paarung %}Dein Team{% else %}Allein arbeiten?{% endif %}</h2>
|
||||
{% if status.paarung %}
|
||||
<p style="font-size: 1.1rem;">
|
||||
Du arbeitest mit
|
||||
<strong>{{ tier_emoji(status.paarung.partner.tier) }} {{ status.paarung.partner.vorname }}</strong>
|
||||
zusammen seit {{ status.paarung.gebildet_am[:10] }}.
|
||||
</p>
|
||||
<form method="post" action="{{ url_for('profil.paarung_aufloesen') }}"
|
||||
onsubmit="return confirm('Paarung wirklich aufloesen?')"
|
||||
style="margin-top: 0.8rem;">
|
||||
<button class="btn btn-secondary" style="font-size: 0.85rem;">Paarung aufloesen</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<p style="color: var(--text-light); margin-bottom: 0.5rem;">
|
||||
Du kannst dich mit jemandem zusammenschliessen — frag im Cockpit-Untermenue.
|
||||
</p>
|
||||
{% if andere_profile %}
|
||||
<details>
|
||||
<summary style="cursor:pointer; color: var(--primary);">Anfrage stellen</summary>
|
||||
<div id="paarung-suche" style="margin-top: 0.5rem;">
|
||||
{% for andere in andere_profile %}
|
||||
<form method="post" action="{{ url_for('profil.paarung_anfragen', andere_profil_id=andere.id) }}"
|
||||
style="display: inline-block; margin: 0.2rem;">
|
||||
<button class="btn btn-secondary" style="padding: 0.3rem 0.6rem; font-size: 0.85rem;">
|
||||
{{ tier_emoji(andere.tier) }} {{ andere.vorname }}
|
||||
</button>
|
||||
</form>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</details>
|
||||
{% else %}
|
||||
<p style="font-size: 0.85rem; color: var(--text-light); margin-top: 0.5rem;">
|
||||
<em>Noch niemand sonst in der AG.</em>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ====== DRUCKER-/SLOT-KARTE (V1: nur wenn L1 fertig) ====== #}
|
||||
{% if status.darf_slots_buchen %}
|
||||
<div class="card" style="grid-column: span 2; opacity: 0.7;">
|
||||
<h2>🖨️ Drucker reservieren</h2>
|
||||
<p style="color: var(--text-light);">
|
||||
Slot-System kommt mit <em>Etappe 7</em>. Bis dahin: sprich dich vor Ort ab.
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<style>
|
||||
.check-in-optionen { display: flex; flex-direction: column; gap: 0.4rem; }
|
||||
.ci-option {
|
||||
display: flex; gap: 0.6rem; align-items: center;
|
||||
padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.ci-option:hover { background: #F2F3F4; }
|
||||
.ci-option input[type=radio] { margin: 0; }
|
||||
|
||||
.onboarding-liste { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.onb-zeile {
|
||||
display: flex; gap: 0.7rem; align-items: center;
|
||||
padding: 0.5rem 0.7rem; border-radius: 6px;
|
||||
background: #F2F3F4;
|
||||
}
|
||||
.onb-zeile.onb-fertig { background: #EAFBF1; opacity: 0.8; }
|
||||
.onb-zeile.onb-aktuell { background: #EBF5FB; border-left: 4px solid var(--primary); }
|
||||
.onb-icon { font-size: 1.2rem; }
|
||||
.onb-titel { flex: 1; }
|
||||
.onb-aktion { display: flex; gap: 0.3rem; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user