82 lines
3.1 KiB
Twig
82 lines
3.1 KiB
Twig
{% extends 'layout/base.html.twig' %}
|
||
|
||
{% block title %}Mahlzeiten · svc-essensplanung{% endblock %}
|
||
|
||
{% block body %}
|
||
<div class="card">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>Mahlzeiten</h1>
|
||
<div class="subtitle">Planungsliste – per Drag & Drop sortieren</div>
|
||
</div>
|
||
<div class="actions">
|
||
<a class="btn" href="{{ path('mahlzeiten_neu') }}">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
|
||
<path d="M12 5v14M5 12h14"/>
|
||
</svg>
|
||
Neue Mahlzeit
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{% if total == 0 %}
|
||
<p class="empty">Noch keine Mahlzeiten in der Planung.</p>
|
||
{% else %}
|
||
<ul class="list sortierbar">
|
||
{% for m in mahlzeiten %}
|
||
{{ include('mahlzeiten/_mahlzeit.html.twig', { m: m, sortierbar: true }) }}
|
||
{% endfor %}
|
||
</ul>
|
||
{% endif %}
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block javascripts %}
|
||
<script src="{{ asset('js/sortable.min.js') }}"></script>
|
||
<script>
|
||
(function () {
|
||
const liste = document.querySelector('ul.sortierbar');
|
||
if (!liste) { return; }
|
||
const url = '{{ path("mahlzeiten_reorder") }}';
|
||
|
||
function speichern() {
|
||
const ids = Array.prototype.map.call(
|
||
liste.querySelectorAll('li[data-id]'),
|
||
function (li) { return Number(li.getAttribute('data-id')); }
|
||
);
|
||
fetch(url, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ ids: ids }),
|
||
}).then(function (antwort) {
|
||
if (!antwort.ok) { window.location.reload(); }
|
||
}).catch(function () { window.location.reload(); });
|
||
}
|
||
|
||
// Auf/Ab-Buttons (mobil): Element mit Nachbar tauschen, dann speichern.
|
||
liste.addEventListener('click', function (ereignis) {
|
||
const knopf = ereignis.target.closest('.updown-btn');
|
||
if (!knopf) { return; }
|
||
const li = knopf.closest('li[data-id]');
|
||
if (!li) { return; }
|
||
const ziel = knopf.getAttribute('data-dir') === '1'
|
||
? li.nextElementSibling
|
||
: li.previousElementSibling;
|
||
if (!ziel || !ziel.matches('li[data-id]')) { return; }
|
||
if (knopf.getAttribute('data-dir') === '1') { ziel.after(li); } else { ziel.before(li); }
|
||
speichern();
|
||
});
|
||
|
||
// Drag & Drop (Desktop)
|
||
if (typeof Sortable !== 'undefined') {
|
||
Sortable.create(liste, {
|
||
handle: '.drag-handle',
|
||
animation: 150,
|
||
ghostClass: 'item-drag',
|
||
onEnd: speichern,
|
||
});
|
||
}
|
||
})();
|
||
</script>
|
||
{% endblock %}
|