serversdown/terra-view
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix: adds timeline bars to SLM calendar view, more conscise and legible.

Browse Source
This commit is contained in:
serversdown
2026-03-27 22:44:53 +00:00
parent 192e15f238
commit 27eeb0fae6
2 changed files with 145 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
templates/partials/projects/sessions_calendar.html
View File

@@ -1,7 +1,7 @@
<!-- Monthly Sessions Calendar -->
<!-- Monthly Sessions Calendar — Gantt Style -->
<div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
<!-- Calendar header: month navigation -->
<!-- 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"
@@ -12,9 +12,7 @@
<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"
@@ -26,23 +24,36 @@
</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>
<!-- Legend + key -->
<div class="px-5 py-2 border-b border-gray-100 dark:border-gray-700 flex flex-wrap items-center gap-x-5 gap-y-1.5">
{% if legend %}
<div class="flex flex-wrap gap-x-4 gap-y-1">
{% 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 %}
<!-- Bar key -->
<div class="flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500 ml-auto shrink-0">
<div class="flex items-center gap-1.5">
<div class="w-8 h-2 rounded-sm" style="background:rgba(100,100,100,0.25)"></div>
<span>Device on</span>
</div>
<div class="flex items-center gap-1.5">
<div class="w-8 h-2 rounded-sm bg-blue-500"></div>
<span>Effective window</span>
</div>
</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 %}">
<div class="py-2 text-center text-xs font-medium uppercase tracking-wide
{% if loop.index == 1 or loop.index == 7 %}text-amber-500 dark:text-amber-400{% else %}text-gray-400 dark:text-gray-500{% endif %}">
{{ day_name }}
</div>
{% endfor %}
@@ -52,40 +63,72 @@
{% 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 %}
<div class="min-h-[80px] 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">
<div class="text-right mb-1.5">
<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 -->
<!-- Gantt bars -->
{% if day.sessions %}
<div class="space-y-0.5">
{% for s in day.sessions[:4] %}
<div class="space-y-2">
{% for s in day.sessions %}
{% set tooltip %}{{ s.label }} · Device {{ s.dev_start_label }}–{{ s.dev_end_label }}{% if s.eff_start_label %} · Window {{ s.eff_start_label }}–{{ s.eff_end_label }}{% endif %}{% endset %}
<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>
class="block group"
title="{{ tooltip }}">
<!-- 24-hour timeline bar -->
<div class="relative w-full rounded-sm overflow-hidden" style="height:11px; background:rgba(128,128,128,0.08);">
<!-- Hour guide ticks at 6h, 12h, 18h -->
<div class="absolute top-0 bottom-0 w-px" style="left:25%; background:rgba(128,128,128,0.18)"></div>
<div class="absolute top-0 bottom-0 w-px" style="left:50%; background:rgba(128,128,128,0.28)"></div>
<div class="absolute top-0 bottom-0 w-px" style="left:75%; background:rgba(128,128,128,0.18)"></div>
<!-- Device on/off bar (dim) -->
<div class="absolute top-0 bottom-0 rounded-sm"
style="left:{{ s.dev_start_pct }}%; width:{{ s.dev_width_pct }}%; background-color:{{ s.color }}; opacity:0.28;">
</div>
<!-- Effective window (solid, slightly inset) -->
{% if s.eff_start_pct is not none %}
<div class="absolute rounded-sm group-hover:brightness-110 transition-all"
style="left:{{ s.eff_start_pct }}%; width:{{ s.eff_width_pct }}%; top:1.5px; bottom:1.5px; background-color:{{ s.color }};">
</div>
{% endif %}
</span>
</div>
<!-- Location micro-label -->
<div class="truncate mt-0.5 group-hover:opacity-70 transition-opacity"
style="color:{{ s.color }}; font-size:0.58rem; line-height:1.3;">
{{ s.location_name }}{% if s.period_type %} <span class="opacity-60">{{ '☀' if 'day' in s.period_type else '☾' }}</span>{% endif %}
</div>
</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 %}
<!-- Time scale footer hint -->
<div class="px-4 py-1.5 border-t border-gray-100 dark:border-gray-700 flex justify-between text-gray-300 dark:text-gray-600" style="font-size:0.6rem;">
<span>12 AM</span>
<span>6 AM</span>
<span>12 PM</span>
<span>6 PM</span>
<span>12 AM</span>
</div>
</div>