lukas
/
timetracker
1
0
Fork 0
Code Issues 17 Pull Requests 4 Actions Packages Projects 1 Releases 20 Wiki Activity

Major redesign #73

Merged
lukas merged 45 commits from manage-purchases into main 2024-09-02 15:47:44 +00:00
Conversation 1 Commits 45 Files Changed 56 +193 -181
8 changed files with 193 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 447bd4820c - Show all commits

4
games/templates/add_purchase.html
View File

@ -26,7 +26,9 @@
<tr> <tr>
<td></td> <td></td>
<td> <td>
<a href="{% url 'delete_purchase' purchase_id %}" class="text-red-600" onclick="return confirm('Are you sure you want to delete this purchase?');">Delete</a> <a href="{% url 'delete_purchase' purchase_id %}"
class="text-red-600"
onclick="return confirm('Are you sure you want to delete this purchase?');">Delete</a>
</td> </td>
</tr> </tr>
{% endif %} {% endif %}

74
games/templates/base.html
View File

@ -77,47 +77,47 @@
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
</li> </li>
{% if session_count > 0 %} {% if session_count > 0 %}
<li class="relative group"> <li class="relative group">
<a class="block py-2 pl-3 pr-4 hover:underline" <a class="block py-2 pl-3 pr-4 hover:underline"
href="{% url 'stats_by_year' 0 %}">Stats</a> href="{% url 'stats_by_year' 0 %}">Stats</a>
<ul class="absolute hidden text-gray-700 pt-1 group-hover:block"> <ul class="absolute hidden text-gray-700 pt-1 group-hover:block">
<li>
<a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
href="{% url 'stats_by_year' 0 %}">Overall</a>
</li>
{% for year in stats_dropdown_year_range %}
<li> <li>
<a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" <a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
href="{% url 'stats_by_year' 0 %}">Overall</a> href="{% url 'stats_by_year' year %}">{{ year }}</a>
</li> </li>
{% for year in stats_dropdown_year_range %} {% endfor %}
<li> </ul>
<a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" </li>
href="{% url 'stats_by_year' year %}">{{ year }}</a> <li>
</li> <a class="block py-2 pl-3 pr-4 hover:underline"
{% endfor %} href="{% url 'list_sessions' %}">All Sessions</a>
</ul> </li>
</li> <li>
<li> <a class="block py-2 pl-3 pr-4 hover:underline"
<a class="block py-2 pl-3 pr-4 hover:underline" href="{% url 'logout' %}">Log Out</a>
href="{% url 'list_sessions' %}">All Sessions</a> </li>
</li>
<li>
<a class="block py-2 pl-3 pr-4 hover:underline"
href="{% url 'logout' %}">Log Out</a>
</li>
{% endif %}
{% endif %} {% endif %}
</ul> {% endif %}
</div> </ul>
</div> </div>
</nav>
<div class="flex flex-1 dark:bg-gray-800 justify-center pt-8 pb-16">
{% block content %}
No content here.
{% endblock content %}
</div> </div>
{% load version %} </nav>
<span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> <div class="flex flex-1 dark:bg-gray-800 justify-center pt-8 pb-16">
{% block content %}
No content here.
{% endblock content %}
</div> </div>
{% block scripts %} {% load version %}
{% endblock scripts %} <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
</body> </div>
</html> {% block scripts %}
{% endblock scripts %}
</body>
</html>

3
games/templates/components/game_link.html
View File

@ -1,5 +1,6 @@
<span class="truncate-container"> <span class="truncate-container">
<a class="underline decoration-slate-500 sm:decoration-2" href="{% url 'view_game' game_id %}"> <a class="underline decoration-slate-500 sm:decoration-2"
href="{% url 'view_game' game_id %}">
{% if children %} {% if children %}
{{ children }} {{ children }}
{% else %} {% else %}

9
games/templates/components/popover.html
View File

