Version 1.5.2

.github/workflows/build-docker.yml

@@ -17,7 +17,7 @@ jobs:
           poetry install
           poetry env info
           poetry run python manage.py migrate
-          poetry run pytest
+          PROD=1 poetry run pytest
   build-and-push:
     needs: test
     runs-on: ubuntu-latest

CHANGELOG.md

@@ -1,8 +1,13 @@
-## Unreleased
+## 1.5.2 / 2024-01-14 21:27+01:00
 
 ## Improved
-* game overview: improve how editions and purchases are displayed
+* game overview:
+  * improve how editions and purchases are displayed
+  * make it possible to end session from overview
 * add purchase: only allow choosing purchases of selected edition
+* session list:
+  * starting and ending sessions is much faster/doest not reload the page
+  * listing sessions is much faster
 
 ## 1.5.1 / 2023-11-14 21:10+01:00
 

Dockerfile

@@ -1,6 +1,6 @@
 FROM python:3.12.0-slim-bullseye
 
-ENV VERSION_NUMBER=1.5.1 \
+ENV VERSION_NUMBER=1.5.2 \
     PROD=1 \
     PYTHONUNBUFFERED=1 \
     PYTHONFAULTHANDLER=1 \

games/forms.py

@@ -83,6 +83,7 @@ class PurchaseForm(forms.ModelForm):
             "date_purchased": custom_date_widget,
             "date_refunded": custom_date_widget,
             "date_finished": custom_date_widget,
+            "date_dropped": custom_date_widget,
         }
         model = Purchase
         fields = [
@@ -91,6 +92,8 @@ class PurchaseForm(forms.ModelForm):
             "date_purchased",
             "date_refunded",
             "date_finished",
+            "date_dropped",
+            "infinite",
             "price",
             "price_currency",
             "ownership_type",

games/migrations/0034_purchase_date_dropped_purchase_infinite.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-01-03 21:27
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("games", "0033_alter_edition_unique_together"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="purchase",
+            name="date_dropped",
+            field=models.DateField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name="purchase",
+            name="infinite",
+            field=models.BooleanField(default=False),
+        ),
+    ]

games/models.py

@@ -116,6 +116,8 @@ class Purchase(models.Model):
     date_purchased = models.DateField()
     date_refunded = models.DateField(blank=True, null=True)
     date_finished = models.DateField(blank=True, null=True)
