92 lines
4.7 KiB
HTML
92 lines
4.7 KiB
HTML
<!-- Monthly Sessions Calendar -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
|
|
<!-- Calendar header: month navigation -->
|
|
<div class="px-5 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
|
<button hx-get="/api/projects/{{ project_id }}/sessions-calendar?month={{ prev_month }}&year={{ prev_year }}"
|
|
hx-target="#sessions-calendar"
|
|
hx-swap="innerHTML"
|
|
class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors text-gray-500 dark:text-gray-400"
|
|
title="Previous month">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ month_name }} {{ year }}</h3>
|
|
|
|
<button hx-get="/api/projects/{{ project_id }}/sessions-calendar?month={{ next_month }}&year={{ next_year }}"
|
|
hx-target="#sessions-calendar"
|
|
hx-swap="innerHTML"
|
|
class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors text-gray-500 dark:text-gray-400"
|
|
title="Next month">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Legend -->
|
|
{% if legend %}
|
|
<div class="px-5 py-2 border-b border-gray-100 dark:border-gray-700 flex flex-wrap gap-3">
|
|
{% for loc in legend %}
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
|
|
<span class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: {{ loc.color }}"></span>
|
|
<span>{{ loc.name }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Day-of-week headers -->
|
|
<div class="grid grid-cols-7 border-b border-gray-100 dark:border-gray-700">
|
|
{% for day_name in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] %}
|
|
<div class="py-2 text-center text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wide
|
|
{% if loop.index == 1 or loop.index == 7 %}text-amber-500 dark:text-amber-400{% endif %}">
|
|
{{ day_name }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Calendar grid -->
|
|
{% for week in weeks %}
|
|
<div class="grid grid-cols-7 {% if not loop.last %}border-b border-gray-100 dark:border-gray-700{% endif %}">
|
|
{% for day in week %}
|
|
<div class="min-h-[72px] p-1.5 {% if not loop.last %}border-r border-gray-100 dark:border-gray-700{% endif %}
|
|
{% if not day.in_month %}bg-gray-50 dark:bg-slate-800/50{% else %}bg-white dark:bg-slate-800{% endif %}
|
|
{% if day.is_today %}ring-1 ring-inset ring-seismo-orange{% endif %}">
|
|
|
|
<!-- Date number -->
|
|
<div class="text-right mb-1">
|
|
<span class="text-xs {% if day.is_today %}font-bold text-seismo-orange{% elif day.in_month %}text-gray-700 dark:text-gray-300{% else %}text-gray-300 dark:text-gray-600{% endif %}">
|
|
{{ day.date.day }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Session dots/chips -->
|
|
{% if day.sessions %}
|
|
<div class="space-y-0.5">
|
|
{% for s in day.sessions[:4] %}
|
|
<a href="/api/projects/{{ project_id }}/sessions/{{ s.session_id }}/detail"
|
|
class="flex items-center gap-1 px-1 py-0.5 rounded text-xs truncate hover:opacity-80 transition-opacity"
|
|
style="background-color: {{ s.color }}22; border-left: 2px solid {{ s.color }};"
|
|
title="{{ s.label }}">
|
|
<span class="truncate text-gray-700 dark:text-gray-300" style="color: {{ s.color }}; font-size: 0.65rem; line-height: 1.2;">
|
|
{{ s.location_name }}
|
|
{% if s.period_type %}
|
|
<span class="opacity-60">{{ '☀' if 'day' in s.period_type else '☾' }}</span>
|
|
{% endif %}
|
|
</span>
|
|
</a>
|
|
{% endfor %}
|
|
{% if day.sessions|length > 4 %}
|
|
<div class="text-center text-xs text-gray-400 dark:text-gray-500">+{{ day.sessions|length - 4 }} more</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|