update django-cotton to 1.2.1
This commit is contained in:
@ -1,24 +1,2 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<table class="mx-auto">
|
||||
{% csrf_token %}
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" value="Submit" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
{% block scripts %}
|
||||
{% if script_name %}
|
||||
<script type="module" src="{% static 'js/'|add:script_name %}"></script>
|
||||
{% endif %}
|
||||
{% endblock scripts %}
|
||||
<c-layouts.add>
|
||||
</c-layouts.add>
|
||||
|
||||
@ -1,32 +1,12 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<table class="mx-auto">
|
||||
{% csrf_token %}
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" name="submit" value="Submit" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit"
|
||||
name="submit_and_redirect"
|
||||
value="Submit & Create Purchase" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
{% block scripts %}
|
||||
{% if script_name %}
|
||||
<script type="module" src="{% static 'js/'|add:script_name %}"></script>
|
||||
{% endif %}
|
||||
{% endblock scripts %}
|
||||
<c-layouts.add>
|
||||
<c-slot name="additional_row">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit"
|
||||
name="submit_and_redirect"
|
||||
value="Submit & Create Purchase" />
|
||||
</td>
|
||||
</tr>
|
||||
</c-slot>
|
||||
</c-layouts.add>
|
||||
|
||||
@ -1,32 +1,12 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<table class="mx-auto">
|
||||
{% csrf_token %}
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" name="submit" value="Submit" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit"
|
||||
name="submit_and_redirect"
|
||||
value="Submit & Create Edition" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
{% block scripts %}
|
||||
{% if script_name %}
|
||||
<script type="module" src="{% static 'js/'|add:script_name %}"></script>
|
||||
{% endif %}
|
||||
{% endblock scripts %}
|
||||
<c-layouts.add>
|
||||
<c-slot name="additional_row">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit"
|
||||
name="submit_and_redirect"
|
||||
value="Submit & Create Edition" />
|
||||
</td>
|
||||
</tr>
|
||||
</c-slot>
|
||||
</c-layouts.add>
|
||||
|
||||
@ -1,42 +1,12 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<table class="mx-auto">
|
||||
{% csrf_token %}
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" name="submit" value="Submit" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit"
|
||||
name="submit_and_redirect"
|
||||
value="Submit & Create Session" />
|
||||
</td>
|
||||
</tr>
|
||||
{% if purchase_id %}
|
||||
<tr>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
{% block scripts %}
|
||||
{% if script_name %}
|
||||
<script type="module" src="{% static 'js/'|add:script_name %}"></script>
|
||||
{% endif %}
|
||||
{% endblock scripts %}
|
||||
<c-layouts.add>
|
||||
<c-slot name="additional_row">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit"
|
||||
name="submit_and_redirect"
|
||||
value="Submit & Create Session" />
|
||||
</td>
|
||||
</tr>
|
||||
</c-slot>
|
||||
</c-layouts.add>
|
||||
|
||||
@ -1,40 +1,36 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<table class="mx-auto">
|
||||
{% csrf_token %}
|
||||
{% for field in form %}
|
||||
<tr>
|
||||
<th>{{ field.label_tag }}</th>
|
||||
{% if field.name == "note" %}
|
||||
<td>{{ field }}</td>
|
||||
{% else %}
|
||||
<td>{{ field }}</td>
|
||||
{% endif %}
|
||||
{% if field.name == "timestamp_start" or field.name == "timestamp_end" %}
|
||||
<td>
|
||||
<div class="basic-button-container" hx-boost="false">
|
||||
<button class="basic-button" data-target="{{ field.name }}" data-type="now">Set to now</button>
|
||||
<button class="basic-button"
|
||||
data-target="{{ field.name }}"
|
||||
data-type="toggle">Toggle text</button>
|
||||
<button class="basic-button" data-target="{{ field.name }}" data-type="copy">Copy</button>
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<c-layouts.add>
|
||||
<c-slot name="form_content">
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<table class="mx-auto">
|
||||
{% csrf_token %}
|
||||
{% for field in form %}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" value="Submit" />
|
||||
</td>
|
||||
<th>{{ field.label_tag }}</th>
|
||||
{% if field.name == "note" %}
|
||||
<td>{{ field }}</td>
|
||||
{% else %}
|
||||
<td>{{ field }}</td>
|
||||
{% endif %}
|
||||
{% if field.name == "timestamp_start" or field.name == "timestamp_end" %}
|
||||
<td>
|
||||
<div class="basic-button-container" hx-boost="false">
|
||||
<button class="basic-button" data-target="{{ field.name }}" data-type="now">Set to now</button>
|
||||
<button class="basic-button"
|
||||
data-target="{{ field.name }}"
|
||||
data-type="toggle">Toggle text</button>
|
||||
<button class="basic-button" data-target="{{ field.name }}" data-type="copy">Copy</button>
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
{% load static %}
|
||||
<script type="module" src="{% static 'js/add_session.js' %}"></script>
|
||||
{% endblock content %}
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" value="Submit" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</c-slot>
|
||||
</c-layouts.add>
|
||||
|
||||
25
games/templates/cotton/layouts/add.html
Normal file
25
games/templates/cotton/layouts/add.html
Normal file
@ -0,0 +1,25 @@
|
||||
<c-layouts.base>
|
||||
{% load static %}
|
||||
{% if form_content %}
|
||||
{{ form_content }}
|
||||
{% else %}
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<table class="mx-auto">
|
||||
{% csrf_token %}
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" value="Submit" />
|
||||
</td>
|
||||
</tr>
|
||||
{{ additional_row }}
|
||||
</table>
|
||||
</form>
|
||||
{% endif %}
|
||||
<c-slot name="scripts">
|
||||
{% if script_name %}
|
||||
<script type="module" src="{% static 'js/'|add:script_name %}"></script>
|
||||
{% endif %}
|
||||
</c-slot>
|
||||
</c-layouts.base>
|
||||
@ -7,11 +7,7 @@
|
||||
<meta name="description" content="Self-hosted time-tracker." />
|
||||
<meta name="keywords" content="time, tracking, video games, self-hosted" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Timetracker -
|
||||
{% block title %}
|
||||
Untitled
|
||||
{% endblock title %}
|
||||
</title>
|
||||
<title>Timetracker - {{ title }}</title>
|
||||
<script src="{% static 'js/htmx.min.js' %}"></script>
|
||||
{% django_htmx_script %}
|
||||
<link rel="stylesheet" href="{% static 'base.css' %}" />
|
||||
@ -34,16 +30,11 @@
|
||||
alt="loading indicator" />
|
||||
<div class="flex flex-col min-h-screen">
|
||||
{% include "navbar.html" %}
|
||||
<div class="flex flex-1 flex-col dark:bg-gray-800 pt-8">
|
||||
{% block content %}
|
||||
No content here.
|
||||
{% endblock content %}
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col dark:bg-gray-800 pt-8">{{ slot }}</div>
|
||||
{% load version %}
|
||||
<span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
|
||||
</div>
|
||||
{% block scripts %}
|
||||
{% endblock scripts %}
|
||||
{{ scripts }}
|
||||
<script>
|
||||
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
||||
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
||||
@ -1,10 +1,6 @@
|
||||
{% extends "base.html" %}
|
||||
<c-layouts.base>
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<div class="2xl:max-w-screen-2xl xl:max-w-screen-xl md:max-w-screen-md sm:max-w-screen-sm self-center">
|
||||
<c-simple-table :columns=data.columns :rows=data.rows :page_obj=page_obj :elided_page_range=elided_page_range :header_action=data.header_action />
|
||||
</div>
|
||||
{% endblock content %}
|
||||
<div class="2xl:max-w-screen-2xl xl:max-w-screen-xl md:max-w-screen-md sm:max-w-screen-sm self-center">
|
||||
<c-simple-table :columns=data.columns :rows=data.rows :page_obj=page_obj :elided_page_range=elided_page_range :header_action=data.header_action />
|
||||
</div>
|
||||
</c-layouts.base>
|
||||
|
||||
@ -1,22 +1,18 @@
|
||||
{% extends "base.html" %}
|
||||
<c-layouts.base title="Login">
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
Login
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<div class="flex items-center flex-col">
|
||||
<h2 class="text-3xl text-white mb-8">Please log in to continue</h2>
|
||||
<form method="post">
|
||||
<table>
|
||||
{% csrf_token %}
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" value="Login" />
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
<div class="flex items-center flex-col">
|
||||
<h2 class="text-3xl text-white mb-8">Please log in to continue</h2>
|
||||
<form method="post">
|
||||
<table>
|
||||
{% csrf_token %}
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" value="Login" />
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
</table>
|
||||
</div>
|
||||
</c-layouts.base>
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
<c-layouts.base>
|
||||
{% load static %}
|
||||
{% partialdef purchase-name %}
|
||||
{% if purchase.type != 'game' %}
|
||||
@ -12,278 +9,277 @@
|
||||
<c-gamelink :game_id=purchase.edition.game.id :name=purchase.edition.name />
|
||||
{% endif %}
|
||||
{% endpartialdef %}
|
||||
{% block content %}
|
||||
<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">
|
||||
<form method="get" class="text-center">
|
||||
<label class="text-5xl text-center inline-block mb-10" for="yearSelect">Stats for:</label>
|
||||
<select name="year"
|
||||
id="yearSelect"
|
||||
onchange="this.form.submit();"
|
||||
class="mx-2">
|
||||
{% for year_item in stats_dropdown_year_range %}
|
||||
<option value="{{ year_item }}" {% if year == year_item %}selected{% endif %}>{{ year_item }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<h1 class="text-5xl text-center my-6">Playtime</h1>
|
||||
<table class="responsive-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Hours</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_hours }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Sessions</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_sessions }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Days</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ unique_days }} ({{ unique_days_percent }}%)</td>
|
||||
</tr>
|
||||
{% if total_games %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Games</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_games }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Games ({{ year }})</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_2023_games }}</td>
|
||||
</tr>
|
||||
{% if all_finished_this_year_count %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Finished</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_finished_this_year_count }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Finished ({{ year }})</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ this_year_finished_this_year_count }}</td>
|
||||
</tr>
|
||||
{% if longest_session_game.id %}
|
||||
<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 font-mono">
|
||||
{{ longest_session_time }} (<c-gamelink :game_id=longest_session_game.id :name=longest_session_game.name />)
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if highest_session_count_game.id %}
|
||||
<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 font-mono">
|
||||
{{ highest_session_count }} (<c-gamelink :game_id=highest_session_count_game.id :name=highest_session_count_game.name />)
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if highest_session_average_game.id %}
|
||||
<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 font-mono">
|
||||
{{ highest_session_average }} (<c-gamelink :game_id=highest_session_average_game.id :name=highest_session_average_game.name />)
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if first_play_game.id %}
|
||||
<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 font-mono">
|
||||
<c-gamelink :game_id=first_play_game.id :name=first_play_game.name /> ({{ first_play_date }})
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if last_play_game.id %}
|
||||
<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 font-mono">
|
||||
<c-gamelink :game_id=last_play_game.id :name=last_play_game.name /> ({{ last_play_date }})
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if month_playtime %}
|
||||
<h1 class="text-5xl text-center my-6">Playtime per month</h1>
|
||||
<table class="responsive-table">
|
||||
<tbody>
|
||||
{% for month in month_playtimes %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">{{ month.month | date:"F" }}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ month.playtime }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
<h1 class="text-5xl text-center my-6">Purchases</h1>
|
||||
<table class="responsive-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Total</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_purchased_this_year_count }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Refunded</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
{{ all_purchased_refunded_this_year_count }} ({{ refunded_percent }}%)
|
||||
</td>
|
||||
</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 font-mono">{{ dropped_count }} ({{ dropped_percentage }}%)</td>
|
||||
</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 font-mono">
|
||||
{{ purchased_unfinished_count }} ({{ unfinished_purchases_percent }}%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Backlog Decrease</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ backlog_decrease_count }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Spendings ({{ total_spent_currency }})</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_spent }} ({{ spent_per_game }}/game)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h1 class="text-5xl text-center my-6">Top games by playtime</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for game in top_10_games_by_playtime %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
<c-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>
|
||||
</tr>
|
||||
<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">
|
||||
<form method="get" class="text-center">
|
||||
<label class="text-5xl text-center inline-block mb-10" for="yearSelect">Stats for:</label>
|
||||
<select name="year"
|
||||
id="yearSelect"
|
||||
onchange="this.form.submit();"
|
||||
class="mx-2">
|
||||
{% for year_item in stats_dropdown_year_range %}
|
||||
<option value="{{ year_item }}" {% if year == year_item %}selected{% endif %}>{{ year_item }}</option>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<h1 class="text-5xl text-center my-6">Platforms by playtime</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Platform</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in total_playtime_per_platform %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.platform_name }}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.formatted_playtime }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if all_finished_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">Finished</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in all_finished_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if this_year_finished_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">Finished ({{ year }} games)</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in this_year_finished_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if purchased_this_year_finished_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">Bought and Finished ({{ year }})</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in purchased_this_year_finished_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if purchased_unfinished %}
|
||||
<h1 class="text-5xl text-center my-6">Unfinished Purchases</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in purchased_unfinished %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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.date_purchased | date:"d/m/Y" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if all_purchased_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">All Purchases</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in all_purchased_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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.date_purchased | date:"d/m/Y" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
<h1 class="text-5xl text-center my-6">Playtime</h1>
|
||||
<table class="responsive-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Hours</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_hours }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Sessions</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_sessions }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Days</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ unique_days }} ({{ unique_days_percent }}%)</td>
|
||||
</tr>
|
||||
{% if total_games %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Games</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_games }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Games ({{ year }})</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_2023_games }}</td>
|
||||
</tr>
|
||||
{% if all_finished_this_year_count %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Finished</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_finished_this_year_count }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Finished ({{ year }})</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ this_year_finished_this_year_count }}</td>
|
||||
</tr>
|
||||
{% if longest_session_game.id %}
|
||||
<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 font-mono">
|
||||
{{ longest_session_time }} (<c-gamelink :game_id=longest_session_game.id :name=longest_session_game.name />)
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if highest_session_count_game.id %}
|
||||
<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 font-mono">
|
||||
{{ highest_session_count }} (<c-gamelink :game_id=highest_session_count_game.id :name=highest_session_count_game.name />)
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if highest_session_average_game.id %}
|
||||
<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 font-mono">
|
||||
{{ highest_session_average }} (<c-gamelink :game_id=highest_session_average_game.id :name=highest_session_average_game.name />)
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if first_play_game.id %}
|
||||
<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 font-mono">
|
||||
<c-gamelink :game_id=first_play_game.id :name=first_play_game.name /> ({{ first_play_date }})
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if last_play_game.id %}
|
||||
<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 font-mono">
|
||||
<c-gamelink :game_id=last_play_game.id :name=last_play_game.name /> ({{ last_play_date }})
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if month_playtime %}
|
||||
<h1 class="text-5xl text-center my-6">Playtime per month</h1>
|
||||
<table class="responsive-table">
|
||||
<tbody>
|
||||
{% for month in month_playtimes %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">{{ month.month | date:"F" }}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ month.playtime }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
<h1 class="text-5xl text-center my-6">Purchases</h1>
|
||||
<table class="responsive-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Total</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_purchased_this_year_count }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Refunded</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
{{ all_purchased_refunded_this_year_count }} ({{ refunded_percent }}%)
|
||||
</td>
|
||||
</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 font-mono">{{ dropped_count }} ({{ dropped_percentage }}%)</td>
|
||||
</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 font-mono">
|
||||
{{ purchased_unfinished_count }} ({{ unfinished_purchases_percent }}%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Backlog Decrease</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ backlog_decrease_count }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Spendings ({{ total_spent_currency }})</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_spent }} ({{ spent_per_game }}/game)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h1 class="text-5xl text-center my-6">Top games by playtime</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for game in top_10_games_by_playtime %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
<c-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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<h1 class="text-5xl text-center my-6">Platforms by playtime</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Platform</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime (hours)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in total_playtime_per_platform %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.platform_name }}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.formatted_playtime }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if all_finished_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">Finished</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in all_finished_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if this_year_finished_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">Finished ({{ year }} games)</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in this_year_finished_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if purchased_this_year_finished_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">Bought and Finished ({{ year }})</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in purchased_this_year_finished_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if purchased_unfinished %}
|
||||
<h1 class="text-5xl text-center my-6">Unfinished Purchases</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in purchased_unfinished %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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.date_purchased | date:"d/m/Y" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if all_purchased_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">All Purchases</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in all_purchased_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% 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.date_purchased | date:"d/m/Y" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
</div>
|
||||
</c-layouts.base>
|
||||
|
||||
@ -1,94 +1,88 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% load static %}
|
||||
{% load markdown_extras %}
|
||||
{% block content %}
|
||||
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
|
||||
<div id="game-info" class="mb-10">
|
||||
<div class="flex gap-5 mb-3">
|
||||
<span class="text-balance max-w-[30rem] text-4xl">
|
||||
<span class="font-bold font-serif">{{ game.name }}</span> <c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">{{ game.year_released }}</c-popover>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-4 dark:text-slate-400 mb-3">
|
||||
<c-popover id="popover-hours" popover_content="Total hours played" 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="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
{{ hours_sum }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-sessions" popover_content="Number of sessions" 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" />
|
||||
</svg>
|
||||
{{ session_count }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-average" popover_content="Average playtime per session" 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="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>
|
||||
{{ session_average_without_manual }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-playrange" popover_content="Earliest and latest dates played" 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" />
|
||||
</svg>
|
||||
{{ playrange }}
|
||||
</c-popover>
|
||||
</div>
|
||||
<div class="inline-flex rounded-md shadow-sm mb-3" role="group">
|
||||
<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">
|
||||
Edit
|
||||
</button>
|
||||
</a>
|
||||
<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">
|
||||
Delete
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<c-layouts.base>
|
||||
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
|
||||
<div id="game-info" class="mb-10">
|
||||
<div class="flex gap-5 mb-3">
|
||||
<span class="text-balance max-w-[30rem] text-4xl">
|
||||
<span class="font-bold font-serif">{{ game.name }}</span> <c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">{{ game.year_released }}</c-popover>
|
||||
</span>
|
||||
</div>
|
||||
<c-h1 :badge=edition_count>Editions</c-h1>
|
||||
<div class="mb-6">
|
||||
<c-simple-table :rows=edition_data.rows :columns=edition_data.columns />
|
||||
<div class="flex gap-4 dark:text-slate-400 mb-3">
|
||||
<c-popover id="popover-hours" popover_content="Total hours played" 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="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
{{ hours_sum }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-sessions" popover_content="Number of sessions" 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" />
|
||||
</svg>
|
||||
{{ session_count }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-average" popover_content="Average playtime per session" 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="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>
|
||||
{{ session_average_without_manual }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-playrange" popover_content="Earliest and latest dates played" 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" />
|
||||
</svg>
|
||||
{{ playrange }}
|
||||
</c-popover>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<c-h1 :badge=purchase_count>Purchases</c-h1>
|
||||
<c-simple-table :rows=purchase_data.rows :columns=purchase_data.columns />
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<c-h1 :badge=session_count>Sessions</c-h1>
|
||||
<c-simple-table :rows=session_data.rows :columns=session_data.columns :header_action=session_data.header_action :page_obj=session_page_obj :elided_page_range=session_elided_page_range />
|
||||
<div class="inline-flex rounded-md shadow-sm mb-3" role="group">
|
||||
<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">
|
||||
Edit
|
||||
</button>
|
||||
</a>
|
||||
<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">
|
||||
Delete
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function getSessionCount() {
|
||||
return document.getElementById('session-count').textContent.match("[0-9]+");
|
||||
}
|
||||
</script>
|
||||
{% endblock content %}
|
||||
<c-h1 :badge="edition_count">Editions</c-h1>
|
||||
<div class="mb-6">
|
||||
<c-simple-table :rows=edition_data.rows :columns=edition_data.columns />
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<c-h1 :badge="purchase_count">Purchases</c-h1>
|
||||
<c-simple-table :rows=purchase_data.rows :columns=purchase_data.columns />
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<c-h1 :badge="session_count">Sessions</c-h1>
|
||||
<c-simple-table :rows=session_data.rows :columns=session_data.columns :header_action=session_data.header_action :page_obj=session_page_obj :elided_page_range=session_elided_page_range />
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function getSessionCount() {
|
||||
return document.getElementById('session-count').textContent.match("[0-9]+");
|
||||
}
|
||||
</script>
|
||||
</c-layouts.base>
|
||||
|
||||
Reference in New Issue
Block a user