mytral/mytral/templates/heatmap-calendar.html at 85bd70164326d3ffa52e7c92d1bba76dd4db86d5 · dvorka-oss/mytral · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
{% macro heatmap_cell( data, year, week_day, week_number ) %}
    {% if week_day in data.heatmap[year][week_number] %}
        {% set cell = data.heatmap[year][week_number][week_day] %}
        {% set today = ' heat_today' if cell.is_today else '' %}
        <td title="{{ cell.title }}">
            <a href="/activities/date/{{ cell.slash_date }}">
            {% if cell.count %}
                {% if cell.is_active_sick %}
                    {% if cell.count_activities < 2 %}
                    <div class="heat_active_sick_low{{ today }}"></div></a></td>
                    {% elif cell.count_activities < 3 %}
                    <div class="heat_active_sick_medium{{ today }}"></div></a></td>
                    {% else %}
                    <div class="heat_active_sick_high{{ today }}"></div></a></td>
                    {% endif %}
                {% elif cell.is_sick %}
                    <div class="heat_sick{{ today }}"></div></a></td>
                {% elif cell.is_active %}
                    {% if cell.count_activities < 2 %}
                    <div class="heat_y_low{{ today }}"></div></a></td>
                    {% elif cell.count_activities < 3 %}
                    <div class="heat_y_medium{{ today }}"></div></a></td>
                    {% else %}
                    <div class="heat_y_high{{ today }}"></div></a></td>
                    {% endif %}
                {% elif cell.has_comment %}
                    <div class="heat_comment_only{{ today }}"></div></a></td>
                {% else %}
                    <div class="heat_n{{ today }}"></div></a></td>
                {% endif %}
            {% else %}
                <div class="heat_n{{ today }}"></div></a></td>
            {% endif %}
    {% else %}
        <td><div class="heat_na"></div></td>
    {% endif %}
{% endmacro %}

{% extends "layout.html" %}
{% block content %}

{% if no_data %}
<div class="container-xl">
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <span class="page-pretitle">Activities</span>
                <h2 class="page-title">Heatmap</h2>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="empty">
                <div class="empty-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z"></path>
                        <path d="M3 10h18"></path>
                        <path d="M10 3v18"></path>
                        <path d="M3 3l18 18"></path>
                    </svg>
                </div>
                <p class="empty-title">No activities yet</p>
                <p class="empty-subtitle text-muted">
                    Start logging your activities to see your training heatmap!
                </p>
                <div class="empty-action">
                    <a href="{{ url_for('create_activity') }}" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M12 5l0 14"></path>
                            <path d="M5 12l14 0"></path>
                        </svg>
                        Create your first activity
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="container-xl">
    <div class="page-header d-print-none">
        <div class="row g-2 align-items-center">
            <div class="col">
                <a href="{{ url_for('list_activities_year',year=0) }}" class="page-pretitle">Activities</a>
                <h2 class="page-title">
                    Heatmap
                </h2>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <p class="text-muted">
                    Life is a journey, not a destination. Calendar heatmap shows heatmap of activities and illnesses for each year you lived.
                    Dark green is for the days with the most activities, light green is for the days with the least activities, and red is
                    for the days with illnesses/injuries. Orange days are for the days with both activities and illnesses/injuries when you were fighting hard.
                    Steel blue days are for days with comments only (no activities or illnesses).
                </p>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-body">
            {% for year in data.heatmap %}
            <div class="mb-4">
                <h3 class="card-title text-center mb-3">
                    <a href="{{ url_for('list_activities_year', year=year) }}" class="text-decoration-none">{{ year }}</a>
                </h3>
                <div class="heatmap-container">
                    <div class="table-responsive">
                        <table class="heatmap-calendar">
                        {% if is_mobile %}
                            {% for week_number in data.heatmap[year] %}
                                <tr>
                                {% for week_day in range(7) %}
                                    {{ heatmap_cell( data, year, week_day, week_number ) }}
                                {% endfor %}
                                </tr>
                            {% endfor %}
                        {% else %}
                            {% for week_day in range(7) %}
                                <tr>
                                {% for week_number in data.heatmap[year] %}
                                    {{ heatmap_cell( data, year, week_day, week_number ) }}
                                {% endfor %}
                                </tr>
                            {% endfor %}
                        {% endif %}
                        </table>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}
{% endblock %}