Klassenloses CSS-Framework (self-hosted unter static/, kein CDN), passt zum bestehenden Ansatz ohne JS-Build-Schritt. Bringt automatisches Dark/Light-Mode (prefers-color-scheme) und Responsivität ohne Zusatzaufwand. Templates auf Picos semantische Konventionen umgestellt (label/input-Paare, article für die Login-Karte, figure um Tabellen für horizontales Scrollen). Eigene CSS-Regeln auf die zwei Farb-Utility- Klassen (state-present/state-absent) reduziert, Rest kommt von Pico. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
55 lines
2.4 KiB
HTML
55 lines
2.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Auftragskatalog {{ device.hostname or device.device_fingerprint }} — Tuxflotte{% endblock %}
|
|
{% block content %}
|
|
<p><a href="/geraete">← Geräteliste</a></p>
|
|
<h2>Auftragskatalog: {{ device.hostname or device.device_fingerprint }}</h2>
|
|
|
|
{% if fehler %}
|
|
<p><mark>{{ fehler }}</mark></p>
|
|
{% else %}
|
|
{% for kategorie_name, eintraege in kategorien.items() %}
|
|
<section>
|
|
<h3>{{ kategorie_name }}</h3>
|
|
<figure>
|
|
<table>
|
|
<tbody>
|
|
{% for eintrag in eintraege %}
|
|
<tr>
|
|
<td>
|
|
<strong>{{ eintrag.name }}</strong>
|
|
{% if eintrag.description %}<br><small>{{ eintrag.description }}</small>{% endif %}
|
|
</td>
|
|
<td class="state-{{ eintrag.state }}">
|
|
{{ "ausgewählt" if eintrag.state == "present" else "nicht ausgewählt" }}
|
|
</td>
|
|
<td>
|
|
{% if eintrag.state == "present" %}
|
|
<form method="post" action="/geraete/{{ device.id }}/auftragskatalog/{{ eintrag.merkmal }}/deselect">
|
|
<button type="submit" class="secondary outline">Abwählen</button>
|
|
</form>
|
|
{% else %}
|
|
<form method="post" action="/geraete/{{ device.id }}/auftragskatalog/{{ eintrag.merkmal }}/select">
|
|
{% if optionen_felder.get(eintrag.merkmal) %}
|
|
<div class="optionen">
|
|
{% for feld in optionen_felder[eintrag.merkmal] %}
|
|
<label>
|
|
<input type="checkbox" name="optionen.{{ feld.key }}">
|
|
{{ feld.label }}
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
<button type="submit">Auswählen</button>
|
|
</form>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</figure>
|
|
</section>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endblock %}
|