Artikel-Verwaltung und responsive Tiles

- Admin: Artikel löschen (min. 1 erforderlich)
- Admin: Neue Artikel hinzufügen
- Admin: Update-Logik für variable Artikelanzahl
- Kasse: Dynamische items/Session pro Produkt
- Kasse: CSS Grid Layout - alle Artikel fit auf einen Bildschirm
- Kasse: Leerzustand wenn keine Artikel

Made-with: Cursor
This commit is contained in:
2026-03-22 16:56:34 +01:00
parent ef36d63aa7
commit 5c8c4a947e
3 changed files with 212 additions and 112 deletions

View File

@@ -31,21 +31,26 @@
<th>Preis (€)</th>
<th>Icon/Emoji</th>
<th>Farbe (Bootstrap Klasse)</th>
<th></th>
</tr>
</thead>
<tbody>
{% for i in range(1, 7) %}
{% set prod = products[i] %}
{% if not products %}
<tr>
<td class="align-middle">{{ i }}</td>
<td><input type="text" class="form-control" name="name_{{ i }}" value="{{ prod['name'] }}"
<td colspan="6" class="text-muted text-center py-4">Keine Artikel. Füge unten einen neuen hinzu.</td>
</tr>
{% endif %}
{% for pos, prod in products|dictsort %}
<tr>
<td class="align-middle">{{ pos }}</td>
<td><input type="text" class="form-control" name="name_{{ pos }}" value="{{ prod['name'] }}"
required></td>
<td><input type="number" step="0.01" class="form-control" name="price_{{ i }}"
<td><input type="number" step="0.01" class="form-control" name="price_{{ pos }}"
value="{{ prod['price'] }}" required></td>
<td><input type="text" class="form-control" name="icon_{{ i }}" value="{{ prod['icon'] }}"
<td><input type="text" class="form-control" name="icon_{{ pos }}" value="{{ prod['icon'] }}"
required></td>
<td>
<select class="form-control" name="color_{{ i }}">
<select class="form-control" name="color_{{ pos }}">
<option value="btn-primary" {% if prod['color_class']=='btn-primary' %}selected{% endif
%}>Blau (Primary)</option>
<option value="btn-secondary" {% if prod['color_class']=='btn-secondary' %}selected{%
@@ -62,6 +67,12 @@
Schwarz (Dark)</option>
</select>
</td>
<td class="align-middle">
{% if products|length > 1 %}
<button type="submit" name="delete_{{ pos }}" value="1" class="btn btn-outline-danger btn-sm"
onclick="return confirm('Artikel wirklich löschen?');">Löschen</button>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
@@ -77,6 +88,44 @@
<button type="submit" name="action" value="save" class="btn btn-success">Speichern & Zur Kasse</button>
</div>
</form>
<form method="post" class="bg-white p-4 shadow-sm rounded mt-4">
<input type="hidden" name="action" value="add_product">
<h5 class="mb-3">Neuer Artikel hinzufügen</h5>
<div class="form-row align-items-end">
<div class="form-group col-md-3">
<label for="add_name">Name</label>
<input type="text" class="form-control" name="add_name" id="add_name" required
placeholder="z.B. 500g Brombeeren">
</div>
<div class="form-group col-md-2">
<label for="add_price">Preis (€)</label>
<input type="number" step="0.01" class="form-control" name="add_price" id="add_price" required
placeholder="4.50">
</div>
<div class="form-group col-md-1">
<label for="add_icon">Icon</label>
<input type="text" class="form-control" name="add_icon" id="add_icon" placeholder="🫐"
maxlength="4">
</div>
<div class="form-group col-md-2">
<label for="add_color">Farbe</label>
<select class="form-control" name="add_color" id="add_color">
<option value="btn-primary">Blau</option>
<option value="btn-secondary">Grau</option>
<option value="btn-success">Grün</option>
<option value="btn-danger">Rot</option>
<option value="btn-warning">Gelb</option>
<option value="btn-info">Hellblau</option>
<option value="btn-dark">Schwarz</option>
</select>
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary">Artikel hinzufügen</button>
</div>
</div>
</form>
<div class="mt-4 text-center text-muted pb-4">
<small>Made with ♥️, marmalade and zero knowledge in <a href="https://kiel-sailing-city.de/"
target="_blank">Kiel Strawberry City.</a><br>