Komplette visuelle Umstellung nach dem generierten Style-Guide
(3d-lehrstun-de-v1.0.0). 3D-Druck-AG bekommt eine eigene Marke,
getrennt vom Teal der arduino.lehrstun.de-Schwester.
Farben: Teal #00979D -> Indigo #5B6EAE, warmes Off-White Surface
#F0EEE9 statt Kuehlweiss, Lavendel-Akzent #9B8EC4.
Fonts: Raleway (Headings), Lato (Body), Inconsolata (Mono) — lokal
gehostet in static/fonts/ (DSGVO-konform, kein Google-CDN),
via @font-face + unicode-range (latin + latin-ext).
Form: Radius/Schatten/Spacing als Tokens (--radius-*, --shadow-*).
Technik:
- base.html :root: neue --color-*/--font-*/--radius-* Tokens,
alte Variablennamen (--primary etc.) als Aliase -> alle 33
Templates ziehen sofort mit, kein Template-Rewrite noetig.
- Semantische Banner-Tokens (--info/warn/success/error-bg+text+border)
loesen ~130 Hardcoded-Pastelle ab (per sed gemappt).
- Komponenten (Card, Button, Badge, Flash, Table, Code) auf Tokens.
Alle 13 Hauptseiten gegengeprueft (HTTP 200, keine Render-Fehler).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
164 lines
6.8 KiB
HTML
164 lines
6.8 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Drucker{% endblock %}
|
||
{% block content %}
|
||
|
||
<style>
|
||
.druckerkachel-gross {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
padding: 1.2rem;
|
||
}
|
||
.druckerkachel-gross h2 { margin: 0; color: var(--primary-dark); }
|
||
.druckerkachel-gross .modell { font-size: 0.85rem; color: var(--text-light); }
|
||
.druckerkachel-gross .status-zeile { font-size: 1rem; font-weight: 600; margin-top: 0.3rem; }
|
||
.druckerkachel-gross .progress {
|
||
font-size: 0.85rem; color: var(--text-light); margin-top: 0.2rem;
|
||
}
|
||
.druckerkachel-gross .sperre-banner {
|
||
background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border);
|
||
border-radius: 6px; padding: 0.6rem 0.8rem; font-size: 0.9rem;
|
||
}
|
||
.druckerkachel-gross .api-hinweis {
|
||
font-size: 0.8rem; color: var(--text-light); font-style: italic;
|
||
}
|
||
.druckerkachel-gross .links {
|
||
display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.5rem;
|
||
}
|
||
.druckerkachel-gross .links .btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
|
||
.druckerkachel-gross.gesperrt { border-left: 4px solid var(--danger); }
|
||
</style>
|
||
|
||
<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
|
||
<h1>Drucker</h1>
|
||
<a href="{{ url_for('profil.slots') }}" class="btn btn-secondary">Meine Reservierungen</a>
|
||
</div>
|
||
<p style="color: var(--text-light);">
|
||
Aktueller Stand unserer 4 Bambu-Lab-Drucker. <strong>Kein Drucken ohne Reservierung</strong> — es
|
||
muss immer klar sein, wer gerade an welchem Drucker druckt.
|
||
</p>
|
||
|
||
{% if not darf_reservieren %}
|
||
<div class="card" style="background:var(--warn-bg); border-left: 4px solid var(--warning);">
|
||
<strong>Reservierung noch nicht freigeschaltet.</strong>
|
||
Du kannst die Drucker bisher nur ansehen. Lass dich beim Lehrer freischalten,
|
||
dann kannst du selbst Slots reservieren.
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% set gesperrte = drucker_liste | selectattr('freigegeben', 'equalto', 0) | list %}
|
||
{% if gesperrte %}
|
||
<div class="card" style="background:var(--error-bg); border-left: 4px solid var(--danger);">
|
||
<strong>⚠ {{ gesperrte|length }} Drucker derzeit gesperrt:</strong>
|
||
{{ gesperrte | map(attribute='name') | join(', ') }}
|
||
— Details auf den jeweiligen Kacheln.
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
|
||
{% for d in drucker_liste %}
|
||
<div class="card druckerkachel-gross drucker-{{ d.status or 'idle' }} {% if not d.freigegeben %}gesperrt{% endif %}">
|
||
<div>
|
||
<h2>{{ d.name }}</h2>
|
||
<div class="modell">
|
||
{{ d.modell }}{% if not d.geschlossenes_gehaeuse %} · <span style="color: var(--danger);">offen</span>{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
{# Sperre-Banner hat Vorrang vor allem anderen #}
|
||
{% if not d.freigegeben %}
|
||
<div class="sperre-banner">
|
||
<strong>Gesperrt</strong>{% if d.gesperrt_grund %} — {{ d.gesperrt_grund }}{% endif %}
|
||
<div style="font-size: 0.8rem; margin-top: 0.3rem;">Reservierung derzeit nicht moeglich.</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{# Status-Zeile #}
|
||
<div class="status-zeile">
|
||
{% if d.status == 'printing' %}🟢 druckt
|
||
{% elif d.status == 'idle' %}⚪ frei
|
||
{% elif d.status == 'paused' %}🟡 pausiert
|
||
{% elif d.status == 'finished' %}✅ fertig — Druck abholen
|
||
{% elif d.status == 'failed' %}🔴 Fehler
|
||
{% elif d.status == 'offline' %}⚫ offline
|
||
{% else %}⚪ kein Status
|
||
{% endif %}
|
||
</div>
|
||
|
||
{# Job-Details wenn aktiv #}
|
||
{% if d.job_name %}<div class="progress">{{ d.job_name }}</div>{% endif %}
|
||
{% if d.progress_pct %}
|
||
<div class="progress">
|
||
{{ d.progress_pct|round|int }} %{% if d.restzeit_min %} · noch {{ d.restzeit_min }} min{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
{% if d.fehlermeldung %}
|
||
<div style="color: var(--danger); font-size: 0.9rem;">{{ d.fehlermeldung }}</div>
|
||
{% endif %}
|
||
|
||
{# Notiz vom Lehrer (auch wenn nicht gesperrt) #}
|
||
{% if d.notiz and d.freigegeben %}
|
||
<div style="font-size: 0.85rem; color: var(--text-light);">ℹ️ {{ d.notiz }}</div>
|
||
{% endif %}
|
||
|
||
{# Hinweis wenn noch keine API-Daten #}
|
||
{% if not d.status %}
|
||
<div class="api-hinweis">
|
||
(Live-Status via Bambu-API kommt mit Etappe 5. Bis dahin pflegt der Lehrer den Status manuell.)
|
||
</div>
|
||
{% elif d.manuell_gesetzt %}
|
||
<div class="api-hinweis">vom Lehrer gesetzt</div>
|
||
{% endif %}
|
||
|
||
{# Belegung: aktuell + naechste 3 Slots #}
|
||
<div style="background:var(--surface-muted); border-radius: 6px; padding: 0.6rem 0.8rem; font-size: 0.85rem;">
|
||
{% if d.belegung %}
|
||
<div><strong>🔖 Jetzt belegt:</strong>
|
||
{{ tier_emoji(d.belegung.tier or '') }} {{ d.belegung.vorname or '—' }}
|
||
bis {{ d.belegung.ende_zeit|iso_format('%H:%M') }} Uhr
|
||
</div>
|
||
{% else %}
|
||
<div><strong>🔖 Aktuell frei.</strong></div>
|
||
{% endif %}
|
||
{% if d.kommend %}
|
||
<div style="margin-top: 0.3rem; color: var(--text-light);">
|
||
Naechste:
|
||
{% for s in d.kommend %}
|
||
{{ s.start_zeit|iso_format('%d.%m. %H:%M') }}–{{ s.ende_zeit|iso_format('%H:%M') }}
|
||
({{ s.vorname or '—' }}){% if not loop.last %}, {% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{# Reservieren-Button #}
|
||
{% if d.freigegeben and darf_reservieren %}
|
||
<a href="{{ url_for('profil.slot_neu', drucker_id=d.id) }}" class="btn btn-primary"
|
||
style="text-align: center;">+ Diesen Drucker reservieren</a>
|
||
{% elif d.freigegeben and not darf_reservieren %}
|
||
<div style="font-size: 0.8rem; color: var(--text-light); font-style: italic;">
|
||
Reservierung ist fuer dich noch nicht freigeschaltet.
|
||
</div>
|
||
{% endif %}
|
||
|
||
{# Manual + Troubleshooting #}
|
||
<div class="links">
|
||
{% if d.manual %}
|
||
<a href="{{ d.manual }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">📖 Manual ↗</a>
|
||
{% endif %}
|
||
{% if d.troubleshooting %}
|
||
<a href="{{ d.troubleshooting }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">🔧 Hilfe ↗</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
{% if not drucker_liste %}
|
||
<div class="card">
|
||
<p style="color: var(--text-light);">Noch keine Drucker eingerichtet.</p>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% endblock %}
|