mariano/deskmeter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

major fm updates

Browse Source
This commit is contained in:
buenosairesam
2025-12-19 22:47:38 -03:00
parent 0dde9f1f54
commit 23b4341842
7 changed files with 197 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
dmapp/dmweb/dm.py
View File

@@ -19,7 +19,12 @@ def calendar_view(scope="daily", year=None, month=None, day=None):
""" """
Google Calendar-style view showing task blocks at their actual times. Google Calendar-style view showing task blocks at their actual times.
""" """
from flask import request
task = None task = None
grid = int(request.args.get('grid', 1)) # Grid hours: 1, 3, or 6
if grid not in [1, 3, 6]:
grid = 1
if not year: if not year:
year = datetime.today().year year = datetime.today().year
@@ -33,7 +38,7 @@ def calendar_view(scope="daily", year=None, month=None, day=None):
if scope == "daily": if scope == "daily":
start = base_date start = base_date
end = base_date.replace(hour=23, minute=59, second=59) end = base_date.replace(hour=23, minute=59, second=59)
blocks = get_task_blocks_calendar(start, end, task, min_block_seconds=60) blocks = get_task_blocks_calendar(start, end, task, min_block_seconds=60, grid_hours=grid)
prev_date = base_date - timedelta(days=1) prev_date = base_date - timedelta(days=1)
next_date = base_date + timedelta(days=1) next_date = base_date + timedelta(days=1)
days = [base_date] days = [base_date]
@@ -41,7 +46,7 @@ def calendar_view(scope="daily", year=None, month=None, day=None):
elif scope == "weekly": elif scope == "weekly":
start = base_date - timedelta(days=base_date.weekday()) start = base_date - timedelta(days=base_date.weekday())
end = start + timedelta(days=6, hours=23, minutes=59, seconds=59) end = start + timedelta(days=6, hours=23, minutes=59, seconds=59)
blocks = get_task_blocks_calendar(start, end, task, min_block_seconds=300) blocks = get_task_blocks_calendar(start, end, task, min_block_seconds=300, grid_hours=grid)
prev_date = start - timedelta(days=7) prev_date = start - timedelta(days=7)
next_date = start + timedelta(days=7) next_date = start + timedelta(days=7)
days = [start + timedelta(days=i) for i in range(7)] days = [start + timedelta(days=i) for i in range(7)]
@@ -52,7 +57,7 @@ def calendar_view(scope="daily", year=None, month=None, day=None):
end = datetime(year + 1, 1, 1, tzinfo=timezone) - timedelta(seconds=1) end = datetime(year + 1, 1, 1, tzinfo=timezone) - timedelta(seconds=1)
else: else:
end = datetime(year, month + 1, 1, tzinfo=timezone) - timedelta(seconds=1) end = datetime(year, month + 1, 1, tzinfo=timezone) - timedelta(seconds=1)
blocks = get_task_blocks_calendar(start, end, task, min_block_seconds=600) blocks = get_task_blocks_calendar(start, end, task, min_block_seconds=600, grid_hours=grid)
if month == 1: if month == 1:
prev_date = datetime(year - 1, 12, 1, tzinfo=timezone) prev_date = datetime(year - 1, 12, 1, tzinfo=timezone)
else: else:
@@ -70,7 +75,7 @@ def calendar_view(scope="daily", year=None, month=None, day=None):
scope = "daily" scope = "daily"
start = base_date start = base_date
end = base_date.replace(hour=23, minute=59, second=59) end = base_date.replace(hour=23, minute=59, second=59)
blocks = get_task_blocks_calendar(start, end, task, min_block_seconds=60) blocks = get_task_blocks_calendar(start, end, task, min_block_seconds=60, grid_hours=grid)
prev_date = base_date - timedelta(days=1) prev_date = base_date - timedelta(days=1)
next_date = base_date + timedelta(days=1) next_date = base_date + timedelta(days=1)
days = [base_date] days = [base_date]
@@ -85,6 +90,7 @@ def calendar_view(scope="daily", year=None, month=None, day=None):
prev_date=prev_date, prev_date=prev_date,
next_date=next_date, next_date=next_date,
days=days, days=days,
grid=grid,
auto_refresh=False auto_refresh=False
) )

