futtern/templates/food_order/show.html.twig
2024-02-12 22:03:17 +01:00

107 lines
3.2 KiB
Twig

{% extends 'base.html.twig' %}
{% block title %}FoodOrder{% endblock %}
{% block body %}
<h1>FoodOrder</h1>
<table class="table">
<tbody>
<tr>
<th>StartedByName</th>
<td>{{ food_order.startedBy }}</td>
</tr>
<tr>
<th>Id</th>
<td>{{ food_order.id }}</td>
</tr>
<tr>
<th>StartedAt</th>
<td>{{ food_order.startedAt ? food_order.startedAt|date('Y-m-d H:i:s') : '' }}</td>
</tr>
<tr>
<th>ClosedAt</th>
<td>
{% if food_order.closedAt is not null%}
{{ food_order.closedAt|date('Y-m-d H:i:s') }}
{% else %}
<a href="{{ path('app_foodorder_close', {id: food_order.id}) }}">close</a>
{% endif %}
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Name(s)</th>
<th>possible price</th>
<th>actions</th>
</tr>
</thead>
<tbody>
{% for lel in food_order.groupedOrderItems %}
<tr>
<td>
{{ lel.item.menuItem.aliases|map(i => i.name)|join(' / ') }}
</td>
<td>
{{ lel.item.menuItem.price|cents_to_eur }}
</td>
<td>
{{ lel.amount }} |
<a href="{{ path('app_foodorder_add_item', {foodOrder: food_order.id, menuItem: lel.item.menuItem.id}) }}">+1</a> |
<a href="{{ path('app_foodorder_remove_item', {foodOrder: food_order.id, orderItem: lel.item.id}) }}">-1</a> |
</td>
</tr>
{% endfor %}
</tbody>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Name(s)</th>
<th>possible price</th>
<th>actions</th>
</tr>
</thead>
{% for item in menu_items %}
<tr>
<td>
{{ item.menuItemAliases|map(i => i.name)|join(' / ') }}
</td>
<td>
{{ item.price|cents_to_eur }}
</td>
<td>
{% if food_order.closedAt is null %}
<a
href="#"
data-menuitem-id="{{ item.id }}"
>add</a>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
<script>
document.querySelectorAll('a[data-menuitem-id]').forEach((link) => {
link.addEventListener('click', (event) => {
// Prevent the default action of the link
event.preventDefault();
// Get the `data-menuitem-id` attribute of the clicked link
let menuItemId = link.getAttribute('data-menuitem-id');
// Select the corresponding dialog with the same `data-menuitem-id`. Assuming each dialog's id is the same as `data-menuitem-id`, please update the code to use proper id or class as needed.
let dialog = document.querySelector(`dialog[data-menuitem-id="${menuItemId}"]` );
// Open the dialog
dialog.showModal();
});
});
</script>
{% endblock %}