81 lines
4.5 KiB
Twig
81 lines
4.5 KiB
Twig
{# Server-rendered month grid. No calendar library: prev/next and day selection are plain hx-get
|
||
requests whose response carries nothing but out-of-band blocks, hence hx-swap="none". #}
|
||
{% set weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] %}
|
||
{# Every link keeps the board's span, so changing the day never silently widens it back to all-day. #}
|
||
{% set time_params = selected_time.allDay ? {} : { from: selected_time.start, to: selected_time.end } %}
|
||
|
||
<div class="rounded-md border border-gray-200 p-4">
|
||
<div class="flex items-center justify-between pb-4">
|
||
<button type="button"
|
||
class="p-1 rounded-md hover:bg-gray-100"
|
||
aria-label="Voriger Monat"
|
||
hx-get="{{ path('app_board_day', { type: type.value, date: month_start|date_modify('-1 month')|date('Y-m-d') }|merge(time_params)) }}"
|
||
hx-swap="none">
|
||
{{ ux_icon('lucide:chevron-left', { class: 'w-5 h-5' }) }}
|
||
</button>
|
||
<div class="font-bold">
|
||
{{ month_start|format_datetime(pattern: 'LLLL y') }}
|
||
</div>
|
||
<button type="button"
|
||
class="p-1 rounded-md hover:bg-gray-100"
|
||
aria-label="Nächster Monat"
|
||
hx-get="{{ path('app_board_day', { type: type.value, date: month_start|date_modify('+1 month')|date('Y-m-d') }|merge(time_params)) }}"
|
||
hx-swap="none">
|
||
{{ ux_icon('lucide:chevron-right', { class: 'w-5 h-5' }) }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-7 gap-1 text-center text-xs text-gray-500 pb-1">
|
||
{% for weekday in weekdays %}<div>{{ weekday }}</div>{% endfor %}
|
||
</div>
|
||
|
||
<div class="grid grid-cols-7 gap-1">
|
||
{% for week in weeks %}
|
||
{% for day in week %}
|
||
{% set classes = 'relative h-12 rounded-md border text-sm flex flex-col items-center justify-center' %}
|
||
{% if day.is_selected %}
|
||
{% set classes = classes ~ ' border-primary bg-primary text-white font-bold' %}
|
||
{% elseif not day.in_month %}
|
||
{% set classes = classes ~ ' border-transparent text-gray-300' %}
|
||
{% elseif day.is_past %}
|
||
{# Dashed rather than the weekend's grey fill: the two states must not be
|
||
confusable, and the day stays clickable -- looking back at a past plan is
|
||
legitimate, only booking it is not. #}
|
||
{% set classes = classes ~ ' border-dashed border-gray-200 text-gray-400' %}
|
||
{% elseif day.is_weekend %}
|
||
{% set classes = classes ~ ' border-transparent bg-gray-50 text-gray-400' %}
|
||
{% else %}
|
||
{% set classes = classes ~ ' border-gray-200 hover:bg-gray-50' %}
|
||
{% endif %}
|
||
{% if day.is_today and not day.is_selected %}
|
||
{% set classes = classes ~ ' ring-1 ring-primary' %}
|
||
{% endif %}
|
||
|
||
<button type="button"
|
||
class="{{ classes }}"
|
||
aria-pressed="{{ day.is_selected ? 'true' : 'false' }}"
|
||
{%- if day.is_past %} aria-disabled="true" title="Vergangener Tag – keine Buchung mehr möglich"{% endif %}
|
||
hx-get="{{ path('app_board_day', { type: type.value, date: day.date|date('Y-m-d') }|merge(time_params)) }}"
|
||
hx-swap="none">
|
||
<span>{{ day.date|date('j') }}</span>
|
||
{# Team view: the occupancy count is the whole point of showing the month. #}
|
||
<span class="text-[10px] {{ day.is_selected ? 'text-white/80' : (day.is_past ? 'text-gray-300' : 'text-gray-400') }}">
|
||
{{ day.count > 0 ? day.count : '' }}
|
||
</span>
|
||
{% if day.mine is not empty %}
|
||
<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full {{ day.is_selected ? 'bg-white' : (day.is_past ? 'bg-gray-300' : 'bg-primary') }}"></span>
|
||
{% endif %}
|
||
</button>
|
||
{% endfor %}
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="pt-4 text-xs text-gray-500 space-y-1">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span> eigene Buchung
|
||
</div>
|
||
<div>gestrichelt = vergangen, nicht mehr buchbar</div>
|
||
<div>Zahl = belegte Plätze{{ selected_time.allDay ? ' an dem Tag' : ' zwischen ' ~ selected_time.start ~ ' und ' ~ selected_time.end }}</div>
|
||
</div>
|
||
</div>
|