Add Jinja2 web UI with Bootstrap 5 dark theme

- app/templates/: base layout with sidebar nav + 6 pages
  (dashboard, printers, jobs, filaments, todos, pricing)
- app/routers/ui.py: HTML routes querying the DB live
- API routes moved to /api/* prefix
- requirements: jinja2, python-multipart

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Martin Hohenberg
2026-06-18 21:26:23 +02:00
parent f4e991e5dc
commit ee0b1b39e9
10 changed files with 473 additions and 9 deletions

52
app/templates/jobs.html Normal file
View File

@@ -0,0 +1,52 @@
{% extends "base.html" %}
{% block title %}Jobs — POPS{% endblock %}
{% block content %}
<h5 class="text-white mb-4">Print Jobs</h5>
<div class="card">
{% if jobs %}
<table class="table table-dark table-hover mb-0 align-middle">
<thead>
<tr class="text-secondary small">
<th class="fw-normal">Name</th>
<th class="fw-normal">Printer</th>
<th class="fw-normal">Filament</th>
<th class="fw-normal">Status</th>
<th class="fw-normal">Duration</th>
<th class="fw-normal text-end">Cost</th>
<th class="fw-normal text-end">Created</th>
</tr>
</thead>
<tbody>
{% for j in jobs %}
<tr>
<td class="fw-medium text-white">{{ j.name }}</td>
<td class="text-secondary small">{{ j.printer.name if j.printer else '—' }}</td>
<td class="text-secondary small">
{% if j.filament %}{{ j.filament.material.value }} {{ j.filament.color or '' }}{% else %}—{% endif %}
</td>
<td>
{% set s = j.status.value %}
{% if s == 'printing' %}<span class="badge bg-primary">printing</span>
{% elif s == 'done' %}<span class="badge bg-success">done</span>
{% elif s == 'failed' %}<span class="badge bg-danger">failed</span>
{% elif s == 'cancelled' %}<span class="badge bg-warning text-dark">cancelled</span>
{% else %}<span class="badge bg-secondary">queued</span>
{% endif %}
</td>
<td class="text-secondary small">
{% if j.duration_minutes %}{{ j.duration_minutes }} min{% else %}—{% endif %}
</td>
<td class="text-secondary small text-end">
{% if j.cost_eur %}€ {{ "%.2f"|format(j.cost_eur) }}{% else %}—{% endif %}
</td>
<td class="text-secondary small text-end">{{ j.created_at.strftime('%d.%m %H:%M') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="card-body text-secondary">No jobs yet.</div>
{% endif %}
</div>
{% endblock %}