restore legacy, include shorcut scripts
This commit is contained in:
244
dmold/dmweb/templates/calendar_view.html
Normal file
244
dmold/dmweb/templates/calendar_view.html
Normal file
@@ -0,0 +1,244 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user