245 lines
7.1 KiB
HTML
245 lines
7.1 KiB
HTML
{% extends 'layout.html' %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
body {
|
|
margin: 20px;
|
|
font-family: monospace;
|
|
background: #fff;
|
|
}
|
|
|
|
.nav-tabs {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid #333;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.nav-tabs a {
|
|
text-decoration: none;
|
|
color: #666;
|
|
font-size: 16pt;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.nav-tabs a.active {
|
|
color: #000;
|
|
font-weight: bold;
|
|
border-bottom: 3px solid #000;
|
|
}
|
|
|
|
.date-nav {
|
|
margin: 20px 0;
|
|
font-size: 14pt;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.date-nav a {
|
|
text-decoration: none;
|
|
color: #2563eb;
|
|
font-size: 18pt;
|
|
}
|
|
|
|
.date-info {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar-grid {
|
|
display: flex;
|
|
border: 1px solid #ddd;
|
|
min-height: 600px;
|
|
}
|
|
|
|
.time-column {
|
|
width: 60px;
|
|
border-right: 1px solid #ddd;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.time-slot {
|
|
height: 60px;
|
|
border-bottom: 1px solid #eee;
|
|
padding: 5px;
|
|
font-size: 10pt;
|
|
color: #666;
|
|
text-align: right;
|
|
}
|
|
|
|
.days-grid {
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
|
|
.day-column {
|
|
flex: 1;
|
|
border-right: 1px solid #ddd;
|
|
position: relative;
|
|
}
|
|
|
|
.day-column:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.day-header {
|
|
height: 40px;
|
|
border-bottom: 2px solid #ddd;
|
|
background: #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.day-grid {
|
|
position: relative;
|
|
height: 1440px; /* 24 hours * 60px */
|
|
}
|
|
|
|
.hour-line {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.task-block {
|
|
position: absolute;
|
|
left: 2px;
|
|
right: 2px;
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
font-size: 9pt;
|
|
color: white;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.task-block:hover {
|
|
z-index: 100;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.task-label {
|
|
font-weight: bold;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.task-time {
|
|
font-size: 8pt;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.block-tooltip {
|
|
display: none;
|
|
position: absolute;
|
|
background: #333;
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 10pt;
|
|
z-index: 1000;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
left: 100%;
|
|
top: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.task-block:hover .block-tooltip {
|
|
display: block;
|
|
}
|
|
</style>
|
|
{% endblock head %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="nav-tabs">
|
|
<a href="/calendar/daily/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
|
|
class="{% if scope == 'daily' %}active{% endif %}">Daily</a>
|
|
<a href="/calendar/weekly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
|
|
class="{% if scope == 'weekly' %}active{% endif %}">Weekly</a>
|
|
<a href="/calendar/monthly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
|
|
class="{% if scope == 'monthly' %}active{% endif %}">Monthly</a>
|
|
<span style="margin-left: auto;">
|
|
<a href="/switches/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">View Switches</a>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="date-nav">
|
|
<a href="/calendar/{{ scope }}/{{ prev_date.year }}/{{ prev_date.month }}/{{ prev_date.day }}">←</a>
|
|
{% if scope == 'daily' %}
|
|
<span class="date-info">{{ base_date.strftime('%Y-%m-%d %A') }}</span>
|
|
{% elif scope == 'weekly' %}
|
|
<span class="date-info">Week of {{ start.strftime('%Y-%m-%d') }}</span>
|
|
{% elif scope == 'monthly' %}
|
|
<span class="date-info">{{ base_date.strftime('%B %Y') }}</span>
|
|
{% endif %}
|
|
<a href="/calendar/{{ scope }}/{{ next_date.year }}/{{ next_date.month }}/{{ next_date.day }}">→</a>
|
|
</div>
|
|
|
|
<div class="calendar-grid">
|
|
<div class="time-column">
|
|
<div class="day-header" style="height: 40px;"></div>
|
|
{% for hour in range(24) %}
|
|
<div class="time-slot">{{ '%02d:00'|format(hour) }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="days-grid">
|
|
{% for day in days %}
|
|
<div class="day-column">
|
|
<div class="day-header">
|
|
{{ day.strftime('%a %d') if scope != 'daily' else day.strftime('%A') }}
|
|
</div>
|
|
<div class="day-grid">
|
|
{% for hour in range(24) %}
|
|
<div class="hour-line" style="top: {{ hour * 60 }}px;"></div>
|
|
{% endfor %}
|
|
|
|
{% for block in blocks %}
|
|
{% if block.start.date() == day.date() %}
|
|
{% set start_hour = block.start.hour + block.start.minute / 60.0 %}
|
|
{% set duration_hours = block.duration / 3600.0 %}
|
|
{% set top_px = start_hour * 60 %}
|
|
{% set height_px = duration_hours * 60 %}
|
|
{% if height_px < 2 %}{% set height_px = 2 %}{% endif %}
|
|
|
|
{% set task_hash = block.task_path|hash if block.task_path else 0 %}
|
|
{% set base_color_hue = task_hash % 360 %}
|
|
|
|
{# Create gradient: active color on left (0% to active_ratio%), idle color on right #}
|
|
{% set active_pct = (block.active_ratio * 100)|int %}
|
|
{% set active_color = 'hsl(%d, 70%%, 50%%)'|format(base_color_hue) %}
|
|
{% set idle_color = 'hsl(%d, 30%%, 70%%)'|format(base_color_hue) %}
|
|
|
|
<div class="task-block"
|
|
style="top: {{ top_px }}px; height: {{ height_px }}px;
|
|
background: linear-gradient(to right, {{ active_color }} 0%, {{ active_color }} {{ active_pct }}%, {{ idle_color }} {{ active_pct }}%, {{ idle_color }} 100%);">
|
|
<div class="task-label">{{ block.task_path }}</div>
|
|
<div class="task-time">{{ block.start.strftime('%H:%M') }} ({{ (block.duration // 60)|int }}m)</div>
|
|
<div class="block-tooltip">
|
|
<strong>{{ block.task_path }}</strong><br>
|
|
{{ block.start.strftime('%H:%M') }} - {{ block.end.strftime('%H:%M') }}<br>
|
|
Duration: {{ (block.duration // 60)|int }} minutes<br>
|
|
Active: {{ (block.active_seconds // 60)|int }}m ({{ active_pct }}%)<br>
|
|
Idle: {{ (block.idle_seconds // 60)|int }}m
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock content %}
|