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-bar {
        display: flex;
        gap: 20px;
    }

    .nav-bar a {
        text-decoration: none;
        color: #6b9bd1;
        font-size: 12pt;
        padding: 5px 10px;
        border-radius: 3px;
    }

    .nav-bar a:hover {
        background-color: #2a2a2a;
    }

    .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-bar"
    style="
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #444;
    "
>
    <a href="/">Today</a>
    <a href="/calendar/daily">Calendar</a>
    <a href="/switches/daily">Switches</a>
    <a href="/totals">All Time</a>
</div>

<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
    >
</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 %}