@ -1,9 +1,10 @@
<!-- needs data-popover-target on triggering block --> <!-- needs data-popover-target on triggering block -->
<!-- id --> <!-- id -->
<!-- children --> <!-- children -->
<div data-popover id="{{ id }}" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-white transition-opacity duration-300 bg-white border border-purple-200 rounded-lg shadow-sm opacity-0 dark:text-white dark:border-purple-600 dark:bg-purple-800"> <div data-popover
<div class="px-3 py-2"> id="{{ id }}"
{{ children }} role="tooltip"
</div> class="absolute z-10 invisible inline-block text-sm text-white transition-opacity duration-300 bg-white border border-purple-200 rounded-lg shadow-sm opacity-0 dark:text-white dark:border-purple-600 dark:bg-purple-800">
<div class="px-3 py-2">{{ children }}</div>
<div data-popper-arrow></div> <div data-popper-arrow></div>
</div> </div>

77
games/templates/list_sessions.html
View File

@ -32,42 +32,43 @@
<tbody> <tbody>
{% for session in dataset %} {% for session in dataset %}
{% partialdef session-row inline=True %} {% partialdef session-row inline=True %}
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name relative align-top w-24 h-12 group"> <td class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name relative align-top w-24 h-12 group">
<span class="inline-block relative"> <span class="inline-block relative">
<a class="underline decoration-slate-500 sm:decoration-2 inline-block truncate max-w-20char group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4 group-hover:decoration-purple-900 group-hover:text-purple-100" href="{% url 'view_game' session.purchase.edition.game.id %}"> <a class="underline decoration-slate-500 sm:decoration-2 inline-block truncate max-w-20char group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4 group-hover:decoration-purple-900 group-hover:text-purple-100"
{{ session.purchase.edition.name }} href="{% url 'view_game' session.purchase.edition.game.id %}">
</a> {{ session.purchase.edition.name }}
</span> </a>
</td> </span>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell"> </td>
{{ session.timestamp_start | date:"d/m/Y H:i" }} <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
</td> {{ session.timestamp_start | date:"d/m/Y H:i" }}
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell"> </td>
{% if not session.timestamp_end %} <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell">
{% url 'list_sessions_end_session' session.id as end_session_url %} {% if not session.timestamp_end %}
<a href="{{ end_session_url }}" {% url 'list_sessions_end_session' session.id as end_session_url %}
hx-get="{{ end_session_url }}" <a href="{{ end_session_url }}"
hx-target="closest tr" hx-get="{{ end_session_url }}"
hx-swap="outerHTML" hx-target="closest tr"
hx-indicator="#indicator" hx-swap="outerHTML"
onClick="document.querySelector('#last-session-start').classList.remove('invisible')"> hx-indicator="#indicator"
<span class="text-yellow-300">Finish now?</span> onClick="document.querySelector('#last-session-start').classList.remove('invisible')">
</a> <span class="text-yellow-300">Finish now?</span>
{% elif session.duration_manual %} </a>
-- {% elif session.duration_manual %}
{% else %} --
{{ session.timestamp_end | date:"d/m/Y H:i" }} {% else %}
{% endif %} {{ session.timestamp_end | date:"d/m/Y H:i" }}
</td> {% endif %}
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ session.duration_formatted }}</td> </td>
</tr> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ session.duration_formatted }}</td>
{% endpartialdef %} </tr>
{% endfor %} {% endpartialdef %}
</tbody> {% endfor %}
</table> </tbody>
{% else %} </table>
<div class="mx-auto text-center text-slate-300 text-xl">No sessions found.</div> {% else %}
{% endif %} <div class="mx-auto text-center text-slate-300 text-xl">No sessions found.</div>
</div> {% endif %}
</div>
{% endblock content %} {% endblock content %}

1
games/templates/registration/login.html
View File

@ -1,6 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load static %} {% load static %}
{% block title %} {% block title %}
Login Login
{% endblock title %} {% endblock title %}

67
games/templates/stats.html
View File