112
dmapp/dmweb/get_period_times.py
View File

@@ -238,85 +238,99 @@ def get_work_period_totals(start, end):
return combined_rows return combined_rows
def get_task_blocks_calendar(start, end, task=None, min_block_seconds=300): def get_task_blocks_calendar(start, end, task=None, min_block_seconds=300, grid_hours=1):
""" """
Get task blocks for calendar-style visualization. Get task blocks for calendar-style visualization, aggregated by time grid.
Groups consecutive switches to the same task into blocks, tracking active/idle time. Shows all tasks worked on during each grid period, with overlapping blocks.
Each task block's height is proportional to time spent in that grid period.
Args:
grid_hours: Grid size in hours (1, 3, or 6)
Returns list of blocks: Returns list of blocks:
[{ [{
'task_id': str, 'task_id': str,
'task_path': str, 'task_path': str,
'start': datetime, 'start': datetime (start of grid period),
'end': datetime, 'end': datetime (end of grid period or actual end time if less),
'duration': int (total seconds), 'duration': int (seconds in this grid block),
'active_seconds': int (Plan/Think/Work time), 'hour': int (hour of grid start, 0-23),
'idle_seconds': int (Other/Away time), 'active_seconds': int,
'active_ratio': float (0.0 to 1.0) 'active_ratio': float (always 1.0)
}, ...] }, ...]
""" """
task_query = {"$in": task.split(",")} if task else {} task_query = {"$in": task.split(",")} if task else {}
match_query = {"date": {"$gte": start, "$lte": end}} match_query = {
"date": {"$gte": start, "$lte": end},
"workspace": {"$in": ["Plan", "Think", "Work"]} # Only active workspaces
}
if task_query: if task_query:
match_query["task"] = task_query match_query["task"] = task_query
# Get all switches in period, sorted by date # Get all active switches in period
raw_switches = list(switches.find(match_query).sort("date", 1)) raw_switches = list(switches.find(match_query).sort("date", 1))
if not raw_switches: if not raw_switches:
return [] return []
blocks = [] # Aggregate by grid period and task
current_block = None # Structure: {(date, grid_start_hour, task_id): total_seconds}
grid_task_time = defaultdict(lambda: {"duration": 0, "task_path": None})
for switch in raw_switches: for switch in raw_switches:
ws = switch["workspace"]
task_id = switch.get("task") task_id = switch.get("task")
switch_start = switch["date"].replace(tzinfo=utctz).astimezone(timezone) switch_start = switch["date"].replace(tzinfo=utctz).astimezone(timezone)
switch_duration = switch["delta"] switch_duration = switch["delta"]
switch_end = switch_start + timedelta(seconds=switch_duration) switch_end = switch_start + timedelta(seconds=switch_duration)
is_active = ws in ["Plan", "Think", "Work"] # Calculate how much time falls in each grid period this switch spans
current_time = switch_start
remaining_duration = switch_duration
# Start new block if task changed while remaining_duration > 0 and current_time < switch_end:
if current_block is None or current_block["task_id"] != task_id: # Calculate grid period start (hour rounded down to grid_hours)
if current_block is not None: grid_hour = (current_time.hour // grid_hours) * grid_hours
blocks.append(current_block) grid_start = current_time.replace(hour=grid_hour, minute=0, second=0, microsecond=0)
grid_end = grid_start + timedelta(hours=grid_hours)
# Get task path with history fallback # Time in this grid period
task_path = get_task_path(task_id) or "No Task" time_in_grid = min(
(grid_end - current_time).total_seconds(),
remaining_duration
)
current_block = { key = (current_time.date(), grid_hour, task_id)
# Get task path (cache it)
if grid_task_time[key]["task_path"] is None:
task_path = get_task_path(task_id) or "No Task"
grid_task_time[key]["task_path"] = task_path
grid_task_time[key]["duration"] += time_in_grid
remaining_duration -= time_in_grid
current_time = grid_end
# Convert to blocks
blocks = []
for (date, grid_hour, task_id), data in grid_task_time.items():
if data["duration"] >= min_block_seconds:
grid_start = datetime(date.year, date.month, date.day, grid_hour, 0, 0, tzinfo=timezone)
blocks.append({
"task_id": task_id, "task_id": task_id,
"task_path": task_path, "task_path": data["task_path"],
"start": switch_start, "start": grid_start,
"end": switch_end, "end": grid_start + timedelta(seconds=data["duration"]),
"duration": switch_duration, "hour": grid_hour,
"active_seconds": switch_duration if is_active else 0, "duration": int(data["duration"]),
"idle_seconds": 0 if is_active else switch_duration "active_seconds": int(data["duration"]),
} "idle_seconds": 0,
else: "active_ratio": 1.0
# Extend current block })
current_block["end"] = switch_end
current_block["duration"] += switch_duration
if is_active:
current_block["active_seconds"] += switch_duration
else:
current_block["idle_seconds"] += switch_duration
# Add final block return sorted(blocks, key=lambda x: (x["start"], x["task_path"]))
if current_block is not None:
blocks.append(current_block)
# Filter out very short blocks and calculate active ratio
filtered_blocks = []
for block in blocks:
if block["duration"] >= min_block_seconds:
block["active_ratio"] = block["active_seconds"] / block["duration"] if block["duration"] > 0 else 0
filtered_blocks.append(block)
return filtered_blocks
def get_raw_switches(start, end, task=None): def get_raw_switches(start, end, task=None):

123
dmapp/dmweb/templates/calendar_view.html
View File

@@ -5,28 +5,29 @@
body { body {
margin: 20px; margin: 20px;
font-family: monospace; font-family: monospace;
background: #fff; background: #1a1a1a;
color: #e0e0e0;
} }
.nav-tabs { .nav-tabs {
display: flex; display: flex;
gap: 20px; gap: 20px;
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 2px solid #333; border-bottom: 2px solid #444;
padding-bottom: 10px; padding-bottom: 10px;
} }
.nav-tabs a { .nav-tabs a {
text-decoration: none; text-decoration: none;
color: #666; color: #888;
font-size: 16pt; font-size: 16pt;
padding: 5px 10px; padding: 5px 10px;
} }
.nav-tabs a.active { .nav-tabs a.active {
color: #000; color: #e0e0e0;
font-weight: bold; font-weight: bold;
border-bottom: 3px solid #000; border-bottom: 3px solid #6b9bd1;
} }
.date-nav { .date-nav {
@@ -39,33 +40,37 @@
.date-nav a { .date-nav a {
text-decoration: none; text-decoration: none;
color: #2563eb; color: #6b9bd1;
font-size: 18pt; font-size: 18pt;
} }
.date-info { .date-info {
font-weight: bold; font-weight: bold;
color: #e0e0e0;
} }
.calendar-grid { .calendar-grid {
display: flex; display: flex;
border: 1px solid #ddd; border: 1px solid #333;
min-height: 600px; min-height: 600px;
background: #1a1a1a;
} }
.time-column { .time-column {
width: 60px; width: 60px;
border-right: 1px solid #ddd; border-right: 1px solid #333;
background: #f9f9f9; background: #222;
} }
.time-slot { .time-slot {
height: 60px; border-bottom: 1px solid #2a2a2a;
border-bottom: 1px solid #eee;
padding: 5px; padding: 5px;
font-size: 10pt; font-size: 10pt;
color: #666; color: #666;
text-align: right; text-align: right;
display: flex;
align-items: flex-start;
justify-content: flex-end;
} }
.days-grid { .days-grid {
@@ -75,8 +80,9 @@
.day-column { .day-column {
flex: 1; flex: 1;
border-right: 1px solid #ddd; border-right: 1px solid #333;
position: relative; position: relative;
background: #1a1a1a;
} }
.day-column:last-child { .day-column:last-child {
@@ -85,13 +91,14 @@
.day-header { .day-header {
height: 40px; height: 40px;
border-bottom: 2px solid #ddd; border-bottom: 2px solid #444;
background: #f0f0f0; background: #2a2a2a;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: bold; font-weight: bold;
font-size: 11pt; font-size: 11pt;
color: #e0e0e0;
} }
.day-grid { .day-grid {
@@ -104,13 +111,11 @@
left: 0; left: 0;
right: 0; right: 0;
height: 60px; height: 60px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #2a2a2a;
} }
.task-block { .task-block {
position: absolute; position: absolute;
left: 2px;
right: 2px;
border-radius: 4px; border-radius: 4px;
padding: 4px; padding: 4px;
font-size: 9pt; font-size: 9pt;
@@ -118,13 +123,14 @@
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 2px 4px rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.3);
} }
.task-block:hover { .task-block:hover {
z-index: 100; z-index: 100;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0,0,0,0.3); box-shadow: 0 4px 12px rgba(0,0,0,0.7);
} }
.task-label { .task-label {
@@ -140,8 +146,8 @@
.block-tooltip { .block-tooltip {
display: none; display: none;
position: absolute; position: absolute;
background: #333; background: #2a2a2a;
color: white; color: #e0e0e0;
padding: 8px 12px; padding: 8px 12px;
border-radius: 4px; border-radius: 4px;
font-size: 10pt; font-size: 10pt;
@@ -151,6 +157,8 @@
left: 100%; left: 100%;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
border: 1px solid #444;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
} }
.task-block:hover .block-tooltip { .task-block:hover .block-tooltip {
@@ -162,19 +170,26 @@
{% block content %} {% block content %}
<div class="nav-tabs"> <div class="nav-tabs">
<a href="/calendar/daily/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}" <a href="/calendar/daily/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid={{ grid }}"
class="{% if scope == 'daily' %}active{% endif %}">Daily</a> class="{% if scope == 'daily' %}active{% endif %}">Daily</a>
<a href="/calendar/weekly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}" <a href="/calendar/weekly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid={{ grid }}"
class="{% if scope == 'weekly' %}active{% endif %}">Weekly</a> class="{% if scope == 'weekly' %}active{% endif %}">Weekly</a>
<a href="/calendar/monthly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}" <a href="/calendar/monthly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid={{ grid }}"
class="{% if scope == 'monthly' %}active{% endif %}">Monthly</a> class="{% if scope == 'monthly' %}active{% endif %}">Monthly</a>
<span style="margin-left: auto;"> <span style="margin-left: auto; display: flex; gap: 15px; align-items: center;">
<span style="color: #999; font-size: 11pt;">Grid:</span>
<a href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid=1"
class="{% if grid == 1 %}active{% endif %}" style="font-size: 11pt;">1h</a>
<a href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid=3"
class="{% if grid == 3 %}active{% endif %}" style="font-size: 11pt;">3h</a>
<a href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid=6"
class="{% if grid == 6 %}active{% endif %}" style="font-size: 11pt;">6h</a>
<a href="/switches/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">View Switches</a> <a href="/switches/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">View Switches</a>
</span> </span>
</div> </div>
<div class="date-nav"> <div class="date-nav">
<a href="/calendar/{{ scope }}/{{ prev_date.year }}/{{ prev_date.month }}/{{ prev_date.day }}">←</a> <a href="/calendar/{{ scope }}/{{ prev_date.year }}/{{ prev_date.month }}/{{ prev_date.day }}?grid={{ grid }}">←</a>
{% if scope == 'daily' %} {% if scope == 'daily' %}
<span class="date-info">{{ base_date.strftime('%Y-%m-%d %A') }}</span> <span class="date-info">{{ base_date.strftime('%Y-%m-%d %A') }}</span>
{% elif scope == 'weekly' %} {% elif scope == 'weekly' %}
@@ -182,14 +197,14 @@
{% elif scope == 'monthly' %} {% elif scope == 'monthly' %}
<span class="date-info">{{ base_date.strftime('%B %Y') }}</span> <span class="date-info">{{ base_date.strftime('%B %Y') }}</span>
{% endif %} {% endif %}
<a href="/calendar/{{ scope }}/{{ next_date.year }}/{{ next_date.month }}/{{ next_date.day }}">→</a> <a href="/calendar/{{ scope }}/{{ next_date.year }}/{{ next_date.month }}/{{ next_date.day }}?grid={{ grid }}">→</a>
</div> </div>
<div class="calendar-grid"> <div class="calendar-grid">
<div class="time-column"> <div class="time-column">
<div class="day-header" style="height: 40px;"></div> <div class="day-header" style="height: 40px;"></div>
{% for hour in range(24) %} {% for hour in range(0, 24, grid) %}
<div class="time-slot">{{ '%02d:00'|format(hour) }}</div> <div class="time-slot" style="height: {{ grid * 60 }}px;">{{ '%02d:00'|format(hour) }}</div>
{% endfor %} {% endfor %}
</div> </div>
@@ -200,40 +215,60 @@
{{ day.strftime('%a %d') if scope != 'daily' else day.strftime('%A') }} {{ day.strftime('%a %d') if scope != 'daily' else day.strftime('%A') }}
</div> </div>
<div class="day-grid"> <div class="day-grid">
{% for hour in range(24) %} {% for hour in range(0, 24, grid) %}
<div class="hour-line" style="top: {{ hour * 60 }}px;"></div> <div class="hour-line" style="top: {{ hour * 60 }}px; height: {{ grid * 60 }}px;"></div>
{% endfor %} {% endfor %}
{% set day_blocks = [] %}
{% for block in blocks %} {% for block in blocks %}
{% if block.start.date() == day.date() %} {% if block.start.date() == day.date() %}
{% set start_hour = block.start.hour + block.start.minute / 60.0 %} {% set _ = day_blocks.append(block) %}
{% endif %}
{% endfor %}
{# Group blocks by hour for stacking #}
{% set hour_groups = {} %}
{% for block in day_blocks %}
{% set hour_key = block.hour %}
{% if hour_key not in hour_groups %}
{% set _ = hour_groups.update({hour_key: []}) %}
{% endif %}
{% set _ = hour_groups[hour_key].append(block) %}
{% endfor %}
{# Render blocks stacked within each hour #}
{% for hour_key, hour_blocks in hour_groups.items() %}
{% for block in hour_blocks %}
{% set idx = loop.index0 %}
{% set base_top_px = block.hour * 60 %}
{% set duration_hours = block.duration / 3600.0 %} {% set duration_hours = block.duration / 3600.0 %}
{% set top_px = start_hour * 60 %}
{% set height_px = duration_hours * 60 %} {% set height_px = duration_hours * 60 %}
{% if height_px < 2 %}{% set height_px = 2 %}{% endif %} {% if height_px < 2 %}{% set height_px = 2 %}{% endif %}
{% set task_hash = block.task_path|hash if block.task_path else 0 %} {% set task_hash = block.task_path|hash if block.task_path else 0 %}
{% set base_color_hue = task_hash % 360 %} {% set base_color_hue = task_hash % 360 %}
{% set active_color = 'hsl(%d, 60%%, 45%%)'|format(base_color_hue) %}
{# Create gradient: active color on left (0% to active_ratio%), idle color on right #} {# Cascade effect: shift right and down for overlapping blocks #}
{% set active_pct = (block.active_ratio * 100)|int %} {# Each block shifts 8% right and 4px down #}
{% set active_color = 'hsl(%d, 70%%, 50%%)'|format(base_color_hue) %} {% set offset_pct = idx * 8 %}
{% set idle_color = 'hsl(%d, 30%%, 70%%)'|format(base_color_hue) %} {% set width_pct = 100 - (idx * 8) - 2 %}
{% set vertical_offset_px = idx * 4 %}
{% set top_px = base_top_px + vertical_offset_px %}
<div class="task-block" <div class="task-block"
style="top: {{ top_px }}px; height: {{ height_px }}px; 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%);"> left: {{ offset_pct }}%; width: {{ width_pct }}%;
background: {{ active_color }}; opacity: 0.9;">
<div class="task-label">{{ block.task_path }}</div> <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="task-time">{{ (block.duration // 60)|int }}m</div>
<div class="block-tooltip"> <div class="block-tooltip">
<strong>{{ block.task_path }}</strong><br> <strong>{{ block.task_path }}</strong><br>
{{ block.start.strftime('%H:%M') }} - {{ block.end.strftime('%H:%M') }}<br> Hour: {{ '%02d:00'|format(block.hour) }}<br>
Duration: {{ (block.duration // 60)|int }} minutes<br> Duration: {{ (block.duration // 60)|int }} minutes
Active: {{ (block.active_seconds // 60)|int }}m ({{ active_pct }}%)<br>
Idle: {{ (block.idle_seconds // 60)|int }}m
</div> </div>
</div> </div>
{% endif %} {% endfor %}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>

9
dmapp/dmweb/templates/layout.html
View File

@@ -9,6 +9,13 @@
<meta http-equiv="refresh" content="5"> <meta http-equiv="refresh" content="5">
{% endif %} {% endif %}
<style>
body {
background-color: #1a1a1a;
color: #e0e0e0;
}
</style>
{% block head %} {% block head %}
{% endblock %} {% endblock %}
@@ -21,6 +28,6 @@
</body> </body>
</html> </html>

6
dmapp/dmweb/templates/main.html
View File

@@ -13,14 +13,16 @@
justify-content: center; justify-content: center;
height: 100vh; /* This ensures that the container takes the full height of the viewport */ height: 100vh; /* This ensures that the container takes the full height of the viewport */
margin: 0; /* Remove default margin */ margin: 0; /* Remove default margin */
background-color: #1a1a1a;
color: #e0e0e0;
} }
.grey { .grey {
color:grey; color: #888;
} }
.blue { .blue {
color:blue; color: #6b9bd1;
} }
table { table {

4
dmapp/dmweb/templates/main_content.html
View File

@@ -1,7 +1,7 @@
{% if current_task_path and current_task_time %} {% if current_task_path and current_task_time %}
<div id="current-task-info" style="font-size: 48pt; margin-bottom: 40px; text-align: center;"> <div id="current-task-info" style="font-size: 48pt; margin-bottom: 40px; text-align: center;">
<div style="color: #333;">{{ current_task_path }}</div> <div style="color: #e0e0e0;">{{ current_task_path }}</div>
<div style="color: #666; font-size: 36pt;">{{ current_task_time }}</div> <div style="color: #999; font-size: 36pt;">{{ current_task_time }}</div>
</div> </div>
{% endif %} {% endif %}
<table> <table>

45
dmapp/dmweb/templates/switches_view.html
View File

@@ -5,27 +5,29 @@
body { body {
margin: 20px; margin: 20px;
font-family: monospace; font-family: monospace;
background-color: #1a1a1a;
color: #e0e0e0;
} }
.nav-tabs { .nav-tabs {
display: flex; display: flex;
gap: 20px; gap: 20px;
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 2px solid #333; border-bottom: 2px solid #444;
padding-bottom: 10px; padding-bottom: 10px;
} }
.nav-tabs a { .nav-tabs a {
text-decoration: none; text-decoration: none;
color: #666; color: #888;
font-size: 16pt; font-size: 16pt;
padding: 5px 10px; padding: 5px 10px;
} }
.nav-tabs a.active { .nav-tabs a.active {
color: #000; color: #e0e0e0;
font-weight: bold; font-weight: bold;
border-bottom: 3px solid #000; border-bottom: 3px solid #6b9bd1;
} }
.date-nav { .date-nav {
@@ -38,18 +40,19 @@
.date-nav a { .date-nav a {
text-decoration: none; text-decoration: none;
color: #2563eb; color: #6b9bd1;
font-size: 18pt; font-size: 18pt;
} }
.date-info { .date-info {
font-weight: bold; font-weight: bold;
color: #e0e0e0;
} }
.switches-container { .switches-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 2px;
} }
.switch-row { .switch-row {
@@ -62,35 +65,37 @@
.switch-time { .switch-time {
width: 120px; width: 120px;
color: #666; color: #aaa;
font-weight: bold; font-weight: bold;
} }
.switch-workspace { .switch-workspace {
width: 80px; width: 80px;
font-weight: bold; font-weight: bold;
color: #e0e0e0;
} }
.switch-task { .switch-task {
flex: 1; flex: 1;
color: #333; color: #ccc;
} }
.switch-duration { .switch-duration {
width: 100px; width: 100px;
text-align: right; text-align: right;
color: #666; color: #aaa;
} }
/* Active vs idle workspace indicator */ /* Active vs idle workspace indicator */
.ws-active { font-weight: bold; } .ws-active { font-weight: bold; }
.ws-idle { opacity: 0.6; } .ws-idle { opacity: 0.5; }
.stats { .stats {
margin: 20px 0; margin: 20px 0;
padding: 15px; padding: 15px;
background: #f0f0f0; background: #2a2a2a;
border-radius: 4px; border-radius: 4px;
border: 1px solid #333;
} }
.stats-row { .stats-row {
@@ -105,11 +110,12 @@
} }
.stat-label { .stat-label {
color: #666; color: #999;
} }
.stat-value { .stat-value {
font-weight: bold; font-weight: bold;
color: #e0e0e0;
} }
</style> </style>
{% endblock head %} {% endblock head %}
@@ -156,14 +162,19 @@
<h3>All Switches ({{ switches|length }})</h3> <h3>All Switches ({{ switches|length }})</h3>
<div class="switches-container"> <div class="switches-container">
{% set max_delta = switches|map(attribute='delta')|max if switches else 1 %}
{% set base_height = 30 %}
{% set max_height = 200 %}
{% for switch in switches %} {% for switch in switches %}
{% set is_active = switch.workspace in ['Plan', 'Think', 'Work'] %} {% set is_active = switch.workspace in ['Plan', 'Think', 'Work'] %}
{% set task_hash = switch.task_path|hash if switch.task_path else 0 %} {% set task_hash = switch.task_path|hash if switch.task_path else 0 %}
{% set border_hue = task_hash % 360 %} {% set border_hue = task_hash % 360 %}
{% set border_color = 'hsl(%d, 70%%, 50%%)'|format(border_hue) %} {% set border_color = 'hsl(%d, 70%%, 50%%)'|format(border_hue) %}
{% set bg_color = 'hsl(%d, 70%%, 95%%)'|format(border_hue) %} {% set bg_color = 'hsl(%d, 30%%, 20%%)'|format(border_hue) %}
{% set height_ratio = (switch.delta / max_delta) if max_delta > 0 else 0 %}
{% set cell_height = (base_height + (height_ratio * (max_height - base_height)))|int %}
<div class="switch-row {{ 'ws-active' if is_active else 'ws-idle' }}" <div class="switch-row {{ 'ws-active' if is_active else 'ws-idle' }}"
style="border-left-color: {{ border_color }}; background-color: {{ bg_color }};"> style="border-left-color: {{ border_color }}; background-color: {{ bg_color }}; height: {{ cell_height }}px;">
<div class="switch-time">{{ switch.date.strftime('%m/%d %H:%M:%S') }}</div> <div class="switch-time">{{ switch.date.strftime('%m/%d %H:%M:%S') }}</div>
<div class="switch-workspace">{{ switch.workspace }}</div> <div class="switch-workspace">{{ switch.workspace }}</div>
<div class="switch-task">{{ switch.task_path }}</div> <div class="switch-task">{{ switch.task_path }}</div>
@@ -182,4 +193,10 @@
<p style="text-align: center; color: #666; margin-top: 40px;">No switches in this period</p> <p style="text-align: center; color: #666; margin-top: 40px;">No switches in this period</p>
{% endif %} {% endif %}
<style>
h3 {
color: #e0e0e0;
}
</style>
{% endblock content %} {% endblock content %}