Do not specify button width and height

Fixes #19

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.2.1 / 2023-01-13 16:53+01:00
+
+* List number of sessions when filtering on session list
+* Start sessions of last purchase from list (https://git.kucharczyk.xyz/lukas/timetracker/issues/19)
+
 ## 0.2.0 / 2023-01-09 22:42+01:00
 
 * Show playtime total on session list (https://git.kucharczyk.xyz/lukas/timetracker/issues/6)

Dockerfile

@@ -6,7 +6,7 @@ RUN npm install && \
 
 FROM python:3.10.9-alpine
 
-ENV VERSION_NUMBER 0.2.0
+ENV VERSION_NUMBER 0.2.1
 ENV PROD 1
 
 RUN apk add \

Makefile

@@ -20,7 +20,7 @@ migrate: makemigrations
 	poetry run python src/web/manage.py migrate
 
 dev: migrate sethookdir
-	poetry run python src/web/manage.py runserver_plus
+	poetry run python src/web/manage.py runserver
 
 caddy:
 	caddy run --watch

pyproject.toml

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

src/web/tracker/models.py

@@ -4,6 +4,8 @@ from django.conf import settings
 from zoneinfo import ZoneInfo
 from common.util.time import format_duration
 from django.db.models import Sum, F
+from django.db.models import Manager
+from typing import Any
 
 
 class Game(models.Model):
@@ -57,6 +59,9 @@ class Session(models.Model):
     def finish_now(self):
         self.timestamp_end = datetime.now(ZoneInfo(settings.TIME_ZONE))
 
+    def start_now():
+        self.timestamp_start = datetime.now(ZoneInfo(settings.TIME_ZONE))
+
     def duration_seconds(self) -> timedelta:
         manual = timedelta(0)
         calculated = timedelta(0)
@@ -74,6 +79,10 @@ class Session(models.Model):
     def duration_sum(self) -> str:
         return Session.objects.all().total_duration()
 
+    @property
+    def last(self) -> Manager[Any]:
+        return Session.objects.all().order_by("timestamp_start")[:-1]
+
     def save(self, *args, **kwargs):
         if self.timestamp_start != None and self.timestamp_end != None:
             self.duration_calculated = self.timestamp_end - self.timestamp_start

src/web/tracker/static/base.css

@@ -683,34 +683,66 @@ select {
   width: 100%;
 }
 
+.\!container {
+  width: 100% !important;
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
   }
+
+  .\!container {
+    max-width: 640px !important;
+  }
 }
 
 @media (min-width: 768px) {
   .container {
     max-width: 768px;
   }
+
+  .\!container {
+    max-width: 768px !important;
+  }
 }
 
 @media (min-width: 1024px) {
   .container {
     max-width: 1024px;
   }
+
+  .\!container {
+    max-width: 1024px !important;
+  }
 }
 
 @media (min-width: 1280px) {
   .container {
     max-width: 1280px;
   }
+
+  .\!container {
+    max-width: 1280px !important;
+  }
 }
 
 @media (min-width: 1536px) {
   .container {
     max-width: 1536px;
   }
+
+  .\!container {
+    max-width: 1536px !important;
+  }
+}
+
+.visible {
+  visibility: visible;
+}
+
+.collapse {
+  visibility: collapse;
 }
 
 .static {
@@ -721,6 +753,26 @@ select {
   position: fixed;
 }
 
+.\!fixed {
+  position: fixed !important;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.\!sticky {
+  position: sticky !important;
+}
+
 .left-2 {
   left: 0.5rem;
 }
@@ -750,10 +802,42 @@ select {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
 
+.table {
+  display: table;
+}
+
+.table-caption {
+  display: table-caption;
+}
+
+.table-cell {
+  display: table-cell;
+}
+
+.contents {
+  display: contents;
+}
+
+.hidden {
+  display: none;
+}
+
+.\!hidden {
+  display: none !important;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -786,6 +870,10 @@ select {
   max-width: 1024px;
 }
 
+.resize {
+  resize: both;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -818,6 +906,12 @@ select {
   align-self: center;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -826,12 +920,16 @@ select {
   border-radius: 0.25rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
 
-.rounded-lg {
+.border {
-  border-radius: 0.5rem;
+  border-width: 1px;
 }
 
 .border-gray-200 {
@@ -913,20 +1011,28 @@ select {
   line-height: 1rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .font-semibold {
   font-weight: 600;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -942,16 +1048,39 @@ select {
   color: rgb(248 113 113 / 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);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
+.blur {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-blur: blur(8px);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.invert {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.\!invert {
+  --tw-invert: invert(100%) !important;
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.\!filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
 }
 
 .transition {

src/web/tracker/templates/list_sessions.html

@@ -3,12 +3,18 @@
 {% block title %}Sessions{% endblock title %}
 
 {% block content %}
-    {% if purchase %}
         <div class="text-center text-xl mb-4 dark:text-slate-400">
-            <h1>Listing sessions only for purchase "{{ purchase }}" (total playtime: {{ total_duration }})</h1>
+            <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 }}
+                </button>
+            </a>
+            {% 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>
-    {% endif %}
     <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 text-center">Start</div>

src/web/tracker/urls.py

@@ -12,6 +12,11 @@ urlpatterns = [
         views.update_session,
         name="update_session",
     ),
+    path(
+        "start-session/<int:purchase_id>",
+        views.start_session,
+        name="start_session",
+    ),
     path(
         "delete_session/by-id/<int:session_id>",
         views.delete_session,

src/web/tracker/views.py

@@ -40,6 +40,12 @@ def update_session(request, session_id=None):
     return redirect("list_sessions")
 
 
+def start_session(request, purchase_id=None):
+    session = SessionForm({"purchase": purchase_id, "timestamp_start": now_with_tz()})
+    session.save()
+    return redirect("list_sessions")
+
+
 def delete_session(request, session_id=None):
     session = Session.objects.get(id=session_id)
     session.delete()