@ -3,17 +3,15 @@
{{ title }} {{ title }}
{% endblock title %} {% endblock title %}
{% load static %} {% load static %}
{% partialdef purchase-name %} {% partialdef purchase-name %}
{% if purchase.type != 'game' %} {% if purchase.type != 'game' %}
{% #gamelink game_id=purchase.edition.game.id %} {% #gamelink game_id=purchase.edition.game.id %}
{{ purchase.name }} ({{ purchase.edition.name }} {{ purchase.get_type_display }}) {{ purchase.name }} ({{ purchase.edition.name }} {{ purchase.get_type_display }})
{% /gamelink %} {% /gamelink %}
{% else %} {% else %}
{% gamelink game_id=purchase.edition.game.id name=purchase.edition.name %} {% gamelink game_id=purchase.edition.game.id name=purchase.edition.name %}
{% endif %} {% endif %}
{% endpartialdef %} {% endpartialdef %}
{% block content %} {% block content %}
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto"> <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
@ -66,11 +64,15 @@
</tr> </tr>
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2">Longest session</td> <td class="px-2 sm:px-4 md:px-6 md:py-2">Longest session</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ longest_session_time }} ({% gamelink game_id=longest_session_game.id name=longest_session_game.name %})</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
{{ longest_session_time }} ({% gamelink game_id=longest_session_game.id name=longest_session_game.name %})
</td>
</tr> </tr>
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2">Most sessions</td> <td class="px-2 sm:px-4 md:px-6 md:py-2">Most sessions</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ highest_session_count }} ({% gamelink game_id=highest_session_count_game.id name=highest_session_count_game.name %})</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
{{ highest_session_count }} ({% gamelink game_id=highest_session_count_game.id name=highest_session_count_game.name %})
</td>
</tr> </tr>
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2">Highest session average</td> <td class="px-2 sm:px-4 md:px-6 md:py-2">Highest session average</td>
@ -80,15 +82,18 @@
</tr> </tr>
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2">First play</td> <td class="px-2 sm:px-4 md:px-6 md:py-2">First play</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% gamelink game_id=first_play_game.id name=first_play_game.name %} ({{ first_play_date }})</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
{% gamelink game_id=first_play_game.id name=first_play_game.name %} ({{ first_play_date }})
</td>
</tr> </tr>
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2">Last play</td> <td class="px-2 sm:px-4 md:px-6 md:py-2">Last play</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% gamelink game_id=last_play_game.id name=last_play_game.name %} ({{ last_play_date }})</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
{% gamelink game_id=last_play_game.id name=last_play_game.name %} ({{ last_play_date }})
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
{% if month_playtime %} {% if month_playtime %}
<h1 class="text-5xl text-center my-6">Playtime per month</h1> <h1 class="text-5xl text-center my-6">Playtime per month</h1>
<table class="responsive-table"> <table class="responsive-table">
@ -102,7 +107,6 @@
</tbody> </tbody>
</table> </table>
{% endif %} {% endif %}
<h1 class="text-5xl text-center my-6">Purchases</h1> <h1 class="text-5xl text-center my-6">Purchases</h1>
<table class="responsive-table"> <table class="responsive-table">
<tbody> <tbody>
@ -118,9 +122,7 @@
</tr> </tr>
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2">Dropped</td> <td class="px-2 sm:px-4 md:px-6 md:py-2">Dropped</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ dropped_count }} ({{ dropped_percentage }}%)</td>
{{ dropped_count }} ({{ dropped_percentage }}%)
</td>
</tr> </tr>
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2">Unfinished</td> <td class="px-2 sm:px-4 md:px-6 md:py-2">Unfinished</td>
@ -149,9 +151,7 @@
<tbody> <tbody>
{% for game in top_10_games_by_playtime %} {% for game in top_10_games_by_playtime %}
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% gamelink game_id=game.id name=game.name %}</td>
{% gamelink game_id=game.id name=game.name %}
</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ game.formatted_playtime }}</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ game.formatted_playtime }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
@ -174,7 +174,6 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
{% if all_finished_this_year %} {% if all_finished_this_year %}
<h1 class="text-5xl text-center my-6">Finished</h1> <h1 class="text-5xl text-center my-6">Finished</h1>
<table class="responsive-table"> <table class="responsive-table">
@ -187,16 +186,13 @@
<tbody> <tbody>
{% for purchase in all_finished_this_year %} {% for purchase in all_finished_this_year %}
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
{% partial purchase-name %}
</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
{% endif %} {% endif %}
{% if this_year_finished_this_year %} {% if this_year_finished_this_year %}
<h1 class="text-5xl text-center my-6">Finished ({{ year }} games)</h1> <h1 class="text-5xl text-center my-6">Finished ({{ year }} games)</h1>
<table class="responsive-table"> <table class="responsive-table">
@ -209,16 +205,13 @@
<tbody> <tbody>
{% for purchase in this_year_finished_this_year %} {% for purchase in this_year_finished_this_year %}
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
{% partial purchase-name %}
</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
{% endif %} {% endif %}
{% if purchased_this_year_finished_this_year %} {% if purchased_this_year_finished_this_year %}
<h1 class="text-5xl text-center my-6">Bought and Finished ({{ year }})</h1> <h1 class="text-5xl text-center my-6">Bought and Finished ({{ year }})</h1>
<table class="responsive-table"> <table class="responsive-table">
@ -231,16 +224,13 @@
<tbody> <tbody>
{% for purchase in purchased_this_year_finished_this_year %} {% for purchase in purchased_this_year_finished_this_year %}
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
{% partial purchase-name %}
</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
{% endif %} {% endif %}
{% if purchased_unfinished %} {% if purchased_unfinished %}
<h1 class="text-5xl text-center my-6">Unfinished Purchases</h1> <h1 class="text-5xl text-center my-6">Unfinished Purchases</h1>
<table class="responsive-table"> <table class="responsive-table">
@ -254,9 +244,7 @@
<tbody> <tbody>
{% for purchase in purchased_unfinished %} {% for purchase in purchased_unfinished %}
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
{% partial purchase-name %}
</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
</tr> </tr>
@ -264,7 +252,6 @@
</tbody> </tbody>
</table> </table>
{% endif %} {% endif %}
{% if all_purchased_this_year %} {% if all_purchased_this_year %}
<h1 class="text-5xl text-center my-6">All Purchases</h1> <h1 class="text-5xl text-center my-6">All Purchases</h1>
<table class="responsive-table"> <table class="responsive-table">
@ -278,9 +265,7 @@
<tbody> <tbody>
{% for purchase in all_purchased_this_year %} {% for purchase in all_purchased_this_year %}
<tr> <tr>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono"> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
{% partial purchase-name %}
</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.price }}</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td> <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
</tr> </tr>

