60 lines
2.4 KiB
Twig
60 lines
2.4 KiB
Twig
{% extends 'layout/base.html.twig' %}
|
||
|
||
{% block title %}Mahlzeiten · svc-essensplanung{% endblock %}
|
||
|
||
{% block body %}
|
||
<div class="card">
|
||
<div class="row-between">
|
||
<div>
|
||
<h1 style="margin: 0;">Mahlzeiten</h1>
|
||
<div class="muted" style="margin-top: 0.2rem;">Planungsliste – per Drag & Drop sortieren</div>
|
||
</div>
|
||
<div class="actions">
|
||
<a class="btn" href="{{ path('mahlzeiten_neu') }}">+ Neue Mahlzeit</a>
|
||
<a class="btn btn-link" href="{{ path('mahlzeiten_inspiration') }}">Inspiration</a>
|
||
<a class="btn btn-link" href="{{ path('mahlzeiten_tage') }}">Tagesansicht</a>
|
||
<a class="btn btn-link" href="{{ path('mahlzeiten_archiv') }}">Archiv</a>
|
||
</div>
|
||
</div>
|
||
|
||
{% if total == 0 %}
|
||
<p class="muted" style="margin-top: 1rem;">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 || typeof Sortable === 'undefined') { return; }
|
||
const url = '{{ path("mahlzeiten_reorder") }}';
|
||
Sortable.create(liste, {
|
||
handle: '.drag-handle',
|
||
animation: 150,
|
||
ghostClass: 'item-drag',
|
||
onEnd: function () {
|
||
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(); });
|
||
},
|
||
});
|
||
})();
|
||
</script>
|
||
{% endblock %}
|