+    date_dropped = models.DateField(blank=True, null=True)
+    infinite = models.BooleanField(default=False)
     price = models.IntegerField(default=0)
     price_currency = models.CharField(max_length=3, default="USD")
     ownership_type = models.CharField(

games/static/base.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: IBM Plex Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: IBM Plex Sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -567,10 +577,26 @@ select {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
+@media (forced-colors: active)  {
+  [type='checkbox']:checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='radio']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
 
+@media (forced-colors: active)  {
+  [type='radio']:checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
   border-color: transparent;
   background-color: currentColor;
@@ -585,6 +611,14 @@ select {
   background-repeat: no-repeat;
 }
 
+@media (forced-colors: active)  {
+  [type='checkbox']:indeterminate {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
   border-color: transparent;
   background-color: currentColor;
@@ -800,6 +834,11 @@ select {
   margin-bottom: 1.5rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -868,6 +907,18 @@ select {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -884,6 +935,10 @@ select {
   width: 1.75rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
 .w-auto {
   width: auto;
 }
@@ -892,6 +947,14 @@ select {
   width: 100%;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
 .max-w-screen-lg {
   max-width: 1024px;
 }
@@ -904,6 +967,10 @@ select {
   max-width: 20rem;
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -938,6 +1005,12 @@ select {
   gap: 0.5rem;
 }
 
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .self-center {
   align-self: center;
 }
@@ -964,6 +1037,10 @@ select {
   border-radius: 0.125rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -994,6 +1071,16 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1018,6 +1105,16 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1179,7 +1276,7 @@ a:hover {
   transition: all 0.2s ease-out;
 }
 
-:is(.dark form label) {
+:is(:where(.dark) form label) {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
@@ -1189,7 +1286,7 @@ a:hover {
   margin-right: auto;
 }
 
-:is(.dark .responsive-table) {
+:is(:where(.dark) .responsive-table) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
@@ -1220,8 +1317,8 @@ a:hover {
   border-left-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
 
-:is(.dark form input),:is(.dark 
-select),:is(.dark 
+:is(:where(.dark) form input),:is(:where(.dark) 
+select),:is(:where(.dark) 
 textarea) {
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1232,8 +1329,8 @@ textarea) {
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
 
-:is(.dark form input:disabled),:is(.dark 
-select:disabled),:is(.dark 
+:is(:where(.dark) form input:disabled),:is(:where(.dark) 
+select:disabled),:is(:where(.dark) 
 textarea:disabled) {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / var(--tw-bg-opacity));
@@ -1405,36 +1502,6 @@ th label {
   display: block;
 }
 
-:is(.dark .dark\:bg-gray-800) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-gray-900) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:text-slate-400) {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-slate-500) {
-  --tw-text-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-slate-600) {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-white) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:inline {
     display: inline;
@@ -1519,3 +1586,33 @@ th label {
     max-width: 32rem;
   }
 }
+
+:is(:where(.dark) .dark\:bg-gray-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+:is(:where(.dark) .dark\:bg-gray-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+:is(:where(.dark) .dark\:text-slate-400) {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-slate-500) {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-slate-600) {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-white) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}

games/static/js/utils.js

@@ -75,10 +75,6 @@ function syncSelectInputUntilChanged(syncData, parentSelector = document) {
  * @param {string} property - The property to retrieve the value from.
  */
 function getValueFromProperty(sourceElement, property) {
-  let source =
-    sourceElement instanceof HTMLSelectElement
-      ? sourceElement.selectedOptions[0]
-      : sourceElement;
   let source =
     sourceElement instanceof HTMLSelectElement
       ? sourceElement.selectedOptions[0]

games/templates/base.html

@@ -1,3 +1,4 @@
+{% load django_htmx %}
 <!DOCTYPE html>
 <html lang="en">
     {% load static %}
@@ -12,6 +13,7 @@
             {% endblock title %}
         </title>
         <script src="{% static 'js/htmx.min.js' %}"></script>
+        {% django_htmx_script %}
         <link rel="stylesheet" href="{% static 'base.css' %}" />
     </head>
     <body class="dark" hx-indicator="#indicator">

games/templates/list_sessions.html

@@ -4,21 +4,21 @@
     {{ title }}
 {% endblock title %}
 {% block content %}
-    {% if dataset.count >= 1 %}
+    {% if dataset_count >= 1 %}
+        {% url 'list_sessions_start_session_from_session' last.id as start_session_url %}
         <div class="mx-auto text-center my-4">
             <a id="last-session-start"
-               href="{% url 'start_session_same_as_last' last.id %}"
-               hx-get="{% url 'start_session_same_as_last' last.id %}"
-               hx-swap="afterbegin"
-               hx-target=".responsive-table tbody"
-               hx-select=".responsive-table tbody tr:first-child"
-               onClick="document.querySelector('#last-session-start').classList.add('invisible')"
-               class="{% if last.timestamp_end == null %}invisible{% endif %}">
+                href="{{ start_session_url }}"
+                hx-get="{{ start_session_url }}"
+                hx-swap="afterbegin"
+                hx-target=".responsive-table tbody"
+                onClick="document.querySelector('#last-session-start').classList.add('invisible')"
+                class="{% if last.timestamp_end == null %}invisible{% endif %}">
                 {% include 'components/button_start.html' with text=last.purchase title="Start session of last played game" only %}
             </a>
         </div>
     {% endif %}
-    {% if dataset.count != 0 %}
+    {% if dataset_count != 0 %}
         <table class="responsive-table">
             <thead>
                 <tr>
@@ -29,36 +29,38 @@
                 </tr>
             </thead>
             <tbody>
-                {% for data in dataset %}
-                    <tr>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char md:max-w-40char">
-                            <a class="underline decoration-slate-500 sm:decoration-2"
-                               href="{% url 'view_game' data.purchase.edition.game.id %}">
-                                {{ data.purchase.edition }}
-                            </a>
-                        </td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
-                            {{ data.timestamp_start | date:"d/m/Y H:i" }}
-                        </td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell">
-                            {% if data.unfinished %}
-                                <a href="{% url 'update_session' data.id %}"
-                                   hx-get="{% url 'update_session' data.id %}"
-                                   hx-swap="outerHTML"
-                                   hx-target=".responsive-table tbody tr:first-child"
-                                   hx-select=".responsive-table tbody tr:first-child"
-                                   hx-indicator="#indicator"
-                                   onClick="document.querySelector('#last-session-start').classList.remove('invisible')">
-                                    <span class="text-yellow-300">Finish now?</span>
-                                </a>
-                            {% elif data.duration_manual %}
-                                --
-                            {% else %}
-                                {{ data.timestamp_end | date:"d/m/Y H:i" }}
-                            {% endif %}
-                        </td>
-                        <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ data.duration_formatted }}</td>
-                    </tr>
+                {% for session in dataset %}
+                        {% partialdef session-row inline=True %}
+                            <tr>
+                                <td class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char md:max-w-40char">
+                                    <a class="underline decoration-slate-500 sm:decoration-2"
+                                        href="{% url 'view_game' session.purchase.edition.game.id %}">
+                                        {{ session.purchase.edition }}
+                                    </a>
+                                </td>
+                                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
+                                    {{ session.timestamp_start | date:"d/m/Y H:i" }}
+                                </td>
+                                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell">
+                                    {% if not session.timestamp_end %}
+                                    {% url 'list_sessions_end_session' session.id as end_session_url %}
+                                        <a  href="{{ end_session_url }}"
+                                            hx-get="{{ end_session_url }}"
+                                            hx-target="closest tr"
+                                            hx-swap="outerHTML"
+                                            hx-indicator="#indicator"
+                                            onClick="document.querySelector('#last-session-start').classList.remove('invisible')">
+                                            <span class="text-yellow-300">Finish now?</span>
+                                        </a>
+                                    {% elif session.duration_manual %}
+                                        --
+                                    {% else %}
+                                        {{ session.timestamp_end | date:"d/m/Y H:i" }}
+                                    {% endif %}
+                                </td>
+                                <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ session.duration_formatted }}</td>
+                            </tr>
+                        {% endpartialdef %}
                 {% endfor %}
             </tbody>
         </table>

games/templates/stats.html

@@ -43,11 +43,11 @@
                 </tr>
                 <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>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_finished_this_year_count }}</td>
                 </tr>
                 <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>
+                    <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ this_year_finished_this_year_count }}</td>
                 </tr>
                 <tr>
                     <td class="px-2 sm:px-4 md:px-6 md:py-2">Longest session</td>
@@ -63,6 +63,14 @@
                         {{ highest_session_average }} ({{ highest_session_average_game }})
                     </td>
                 </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 font-mono">{{ first_play_name }} ({{ first_play_date }})</td>
+                </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 font-mono">{{ last_play_name }} ({{ last_play_date }})</td>
+                </tr>
             </tbody>
         </table>
         <h1 class="text-5xl text-center my-6">Purchases</h1>
@@ -70,18 +78,18 @@
             <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>
+                    <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 }}%)
+                        {{ all_purchased_refunded_this_year_count }} ({{ refunded_percent }}%)
                     </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 }}%)
+                        {{ purchased_unfinished_count }} ({{ unfinished_purchases_percent }}%)
                     </td>
                 </tr>
                 <tr>
@@ -197,6 +205,33 @@
                 {% endfor %}
             </tbody>
         </table>
+
+        <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">
+                            <a class="underline decoration-slate-500 sm:decoration-2"
+                               href="{% url 'edit_purchase' purchase.id %}">
+                                {{ purchase.edition.name }}
+                                {% if purchase.type == "dlc" %}({{ purchase.name }}, {{ purchase.get_type_display }}){% endif %}
+                            </a>
+                        </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>
+
         <h1 class="text-5xl text-center my-6">All Purchases</h1>
         <table class="responsive-table">
             <thead>

games/templates/view_game.html

@@ -57,20 +57,46 @@
         </ul>
         <h1 class="text-3xl mt-4 mb-1 flex gap-2 items-center">
             Sessions
-            <span class="dark:text-slate-500">({{ sessions.count }})</span>
-            {% url 'start_game_session' game.id as add_session_link %}
-            {% include 'components/button.html' with title="Start new session" text="New" link=add_session_link %}
+            <span class="dark:text-slate-500">({{ session_count }})</span>
+            {% url 'view_game_start_session_from_session' latest_session_id as add_session_link %}
+            <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"
+                title="Start new session"
+                href="{{ add_session_link }}"
+                hx-get="{{ add_session_link }}"
+                hx-target="#session-list"
+                hx-swap="afterbegin"
+            >New</a>
             and Notes <span class="dark:text-slate-500">({{ sessions_with_notes_count }})</span>
         </h1>
-        <ul>
+        <ul id="session-list">
             {% for session in sessions %}
-                <li class="sm:pl-2 mt-4 mb-2 dark:text-slate-400 flex items-center">
-                    {{ session.timestamp_start | date:"d/m/Y H:m" }}
-                    ({{ session.device.get_type_display | default:"Unknown" }}, {{ session.duration_formatted }})
-                    {% url 'edit_session' session.id as edit_url %}
-                    {% include 'components/edit_button.html' with edit_url=edit_url %}
-                </li>
-                <li class="sm:pl-4 italic">{{ session.note|linebreaks }}</li>
+                {% partialdef session-info inline=True %}
+                    <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:m" }}
+                        ({{ session.device.get_type_display | default:"Unknown" }}, {{ session.duration_formatted }})
+                        {% url 'edit_session' session.id as edit_url %}
+                        {% include 'components/edit_button.html' with edit_url=edit_url %}
+                        {% if not session.timestamp_end %}
+                        {% url 'view_game_end_session' session.id as end_session_url %}
+                        <a
+                            class="flex bg-green-600 rounded-full px-2 w-7 h-4 text-white justify-center items-center"
+                            href="{{ end_session_url }}"
+                            hx-get="{{ end_session_url }}"
+                            hx-vals='{"partial":"view_game.html#session-info"}'
+                            hx-target="closest li"
+                            hx-swap="outerHTML"
+                            hx-indicator="#indicator"
+                        >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" class="h-3" x="0px" y="0px" viewBox="0 0 24 24">
+                            <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>
+                        </svg>
+                        </a>
+                        
+                        {% endif %}
+                    </li>
+                    <li class="sm:pl-4 italic">{{ session.note|linebreaks }}</li>
+                {% endpartialdef %}
             {% endfor %}
         </ul>
     </div>

games/urls.py

@@ -19,19 +19,28 @@ urlpatterns = [
         name="add_session_for_purchase",
     ),
     path(
-        "update-session/by-session/<int:session_id>",
-        views.update_session,
-        name="update_session",
+        "session/clone/from-game/<int:session_id>",
+        views.new_session_from_existing_session,
+        {"template": "view_game.html#session-info"},
+        name="view_game_start_session_from_session",
     ),
     path(
-        "start-session-same-as-last/<int:last_session_id>",
-        views.start_session_same_as_last,
-        name="start_session_same_as_last",
+        "session/clone/from-list/<int:session_id>",
+        views.new_session_from_existing_session,
+        {"template": "list_sessions.html#session-row"},
+        name="list_sessions_start_session_from_session",
     ),
     path(
-        "start-session/<int:game_id>",
-        views.start_game_session,
-        name="start_game_session",
+        "session/end/from-game/<int:session_id>",
+        views.end_session,
+        {"template": "view_game.html#session-info"},
+        name="view_game_end_session",
+    ),
+    path(
+        "session/end/from-list/<int:session_id>",
+        views.end_session,
+        {"template": "list_sessions.html#session-row"},
+        name="list_sessions_end_session",
     ),
     # path(
     #     "delete_session/by-id/<int:session_id>",

games/views.py

@@ -1,9 +1,17 @@
-from datetime import datetime, timedelta
+from datetime import datetime
 from typing import Any, Callable
 
-from django.core.exceptions import ObjectDoesNotExist
-from django.db.models import Avg, Count, ExpressionWrapper, F, Prefetch, Q, Sum, fields
-from django.db.models.functions import Extract, TruncDate
+from django.db.models import (
+    Avg,
+    Count,
+    ExpressionWrapper,
+    F,
+    Prefetch,
+    Q,
+    Sum,
+    fields,
+)
+from django.db.models.functions import TruncDate
 from django.http import (
     HttpRequest,
     HttpResponse,
@@ -13,6 +21,7 @@ from django.http import (
 from django.shortcuts import redirect, render
 from django.urls import reverse
 from django.utils import timezone
+from django.shortcuts import get_object_or_404
 
 from common.time import format_duration
 from common.utils import safe_division
@@ -73,13 +82,6 @@ def add_session(request, purchase_id=None):
     return render(request, "add_session.html", context)
 
 
-def update_session(request, session_id=None):
-    session = Session.objects.get(id=session_id)
-    session.finish_now()
-    session.save()
-    return redirect("list_sessions")
-
-
 def use_custom_redirect(
     func: Callable[..., HttpResponse]
 ) -> Callable[..., HttpResponse]:
@@ -158,11 +160,14 @@ def view_game(request, game_id=None):
         .order_by("year_released")
     )
 
-    sessions = Session.objects.filter(purchase__edition__game=game)
+    sessions = Session.objects.prefetch_related("device").filter(
+        purchase__edition__game=game
+    )
     session_count = sessions.count()
 
     playrange_start = sessions.earliest().timestamp_start.strftime("%b %Y")
-    playrange_end = sessions.latest().timestamp_start.strftime("%b %Y")
+    latest_session = sessions.latest()
+    playrange_end = latest_session.timestamp_start.strftime("%b %Y")
 
     playrange = (
         playrange_start
@@ -183,6 +188,7 @@ def view_game(request, game_id=None):
         "sessions": sessions.order_by("-timestamp_start"),
         "title": f"Game Overview - {game.name}",
         "hours_sum": total_hours,
+        "latest_session_id": latest_session.pk,
     }
 
     request.session["return_path"] = request.path
@@ -226,30 +232,34 @@ def related_purchase_by_edition(request):
     return render(request, "partials/related_purchase_field.html", {"form": form})
 
 
+def clone_session_by_id(session_id: int) -> Session:
+    session = get_object_or_404(Session, id=session_id)
+    clone = session
+    clone.pk = None
+    clone.timestamp_start = timezone.now()
+    clone.timestamp_end = None
+    clone.note = ""
+    clone.save()
+    return clone
+
+
 @use_custom_redirect
-def start_game_session(request, game_id: int):
-    last_session = Session.objects.filter(purchase__edition__game_id=game_id).latest()
-    session = SessionForm(
-        {
-            "purchase": last_session.purchase.id,
-            "timestamp_start": timezone.now(),
-            "device": last_session.device,
-        }
-    )
-    session.save()
+def new_session_from_existing_session(request, session_id: int, template: str = ""):
+    session = clone_session_by_id(session_id)
+    if request.htmx:
+        context = {"session": session}
+        return render(request, template, context)
     return redirect("list_sessions")
 
 
-def start_session_same_as_last(request, last_session_id: int):
-    last_session = Session.objects.get(id=last_session_id)
-    session = SessionForm(
-        {
-            "purchase": last_session.purchase.id,
-            "timestamp_start": timezone.now(),
-            "device": last_session.device,
-        }
-    )
+@use_custom_redirect
+def end_session(request, session_id: int, template: str = ""):
+    session = get_object_or_404(Session, id=session_id)
+    session.timestamp_end = timezone.now()
     session.save()
+    if request.htmx:
+        context = {"session": session}
+        return render(request, template, context)
     return redirect("list_sessions")
 
 
@@ -271,45 +281,40 @@ def list_sessions(
     context = {}
     context["title"] = "Sessions"
 
+    all_sessions = Session.objects.prefetch_related(
+        "purchase", "purchase__edition", "purchase__edition__game"
+    ).order_by("-timestamp_start")
+
     if filter == "purchase":
-        dataset = Session.objects.filter(purchase=purchase_id)
+        dataset = all_sessions.filter(purchase=purchase_id)
         context["purchase"] = Purchase.objects.get(id=purchase_id)
     elif filter == "platform":
-        dataset = Session.objects.filter(purchase__platform=platform_id)
+        dataset = all_sessions.filter(purchase__platform=platform_id)
         context["platform"] = Platform.objects.get(id=platform_id)
     elif filter == "edition":
-        dataset = Session.objects.filter(purchase__edition=edition_id)
+        dataset = all_sessions.filter(purchase__edition=edition_id)
         context["edition"] = Edition.objects.get(id=edition_id)
     elif filter == "game":
-        dataset = Session.objects.filter(purchase__edition__game=game_id)
+        dataset = all_sessions.filter(purchase__edition__game=game_id)
         context["game"] = Game.objects.get(id=game_id)
     elif filter == "ownership_type":
-        dataset = Session.objects.filter(purchase__ownership_type=ownership_type)
+        dataset = all_sessions.filter(purchase__ownership_type=ownership_type)
         context["ownership_type"] = dict(Purchase.OWNERSHIP_TYPES)[ownership_type]
     elif filter == "recent":
         current_year = timezone.now().year
         first_day_of_year = timezone.make_aware(datetime(current_year, 1, 1))
-        dataset = Session.objects.filter(
-            timestamp_start__gte=first_day_of_year
-        ).order_by("-timestamp_start")
+        dataset = all_sessions.filter(timestamp_start__gte=first_day_of_year).order_by(
+            "-timestamp_start"
+        )
         context["title"] = "This year"
     else:
-        # by default, sort from newest to oldest
-        dataset = Session.objects.order_by("-timestamp_start")
+        dataset = all_sessions
 
-    for session in dataset:
-        if session.timestamp_end == None and session.duration_manual == timedelta(
-            seconds=0
-        ):
-            session.timestamp_end = timezone.now()
-            session.unfinished = True
-
-    context["total_duration"] = dataset.total_duration_formatted()
-    context["dataset"] = dataset
-    try:
-        context["last"] = Session.objects.latest()
-    except ObjectDoesNotExist:
-        context["last"] = None
+    context = {
+        "dataset": dataset,
+        "dataset_count": dataset.count(),
+        "last": Session.objects.prefetch_related("purchase__platform").latest(),
+    }
 
     return render(request, "list_sessions.html", context)
 
@@ -320,7 +325,9 @@ def stats(request, year: int = 0):
         return HttpResponseRedirect(reverse("stats_by_year", args=[selected_year]))
     if year == 0:
         year = timezone.now().year
-    this_year_sessions = Session.objects.filter(timestamp_start__year=year)
+    this_year_sessions = Session.objects.filter(
+        timestamp_start__year=year
+    ).select_related("purchase__edition")
     this_year_sessions_with_durations = this_year_sessions.annotate(
         duration=ExpressionWrapper(
             F("timestamp_end") - F("timestamp_start"),
@@ -328,7 +335,10 @@ def stats(request, year: int = 0):
         )
     )
     longest_session = this_year_sessions_with_durations.order_by("-duration").first()
-    this_year_games_with_session_counts = Game.objects.annotate(
+    this_year_games = Game.objects.filter(
+        edition__purchase__session__in=this_year_sessions
+    ).distinct()
+    this_year_games_with_session_counts = this_year_games.annotate(
         session_count=Count(
             "edition__purchase__session",
             filter=Q(edition__purchase__session__timestamp_start__year=year),
@@ -349,23 +359,29 @@ def stats(request, year: int = 0):
     ).distinct()
 
     this_year_purchases = Purchase.objects.filter(date_purchased__year=year)
-    this_year_purchases_with_currency = this_year_purchases.filter(
-        price_currency__exact=selected_currency
-    )
+    this_year_purchases_with_currency = this_year_purchases.select_related(
+        "edition"
+    ).filter(price_currency__exact=selected_currency)
     this_year_purchases_without_refunded = this_year_purchases_with_currency.filter(
         date_refunded=None
     )
     this_year_purchases_refunded = this_year_purchases_with_currency.refunded()
 
-    this_year_purchases_unfinished = this_year_purchases_without_refunded.filter(
-        date_finished__isnull=True
-    ).filter(
-        Q(type=Purchase.GAME) | Q(type=Purchase.DLC)
+    this_year_purchases_unfinished = (
+        this_year_purchases_without_refunded.filter(date_finished__isnull=True)
+        .filter(date_dropped__isnull=True)
+        .filter(infinite=False)
+        .filter(Q(type=Purchase.GAME) | Q(type=Purchase.DLC))
     )  # do not count battle passes etc.
 
+    this_year_purchases_without_refunded_count = (
+        this_year_purchases_without_refunded.count()
+    )
+    this_year_purchases_unfinished_count = this_year_purchases_unfinished.count()
     this_year_purchases_unfinished_percent = int(
         safe_division(
-            this_year_purchases_unfinished.count(), this_year_purchases_refunded.count()
+            this_year_purchases_unfinished_count,
+            this_year_purchases_without_refunded_count,
         )
         * 100
     )
@@ -377,10 +393,8 @@ def stats(request, year: int = 0):
         )
     )
     purchased_this_year_finished_this_year = (
-        this_year_purchases_without_refunded.intersection(
-            purchases_finished_this_year
-        ).order_by("date_finished")
-    )
+        this_year_purchases_without_refunded.filter(date_finished__year=year)
+    ).order_by("date_finished")
 
     this_year_spendings = this_year_purchases_without_refunded.aggregate(
         total_spent=Sum(F("price"))
@@ -425,6 +439,20 @@ def stats(request, year: int = 0):
         .count()
     )
 
+    first_play_name = "N/A"
+    first_play_date = "N/A"
+    last_play_name = "N/A"
+    last_play_date = "N/A"
+    if this_year_sessions:
+        first_session = this_year_sessions.earliest()
+        first_play_name = first_session.purchase.edition.name
+        first_play_date = first_session.timestamp_start.strftime("%x")
+        last_session = this_year_sessions.latest()
+        last_play_name = last_session.purchase.edition.name
+        last_play_date = last_session.timestamp_start.strftime("%x")
+
+    all_purchased_this_year_count = this_year_purchases_with_currency.count()
+    all_purchased_refunded_this_year_count = this_year_purchases_refunded.count()
     context = {
         "total_hours": format_duration(
             this_year_sessions.total_duration_unformatted(), "%2.0H"
@@ -440,45 +468,68 @@ def stats(request, year: int = 0):
         "total_spent_currency": selected_currency,
         "all_purchased_this_year": this_year_purchases_without_refunded,
         "spent_per_game": int(
-            safe_division(total_spent, this_year_purchases_without_refunded.count())
+            safe_division(total_spent, this_year_purchases_without_refunded_count)
         ),
-        "all_finished_this_year": purchases_finished_this_year.order_by(
+        "all_finished_this_year": purchases_finished_this_year.select_related(
+            "edition"
+        ).order_by("date_finished"),
+        "all_finished_this_year_count": purchases_finished_this_year.count(),
+        "this_year_finished_this_year": purchases_finished_this_year_released_this_year.select_related(
+            "edition"
+        ).order_by(
             "date_finished"
         ),
-        "this_year_finished_this_year": purchases_finished_this_year_released_this_year.order_by(
-            "date_finished"
-        ),
-        "purchased_this_year_finished_this_year": purchased_this_year_finished_this_year.order_by(
+        "this_year_finished_this_year_count": purchases_finished_this_year_released_this_year.count(),
+        "purchased_this_year_finished_this_year": purchased_this_year_finished_this_year.select_related(
+            "edition"
+        ).order_by(
             "date_finished"
         ),
         "total_sessions": this_year_sessions.count(),
         "unique_days": unique_days["dates"],
         "unique_days_percent": int(unique_days["dates"] / 365 * 100),
         "purchased_unfinished": this_year_purchases_unfinished,
+        "purchased_unfinished_count": this_year_purchases_unfinished_count,
         "unfinished_purchases_percent": this_year_purchases_unfinished_percent,
         "refunded_percent": int(
             safe_division(
-                this_year_purchases_refunded.count(),
-                this_year_purchases_with_currency.count(),
+                all_purchased_refunded_this_year_count,
+                all_purchased_this_year_count,
             )
             * 100
         ),
         "all_purchased_refunded_this_year": this_year_purchases_refunded,
+        "all_purchased_refunded_this_year_count": all_purchased_refunded_this_year_count,
         "all_purchased_this_year": this_year_purchases_with_currency.order_by(
             "date_purchased"
         ),
+        "all_purchased_this_year_count": all_purchased_this_year_count,
         "backlog_decrease_count": backlog_decrease_count,
         "longest_session_time": format_duration(
-            longest_session.duration if longest_session else timedelta(0),
-            "%2.0Hh %2.0mm",
-        ),
-        "longest_session_game": longest_session.purchase.edition.name,
-        "highest_session_count": game_highest_session_count.session_count,
-        "highest_session_count_game": game_highest_session_count.name,
+            longest_session.duration, "%2.0Hh %2.0mm"
+        )
+        if longest_session
+        else 0,
+        "longest_session_game": longest_session.purchase.edition.name
+        if longest_session
+        else "N/A",
+        "highest_session_count": game_highest_session_count.session_count
+        if game_highest_session_count
+        else 0,
+        "highest_session_count_game": game_highest_session_count.name
+        if game_highest_session_count
+        else "N/A",
         "highest_session_average": format_duration(
             highest_session_average_game.session_average, "%2.0Hh %2.0mm"
-        ),
+        )
+        if highest_session_average_game
+        else 0,
         "highest_session_average_game": highest_session_average_game,
+        "first_play_name": first_play_name,
+        "first_play_date": first_play_date,
+        "last_play_name": last_play_name,
+        "last_play_date": last_play_date,
+        "title": f"{year} Stats",
     }
 
     request.session["return_path"] = request.path

poetry.lock

@@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 1.7.1 and should not be changed by hand.
+# This file is automatically @generated by Poetry 1.7.0 and should not be changed by hand.
 
 [[package]]
 name = "aniso8601"
@@ -172,6 +172,39 @@ files = [
 [package.dependencies]
 Django = ">=3.2"
 
+[[package]]
+name = "django-htmx"
+version = "1.17.2"
+description = "Extensions for using Django with htmx."
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "django-htmx-1.17.2.tar.gz", hash = "sha256:4089f2ed38727e9846c2f4cd1daddf6b010c7be8d834cfbcffc8c5ecf445c04e"},
+    {file = "django_htmx-1.17.2-py3-none-any.whl", hash = "sha256:f4971432d2ca45dbb31d9b58add1c50ae54354afe4bf59cafd591b1711b502c0"},
+]
+
+[package.dependencies]
+asgiref = ">=3.6"
+Django = ">=3.2"
+
+[[package]]
+name = "django-template-partials"
+version = "23.4"
+description = "django-template-partials"
+optional = false
+python-versions = "*"
+files = [
+    {file = "django-template-partials-23.4.tar.gz", hash = "sha256:f762b0b7b2222462df0845f0556792640b769eb832eae218a0e7dadd4e5606cc"},
+    {file = "django_template_partials-23.4-py2.py3-none-any.whl", hash = "sha256:d83d9c2d2836be769919e9aaf394d5feb1ac86e1187083030398308070122fca"},
+]
+
+[package.dependencies]
+Django = "*"
+
+[package.extras]
+docs = ["Sphinx"]
+tests = ["coverage", "django_coverage_plugin"]
+
 [[package]]
 name = "djhtml"
 version = "1.5.2"
@@ -986,5 +1019,5 @@ watchdog = ["watchdog (>=2.3)"]
 
 [metadata]
 lock-version = "2.0"
-python-versions = "^3.12"
-content-hash = "e864dc8abf6c84e5bb16ac2aa937c2a70561d15f3e8a1459866b9d6507e8773e"
+python-versions = "^3.11"
+content-hash = "4662e73ad621b11cbe5b517ca08aae4cbeb350bfcc855a6c067861942e232d2a"

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "timetracker"
-version = "1.5.1"
+version = "1.5.2"
 description = "A simple time tracker."
 authors = ["Lukáš Kucharczyk <lukas@kucharczyk.xyz>"]
 license = "GPL"
@@ -8,11 +8,13 @@ readme = "README.md"
 packages = [{include = "timetracker"}]
 
 [tool.poetry.group.main.dependencies]
-python = "^3.12"
+python = "^3.11"
 django = "^4.2.0"
 gunicorn = "^20.1.0"
 uvicorn = "^0.20.0"
 graphene-django = "^3.1.5"
+django-htmx = "^1.17.2"
+django-template-partials = "^23.4"
 
 [tool.poetry.group.dev.dependencies]
 black = "^22.12.0"
@@ -27,6 +29,7 @@ isort = "^5.11.4"
 pre-commit = "^3.5.0"
 django-debug-toolbar = "^4.2.0"
 
+
 [tool.isort]
 profile = "black"
 

timetracker/settings.py

@@ -38,7 +38,9 @@ INSTALLED_APPS = [
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "template_partials",
     "graphene_django",
+    "django_htmx",
 ]
 
 GRAPHENE = {"SCHEMA": "games.schema.schema"}
@@ -56,6 +58,7 @@ MIDDLEWARE = [
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    "django_htmx.middleware.HtmxMiddleware",
 ]
 
 if DEBUG:
@@ -79,6 +82,7 @@ TEMPLATES = [
                 "games.views.model_counts",
                 "games.views.stats_dropdown_year_range",
             ],
+            "builtins": ["template_partials.templatetags.partials"],
         },
     },
 ]