135
games/templates/view_game.html
View File

@ -11,62 +11,85 @@
<span class="text-wrap max-w-80 text-4xl"> <span class="text-wrap max-w-80 text-4xl">
<span class="font-bold font-serif">{{ game.name }}</span>&nbsp;<span data-popover-target="popover-year" class="text-slate-500 text-2xl">{{ game.year_released }}</span> <span class="font-bold font-serif">{{ game.name }}</span>&nbsp;<span data-popover-target="popover-year" class="text-slate-500 text-2xl">{{ game.year_released }}</span>
{% #popover id="popover-year" %} {% #popover id="popover-year" %}
Original release year Original release year
{% /popover %} {% /popover %}
</span> </span>
</div> </div>
<div class="flex gap-4 dark:text-slate-400 mb-3"> <div class="flex gap-4 dark:text-slate-400 mb-3">
<span data-popover-target="popover-hours" class="flex gap-2 items-center"> <span data-popover-target="popover-hours" class="flex gap-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg> </svg>
{{ hours_sum }} {{ hours_sum }}
{% #popover id="popover-hours" %} {% #popover id="popover-hours" %}
Total hours played Total hours played
{% /popover %} {% /popover %}
</span> </span>
<span data-popover-target="popover-sessions" class="flex gap-2 items-center"> <span data-popover-target="popover-sessions"
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> class="flex gap-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" /> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
</svg> </svg>
{{ session_count }} {{ session_count }}
{% #popover id="popover-sessions" %} {% #popover id="popover-sessions" %}
Number of sessions Number of sessions
{% /popover %} {% /popover %}
</span> </span>
<span data-popover-target="popover-average" class="flex gap-2 items-center"> <span data-popover-target="popover-average" class="flex gap-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
</svg> </svg>
{{ session_average_without_manual }} {{ session_average_without_manual }}
{% #popover id="popover-average" %} {% #popover id="popover-average" %}
Average playtime per session Average playtime per session
{% /popover %} {% /popover %}
</span> </span>
<span data-popover-target="popover-playrange" class="flex gap-2 items-center"> <span data-popover-target="popover-playrange"
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> class="flex gap-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
</svg> </svg>
{{ playrange }} {{ playrange }}
{% #popover id="popover-playrange" %} {% #popover id="popover-playrange" %}
Earliest and latest dates played Earliest and latest dates played
{% /popover %} {% /popover %}
</span> </span>
</div> </div>
<div class="inline-flex rounded-md shadow-sm mb-3" role="group"> <div class="inline-flex rounded-md shadow-sm mb-3" role="group">
<a href="{% url 'edit_game' game.id %}"> <a href="{% url 'edit_game' game.id %}">
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white"> <button type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
Edit Edit
</button> </button>
</a> </a>
<a href="{% url 'delete_game' game.id %}"> <a href="{% url 'delete_game' game.id %}">
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white"> <button type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
Delete Delete
</button> </button>
</a> </a>
</div> </div>
</div> </div>
<h1 class="text-3xl mt-4 mb-1 font-condensed"> <h1 class="text-3xl mt-4 mb-1 font-condensed">
Editions <span class="dark:text-slate-500">({{ edition_count }})</span> and Purchases <span class="dark:text-slate-500">({{ purchase_count }})</span> Editions <span class="dark:text-slate-500">({{ edition_count }})</span> and Purchases <span class="dark:text-slate-500">({{ purchase_count }})</span>
</h1> </h1>
@ -110,55 +133,55 @@
<span class="dark:text-slate-500" id="session-count">({{ session_count }})</span> <span class="dark:text-slate-500" id="session-count">({{ session_count }})</span>
{% if latest_session_id %} {% if latest_session_id %}
{% url 'view_game_start_session_from_session' latest_session_id as add_session_link %} {% url 'view_game_start_session_from_session' latest_session_id as add_session_link %}
<a <a class="truncate max-w-xs py-1 px-2 text-xs bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-sm"
class="truncate max-w-xs py-1 px-2 text-xs bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-sm" title="Start new session"
title="Start new session" href="{{ add_session_link }}"
href="{{ add_session_link }}" hx-get="{{ add_session_link }}"
hx-get="{{ add_session_link }}" hx-vals="js:{session_count:getSessionCount()}"
hx-vals="js:{session_count:getSessionCount()}" hx-target="#session-list"
hx-target="#session-list" hx-swap="afterbegin">New</a>
hx-swap="afterbegin"
>New</a>
{% endif %} {% endif %}
and Notes <span class="dark:text-slate-500">({{ sessions_with_notes_count }})</span> and Notes <span class="dark:text-slate-500">({{ sessions_with_notes_count }})</span>
</h1> </h1>
<ul id="session-list"> <ul id="session-list">
{% for session in sessions %} {% for session in sessions %}
{% partialdef session-info inline=True %} {% partialdef session-info inline=True %}
<li class="sm:pl-2 mt-4 mb-2 dark:text-slate-400 flex items-center space-x-1"> <li class="sm:pl-2 mt-4 mb-2 dark:text-slate-400 flex items-center space-x-1">
{{ session.timestamp_start | date:"d/m/Y H:i" }}{% if session.timestamp_end %}-{{ session.timestamp_end | date:"H:i" }}{% endif %} {{ session.timestamp_start | date:"d/m/Y H:i" }}
({{ session.device.get_type_display | default:"Unknown" }}, {{ session.duration_formatted }}) {% if session.timestamp_end %}-{{ session.timestamp_end | date:"H:i" }}{% endif %}
{% url 'edit_session' session.id as edit_url %} ({{ session.device.get_type_display | default:"Unknown" }}, {{ session.duration_formatted }})
{% include 'components/edit_button.html' with edit_url=edit_url %} {% url 'edit_session' session.id as edit_url %}
{% if not session.timestamp_end %} {% include 'components/edit_button.html' with edit_url=edit_url %}
{% url 'view_game_end_session' session.id as end_session_url %} {% if not session.timestamp_end %}
<a {% url 'view_game_end_session' session.id as end_session_url %}
class="flex bg-green-600 rounded-full px-2 w-7 h-4 text-white justify-center items-center" <a class="flex bg-green-600 rounded-full px-2 w-7 h-4 text-white justify-center items-center"
href="{{ end_session_url }}" href="{{ end_session_url }}"
hx-get="{{ end_session_url }}" hx-get="{{ end_session_url }}"
hx-target="closest li" hx-target="closest li"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-vals="js:{session_count:getSessionCount()}" hx-vals="js:{session_count:getSessionCount()}"
hx-indicator="#indicator" hx-indicator="#indicator">
> <svg xmlns="http://www.w3.org/2000/svg"
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" class="h-3" x="0px" y="0px" viewBox="0 0 24 24"> fill="#ffffff"
<path d="M 12 2 C 6.486 2 2 6.486 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 10.874 21.803984 9.7942031 21.458984 8.7832031 L 19.839844 10.402344 C 19.944844 10.918344 20 11.453 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 7.589 7.589 4 12 4 C 13.633 4 15.151922 4.4938906 16.419922 5.3378906 L 17.851562 3.90625 C 16.203562 2.71225 14.185 2 12 2 z M 21.292969 3.2929688 L 11 13.585938 L 7.7070312 10.292969 L 6.2929688 11.707031 L 11 16.414062 L 22.707031 4.7070312 L 21.292969 3.2929688 z"></path> class="h-3"
</svg> x="0px"
</a> y="0px"
viewBox="0 0 24 24">
{% endif %} <path d="M 12 2 C 6.486 2 2 6.486 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 10.874 21.803984 9.7942031 21.458984 8.7832031 L 19.839844 10.402344 C 19.944844 10.918344 20 11.453 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 7.589 7.589 4 12 4 C 13.633 4 15.151922 4.4938906 16.419922 5.3378906 L 17.851562 3.90625 C 16.203562 2.71225 14.185 2 12 2 z M 21.292969 3.2929688 L 11 13.585938 L 7.7070312 10.292969 L 6.2929688 11.707031 L 11 16.414062 L 22.707031 4.7070312 L 21.292969 3.2929688 z">
</li> </path>
<li class="sm:pl-4 markdown-content">{{ session.note|markdown }}</li> </svg>
<div class="hidden" hx-swap-oob="innerHTML:#session-count"> </a>
({{ session_count }}) {% endif %}
</div> </li>
{% endpartialdef %} <li class="sm:pl-4 markdown-content">{{ session.note|markdown }}</li>
{% endfor %} <div class="hidden" hx-swap-oob="innerHTML:#session-count">({{ session_count }})</div>
</ul> {% endpartialdef %}
</div> {% endfor %}
<script> </ul>
</div>
<script>
function getSessionCount() { function getSessionCount() {
return document.getElementById('session-count').textContent.match("[0-9]+"); return document.getElementById('session-count').textContent.match("[0-9]+");
} }
</script> </script>
{% endblock content %} {% endblock content %}