101 lines
5.3 KiB
Twig
101 lines
5.3 KiB
Twig
{#
|
|
Mahlzeiten-Partial (eine Zeile). Wird in Planungsliste/Tagesansicht/Archiv
|
|
eingebunden und als htmx-Fragment von den CheckOff/Uncheck-Endpunkten
|
|
zurückgeliefert (htmx ersetzt per hx-swap="outerHTML" genau diese <li>).
|
|
|
|
@param MahlzeitResponse m
|
|
@param bool sortierbar optional: zeigt Drag-Handle + Auf/Ab-Buttons + data-id (Planungsliste)
|
|
#}
|
|
<li class="item {{ m.status.value == 'gegessen' ? 'item-gegessen' : '' }}" id="mahlzeit-{{ m.id }}"
|
|
{% if sortierbar is defined and sortierbar %}data-id="{{ m.id }}"{% endif %}>
|
|
<div class="item-main">
|
|
{% if sortierbar is defined and sortierbar %}
|
|
<span class="drag-handle" title="Ziehen zum Sortieren" aria-hidden="true">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
|
|
<circle cx="5.5" cy="3" r="1.4"/><circle cx="10.5" cy="3" r="1.4"/>
|
|
<circle cx="5.5" cy="8" r="1.4"/><circle cx="10.5" cy="8" r="1.4"/>
|
|
<circle cx="5.5" cy="13" r="1.4"/><circle cx="10.5" cy="13" r="1.4"/>
|
|
</svg>
|
|
</span>
|
|
<span class="updown">
|
|
<button type="button" class="updown-btn" data-dir="-1" aria-label="Nach oben verschieben">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="m6 15 6-6 6 6"/>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="updown-btn" data-dir="1" aria-label="Nach unten verschieben">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="m6 9 6 6 6-6"/>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
{% endif %}
|
|
<div class="item-name">
|
|
<strong>{{ m.name }}</strong>
|
|
{% if m.notiz != '' %}
|
|
<div class="notiz">{{ m.notiz }}</div>
|
|
{% endif %}
|
|
{% if m.wochentage|length > 0 %}
|
|
<div class="tags">
|
|
{% for tag in m.wochentage %}
|
|
<span class="tag tag-{{ tag.value }}">{{ tag.name }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
<span class="status {{ m.status.value == 'gegessen' ? 'status-gegessen' : '' }}">
|
|
{{ m.status.value == 'gegessen' ? 'gegessen' : 'geplant' }}
|
|
{% if m.status.value == 'gegessen' and m.gegessenAm %}
|
|
· {{ m.gegessenAm|date('d.m.Y H:i') }}
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="action-haupt">
|
|
{% if m.status.value == 'geplant' %}
|
|
<button type="button" class="btn"
|
|
hx-post="{{ path('mahlzeiten_checkoff', { id: m.id }) }}"
|
|
hx-target="#mahlzeit-{{ m.id }}"
|
|
hx-swap="outerHTML">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M4.5 12.5 9.5 17.5 19.5 6.5"/>
|
|
</svg>
|
|
Abhaken
|
|
</button>
|
|
{% else %}
|
|
<button type="button" class="btn btn-link"
|
|
hx-post="{{ path('mahlzeiten_uncheck', { id: m.id }) }}"
|
|
hx-target="#mahlzeit-{{ m.id }}"
|
|
hx-swap="outerHTML">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M9 14 4 9l5-5"/>
|
|
<path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>
|
|
</svg>
|
|
Aufheben
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
<div class="action-neben">
|
|
<a class="btn btn-link" href="{{ path('mahlzeiten_bearbeiten', { id: m.id }) }}">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 20h9"/>
|
|
<path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>
|
|
</svg>
|
|
Bearbeiten
|
|
</a>
|
|
<form method="post" action="{{ path('mahlzeiten_loeschen', { id: m.id }) }}"
|
|
onsubmit="return confirm('Mahlzeit „{{ m.name }}“ wirklich löschen?');">
|
|
<button type="submit" class="btn btn-danger">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M3 6h18"/>
|
|
<path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
|
|
<path d="M10 11v6M14 11v6"/>
|
|
</svg>
|
|
Löschen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</li>
|