Allow filtering by platform and game

Fixes #32

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.2.3 / 2023-01-15 23:13+01:00
+
+* Allow filtering by platform and game on session list (https://git.kucharczyk.xyz/lukas/timetracker/issues/32)
+* Order session by newest as preparation for https://git.kucharczyk.xyz/lukas/timetracker/issues/33
+
 ## 0.2.2 / 2023-01-15 17:59+01:00
 
 * Display playtime graph on session list (https://git.kucharczyk.xyz/lukas/timetracker/issues/29)

Dockerfile

@@ -6,7 +6,7 @@ RUN npm install && \
 
 FROM python:3.10.9-slim-bullseye
 
-ENV VERSION_NUMBER 0.2.2
+ENV VERSION_NUMBER 0.2.3
 ENV PROD 1
 ENV PYTHONUNBUFFERED=1
 

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "timetracker"
-version = "0.2.2"
+version = "0.2.3"
 description = "A simple time tracker."
 authors = ["Lukáš Kucharczyk <lukas@kucharczyk.xyz>"]
 license = "GPL"

src/input.css

@@ -14,7 +14,7 @@ textarea {
 
 #session-table {
   display: grid;
-  grid-template-columns: repeat(3, 2fr) 0.5fr 1fr;
+  grid-template-columns: 3fr 1fr repeat(2, 2fr) 0.5fr 1fr;
 }
 
 #button-container button {

src/web/tracker/static/base.css

@@ -786,6 +786,11 @@ select {
   margin-right: auto;
 }
 
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -794,14 +799,26 @@ select {
   margin-top: 1rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
+.mb-3 {
+  margin-bottom: 0.75rem;
 }
 
 .ml-1 {
   margin-left: 0.25rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .block {
   display: block;
 }
@@ -842,6 +859,10 @@ select {
   display: none !important;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -858,6 +879,10 @@ select {
   width: 100%;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -910,12 +935,20 @@ select {
   align-self: center;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1052,6 +1085,11 @@ select {
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1122,7 +1160,7 @@ textarea {
 
 #session-table {
   display: grid;
-  grid-template-columns: repeat(3, 2fr) 0.5fr 1fr;
+  grid-template-columns: 3fr 1fr repeat(2, 2fr) 0.5fr 1fr;
 }
 
 #button-container button {

src/web/tracker/templates/list_sessions.html

@@ -5,29 +5,39 @@
 {% block content %}
         <div class="text-center text-xl mb-4 dark:text-slate-400">
             {% if dataset.count >= 2 %}
-            <img src="data:image/svg+xml;base64,{{ chart|safe }}" class="mx-auto mb-5" />
-            <a href="{% url 'start_session' dataset.last.purchase.id %}">
-                <button type="button" title="Track last tracked" class="py-1 px-2 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 text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg ">
-                    New session of {{ dataset.last.purchase }}
+            <img src="data:image/svg+xml;base64,{{ chart|safe }}" class="mx-auto mb-3" />
+            {% endif %}
+            {% if dataset.count >= 1 %}
+            <div class="mb-4">Total playtime: {{ total_duration }} over {{ dataset.count }} sessions.</div>
+            {% endif %}
+            {% if purchase or platform %}
+            <a class="text-red-400 inline" href="{% url 'list_sessions' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 inline">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              </a><span>Filtering by "{% firstof purchase platform %}"</span>
+            {% if purchase %}<a class="dark:text-white hover:underline block" href="{% url 'list_sessions_by_game' purchase.game.id %}">See all platforms</a>{% endif %}
+            {% endif %}
+            {% if dataset.count >= 1 %}
+            <a class="block" href="{% url 'start_session' dataset.last.purchase.id %}">
+                <button type="button" title="Track last tracked" class="mt-10 py-1 px-2 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 text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg ">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="self-center w-6 h-6 inline">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+                    </svg>
+                    {{ dataset.last.purchase }}
                 </button>
             </a>
-            {% else %}
-            Playtime chart will be displayed when there are 2 or more sessions.
-            {% endif %}
-            {% if purchase %}
-            <h1>Listing sessions only for purchase "{{ purchase }}"</h1>
-            <h2>Total playtime: {{ total_duration }} over {{ dataset.count }} sessions.</h2>
-            <a class="dark:text-white hover:underline" href="{% url 'list_sessions' %}">View all sessions</a>
             {% endif %}
         </div>
     <div id="session-table" class="gap-4 shadow rounded-xl max-w-screen-lg mx-auto dark:bg-slate-700 p-2 justify-center">
         <div class="dark:border-white dark:text-slate-300 text-lg">Name</div>
+        <div class="dark:border-white dark:text-slate-300 text-lg">Platform</div>
         <div class="dark:border-white dark:text-slate-300 text-lg text-center">Start</div>
         <div class="dark:border-white dark:text-slate-300 text-lg text-center">End</div>
         <div class="dark:border-white dark:text-slate-300 text-lg">Duration</div>
         <div class="dark:border-white dark:text-slate-300 text-lg text-right">Manage</div>
         {% for data in dataset %}
-            <div><a class="dark:text-white hover:underline" href="{% url 'list_sessions' data.purchase.id %}">{{ data.purchase }}</a></div>
+            <div class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap"><a class="hover:underline" href="{% url 'list_sessions_by_purchase' data.purchase.id %}">{{ data.purchase.game }}</a></div>
+            <div class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap"><a class="hover:underline" href="{% url 'list_sessions_by_platform' data.purchase.platform.id %}">{{ data.purchase.platform }}</a></div>
             <div class="dark:text-slate-400 text-center">{{ data.timestamp_start | date:"d/m/Y H:i" }}</div>
             <div class="dark:text-slate-400 text-center">
                 {% if data.unfinished %}

src/web/tracker/urls.py

@@ -27,6 +27,19 @@ urlpatterns = [
     path(
         "list-sessions/by-purchase/<int:purchase_id>",
         views.list_sessions,
-        name="list_sessions",
+        {"filter": "purchase"},
+        name="list_sessions_by_purchase",
+    ),
+    path(
+        "list-sessions/by-platform/<int:platform_id>",
+        views.list_sessions,
+        {"filter": "platform"},
+        name="list_sessions_by_platform",
+    ),
+    path(
+        "list-sessions/by-game/<int:game_id>",
+        views.list_sessions,
+        {"filter": "game"},
+        name="list_sessions_by_game",
     ),
 ]

src/web/tracker/views.py

@@ -53,12 +53,18 @@ def delete_session(request, session_id=None):
     return redirect("list_sessions")
 
 
-def list_sessions(request, purchase_id=None):
+def list_sessions(request, filter="", purchase_id="", platform_id="", game_id=""):
     context = {}
 
-    if purchase_id != None:
+    if filter == "purchase":
         dataset = Session.objects.filter(purchase=purchase_id)
         context["purchase"] = Purchase.objects.get(id=purchase_id)
+    elif filter == "platform":
+        dataset = Session.objects.filter(purchase__platform=platform_id)
+        context["platform"] = Platform.objects.get(id=platform_id)
+    elif filter == "game":
+        dataset = Session.objects.filter(purchase__game=game_id)
+        context["game"] = Platform.objects.get(id=game_id)
     else:
         dataset = Session.objects.all().order_by("timestamp_start")