deskmeter/dmapp/dmweb/templates/switches_view.html

{% extends 'layout.html' %}

{% block head %}
<style>
    body {
        margin: 20px;
        font-family: monospace;
        background-color: #1a1a1a;
        color: #e0e0e0;
    }

    .nav-tabs {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        border-bottom: 2px solid #444;
        padding-bottom: 10px;
    }

    .nav-tabs a {
        text-decoration: none;
        color: #888;
        font-size: 16pt;
        padding: 5px 10px;
    }

    .nav-tabs a.active {
        color: #e0e0e0;
        font-weight: bold;
        border-bottom: 3px solid #6b9bd1;
    }

    .date-nav {
        margin: 20px 0;
        font-size: 14pt;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .date-nav a {
        text-decoration: none;
        color: #6b9bd1;
        font-size: 18pt;
    }

    .date-info {
        font-weight: bold;
        color: #e0e0e0;
    }

    .switches-container {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .switch-row {
        display: flex;
        align-items: center;
        padding: 8px;
        border-left: 4px solid;
        font-size: 11pt;
    }

    .switch-time {
        width: 120px;
        color: #aaa;
        font-weight: bold;
    }

    .switch-workspace {
        width: 80px;
        font-weight: bold;
        color: #e0e0e0;
    }

    .switch-task {
        flex: 1;
        color: #ccc;
    }

    .switch-duration {
        width: 100px;
        text-align: right;
        color: #aaa;
    }

    /* Active vs idle workspace indicator */
    .ws-active { font-weight: bold; }
    .ws-idle { opacity: 0.5; }

    .stats {
        margin: 20px 0;
        padding: 15px;
        background: #2a2a2a;
        border-radius: 4px;
        border: 1px solid #333;
    }

    .stats-row {
        display: flex;
        gap: 30px;
        font-size: 11pt;
    }

    .stat-item {
        display: flex;
        gap: 10px;
    }

    .stat-label {
        color: #999;
    }

    .stat-value {
        font-weight: bold;
        color: #e0e0e0;
    }
</style>
{% endblock head %}

{% block content %}

<div class="nav-tabs">
    <a href="/switches/daily/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
       class="{% if scope == 'daily' %}active{% endif %}">Daily</a>
    <a href="/switches/weekly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
       class="{% if scope == 'weekly' %}active{% endif %}">Weekly</a>
    <a href="/switches/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="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">View Calendar</a>
    </span>
</div>

<div class="date-nav">
    <a href="/switches/{{ 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="/switches/{{ scope }}/{{ next_date.year }}/{{ next_date.month }}/{{ next_date.day }}">→</a>
</div>

<div class="stats">
    <div class="stats-row">
        <div class="stat-item">
            <span class="stat-label">Total Switches:</span>
            <span class="stat-value">{{ switches|length }}</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">Total Time:</span>
            <span class="stat-value">{{ (switches|sum(attribute='delta') // 3600)|int }}h {{ ((switches|sum(attribute='delta') % 3600) // 60)|int }}m</span>
        </div>
    </div>
</div>

<h3>All Switches ({{ switches|length }})</h3>

<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 %}
        {% set is_active = switch.workspace in ['Plan', 'Think', 'Work'] %}
        {% set task_hash = switch.task_path|hash if switch.task_path else 0 %}
        {% set border_hue = task_hash % 360 %}
        {% set border_color = 'hsl(%d, 70%%, 50%%)'|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' }}"
         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-workspace">{{ switch.workspace }}</div>
        <div class="switch-task">{{ switch.task_path }}</div>
        <div class="switch-duration">
            {% if switch.delta >= 3600 %}
                {{ (switch.delta // 3600)|int }}h {{ ((switch.delta % 3600) // 60)|int }}m
            {% else %}
                {{ (switch.delta // 60)|int }}m {{ (switch.delta % 60)|int }}s
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

{% if not switches %}
    <p style="text-align: center; color: #666; margin-top: 40px;">No switches in this period</p>
{% endif %}

<style>
    h3 {
        color: #e0e0e0;
    }
</style>

{% endblock content %}