Files
3d.lehrstun.de/templates/drucker.html
Hans Puettmann 8a55e175a2 Style Guide v1.0.0: Indigo-Palette + lokale Web-Fonts
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>
2026-06-04 12:52:14 +02:00

164 lines
6.8 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% 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 %}