From 11b9c602de69e28df5db959ef1363c20e9ca0ecb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= Date: Mon, 9 Oct 2023 00:00:45 +0200 Subject: [PATCH] Improve game overview - add counts for each section - add average hours per session --- common/time.py | 4 +- games/models.py | 9 +- games/static/base.css | 201 +++++++-------------------------- games/templates/index.html | 4 +- games/templates/view_game.html | 15 ++- games/views.py | 10 +- 6 files changed, 70 insertions(+), 173 deletions(-) diff --git a/common/time.py b/common/time.py index 0e5b45e..1106546 100644 --- a/common/time.py +++ b/common/time.py @@ -36,9 +36,9 @@ def format_duration( minute_seconds = 60 hour_seconds = 60 * minute_seconds day_seconds = 24 * hour_seconds - duration = _safe_timedelta(duration) + safe_duration = _safe_timedelta(duration) # we don't need float - seconds_total = int(duration.total_seconds()) + seconds_total = int(safe_duration.total_seconds()) # timestamps where end is before start if seconds_total < 0: seconds_total = 0 diff --git a/games/models.py b/games/models.py index 860cf82..c1d0265 100644 --- a/games/models.py +++ b/games/models.py @@ -73,11 +73,14 @@ class Platform(models.Model): class SessionQuerySet(models.QuerySet): - def total_duration(self): + def total_duration_formatted(self): + return format_duration(self.total_duration_unformatted()) + + def total_duration_unformatted(self): result = self.aggregate( duration=Sum(F("duration_calculated") + F("duration_manual")) ) - return format_duration(result["duration"]) + return result["duration"] class Session(models.Model): @@ -116,7 +119,7 @@ class Session(models.Model): @property def duration_sum(self) -> str: - return Session.objects.all().total_duration() + return Session.objects.all().total_duration_formatted() def save(self, *args, **kwargs): if self.timestamp_start != None and self.timestamp_end != None: diff --git a/games/static/base.css b/games/static/base.css index 35ca3fc..9e9a129 100644 --- a/games/static/base.css +++ b/games/static/base.css @@ -771,24 +771,14 @@ select { top: 0.75rem; } -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} - .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } -.my-1 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; +.mx-auto { + margin-left: auto; + margin-right: auto; } .my-2 { @@ -796,10 +786,23 @@ select { margin-bottom: 0.5rem; } +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.mb-1 { + margin-bottom: 0.25rem; +} + .mb-4 { margin-bottom: 1rem; } +.ml-2 { + margin-left: 0.5rem; +} + .mr-4 { margin-right: 1rem; } @@ -808,30 +811,6 @@ select { margin-top: 1rem; } -.mt-1 { - margin-top: 0.25rem; -} - -.mt-2 { - margin-top: 0.5rem; -} - -.mb-2 { - margin-bottom: 0.5rem; -} - -.mb-1 { - margin-bottom: 0.25rem; -} - -.ml-1 { - margin-left: 0.25rem; -} - -.ml-2 { - margin-left: 0.5rem; -} - .block { display: block; } @@ -848,10 +827,6 @@ select { display: table; } -.list-item { - display: list-item; -} - .hidden { display: none; } @@ -872,30 +847,18 @@ select { width: 100%; } -.w-5 { - width: 1.25rem; -} - .max-w-screen-lg { max-width: 1024px; } -.max-w-xs { - max-width: 20rem; -} - -.max-w-lg { - max-width: 32rem; -} - -.max-w-3xl { - max-width: 48rem; -} - .max-w-sm { max-width: 24rem; } +.max-w-xs { + max-width: 20rem; +} + @keyframes spin { to { transform: rotate(360deg); @@ -906,10 +869,6 @@ select { animation: spin 1s linear infinite; } -.list-disc { - list-style-type: disc; -} - .flex-col { flex-direction: column; } @@ -953,16 +912,6 @@ select { border-color: rgb(229 231 235 / var(--tw-border-opacity)); } -.border-red-300 { - --tw-border-opacity: 1; - border-color: rgb(252 165 165 / var(--tw-border-opacity)); -} - -.border-red-500 { - --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity)); -} - .border-slate-500 { --tw-border-opacity: 1; border-color: rgb(100 116 139 / var(--tw-border-opacity)); @@ -978,11 +927,6 @@ select { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-slate-400 { - --tw-bg-opacity: 1; - background-color: rgb(148 163 184 / var(--tw-bg-opacity)); -} - .p-4 { padding: 1rem; } @@ -1018,12 +962,9 @@ select { font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } -.font-serif { - font-family: IBM Plex Serif, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; -} - -.font-sans { - 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"; +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; } .text-4xl { @@ -1036,6 +977,11 @@ select { line-height: 1.5rem; } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + .text-xl { font-size: 1.25rem; line-height: 1.75rem; @@ -1046,62 +992,10 @@ select { line-height: 1rem; } -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.text-9xl { - font-size: 8rem; - line-height: 1; -} - -.text-8xl { - font-size: 6rem; - line-height: 1; -} - -.text-7xl { - font-size: 4.5rem; - line-height: 1; -} - -.text-6xl { - font-size: 3.75rem; - line-height: 1; -} - -.text-5xl { - font-size: 3rem; - line-height: 1; -} - -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - .font-semibold { font-weight: 600; } -.font-bold { - font-weight: 700; -} - -.capitalize { - text-transform: capitalize; -} - -.italic { - font-style: italic; -} - .text-slate-300 { --tw-text-opacity: 1; color: rgb(203 213 225 / var(--tw-text-opacity)); @@ -1117,23 +1011,10 @@ select { color: rgb(253 224 71 / var(--tw-text-opacity)); } -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - .underline { text-decoration-line: underline; } -.decoration-red-500 { - text-decoration-color: #ef4444; -} - -.decoration-slate-400 { - text-decoration-color: #94a3b8; -} - .decoration-slate-500 { text-decoration-color: #64748b; } @@ -1403,11 +1284,17 @@ th label { color: rgb(255 255 255 / var(--tw-text-opacity)); } -@media (min-width: 640px) { - .sm\:ml-2 { - margin-left: 0.5rem; - } +: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)); +} + +@media (min-width: 640px) { .sm\:inline { display: inline; } @@ -1420,10 +1307,6 @@ th label { max-width: 28rem; } - .sm\:max-w-lg { - max-width: 32rem; - } - .sm\:max-w-xl { max-width: 36rem; } @@ -1475,11 +1358,11 @@ th label { display: table-cell; } - .lg\:max-w-lg { - max-width: 32rem; - } - .lg\:max-w-3xl { max-width: 48rem; } + + .lg\:max-w-lg { + max-width: 32rem; + } } diff --git a/games/templates/index.html b/games/templates/index.html index c3f8df8..9e3a20d 100644 --- a/games/templates/index.html +++ b/games/templates/index.html @@ -5,7 +5,7 @@ {% block content %}
{% if session_count > 0 %} - You have played a total of {{ session_count }} sessions for a total of {{ total_duration }}. + You have played a total of {{ session_count }} sessions for a total of {{ total_duration_formatted }}. {% elif not game_available or not platform_available %} There are no games in the database. Start by clicking "New Game" and "New Platform". {% elif not purchase_available %} @@ -14,4 +14,4 @@ You haven't played any games yet. Click "New Session" to add one now. {% endif %}
-{% endblock content %} \ No newline at end of file +{% endblock content %} diff --git a/games/templates/view_game.html b/games/templates/view_game.html index 3b64cd2..8f9c25b 100644 --- a/games/templates/view_game.html +++ b/games/templates/view_game.html @@ -6,10 +6,15 @@ {% block content %}
-

{{ game.name }} (#{{ game.pk }})

-

{{ total_playtime }} ({{ first_session.timestamp_start | date:"M Y"}} — {{ last_session.timestamp_start | date:"M Y"}})

+

{{ game.name }} (#{{ game.pk }})

+

+ {{ total_hours }} total + {{ session_average }} avg + ({{ first_session.timestamp_start | date:"M Y"}} + — + {{ last_session.timestamp_start | date:"M Y"}})


-

Editions

+

Editions ({{ editions.count }})

-

Purchases

+

Purchases ({{ purchases.count }})

-

Sessions

+

Sessions ({{ sessions.count }})