2 Commits

Author SHA1 Message Date
lukas 37bcab73f0 Improve logging in tasks.py
Django CI/CD / test (push) Successful in 1m9s
Django CI/CD / build-and-push (push) Successful in 2m50s
2025-03-22 13:46:19 +01:00
lukas 1a8338c0f8 Fix a bug in convert_prices
Prevents actually finding any new prices
2025-03-22 13:45:44 +01:00
298 changed files with 8837 additions and 40279 deletions
+1
View File
@@ -9,6 +9,7 @@ static
.drone.yml .drone.yml
.editorconfig .editorconfig
.gitignore .gitignore
Caddyfile
CHANGELOG.md CHANGELOG.md
db.sqlite3 db.sqlite3
docker-compose* docker-compose*
-51
View File
@@ -1,51 +0,0 @@
# =============================================================================
# Django application settings (read by timetracker/config.py)
#
# Resolution priority, highest first:
# SECRET_KEY__FILE -> env var -> .env -> settings.ini -> built-in default
# See docs/configuration.md for the full reference.
# =============================================================================
# Turn DEBUG off in production. Defaults on for local development.
# (The old PROD=1 variable still works but is deprecated; prefer DEBUG.)
DEBUG=false
# Secret key. Required in production; an insecure default is used in DEBUG.
# For Docker/K8s secrets, point SECRET_KEY__FILE at a mounted file instead.
SECRET_KEY=change-me-to-a-long-random-string
# SECRET_KEY__FILE=/run/secrets/timetracker_secret_key
# Public URL(s) of the site — one URL or comma-separated list of full URLs.
# Derives ALLOWED_HOSTS and CSRF_TRUSTED_ORIGINS from all listed URLs.
APP_URL=https://tracker.kucharczyk.xyz
# APP_URL=https://tracker.kucharczyk.xyz,https://www.tracker.kucharczyk.xyz
# Override ALLOWED_HOSTS directly for edge cases (e.g. behind a reverse proxy).
# ALLOWED_HOSTS=*
# Container timezone.
TZ=Europe/Prague
# Directory holding the SQLite database (defaults to the project root).
DATA_DIR=/home/timetracker/app/data
# =============================================================================
# Container / entrypoint-only settings (read by entrypoint.sh, NOT by Django)
# =============================================================================
# User/group IDs the container process runs as.
PUID=1000
PGID=100
# Create an admin/admin superuser on startup (for initial setup only).
CREATE_DEFAULT_SUPERUSER=false
# =============================================================================
# docker-compose-only settings (compose file substitution, not the app)
# =============================================================================
# Docker registry URL (used in docker-compose.yml).
REGISTRY_URL=registry.kucharczyk.xyz
# External port mapping.
TIMETRACKER_EXTERNAL_PORT=8000
-62
View File
@@ -1,62 +0,0 @@
name: Django CI/CD
on:
push:
paths-ignore: [ 'README.md' ]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Install uv
uses: astral-sh/setup-uv@v5
with:
enable-cache: false
python-version: "3.14"
- name: Install dependencies
run: uv sync --frozen
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: "22"
- name: Install pnpm and JS dependencies
run: corepack enable && pnpm install --frozen-lockfile --ignore-scripts
- name: Build TypeScript
run: make ts
- name: Install Playwright browsers
run: uv run playwright install --with-deps chromium
- name: Run Migrations
run: uv run python manage.py migrate
- name: Run Tests
run: uv run --with pytest-django pytest
build-and-push:
needs: test
runs-on: ubuntu-latest
if: github.ref == 'refs/heads/main'
steps:
- uses: actions/checkout@v4
- name: Set Version
run: echo "VERSION_NUMBER=1.7.0" >> $GITHUB_ENV
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Build and push
uses: docker/build-push-action@v5
with:
context: .
push: true
tags: |
registry.kucharczyk.xyz/timetracker:latest
registry.kucharczyk.xyz/timetracker:${{ env.VERSION_NUMBER }}
-140
View File
@@ -1,140 +0,0 @@
name: Staging deployment
on:
push:
branches-ignore: [main]
delete:
pull_request:
types: [opened]
jobs:
deploy:
if: github.event_name == 'push'
runs-on: ubuntu-latest
env:
BRANCH: ${{ github.ref_name }}
steps:
- uses: actions/checkout@v4
- name: Compute staging name
run: |
SLUG=$(echo "$BRANCH" | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9-]+/-/g; s/-+/-/g; s/^-//; s/-$//' | cut -c1-40)
echo "SLUG=${SLUG}" >> "$GITHUB_ENV"
echo "HOST=tracker-${SLUG}.home.arpa" >> "$GITHUB_ENV"
# Per-staging secret so each instance has its own key, decoupling it
# from prod even though the database is seeded from a prod snapshot.
echo "STAGING_SECRET_KEY=staging-${SLUG}-$(head -c16 /dev/urandom | base64 | tr -dc 'a-zA-Z0-9')" >> "$GITHUB_ENV"
- name: Build image
run: docker build -t "timetracker:staging-${SLUG}" .
- name: Seed database from prod (first deploy of this branch only)
run: |
if docker volume inspect "timetracker-staging-${SLUG}" >/dev/null 2>&1; then
echo "Volume exists, keeping current staging data"
exit 0
fi
docker volume create "timetracker-staging-${SLUG}"
# sqlite3.backup() takes a consistent online snapshot (WAL-safe);
# prod is only read, never written.
docker run --rm \
-v /docker/timetracker/data:/prod \
-v "timetracker-staging-${SLUG}:/dest" \
python:3.14-slim-bookworm sh -c "
python -c \"
import sqlite3
source = sqlite3.connect('file:/prod/db.sqlite3?mode=ro', uri=True)
destination = sqlite3.connect('/dest/db.sqlite3')
source.backup(destination)
games = destination.execute('select count(*) from games_game').fetchone()[0]
sessions = destination.execute('select count(*) from games_session').fetchone()[0]
print(f'Seeded staging database: {games} games, {sessions} sessions')
destination.close()
source.close()
\" && chown 1000:100 /dest/db.sqlite3"
- name: Deploy staging container
run: |
docker rm -f "timetracker-staging-${SLUG}" 2>/dev/null || true
docker run -d --name "timetracker-staging-${SLUG}" \
--network docker-compose-templates_public \
-e TZ=Europe/Prague \
-e PUID=1000 \
-e PGID=100 \
-e DATA_DIR=/home/timetracker/app/data \
-e STAGING=true \
-e "SECRET_KEY=${STAGING_SECRET_KEY}" \
-e "APP_URL=https://${HOST}" \
-v "timetracker-staging-${SLUG}:/home/timetracker/app/data" \
-l "caddy=${HOST}" \
-l 'caddy.reverse_proxy={{ upstreams 8000 }}' \
-l xyz.kucharczyk.staging=timetracker \
-l "xyz.kucharczyk.staging.branch=${BRANCH}" \
--restart unless-stopped \
"timetracker:staging-${SLUG}"
- name: Summary
run: |
echo "Deployed to https://${HOST}"
echo "Deployed to https://${HOST}" >> "$GITHUB_STEP_SUMMARY"
- name: Comment staging URL on PR
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
auth="Authorization: token ${GITHUB_TOKEN}"
api="${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}"
pr=$(curl -fsS -H "$auth" "${api}/pulls?state=open&limit=50" \
| jq -r --arg branch "$BRANCH" '.[] | select(.head.ref == $branch) | .number' | head -n1)
if [ -z "$pr" ]; then
echo "No open PR for branch '${BRANCH}', skipping comment"
exit 0
fi
body="Staging deployment: https://${HOST}"
if curl -fsS -H "$auth" "${api}/issues/${pr}/comments" \
| jq -e --arg body "$body" 'any(.[]; .body == $body)' >/dev/null; then
echo "Staging URL already commented on PR #${pr}"
exit 0
fi
curl -fsS -X POST -H "$auth" -H 'Content-Type: application/json' \
-d "$(jq -n --arg body "$body" '{body: $body}')" \
"${api}/issues/${pr}/comments" >/dev/null
echo "Commented staging URL on PR #${pr}"
comment:
if: github.event_name == 'pull_request'
runs-on: ubuntu-latest
env:
BRANCH: ${{ github.event.pull_request.head.ref }}
PR: ${{ github.event.pull_request.number }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
steps:
- name: Comment staging URL on the new PR
run: |
SLUG=$(echo "$BRANCH" | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9-]+/-/g; s/-+/-/g; s/^-//; s/-$//' | cut -c1-40)
HOST="tracker-${SLUG}.home.arpa"
auth="Authorization: token ${GITHUB_TOKEN}"
api="${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}"
body="Staging deployment: https://${HOST}"
if curl -fsS -H "$auth" "${api}/issues/${PR}/comments" \
| jq -e --arg body "$body" 'any(.[]; .body == $body)' >/dev/null; then
echo "Staging URL already commented on PR #${PR}"
exit 0
fi
curl -fsS -X POST -H "$auth" -H 'Content-Type: application/json' \
-d "$(jq -n --arg body "$body" '{body: $body}')" \
"${api}/issues/${PR}/comments" >/dev/null
echo "Commented staging URL on PR #${PR}"
teardown:
if: github.event_name == 'delete' && github.event.ref_type == 'branch'
runs-on: ubuntu-latest
env:
BRANCH: ${{ github.event.ref }}
steps:
- name: Remove staging container, volume, and image
run: |
SLUG=$(echo "$BRANCH" | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9-]+/-/g; s/-+/-/g; s/^-//; s/-$//' | cut -c1-40)
docker rm -f "timetracker-staging-${SLUG}" 2>/dev/null || true
docker volume rm "timetracker-staging-${SLUG}" 2>/dev/null || true
docker rmi "timetracker:staging-${SLUG}" 2>/dev/null || true
+13 -44
View File
@@ -9,59 +9,28 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
- uses: actions/setup-python@v4
- name: Install uv
uses: astral-sh/setup-uv@v5
with: with:
enable-cache: false python-version: 3.12
python-version: "3.14" - run: |
python -m pip install poetry
- name: Install dependencies poetry install
run: uv sync --frozen poetry env info
poetry run python manage.py migrate
- name: Set up Node # PROD=1 poetry run pytest
uses: actions/setup-node@v4
with:
node-version: "22"
- name: Install pnpm and JS dependencies
run: corepack enable && pnpm install --frozen-lockfile --ignore-scripts
- name: Build TypeScript
run: make ts
- name: Build CSS
run: make css
- name: Install Playwright browsers
run: uv run playwright install --with-deps chromium
- name: Run Migrations
run: uv run python manage.py migrate
- name: Run Tests
run: uv run --with pytest-django pytest
build-and-push: build-and-push:
needs: test needs: test
runs-on: ubuntu-latest runs-on: ubuntu-latest
if: github.ref == 'refs/heads/main' if: github.ref == 'refs/heads/main'
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
- uses: docker/setup-buildx-action@v3
- name: Set Version - uses: docker/build-push-action@v5
run: echo "VERSION_NUMBER=1.7.0" >> $GITHUB_ENV
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Build and push
uses: docker/build-push-action@v5
with: with:
context: . context: .
push: true push: true
tags: | tags: |
registry.kucharczyk.xyz/timetracker:latest registry.kucharczyk.xyz/timetracker:latest
registry.kucharczyk.xyz/timetracker:${{ env.VERSION_NUMBER }} registry.kucharczyk.xyz/timetracker:${{ env.VERSION_NUMBER }}
# cache-from: type=gha env:
# cache-to: type=gha,mode=max VERSION_NUMBER: 1.5.1
-127
View File
@@ -1,127 +0,0 @@
name: Staging deployment
on:
push:
branches-ignore: [main]
pull_request:
types: [opened, reopened]
delete:
concurrency:
group: staging-${{ github.event.pull_request.head.ref || github.event.ref }}
cancel-in-progress: true
jobs:
deploy:
if: github.event_name == 'push'
runs-on: ubuntu-latest
env:
BRANCH: ${{ github.ref_name }}
FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
steps:
- uses: actions/checkout@v4
- name: Compute staging name
run: |
SLUG=$(echo "$BRANCH" | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9-]+/-/g; s/-+/-/g; s/^-//; s/-$//' | cut -c1-30 | sed 's/-*$//')
APP="timetracker-staging-${SLUG}"
echo "SLUG=${SLUG}" >> "$GITHUB_ENV"
echo "APP=${APP}" >> "$GITHUB_ENV"
echo "HOST=${APP}.fly.dev" >> "$GITHUB_ENV"
- name: Set up flyctl
uses: superfly/flyctl-actions/setup-flyctl@master
- name: Create app if missing
run: |
if ! flyctl status --app "$APP" >/dev/null 2>&1; then
flyctl apps create "$APP" --org personal
fi
- name: Set staging secrets
run: |
# Per-app SECRET_KEY so each staging instance is independent and no
# session cookie is shared across instances or with production.
SECRET_KEY="staging-${SLUG}-$(head -c16 /dev/urandom | base64 | tr -dc 'a-zA-Z0-9')"
# APP_URL derives both ALLOWED_HOSTS and CSRF_TRUSTED_ORIGINS.
flyctl secrets set --app "$APP" --stage \
"SECRET_KEY=${SECRET_KEY}" \
"APP_URL=https://${HOST}"
- name: Deploy
# --ha=false so Fly provisions a single machine. Staging stores sessions
# in machine-local SQLite (no shared volume), so a second machine would
# serve requests it has no session for, bouncing logged-in users back to
# the login page. scale count 1 fixes apps already created with two.
run: |
flyctl deploy --app "$APP" --config fly.staging.toml --remote-only --yes --ha=false
flyctl scale count 1 --app "$APP" --yes
- name: Summary
run: echo "Deployed to https://${HOST}" >> "$GITHUB_STEP_SUMMARY"
# Comment the staging URL on the branch's PR. Runs both after a successful
# push-deploy (covers PRs that already exist) and when a PR is opened or
# reopened (covers the common case of pushing the branch before opening the
# PR, where the deploy ran with no PR to comment on). The comment is deduped
# by body, so the two paths never double-post.
comment:
needs: [deploy]
if: |
always() &&
(github.event_name == 'pull_request' ||
(github.event_name == 'push' && needs.deploy.result == 'success'))
runs-on: ubuntu-latest
permissions:
pull-requests: write
env:
BRANCH: ${{ github.head_ref || github.ref_name }}
steps:
- name: Compute staging host
run: |
SLUG=$(echo "$BRANCH" | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9-]+/-/g; s/-+/-/g; s/^-//; s/-$//' | cut -c1-30 | sed 's/-*$//')
echo "HOST=timetracker-staging-${SLUG}.fly.dev" >> "$GITHUB_ENV"
- name: Comment staging URL on PR
uses: actions/github-script@v7
with:
script: |
const host = process.env.HOST;
const branch = process.env.BRANCH;
const body = `Staging deployment: https://${host}`;
const { owner, repo } = context.repo;
const pulls = await github.rest.pulls.list({
owner, repo, state: "open", head: `${owner}:${branch}`,
});
const pr = pulls.data[0];
if (!pr) {
core.info(`No open PR for branch '${branch}', skipping comment`);
return;
}
const comments = await github.paginate(github.rest.issues.listComments, {
owner, repo, issue_number: pr.number,
});
if (comments.some((comment) => comment.body === body)) {
core.info(`Staging URL already commented on PR #${pr.number}`);
return;
}
await github.rest.issues.createComment({
owner, repo, issue_number: pr.number, body,
});
core.info(`Commented staging URL on PR #${pr.number}`);
teardown:
if: github.event_name == 'delete' && github.event.ref_type == 'branch'
runs-on: ubuntu-latest
env:
BRANCH: ${{ github.event.ref }}
FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
steps:
- name: Set up flyctl
uses: superfly/flyctl-actions/setup-flyctl@master
- name: Destroy staging app
run: |
SLUG=$(echo "$BRANCH" | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9-]+/-/g; s/-+/-/g; s/^-//; s/-$//' | cut -c1-30 | sed 's/-*$//')
APP="timetracker-staging-${SLUG}"
flyctl apps destroy "$APP" --yes 2>/dev/null || true
-14
View File
@@ -5,22 +5,8 @@ __pycache__
node_modules node_modules
package-lock.json package-lock.json
db.sqlite3 db.sqlite3
db.sqlite3-shm
db.sqlite3-wal
data/
/static/ /static/
dist/ dist/
.DS_Store .DS_Store
.python-version .python-version
# Local configuration (may contain secrets); examples are committed instead
.env
/settings.ini
.direnv .direnv
.hermes/
# Build artifacts: generated in CI/Docker assets stage, not committed
/games/static/base.css
/games/static/js/dist/
/ts/generated/
.claude/
-26
View File
@@ -1,26 +0,0 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Python Debugger: Current File",
"type": "debugpy",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
},
{
"name": "Python Debugger: Django",
"type": "debugpy",
"request": "launch",
"args": [
"runserver"
],
"django": true,
"autoStartBrowser": false,
"program": "${workspaceFolder}/manage.py"
}
]
}
+5 -56
View File
@@ -1,57 +1,6 @@
## 1.7.0 / 2026-05-12 ## Unreleased
### New ## New
* Add toast notification system with HTMX middleware integration
* Add component system (Cotton-based): button, modal, table_row, search_field, gamelink
* Add needs_price_update field to Purchase model for reliable price change detection
* Add confirmation dialog before deleting a game
* Add game status information documentation (STATUSES.md)
* Allow directly updating device in session list via inline selector
* Migrate from Poetry to uv for Python dependency management
* Scope URLs to the games namespace
* Start session template shared between add and edit views
### Improved
* Major style overhaul: CSS variables, improved dark mode, Flowbite 4.x upgrade
* Improve game status evaluation and add abandon prompt on refund
* Robustify Docker container and fix default database location
* Make component rendering deterministic for improved caching
* Component caching: deterministic randomid generation
* Component test suite with 1000+ lines of tests
* Make tests more robust with django-pytest
* Update NameWithIcon component: testable, fixed platform extraction bug
* Pin Caddy version and improve make dev-prod
* Add .env.example documenting environment variables
* Unify A() component with explicit url_name vs href parameters
### Fixed
* Fix refund confirmation not working
* Fix stats view missing first and last game values
* Fix A() component silent fallback on URL typos
* Fix secondary submit buttons not working
* Fix button not passing attributes
* Fix default mutable arguments in component functions
* Fix extra submit button when adding purchase
* Fix pointer cursor on search field button
### Removed
* Remove GraphQL API
### Dependencies
* Update django-ninja to 1.6.2
## 1.6.1 / 2026-01-30 11:48+01:00
### New
* Pre-fill time played into new playevent, also tracks time since last playevent
* Improve light theme and fix light/dark theme switcher
* Fix purchase form logic
* Update dependencies
## 1.6.0 / 2025-01-15 23:13+01:00
### New
* Visual overhaul of many pages
* Render notes as Markdown * Render notes as Markdown
* Require login by default * Require login by default
* Add stats for dropped purchases, monthly playtimes * Add stats for dropped purchases, monthly playtimes
@@ -62,7 +11,7 @@
* Add emulated property to sessions * Add emulated property to sessions
* Add today's and last 7 days playtime stats to navbar * Add today's and last 7 days playtime stats to navbar
### Improved ## Improved
* mark refunded purchases red on game overview * mark refunded purchases red on game overview
* increase session count on game overview when starting a new session * increase session count on game overview when starting a new session
* game overview: * game overview:
@@ -73,7 +22,7 @@
* session list: use display name instead of sort name * session list: use display name instead of sort name
* unify the appearance of game links, and make them expand to full size on hover * unify the appearance of game links, and make them expand to full size on hover
### Fixed ## Fixed
* Fix title not being displayed on the Recent sessions page * Fix title not being displayed on the Recent sessions page
* Avoid errors when displaying game overview with zero sessions * Avoid errors when displaying game overview with zero sessions
@@ -198,7 +147,7 @@
* Use the same form when editing a session as when adding a session * Use the same form when editing a session as when adding a session
* Change recent session view to current year instead of last 30 days * Change recent session view to current year instead of last 30 days
* Add a hacky way not to reload a page when starting or ending a session (https://git.kucharczyk.xyz/lukas/timetracker/issues/52) * Add a hacky way not to reload a page when starting or ending a session (https://git.kucharczyk.xyz/lukas/timetracker/issues/52)
* Improve session listing (https://git.kucharczyk.xyz/lukas/timetracker/issues/53) * Improve session list (https://git.kucharczyk.xyz/lukas/timetracker/issues/53)
### Fixes ### Fixes
-198
View File
@@ -1,198 +0,0 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Commands
| Task | Command |
|------|---------|
| Install dependencies | `make init` (installs Python via uv + npm packages, loads platform fixtures) |
| Development server | `make dev` (runs Django runserver + Tailwind CSS watcher) |
| Production-like dev | `make dev-prod` (Caddy + Gunicorn/Uvicorn + Django-Q cluster) |
| Run tests | `make test` (or `uv run --with pytest-django pytest`) |
| Make migrations | `make makemigrations` |
| Apply migrations | `make migrate` |
| CSS (Tailwind) | `make css` |
| Django shell | `make shell` |
| Create superuser | `make createsuperuser` |
| Format Python | `make format` (or `uv run ruff format`) |
| Lint Python | `make lint` (or `uv run ruff check`) |
| Auto-fix lint | `make lint-fix` (`ruff check --fix`) |
| Lint + format check + tests | `make check` (CI-style aggregate) |
| Sync uv.lock | `uv sync` (after editing pyproject.toml) |
| Load platform fixtures | `make loadplatforms` |
| Load sample data | `make loadsample` |
| Dump games data | `make dumpgames` |
## Architecture
A Django 6+ monolith (v1.7.0) with a single app (`games/`) for tracking video game purchases, play sessions, and statistics. Uses HTMX for interactivity with a pure-Python server-side component system, plus a Django Ninja REST API.
### Directory layout
```
games/ — Django app: models, views, templates, forms, signals, tasks, API, filters
common/ — Shared utilities: time formatting, component system, criteria, layout, icons
timetracker/ — Django project: settings, URL root, ASGI/WSGI
tests/ — Pytest tests
e2e/ — Playwright browser tests (run via `make test-e2e`)
contrib/ — One-off scripts (exchange rate import)
docs/ — Additional documentation
```
### Models (in `games/models.py`)
- **Game** — `name`, `platform` (FK), `status` (u/p/f/r/a), `mastered`, `playtime` (DurationField updated via signal), `year_released`, `sort_name`, `wikidata`
- **Platform** — `name`, `group`, `icon` (slug, auto-generated from name)
- **Purchase** — ownership type, prices, currency conversion (`converted_price`, `price_per_game` is a `GeneratedField`), links to Game via M2M. `num_purchases` counts linked games. DLC/SeasonPass/BattlePass must have a `related_game` (the base Game the add-on belongs to; reverse accessor `game.addon_purchases`). **A multi-game Purchase is an *unsplittable* bundle** (one price, whole-purchase refund — e.g. a Humble Bundle). Independently-refundable multi-item orders (e.g. a Steam cart) are modeled as **separate single-game purchases**, not one bundle: the add-purchase form's "separate price per game" mode (≥2 games) creates them, and the row's **Split** action breaks an existing bundle into per-game purchases (price split evenly as a starting point). This is why per-game refund/price need no through-model — each refundable unit is its own Purchase.
- **Session** — `timestamp_start`/`timestamp_end`, `duration_manual`, `device` (FK), `note`, `emulated`. `duration_calculated` and `duration_total` are `GeneratedField`s (cannot be written directly)
- **Device** — `name`, `type` (PC/Console/Handheld/Mobile/SBC/Unknown)
- **PlayEvent** — marks when a game was started/finished (separate from Sessions), `days_to_finish` is a `GeneratedField`
- **ExchangeRate** — cached FX rates per currency pair per year
- **GameStatusChange** — audit log of status transitions, ordered by `-timestamp`
- **FilterPreset** — saved filter configuration; `mode` (games/sessions/purchases/playevents), `find_filter`, `object_filter`, `ui_options` (all JSON). Follows Stash's SavedFilter pattern
**Sentinel objects**: `get_sentinel_platform()` returns an "Unspecified" platform used when a Game has no platform. A similar sentinel Device ("Unknown") is created when a Session has no device.
**GeneratedField constraint**: `duration_calculated`, `duration_total`, `price_per_game`, `days_to_finish` are computed by the database and cannot be written from application code.
### Key patterns
**Layout system** (`common/layout.py`): Views call `render_page(request, content, title=...)` instead of Django's `render()`. This assembles a full HTML document via `Page()` — analogous to FastHTML's `fast_app()`. `Page()` handles the `<head>`, navbar, toast container, FOUC-prevention script, and **JS includes**: it calls `collect_media(content)` to gather every component's declared `Media` and emits the `<script>` tags automatically — so views do **not** pass `scripts=` for component-owned JS. The `scripts=` argument remains only for page-specific glue not owned by a reusable component (e.g. the add-form helper `add_*.js`). The navbar shows today's/last-7-days playtime from the `model_counts` context processor.
**Component system** (`common/components/`): a FastHTML-style **lazy node tree**. Components are `Node` objects that render to HTML only when asked (`str(node)` / `Page()`), so `Page()` can walk a finished tree and collect each component's JS. Split into submodules re-exported via `common/components/__init__.py`:
- **`core.py`** — the node layer. `Node` (base; `__html__`/`__str__` return a `SafeString`), `Element` (the single class for *any* HTML element), `Safe` (wraps pre-rendered/trusted HTML), `Fragment` (ordered children, no wrapper tag — use instead of `str(a)+str(b)`), `BaseComponent` (base for higher-level components: implement `render()`, declare `media`), and `Media` (declarative JS deps with order-preserving dedup merge; `collect_media()` sums them over a tree, `node.with_media(...)` attaches them). `_render_element()` is `@lru_cache`-memoized (4096). Attribute values are always escaped. **Children: every string child is escaped — `SafeText`/`mark_safe` included; only `Node` children (so `Safe`) render unescaped.** Trusted pre-rendered HTML must be wrapped in `Safe(...)`, never passed as a safe string. `randomid()` generates stable hash-based IDs.
- **`primitives.py`** — Generic HTML. Plain leaf builders (`Div`, `Span`, `P`, `Ul`, `Li`, `Strong`, `Label`, `Template`, `Td`, `Tr`, `Th`) are **generated from a whitelist** via the `_html_element(tag)` factory over `Element` — not hand-written per tag. Builders that add classes/behaviour are written out: `A()`, `Button()`, `ButtonGroup()`, `Input()`, `Checkbox()`, `Radio()`, `Pill()`, `Icon()`, `Popover()`, `PopoverTruncated()`, `SearchField()`, `H1()`, `Modal()`, `SimpleTable()`, `TableRow()`, `TableTd()`, `TableHeader()`, `paginated_table_content()`, `AddForm()`, `YearPicker()` (declares datepicker media), `CsrfInput()`/`ModuleScript()`/`StaticScript()` (script-tag string helpers used by `Page()`).
- **`domain.py`** — Domain-specific: `GameLink()`, `GameStatus()` (colored dot + label), `GameStatusSelector()` (Alpine.js PATCH dropdown), `SessionDeviceSelector()` (Alpine.js PATCH dropdown), `LinkedPurchase()`, `NameWithIcon()`, `PriceConverted()`, `PurchasePrice()`
- **`filters.py`** — Filter UI: `FilterBar()`, `SessionFilterBar()`, `PurchaseFilterBar()` (built from `FilterSelect` widgets)
- **`search_select.py`** — `SearchSelect()` (form combobox) + `FilterSelect()` (include/exclude filter combobox with pinned Any/None modifiers) + `SearchSelectOption`, all built on a shared `_combobox_shell`; wired by `games/static/js/search_select.js`
**Filter system** (`games/filters.py` + `common/criteria.py`): Stash-inspired structured filtering.
- `common/criteria.py` defines typed criterion classes: `StringCriterion`, `IntCriterion`, `FloatCriterion`, `DateCriterion`, `BoolCriterion`, `MultiCriterion`, `ChoiceCriterion`. Each has a `modifier` (`Modifier` enum: EQUALS, NOT_EQUALS, INCLUDES, EXCLUDES, GREATER_THAN, LESS_THAN, BETWEEN, IS_NULL, etc.) and a `to_q(field_name)` method.
- `OperatorFilter` base class provides AND/OR/NOT sub-filter composition and JSON serialization/deserialization.
- `games/filters.py` defines `GameFilter`, `SessionFilter`, `PurchaseFilter` (all `@dataclass` subclasses of `OperatorFilter`) and `FindFilter` (sort/pagination). Filters serialize to/from JSON and are passed in the `?filter=` query parameter.
- `parse_game_filter()`, `parse_session_filter()`, `parse_purchase_filter()` helpers deserialize from a JSON string.
- `FilterPreset` model stores named filter configurations that users can save and reload.
**Views** (`games/views/`): Function-based views decorated with `@login_required`. Organized by domain entity:
- `session.py`, `game.py`, `purchase.py`, `playevent.py`, `platform.py`, `device.py`, `statuschange.py` — CRUD for each entity
- `general.py``stats()`, `stats_alltime()`, `index()`, `model_counts` context processor, `global_current_year` context processor, `use_custom_redirect` decorator (redirects to `request.session["return_path"]` if set)
- `stats_data.py``compute_stats(year)` returns a `StatsData` TypedDict; pure computation, no HTTP
- `stats_content.py` — renders stats page content from a `StatsData` dict
- `filter_presets.py``list_presets`, `save_preset`, `delete_preset`, `load_preset`
- `auth.py` — custom `LoginView` subclassing Django's auth view, renders login page via `render_page()`
**Signals** (`games/signals.py`):
- `pre_save` on Purchase: snapshots old price/currency for change detection
- `post_save` on Purchase: sets `needs_price_update` if price/currency changed
- `m2m_changed` on Purchase.games: updates `num_purchases` count
- `pre_delete` on Game: decrements `num_purchases` on related Purchases (deletes Purchase if count reaches 0)
- `post_save/post_delete` on Session: recalculates `Game.playtime` from session aggregate
- `pre_save` on Game: creates `GameStatusChange` audit records when `status` changes
**Background tasks**: django-q2 cluster runs `games.tasks.convert_prices()` on a schedule to fetch exchange rates from `cdn.jsdelivr.net/npm/@fawazahmed0/currency-api` and convert purchase prices to CZK.
**HTMX toast middleware** (`games/htmx_middleware.py`): Converts Django messages into `HX-Trigger` headers with `show-toast` event. Skips if `HX-Redirect` is present. Toast rendering is handled client-side by Alpine.js (`games/static/js/toast.js`).
**REST API** (`games/api.py`): Django Ninja with routers mounted at `/api/`:
- `GET /api/games/search` — search games for autocomplete
- `PATCH /api/games/{id}/status` — update game status
- `GET/POST /api/playevent/` — list/create play events
- `GET/PATCH/DELETE /api/playevent/{id}` — get/update/delete play event
- `PATCH /api/session/{id}/device` — update session device
### Templates
Only a small number of HTML templates remain (platform icon snippets and partials). The bulk of the UI is built via Python components. Template files:
- `games/templates/icons/<slug>.html` — SVG icon snippets (loaded by `common/icons.py` via `get_icon()`)
- `games/templates/` — minimal partials for HTMX responses where needed
### Frontend stack
- **HTMX** (`games/static/js/htmx.min.js`) — partial page updates
- **Alpine.js** (vendored: `alpine.min.js`, `alpine-mask.min.js`) — reactive dropdowns (`GameStatusSelector`, `SessionDeviceSelector`), toast store
- **Flowbite** (vendored: `flowbite.min.js`; `datepicker.umd.js` for the stats YearPicker) — navbar collapse, dropdown toggles
- **Tailwind CSS** — utility classes, compiled from `common/input.css``games/static/base.css`
- All third-party JS is served locally from `games/static/js/` (no CDNs), so pages and browser tests work offline
- **Custom JS** in `games/static/js/`:
- `toast.js` — Alpine.js toast store (listens for `show-toast` HTMX event); also defines `window.fetchWithHtmxTriggers`
- `search_select.js` — SearchSelect/FilterSelect widgets (search-as-you-type, pills, include/exclude filter mode)
- `utils.js` — shared ES-module helpers (`onSwap`, `toISOUTCString`, …)
- **Widget initialization**: widget JS registers with `onSwap(selector, initializeElement)` from `utils.js` — a port of FastHTML's `proc_htmx` built on `htmx.onLoad`. It runs the initializer once per matching element, on initial page load and inside every htmx-swapped fragment. Never hand-roll `DOMContentLoaded`/`htmx:afterSwap` listeners with per-element guard flags.
### Interactive components: custom elements + TypeScript
New interactive components are **custom elements**, not inline JS in Python. A component that needs behavior emits a semantic tag via `custom_element("tag", Props(...))` (light DOM, server-rendered inner markup built with the htpy-style node builders). Behavior lives in `ts/elements/<tag>.ts` (TypeScript, vanilla DOM, `customElements.define`); the native `connectedCallback` replaces `onSwap` (it fires on parse *and* htmx swap). The server↔client contract is one Python `TypedDict` per element registered with `register_element(...)` in `common/components/custom_elements.py`; `manage.py gen_element_types` codegens `ts/generated/props.ts` (interface + attribute reader) so renaming a prop fails `tsc`.
- **Build:** `tsc` per-module (`tsconfig.json`) compiles `ts/``games/static/js/dist/` (build-only, gitignored). `make ts` = codegen + compile; `make ts-check` (in `make check`) = codegen + `tsc --noEmit`; `make dev` runs `tsc --watch`. The Docker image builds CSS + TS in a Node stage. Run `make ts` after editing any `.ts` so e2e/local serving sees fresh output.
- **htpy-style markup:** generic builders take kwargs attributes and `[]` children — `Div(class_="x", hx_get="/y")[child1, child2]` (`class_``class`, `hx_get``hx-get`, `True`→bare attr, `False`/`None`→omitted). Still a walkable `Element` tree, so `Media` bubbles.
- **Do NOT** author HTML/JS as Python f-strings or add new inline Alpine `x-data` blobs. Alpine remains only for trivial pre-existing toggles (toast store, etc.).
- **Tables collect cell media:** `SimpleTable` stringifies cells, so it explicitly `collect_media`s its rows/header and re-attaches it — a custom element in a table cell still gets its `<script>` emitted by `Page()`.
### Deployment
Docker-based: multi-stage Dockerfile (uv builder → Node assets stage → slim runtime), Caddy as reverse proxy on port 8000, Gunicorn with UvicornWorker (ASGI), Supervisor to manage Caddy + Gunicorn + django-q2. `make dev-prod` mimics production locally. CI/CD via GitHub Actions (`.github/workflows/build-docker.yml`): builds Docker image; Drone CI (`.drone.yml`) also present for deployments via Portainer webhook.
**Package manager (pnpm):** front-end deps use **pnpm**, not npm. The pnpm version is pinned in `package.json`'s `packageManager` field and provisioned via **Corepack** (bundled with Node) — the Docker assets stage runs `corepack enable` rather than `npm install -g pnpm`. To bump pnpm, update the `packageManager` field; local, CI, and Docker all follow it. pnpm disables dependency lifecycle scripts by default (opt in via `pnpm.onlyBuiltDependencies`), so the project is unaffected by npm v12's install-script changes.
### Database
SQLite with WAL journal mode. Connection timeout 20s. The `DATA_DIR` setting controls the database file location and is read consistently by both `settings.py` and `entrypoint.sh` (same env var + matching default). Migrations live in `games/migrations/`. There are `GeneratedField`s on the models — these are computed by the database engine and cannot be written from application code.
### Configuration
All configurable Django settings are read through `config()` in `timetracker/config.py`, never via bare `os.environ` in `settings.py`. Full reference: `docs/configuration.md`.
- **Resolution priority** (highest first): `NAME__FILE` (opt-in file secret) → `NAME` env var → `.env``settings.ini` (`[timetracker]` section) → in-code default. Missing + no default = `ImproperlyConfigured`.
- `config(name, *, default, cast, allow_file, required_in_prod)`: `cast` handles `bool`/`list`/`int`/`Path`/callable; `allow_file=True` honors `NAME__FILE` (contents `.strip()`-ed); `required_in_prod=True` hard-fails when missing and DEBUG is off.
- `DEBUG` defaults `True` (dev), turned off with `DEBUG=false`. `PROD` is a **deprecated alias** kept for one release.
- `SECRET_KEY` is required in production (insecure default only in DEBUG); supports `SECRET_KEY__FILE`.
- `APP_URL` accepts one full URL or a comma-separated list of full URLs; `ALLOWED_HOSTS` and `CSRF_TRUSTED_ORIGINS` are derived from all listed URLs. `ALLOWED_HOSTS` can still be overridden directly (e.g. `ALLOWED_HOSTS=*` behind a reverse proxy); `CSRF_TRUSTED_ORIGINS` is always derived from `APP_URL`.
- `TIME_ZONE` reads `TZ` (defaults `Europe/Prague` in debug, `UTC` in prod).
- Django Admin, Debug Toolbar, and `django_extensions` are only available in `DEBUG` mode.
- **Container/entrypoint-only** flags (`PUID`, `PGID`, `CREATE_DEFAULT_SUPERUSER`, `STAGING`, `LOAD_SAMPLE_DATA`) live in `entrypoint.sh`, not the Python config — they are bootstrap concerns, not Django settings.
- django-q2 cluster: 1 worker, 60s timeout, 120s retry, ORM broker
### Testing
Tests live in `tests/`. Run with `make test` or `uv run --with pytest-django pytest`. Key test files:
- `test_components.py` — component rendering
- `test_filter_bars.py`, `test_filter_helpers.py`, `test_filters.py` — filter system
- `test_paths_return_200.py` — smoke test all list/view URLs
- `test_rendered_pages.py` — HTML output of pages
- `test_signals.py` — signal side-effects (playtime recalc, status change audit, etc.)
- `test_stats.py` — stats computation
- `test_streak.py`, `test_time.py`, `test_session_formatting.py` — utilities
- `test_middleware_integration.py`, `test_toast_middleware.py` — HTMX middleware
- `test_price_update.py` — currency conversion signals
- `test_search_select.py` — SearchSelect component
Pytest settings are in `pyproject.toml` under `[tool.pytest.ini_options]` (`DJANGO_SETTINGS_MODULE = "timetracker.settings"`).
**Browser/E2E tests** live in `e2e/` and run with `make test-e2e` (`pytest-playwright` driving a real Chromium against pytest-django's `live_server`). `e2e/conftest.py` sets `DJANGO_ALLOW_ASYNC_UNSAFE` and prefers a system Chrome/Chromium; otherwise install browsers once via `uv run playwright install chromium`. All JS (including Alpine/Flowbite) is vendored in `games/static/js/`, so the tests run fully offline. Note that a bare `pytest` (`make test`) collects `e2e/` too, so it needs a browser as well. Key files: `test_widgets_e2e.py` (onSwap initialization lifecycle, FilterSelect/RangeSlider/add-purchase behavior), `test_search_select_e2e.py` (single-select edge cases on a synthetic page).
## Conventions for AI assistants
- **Never write to `GeneratedField`s** (`duration_calculated`, `duration_total`, `price_per_game`, `days_to_finish`). They are computed by the database.
- **Name variables with complete words** — readable, unabbreviated identifiers in both Python and JavaScript (e.g. `template` not `tpl`, `event` not `e`, `element` not `el`, `removeButton` not `removeBtn`, `option`/`value` not single letters in loops). This applies to new code and to code you touch.
- **Use `render_page()` not `render()`** for all full-page HTTP responses. Import from `common.layout`.
- **Build UI with Python components** from `common.components`, not raw HTML strings or Django templates. `SafeText` children pass through unescaped; plain strings are auto-escaped.
- **Components are nodes; use the named builders** — build with `Div()`, `Span()`, `Element("tag", ...)`, etc., which return `Node` objects. For a tag with no builder, add it to the whitelist in `primitives.py` (one line) or use `Element("tag", attrs, children)`. Use `Fragment(a, b, ...)` to group siblings (never `str(a)+str(b)`, which flattens the tree and drops media). Wrap trusted pre-rendered HTML in `Safe(html)` (the `mark_safe` analogue).
- **JS-bearing components declare `Media`, they don't rely on the view** — give a component `class Media: js = (...)` (a `BaseComponent`) or `return node.with_media(Media(js=...))`. `Page()` collects and emits it. Never re-add `scripts=ModuleScript(...)` threading in a view for a component that can declare its own dependency.
- **Filter views** accept `?filter=<JSON>` (structured) and fall back to `?search_string=` (free-text). New filter criteria go in `games/filters.py`; new criterion types go in `common/criteria.py`.
- **Read settings via `config()`** — new Django settings go through `config()` from `timetracker/config.py`, never bare `os.environ.get` in `settings.py`. Declare `cast`/`allow_file`/`required_in_prod` explicitly. Container-bootstrap flags belong in `entrypoint.sh`, not the Python config. See `docs/configuration.md`.
- **Signals handle side-effects** — do not manually recalculate `Game.playtime` or `Purchase.num_purchases`; the signals in `games/signals.py` do this on save/delete.
- **Button colors**: `blue` (primary action), `red` (destructive), `gray` (secondary), `green` (positive). Icon buttons use `icon=True`.
- **Inline Alpine.js** is used for client-side reactivity in domain components (`GameStatusSelector`, `SessionDeviceSelector`). The pattern is `x-data="{...}"` with `fetchWithHtmxTriggers()` for PATCH API calls.
- **No styling-at-a-distance; elements carry their own classes**: `input.css` is document bootstrapping only (Tailwind import, theme, fonts, resets) — it contains **no form/component styling and no selectors that reach across the DOM** (`#id descendant`, `form input:disabled`, etc.) to style something a component owns. An element's appearance, **including state** (`disabled:`, `has-[:disabled]:`, `focus:`), comes from utility classes on that element, emitted by its component. This keeps state composable (no specificity wars) and robust to markup edits.
- **Forms render via `FormFields`/`AddForm`, never `form.as_div()`**: `FormFields(form, *, extras=...)` (in `primitives.py`) renders label + control + errors + row layout with their own classes; native controls get their classes from `PrimitiveWidgetsMixin` (`games/forms.py`, which stamps `INPUT/SELECT/TEXTAREA_CLASS` incl. `disabled:` variants by widget type, skipping SearchSelect + checkbox). Every form is on this path, including login (`LoginForm(PrimitiveWidgetsMixin, AuthenticationForm)`). `extras` appends a node into a named field's row (e.g. the session timestamp buttons).
- **Disabled form controls share one look**: every form element fades the same way when disabled, via the shared constants in `primitives.py``DISABLED_CONTROL_CLASS` (`disabled:opacity-50 disabled:cursor-not-allowed`, put on the control: native inputs via the mixin, `Checkbox`, etc.) and `DISABLED_WITHIN_CLASS` (the `has-[:disabled]:` wrapper variant, for composite controls like `SearchSelect` whose disabled state lives on an inner element). Reuse these constants; don't hand-roll a different disabled style per control.
- **Disabling composite widgets**: a composite widget (e.g. `SearchSelect`) carries its `id` on a wrapper `<div>`, which has no `disabled` state — setting `.disabled` on it is a no-op. Disable the inner control (for `SearchSelect`, the `[data-search-select-search]` input); the wrapper fades itself via `DISABLED_WITHIN_CLASS`, so callers toggle only the control's `disabled`, never styles.
- **Platform icons** are SVG snippets in `games/templates/icons/<slug>.html`. Add new ones there and reference them by slug in `Platform.icon`.
- **Name compound types explicitly** — if a `tuple`, `dict`, or other compound value is passed between functions or appears in multiple signatures, give it a named type (`TypedDict`, `NamedTuple`, or a `type` alias) rather than repeating the structural annotation. This applies even to small types used in only a few places; the name carries intent that the structure cannot. Examples: `LabeledOption = tuple[str, str]` instead of repeating `tuple[str, str]` for (value, label) pairs; `RangeValues(min, max)` instead of `tuple[str, str]` for range bounds.
- **Name primitive roles too** — when a bare `str`/`int` stands for a domain concept (an id, a key, a token, a field name), give it a PEP 695 transparent alias (`type SortKey = str`) so signatures say *which* string/int goes where instead of a wall of `str`. These are zero-cost and need no wrapping (unlike `NewType`); reach for them especially when several distinct string roles meet in one function (e.g. a `dict[SortKey, SortSpec]` whose values reference an `AnnotationName`). Add a trailing comment on the alias noting an example value. Use `NewType` only when you actually want the checker to reject cross-assignment and are willing to wrap every literal.
+11 -12
View File
@@ -1,15 +1,14 @@
{ {
auto_https off auto_https off
admin off
} }
:8000 { :8000 {
handle_path /static/* { handle_path /static/* {
root * /home/timetracker/app/static root * /usr/share/caddy
file_server file_server
} }
handle /robots.txt { handle {
root * /home/timetracker/app/games/static reverse_proxy backend:8001
file_server }
} }
reverse_proxy localhost:8001
}
-15
View File
@@ -1,15 +0,0 @@
{
auto_https off
}
:8000 {
handle_path /static/* {
root * static
file_server browse
}
handle /robots.txt {
root * games/static
file_server browse
}
reverse_proxy :8001
}
+35 -68
View File
@@ -1,78 +1,45 @@
FROM ghcr.io/astral-sh/uv:python3.14-bookworm-slim AS builder FROM python:3.12.0-slim-bullseye
ENV UV_LINK_MODE=copy \ ENV VERSION_NUMBER=1.5.2 \
UV_COMPILE_BYTECODE=1 \ PROD=1 \
PYTHONUNBUFFERED=1
WORKDIR /home/timetracker/app
RUN --mount=type=cache,target=/root/.cache/uv \
--mount=type=bind,source=uv.lock,target=uv.lock \
--mount=type=bind,source=pyproject.toml,target=pyproject.toml \
uv sync --frozen --no-install-project --no-dev
COPY . .
RUN --mount=type=cache,target=/root/.cache/uv \
uv sync --frozen --no-dev
# Codegen the TypeScript prop contracts (needs Django); tsc compiles them in
# the assets stage below.
RUN uv run python manage.py gen_element_types
# Front-end assets: Tailwind CSS + the TypeScript custom elements. Built here so
# the compiled output ships in the image (dist/ is build-only, not committed).
FROM node:22-bookworm-slim AS assets
WORKDIR /app
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
# Corepack ships with Node and activates the pnpm version pinned in
# package.json's "packageManager" field — no npm bootstrap needed.
RUN corepack enable && pnpm install --frozen-lockfile --ignore-scripts
COPY . .
COPY --from=builder /home/timetracker/app/ts/generated ./ts/generated
RUN pnpm tailwindcss -i ./common/input.css -o ./games/static/base.css \
&& pnpm exec tsc
FROM python:3.14-slim-bookworm
ENV PROD=1 \
PYTHONUNBUFFERED=1 \ PYTHONUNBUFFERED=1 \
PATH="/home/timetracker/app/.venv/bin:$PATH" PYTHONFAULTHANDLER=1 \
PYTHONHASHSEED=random \
PYTHONDONTWRITEBYTECODE=1 \
PIP_NO_CACHE_DIR=1 \
PIP_DISABLE_PIP_VERSION_CHECK=1 \
PIP_DEFAULT_TIMEOUT=100 \
PIP_ROOT_USER_ACTION=ignore \
POETRY_NO_INTERACTION=1 \
POETRY_VIRTUALENVS_CREATE=false \
POETRY_CACHE_DIR='/var/cache/pypoetry' \
POETRY_HOME='/usr/local'
RUN apt-get update && apt-get install -y --no-install-recommends \ RUN apt-get update && apt-get upgrade -y \
&& apt-get install --no-install-recommends -y \
bash \
curl \ curl \
ca-certificates \ && curl -sSL 'https://install.python-poetry.org' | python - \
libcap2-bin \ && poetry --version \
supervisor \ && apt-get purge -y --auto-remove -o APT::AutoRemove::RecommendsImportant=false \
&& rm -rf /var/lib/apt/lists/* \ && apt-get clean -y && rm -rf /var/lib/apt/lists/*
&& useradd -m --uid 1000 timetracker \
&& mkdir -p /var/log/supervisor /etc/supervisor/conf.d /home/timetracker/data \
&& chown timetracker:timetracker /var/log/supervisor /home/timetracker/data
ARG CADDY_VERSION=2.9.1
RUN curl -sL "https://github.com/caddyserver/caddy/releases/download/v${CADDY_VERSION}/caddy_${CADDY_VERSION}_linux_amd64.tar.gz" \
-o /tmp/caddy.tar.gz && \
tar -xzf /tmp/caddy.tar.gz -C /tmp && \
mv /tmp/caddy /usr/local/bin/caddy && \
rm /tmp/caddy.tar.gz && \
chmod +x /usr/local/bin/caddy
RUN useradd -m --uid 1000 timetracker \
&& mkdir -p '/var/www/django/static' \
&& chown timetracker:timetracker '/var/www/django/static'
WORKDIR /home/timetracker/app WORKDIR /home/timetracker/app
COPY . /home/timetracker/app/
COPY --from=builder --chown=timetracker:timetracker /home/timetracker/app /home/timetracker/app RUN chown -R timetracker:timetracker /home/timetracker/app
COPY entrypoint.sh /
# Built front-end assets from the Node stage (Tailwind CSS + compiled TS).
COPY --from=assets --chown=timetracker:timetracker /app/games/static/base.css /home/timetracker/app/games/static/base.css
COPY --from=assets --chown=timetracker:timetracker /app/games/static/js/dist /home/timetracker/app/games/static/js/dist
COPY --chown=timetracker:timetracker Caddyfile /etc/caddy/Caddyfile
COPY --chown=timetracker:timetracker supervisor.conf /etc/supervisor/conf.d/supervisor.conf
COPY --chown=timetracker:timetracker entrypoint.sh /
RUN chmod +x /entrypoint.sh RUN chmod +x /entrypoint.sh
ENV VERSION_NUMBER=1.7.0 RUN --mount=type=cache,target="$POETRY_CACHE_DIR" \
echo "$PROD" \
&& poetry version \
&& poetry run pip install -U pip \
&& poetry install --only main --no-interaction --no-ansi --sync
USER timetracker
EXPOSE 8000 EXPOSE 8000
ENTRYPOINT ["/entrypoint.sh"] CMD [ "/entrypoint.sh" ]
+29 -68
View File
@@ -1,111 +1,72 @@
all: css migrate all: css migrate
initialize: npm css migrate loadplatforms initialize: npm css migrate sethookdir loadplatforms
HTMLFILES := $(shell find games/templates -type f)
PYTHON_VERSION = 3.12 PYTHON_VERSION = 3.12
npm: npm:
pnpm install npm install
css: common/input.css css: common/input.css
pnpm tailwindcss -i ./common/input.css -o ./games/static/base.css npx tailwindcss -i ./common/input.css -o ./games/static/base.css
makemigrations: makemigrations:
uv run python manage.py makemigrations poetry run python manage.py makemigrations
migrate: makemigrations migrate: makemigrations
uv run python manage.py migrate poetry run python manage.py migrate
init: init:
uv python install $(PYTHON_VERSION) pyenv install -s $(PYTHON_VERSION)
uv sync pyenv local $(PYTHON_VERSION)
pnpm install pip install poetry
$(MAKE) migrate poetry install
$(MAKE) loadplatforms npm install
server: gen-element-types dev:
@pnpm concurrently \ @npx concurrently \
--names "Django,TS" \ --names "Django,Tailwind" \
--prefix-colors "blue,green" \ --prefix-colors "blue,green" \
"uv run python -Wa manage.py runserver" \ "poetry run python -Wa manage.py runserver" \
"pnpm exec tsc --watch" "npx tailwindcss -i ./common/input.css -o ./games/static/base.css --watch"
gen-element-types:
uv run python manage.py gen_element_types
ts: gen-element-types
pnpm exec tsc
ts-check: gen-element-types
pnpm exec tsc --noEmit
dev: gen-element-types
@pnpm concurrently \
--names "Django,Tailwind,TS" \
--prefix-colors "blue,green,magenta" \
"uv run python -Wa manage.py runserver" \
"pnpm tailwindcss -i ./common/input.css -o ./games/static/base.css --watch" \
"pnpm exec tsc --watch"
caddy: caddy:
caddy run --watch caddy run --watch
dev-prod: migrate collectstatic dev-prod: migrate collectstatic
@npx concurrently \ PROD=1 poetry run python -m gunicorn --bind 0.0.0.0:8001 timetracker.asgi:application -k uvicorn.workers.UvicornWorker
--names "Caddy,Django,Django-Q" \
"caddy run --config Caddyfile.dev" \
"PROD=1 uv run python -m gunicorn --bind 0.0.0.0:8001 timetracker.asgi:application -k uvicorn.workers.UvicornWorker" \
"PROD=1 uv run manage.py qcluster"
dumpgames: dumpgames:
uv run python manage.py dumpdata --format yaml games --output tracker_fixture.yaml poetry run python manage.py dumpdata --format yaml games --output tracker_fixture.yaml
loadplatforms: loadplatforms:
uv run python manage.py loaddata platforms.yaml poetry run python manage.py loaddata platforms.yaml
loadall: loadall:
uv run python manage.py loaddata data.yaml poetry run python manage.py loaddata data.yaml
loadsample: loadsample:
uv run python manage.py loaddata sample.yaml poetry run python manage.py loaddata sample.yaml
createsuperuser: createsuperuser:
uv run python manage.py createsuperuser poetry run python manage.py createsuperuser
shell: shell:
uv run python manage.py shell poetry run python manage.py shell
collectstatic: collectstatic:
uv run python manage.py collectstatic --clear --no-input poetry run python manage.py collectstatic --clear --no-input
uv.lock: pyproject.toml poetry.lock: pyproject.toml
uv sync poetry install
# base.css (Tailwind) and js/dist (TS) are build artifacts, gitignored and not test: poetry.lock
# tracked — build both before tests so e2e/static serving has fresh assets. poetry run pytest
test: uv.lock css ts
uv run --with pytest-django pytest
test-e2e: uv.lock css ts
uv run pytest e2e/
lint:
uv run ruff check
lint-fix:
uv run ruff check --fix
format:
uv run ruff format
format-check:
uv run ruff format --check
check: lint format-check ts-check test
date: date:
uv run python -c 'import datetime; from zoneinfo import ZoneInfo; print(datetime.datetime.isoformat(datetime.datetime.now(ZoneInfo("Europe/Prague")), timespec="minutes", sep=" "))' poetry run python -c 'import datetime; from zoneinfo import ZoneInfo; print(datetime.datetime.isoformat(datetime.datetime.now(ZoneInfo("Europe/Prague")), timespec="minutes", sep=" "))'
cleanstatic: cleanstatic:
rm -r static/* rm -r static/*
+3 -3
View File
@@ -4,12 +4,12 @@ A simple game catalogue and play session tracker.
# Development # Development
The project uses `uv` to manage Python versions and dependencies. The project uses `pyenv` to manage installed Python versions.
Simply run: If you have `pyenv` installed, you can simply run:
``` ```
make init make init
``` ```
This installs the correct Python version, syncs all dependencies, and installs npm packages. This will make sure the correct Python version is installed, and it will install all dependencies using `poetry`.
Afterwards, you can start the development server using `make dev`. Afterwards, you can start the development server using `make dev`.
+287
View File
@@ -0,0 +1,287 @@
from random import choices as random_choices
from string import ascii_lowercase
from typing import Any, Callable
from django.template import TemplateDoesNotExist
from django.template.defaultfilters import floatformat
from django.template.loader import render_to_string
from django.urls import NoReverseMatch, reverse
from django.utils.safestring import SafeText, mark_safe
from common.utils import truncate
from games.models import Game, Purchase, Session
HTMLAttribute = tuple[str, str | int | bool]
HTMLTag = str
def Component(
attributes: list[HTMLAttribute] = [],
children: list[HTMLTag] | HTMLTag = [],
template: str = "",
tag_name: str = "",
) -> HTMLTag:
if not tag_name and not template:
raise ValueError("One of template or tag_name is required.")
if isinstance(children, str):
children = [children]
childrenBlob = "\n".join(children)
if len(attributes) == 0:
attributesBlob = ""
else:
attributesList = [f'{name}="{value}"' for name, value in attributes]
# make attribute list into a string
# and insert space between tag and attribute list
attributesBlob = f" {' '.join(attributesList)}"
tag: str = ""
if tag_name != "":
tag = f"<{tag_name}{attributesBlob}>{childrenBlob}</{tag_name}>"
elif template != "":
tag = render_to_string(
template,
{name: value for name, value in attributes}
| {"slot": mark_safe("\n".join(children))},
)
return mark_safe(tag)
def randomid(seed: str = "", length: int = 10) -> str:
return seed + "".join(random_choices(ascii_lowercase, k=length))
def Popover(
popover_content: str,
wrapped_content: str = "",
wrapped_classes: str = "",
children: list[HTMLTag] = [],
attributes: list[HTMLAttribute] = [],
) -> str:
if not wrapped_content and not children:
raise ValueError("One of wrapped_content or children is required.")
id = randomid()
return Component(
attributes=attributes
+ [
("id", id),
("wrapped_content", wrapped_content),
("popover_content", popover_content),
("wrapped_classes", wrapped_classes),
],
children=children,
template="cotton/popover.html",
)
def PopoverTruncated(
input_string: str,
popover_content: str = "",
popover_if_not_truncated: bool = False,
length: int = 30,
ellipsis: str = "",
endpart: str = "",
) -> str:
"""
Returns `input_string` truncated after `length` of characters
and displays the untruncated text in a popover HTML element.
The truncated text ends in `ellipsis`, and optionally
an always-visible `endpart` can be specified.
`popover_content` can be specified if:
1. It needs to be always displayed regardless if text is truncated.
2. It needs to differ from `input_string`.
"""
if (truncated := truncate(input_string, length, ellipsis, endpart)) != input_string:
return Popover(
wrapped_content=truncated,
popover_content=popover_content if popover_content else input_string,
)
else:
if popover_content and popover_if_not_truncated:
return Popover(
wrapped_content=input_string,
popover_content=popover_content if popover_content else "",
)
else:
return input_string
def A(
attributes: list[HTMLAttribute] = [],
children: list[HTMLTag] | HTMLTag = [],
url: str | Callable[..., Any] = "",
):
"""
Returns the HTML tag "a".
"url" can either be:
- URL (string)
- path name passed to reverse() (string)
- function
"""
additional_attributes = []
if url:
if type(url) is str:
try:
url_result = reverse(url)
except NoReverseMatch:
url_result = url
elif callable(url):
url_result = url()
else:
raise TypeError("'url' is neither str nor function.")
additional_attributes = [("href", url_result)]
return Component(
tag_name="a", attributes=attributes + additional_attributes, children=children
)
def Button(
attributes: list[HTMLAttribute] = [],
children: list[HTMLTag] | HTMLTag = [],
size: str = "base",
icon: bool = False,
color: str = "blue",
):
return Component(
template="cotton/button.html",
attributes=attributes + [("size", size), ("icon", icon), ("color", color)],
children=children,
)
def Div(
attributes: list[HTMLAttribute] = [],
children: list[HTMLTag] | HTMLTag = [],
):
return Component(tag_name="div", attributes=attributes, children=children)
def Input(
type: str = "text",
attributes: list[HTMLAttribute] = [],
children: list[HTMLTag] | HTMLTag = [],
):
return Component(
tag_name="input", attributes=attributes + [("type", type)], children=children
)
def Form(
action="",
method="get",
attributes: list[HTMLAttribute] = [],
children: list[HTMLTag] | HTMLTag = [],
):
return Component(
tag_name="form",
attributes=attributes + [("action", action), ("method", method)],
children=children,
)
def Icon(
name: str,
attributes: list[HTMLAttribute] = [],
):
try:
result = Component(template=f"cotton/icon/{name}.html", attributes=attributes)
except TemplateDoesNotExist:
result = Icon(name="unspecified", attributes=attributes)
return result
def LinkedPurchase(purchase: Purchase) -> SafeText:
link = reverse("view_purchase", args=[int(purchase.id)])
link_content = ""
popover_content = ""
game_count = purchase.games.count()
popover_if_not_truncated = False
if game_count == 1:
link_content += purchase.games.first().name
popover_content = link_content
if game_count > 1:
if purchase.name:
link_content += f"{purchase.name}"
popover_content += f"<h1>{purchase.name}</h1><br>"
else:
link_content += f"{game_count} games"
popover_if_not_truncated = True
popover_content += f"""
<ul class="list-disc list-inside">
{"".join(f"<li>{game.name}</li>" for game in purchase.games.all())}
</ul>
"""
icon = purchase.platform.icon if game_count == 1 else "unspecified"
if link_content == "":
raise ValueError("link_content is empty!!")
a_content = Div(
[("class", "inline-flex gap-2 items-center")],
[
Icon(
icon,
[("title", "Multiple")],
),
PopoverTruncated(
input_string=link_content,
popover_content=mark_safe(popover_content),
popover_if_not_truncated=popover_if_not_truncated,
),
],
)
return mark_safe(A(url=link, children=[a_content]))
def NameWithIcon(
name: str = "",
platform: str = "",
game_id: int = 0,
session_id: int = 0,
purchase_id: int = 0,
linkify: bool = True,
emulated: bool = False,
) -> SafeText:
create_link = False
link = ""
platform = None
if (game_id != 0 or session_id != 0 or purchase_id != 0) and linkify:
create_link = True
if session_id:
session = Session.objects.get(pk=session_id)
emulated = session.emulated
game_id = session.game.pk
if purchase_id:
purchase = Purchase.objects.get(pk=purchase_id)
game_id = purchase.games.first().pk
if game_id:
game = Game.objects.get(pk=game_id)
name = name or game.name
platform = game.platform
link = reverse("view_game", args=[int(game_id)])
content = Div(
[("class", "inline-flex gap-2 items-center")],
[
Icon(
platform.icon,
[("title", platform.name)],
)
if platform
else "",
Icon("emulated", [("title", "Emulated")]) if emulated else "",
PopoverTruncated(name),
],
)
return mark_safe(
A(
url=link,
children=[content],
)
if create_link
else content,
)
def PurchasePrice(purchase) -> str:
return Popover(
popover_content=f"{floatformat(purchase.price)} {purchase.price_currency}",
wrapped_content=f"{floatformat(purchase.converted_price)} {purchase.converted_currency}",
wrapped_classes="underline decoration-dotted",
)
-181
View File
@@ -1,181 +0,0 @@
"""Server-side HTML component library.
Split into core / primitives / domain / filters submodules; this package
re-exports the public API so ``from common.components import X`` keeps working.
"""
from common.components.core import (
BaseComponent,
Element,
Fragment,
HTMLAttribute,
HTMLTag,
Media,
Node,
Safe,
_render_element,
collect_media,
randomid,
render,
)
from common.components.custom_elements import (
SelectionFields,
SessionTimestampButtons,
register_element,
)
from common.components.date_range_picker import (
DateRangeCalendar,
DateRangeField,
DateRangePicker,
)
from common.components.domain import (
GameLink,
GameStatus,
GameStatusSelector,
LinkedPurchase,
NameWithIcon,
PriceConverted,
PurchasePrice,
SessionDeviceSelector,
_resolve_name_with_icon,
)
from common.components.filters import (
DeviceFilterBar,
FilterBar,
NumberFilter,
PlatformFilterBar,
PlayEventFilterBar,
PurchaseFilterBar,
SessionFilterBar,
StringFilter,
)
from common.components.primitives import (
H1,
A,
AddForm,
ButtonGroup,
DISABLED_CONTROL_CLASS,
DISABLED_WITHIN_CLASS,
FormFields,
Checkbox,
CsrfInput,
Div,
ExternalScript,
Icon,
Input,
Label,
Li,
Modal,
ModuleScript,
Pill,
Popover,
PopoverTruncated,
Radio,
SearchField,
SimpleTable,
Span,
StaticScript,
StyledButton,
TableHeader,
TableRow,
TableTd,
Td,
Template,
Th,
Tr,
Ul,
YearPicker,
custom_element_builder,
paginated_table_content,
)
from common.components.search_select import (
DEFAULT_PREFETCH,
FilterSelect,
LabeledOption,
SearchSelect,
SearchSelectOption,
searchselect_selected,
)
from common.utils import truncate
__all__ = [
"truncate",
"BaseComponent",
"register_element",
"SelectionFields",
"SessionTimestampButtons",
"custom_element_builder",
"Element",
"Fragment",
"Media",
"Node",
"Safe",
"collect_media",
"render",
"HTMLAttribute",
"HTMLTag",
"_render_element",
"randomid",
"A",
"AddForm",
"DISABLED_CONTROL_CLASS",
"DISABLED_WITHIN_CLASS",
"FormFields",
"StyledButton",
"ButtonGroup",
"Checkbox",
"CsrfInput",
"Div",
"ExternalScript",
"H1",
"Icon",
"Input",
"Modal",
"ModuleScript",
"Pill",
"Popover",
"PopoverTruncated",
"Radio",
"SearchField",
"DEFAULT_PREFETCH",
"FilterSelect",
"LabeledOption",
"SearchSelect",
"SearchSelectOption",
"searchselect_selected",
"SimpleTable",
"Span",
"StaticScript",
"Label",
"Li",
"Td",
"Th",
"Tr",
"Ul",
"TableHeader",
"TableRow",
"TableTd",
"Template",
"YearPicker",
"paginated_table_content",
"GameLink",
"GameStatus",
"GameStatusSelector",
"LinkedPurchase",
"NameWithIcon",
"PriceConverted",
"PurchasePrice",
"SessionDeviceSelector",
"_resolve_name_with_icon",
"DateRangeCalendar",
"DateRangeField",
"DateRangePicker",
"FilterBar",
"PurchaseFilterBar",
"SessionFilterBar",
"DeviceFilterBar",
"PlatformFilterBar",
"PlayEventFilterBar",
"StringFilter",
"NumberFilter",
]
-353
View File
@@ -1,353 +0,0 @@
"""Node layer: the lazy component tree, its renderer, and media collection.
A FastHTML-style model. Everything renderable is a :class:`Node`. The single
:class:`Element` class represents *any* HTML element (tag + attrs + children);
named builders like ``Div`` / ``Span`` are generated from a whitelist rather
than hand-written per tag (see ``primitives.py``). Higher-level, behaviour- or
media-bearing components subclass :class:`BaseComponent` and implement
``render()`` returning a node subtree.
Nodes are *lazy*: they hold structure and render to HTML only when asked
(``str(node)`` / ``node.__html__()`` / :func:`render`). This is what lets
``Page()`` walk a finished tree and collect every component's declared JS
(:class:`Media`) instead of each view threading ``scripts=`` by hand.
"""
import hashlib
from collections.abc import Sequence
from functools import lru_cache
from django.utils.html import escape
from django.utils.safestring import SafeText, mark_safe
HTMLAttribute = tuple[str, str | int | bool]
# Type for a builder's ``attributes`` parameter. Covariant ``Sequence`` so a
# caller's ``list[tuple[str, str]]`` is accepted (a plain ``list[HTMLAttribute]``
# would be invariant and reject it). Locals that get ``.append()``-ed should
# stay a concrete ``list[HTMLAttribute]``.
Attributes = Sequence[HTMLAttribute]
HTMLTag = str
# ── Media: declarative JS dependencies ──────────────────────────────────────
def _dedup(*sequences: tuple[str, ...]) -> tuple[str, ...]:
"""First-seen dedup that preserves declaration order across sequences."""
seen: dict[str, None] = {}
for sequence in sequences:
for item in sequence:
seen.setdefault(item, None)
return tuple(seen)
class Media:
"""A component's JS dependencies, modelled on ``django.forms.Media``.
``js`` are static ES-module filenames (rendered as ``ModuleScript``);
``js_external`` are vendored UMD / classic bundles (rendered as
``StaticScript``). Addition merges with first-seen, order-preserving dedup,
so a page that uses a component many times emits each script once.
"""
__slots__ = ("js", "js_external")
def __init__(
self,
js: tuple[str, ...] | list[str] = (),
js_external: tuple[str, ...] | list[str] = (),
) -> None:
self.js = tuple(js)
self.js_external = tuple(js_external)
def __add__(self, other: "Media | None") -> "Media":
if not other:
return self
return Media(
_dedup(self.js, other.js),
_dedup(self.js_external, other.js_external),
)
def __radd__(self, other: "Media | None") -> "Media":
# Supports ``sum(medias, Media())`` and ``0 + media``.
if not other or other == 0:
return self
return other.__add__(self)
def __bool__(self) -> bool:
return bool(self.js or self.js_external)
def __eq__(self, other: object) -> bool:
return (
isinstance(other, Media)
and self.js == other.js
and self.js_external == other.js_external
)
def __hash__(self) -> int:
return hash((self.js, self.js_external))
def __repr__(self) -> str:
return f"Media(js={self.js!r}, js_external={self.js_external!r})"
# ── Node tree ────────────────────────────────────────────────────────────────
class Node:
"""Base class for everything renderable to HTML."""
# Declared dependencies. Class-level default is shared and empty; concrete
# components override with their own ``Media(...)``.
media: Media = Media()
def _render(self) -> str:
raise NotImplementedError
def collect_media(self) -> Media:
"""Total media of this node and its subtree."""
return self.media
def with_media(self, media: Media) -> "Node":
"""Attach JS dependencies to this node and return it (for fluent use).
Lets a function-built node declare its media without becoming a full
``BaseComponent`` subclass: ``return Div(...).with_media(Media(js=...))``.
"""
self.media = self.media + media
return self
# A node's rendered output is always safe HTML by construction (Element
# escapes unsafe children; Safe wraps trusted markup; Fragment escapes plain
# strings). So both `__html__` (Django's conditional_escape hook) and
# `__str__` return a SafeString — this is what keeps ``str(node)`` safe when
# fed back into a child list or template, matching the old SafeText shims.
def __html__(self) -> SafeText:
return mark_safe(self._render())
def __str__(self) -> SafeText:
return mark_safe(self._render())
# A renderable child is a node or a string. Strings are ALWAYS escaped (a string
# is untrusted text — ``SafeText``/``mark_safe`` is escaped too); trusted
# pre-rendered HTML must be a ``Safe`` node. ``Children`` is the type for a
# builder's ``children``
# parameter: a sequence of child nodes/strings, a bare string, or nothing. The
# sequence is a covariant ``Sequence`` so ``list[Element]`` / ``list[Node]`` are
# accepted (a plain ``list[str]`` would be invariant and reject them). A single
# bare ``Node`` is accepted only by ``Element`` itself (which wraps it); the
# higher-level builders take ``Children``.
Child = Node | str
Children = Sequence[Child] | Node | str | None
def as_children(children: Children) -> list[Child]:
"""Normalise a builder's ``children`` argument to a flat list.
Accepts ``None`` (→ empty), a single node/string (→ one-element list), or a
sequence of them. Lets builders drop the ``children if isinstance(children,
list) else [children]`` dance and get a properly typed ``list[Child]``.
"""
if children is None:
return []
if isinstance(children, (str, Node)):
return [children]
return list(children)
def as_attributes(attributes: "Attributes | None") -> list[HTMLAttribute]:
"""Normalise an ``attributes`` argument to a mutable ``list[HTMLAttribute]``.
Builders take a covariant ``Attributes`` (so callers can pass a
``list[tuple[str, str]]``) but often append to or concatenate the value;
this turns it into a concrete list they can mutate.
"""
return list(attributes) if attributes else []
def _child_key(child: object) -> tuple[str, bool]:
"""Normalise a child to a ``(text, is_safe)`` pair.
Only :class:`Node` children render unescaped — that includes :class:`Safe`,
the one sanctioned way to put trusted pre-rendered HTML into the tree. Every
*string* child is escaped, ``SafeText``/``mark_safe`` included: a string is
always treated as untrusted text, so trusted markup must be wrapped in
``Safe(...)`` rather than smuggled in as a safe string. ``is_safe`` is part
of the render cache key so a safe ``"<b>"`` and an unsafe ``"<b>"`` never
collide.
"""
if isinstance(child, Node):
return (child._render(), True)
if isinstance(child, str):
return (child, False)
return (str(child), False)
@lru_cache(maxsize=4096)
def _render_element(
tag_name: str,
attrs_key: tuple[tuple[str, str], ...],
children_key: tuple[tuple[str, bool], ...],
) -> str:
"""Pure, memoized HTML builder. Identical (tag, attrs, children) render once.
``attrs_key`` is (name, stringified value) pairs (values always escaped);
``children_key`` is (text, is_safe) pairs (safe passes through, else escaped).
"""
children_blob = "\n".join(
child if is_safe else escape(child) for child, is_safe in children_key
)
if attrs_key:
attributes_blob = " " + " ".join(
f'{name}="{escape(value)}"' for name, value in attrs_key
)
else:
attributes_blob = ""
return f"<{tag_name}{attributes_blob}>{children_blob}</{tag_name}>"
class Element(Node):
"""Any HTML element: a tag name, attributes and children.
Children may be other nodes, ``SafeText``, or plain strings (escaped).
Rendering goes through the memoized :func:`_render_element`.
"""
def __init__(
self,
tag_name: str,
attributes: Attributes | None = None,
children: "Children | Node" = None,
) -> None:
if not tag_name:
raise ValueError("tag_name is required.")
self.tag_name = tag_name
self.attributes = attributes or []
if children is None:
children = []
elif isinstance(children, (str, Node)):
children = [children]
self.children = children
def __getitem__(self, children: "Children | Node") -> "Element":
"""htpy-style children: ``Div(class_="x")[child1, child2]``.
Returns an Element with the same tag/attributes/media and these
children, so the tree stays walkable (Media still bubbles)."""
items = children if isinstance(children, tuple) else (children,)
clone = Element(self.tag_name, self.attributes, list(items))
clone.media = self.media
return clone
def collect_media(self) -> Media:
media = self.media
for child in self.children:
if isinstance(child, Node):
media = media + child.collect_media()
return media
def _render(self) -> str:
attrs_key = tuple((name, str(value)) for name, value in self.attributes)
children_key = tuple(_child_key(child) for child in self.children)
return _render_element(self.tag_name, attrs_key, children_key)
class Safe(Node):
"""A node wrapping pre-rendered, trusted HTML (the ``mark_safe`` analogue).
Used as the migration bridge for components still built from f-strings:
they return ``Safe(html)`` and declare their ``media`` explicitly rather
than atomising their markup into a node tree up front.
"""
def __init__(self, html: object, media: Media | None = None) -> None:
self._html = str(html)
if media is not None:
self.media = media
def _render(self) -> str:
return self._html
class Fragment(Node):
"""An ordered group of children with no wrapping tag.
Replaces ``mark_safe(str(a) + str(b))`` / ``"\\n".join(...)`` composition,
so media still bubbles up from the grouped children.
"""
def __init__(self, *children: object, separator: str = "") -> None:
self.children = [c for c in children if c is not None and c != ""]
self.separator = separator
def collect_media(self) -> Media:
media = Media()
for child in self.children:
if isinstance(child, Node):
media = media + child.collect_media()
return media
def _render(self) -> str:
parts = []
for child in self.children:
text, is_safe = _child_key(child)
parts.append(text if is_safe else escape(text))
return self.separator.join(parts)
class BaseComponent(Node):
"""Base for higher-level components: implement ``render()`` returning a node
subtree and declare ``media`` (a :class:`Media`).
``render()`` is called once and memoized; ``collect_media()`` returns this
component's own media merged with the rendered subtree's.
"""
def render(self) -> Node:
raise NotImplementedError
def _tree(self) -> Node:
cached = getattr(self, "_tree_cache", None)
if cached is None:
cached = self.render()
self._tree_cache = cached
return cached
def _render(self) -> str:
return self._tree()._render()
def collect_media(self) -> Media:
return self.media + self._tree().collect_media()
def render(node: "Node | str") -> SafeText:
"""Render a node (or pass a string through) to safe HTML."""
if isinstance(node, Node):
return mark_safe(node._render())
return mark_safe(str(node))
def collect_media(node: "Node | str") -> Media:
"""Collect the media of a node tree (empty for a bare string)."""
if isinstance(node, Node):
return node.collect_media()
return Media()
def randomid(seed: str = "", content: str = "", length: int = 10) -> str:
if not seed and not content:
return seed
hash_input = f"{seed}:{content}" if seed else content
content_hash = hashlib.sha1(hash_input.encode()).hexdigest()
base = (
content_hash[:length]
if not seed
else content_hash[: max(0, length - len(seed))]
)
return seed + base
-225
View File
@@ -1,225 +0,0 @@
"""Custom-element builder, registry, and TypeScript codegen.
A custom element is a light-DOM Web Component: the Python builder emits a
semantic tag whose typed props become kebab-case attributes and whose behavior
lives in a compiled TS module (loaded via Media). One ``TypedDict`` per element
is the single source of truth for the server<->client contract;
``gen_element_types`` turns each registered spec into a TS interface + attribute
reader so drift fails ``tsc``.
"""
from dataclasses import dataclass
from typing import TypedDict, get_type_hints
from common.components.core import Node
from common.components.primitives import (
Div,
Input,
Label,
Template,
custom_element_builder,
)
@dataclass(frozen=True)
class ElementSpec:
tag: str # e.g. "game-status-selector"
ts_name: str # e.g. "GameStatusSelector"
props: type # a TypedDict subclass
ELEMENT_REGISTRY: list[ElementSpec] = []
def register_element(tag: str, ts_name: str, props: type) -> None:
"""Register an element so codegen can emit its TS contract."""
ELEMENT_REGISTRY.append(ElementSpec(tag, ts_name, props))
def _kebab(name: str) -> str:
return name.replace("_", "-")
# ── Codegen ──────────────────────────────────────────────────────────────────
_TYPE_MAP = {int: "number", float: "number", str: "string", bool: "boolean"}
def _camel(name: str) -> str:
head, *tail = name.split("_")
return head + "".join(part.title() for part in tail)
def _reader_expr(name: str, python_type: type) -> str:
attr = _kebab(name)
if python_type in (int, float):
return f'Number(el.getAttribute("{attr}"))'
if python_type is bool:
return f'el.getAttribute("{attr}") === "true"'
return f'el.getAttribute("{attr}") ?? ""'
def _ts_for_spec(spec: ElementSpec) -> str:
hints = get_type_hints(spec.props)
interface_lines = "\n".join(
f" {_camel(name)}: {_TYPE_MAP[python_type]};"
for name, python_type in hints.items()
)
reader_lines = "\n".join(
f" {_camel(name)}: {_reader_expr(name, python_type)},"
for name, python_type in hints.items()
)
return (
f"export interface {spec.ts_name}Props {{\n{interface_lines}\n}}\n\n"
f"export function read{spec.ts_name}Props(el: HTMLElement): "
f"{spec.ts_name}Props {{\n return {{\n{reader_lines}\n }};\n}}"
)
def render_props_module() -> str:
"""The full ``ts/generated/props.ts`` content for every registered element."""
header = "// GENERATED by `manage.py gen_element_types` — do not edit.\n"
blocks = [_ts_for_spec(spec) for spec in ELEMENT_REGISTRY]
return header + "\n" + "\n\n".join(blocks) + "\n"
# ── Element prop schemas (registered at import time) ─────────────────────────
class GameStatusSelectorProps(TypedDict):
game_id: int
status: str
csrf: str
register_element("game-status-selector", "GameStatusSelector", GameStatusSelectorProps)
class SessionDeviceSelectorProps(TypedDict):
session_id: int
csrf: str
register_element(
"session-device-selector", "SessionDeviceSelector", SessionDeviceSelectorProps
)
class PlayEventRowProps(TypedDict):
game_id: int
csrf: str
api_create_url: str
register_element("play-event-row", "PlayEventRow", PlayEventRowProps)
class SessionTimestampButtonsProps(TypedDict):
pass
register_element(
"session-timestamp-buttons", "SessionTimestampButtons", SessionTimestampButtonsProps
)
# ── Named tag builders (consistent htpy-style with Div/Span) ─────────────────
# Underscore-prefixed: used internally by domain wrappers.
# Public ones (no domain wrapper): exported directly.
_GameStatusSelector = custom_element_builder("game-status-selector")
_SessionDeviceSelector = custom_element_builder("session-device-selector")
_PlayEventRow = custom_element_builder("play-event-row")
SessionTimestampButtons = custom_element_builder("session-timestamp-buttons")
class SelectionFieldsProps(TypedDict):
source: str # data-name of the source SearchSelect to mirror
name_prefix: str # each rendered input is named f"{name_prefix}{item_id}"
field_type: str # input type, e.g. "number"
min_items: int # render nothing until at least this many items are selected
active: bool # when false, render nothing (but preserve typed values)
register_element("selection-fields", "SelectionFields", SelectionFieldsProps)
_SelectionFields = custom_element_builder("selection-fields")
class DateRangePickerProps(TypedDict):
pass
register_element("date-range-picker", "DateRangePicker", DateRangePickerProps)
_DateRangePicker = custom_element_builder("date-range-picker")
class SearchSelectProps(TypedDict):
name: str
search_url: str
multi: bool
filter_mode: bool
free_text: bool
always_visible: bool
prefetch: int
sync_url: bool
register_element("search-select", "SearchSelect", SearchSelectProps)
_SearchSelect = custom_element_builder("search-select")
class FilterBarProps(TypedDict):
preset_list_url: str
preset_save_url: str
register_element("filter-bar", "FilterBar", FilterBarProps)
_FilterBarElement = custom_element_builder("filter-bar")
class YearPickerProps(TypedDict):
selected_year: str # "" for the all-time/empty state
available_years: str # csv, e.g. "2019,2020"
url_template: str # contains the literal __year__ placeholder
# The <year-picker> builder lives in primitives.py (next to YearPicker, which
# uses it) because custom_elements imports from primitives — registering here
# would be a circular import. Registration is codegen-only, so it belongs here.
register_element("year-picker", "YearPicker", YearPickerProps)
def SelectionFields(
*,
source: str,
name_prefix: str,
field_type: str = "text",
min_items: int = 1,
active: bool = False,
input_attributes: list[tuple[str, str]] | None = None,
) -> Node:
"""Render one synced form field per selected item of a source SearchSelect.
General-purpose: it mirrors the SearchSelect named ``source`` and emits an
input named ``f"{name_prefix}{item_id}"`` per selected item. Behavior lives
in ``ts/elements/selection-fields.ts``; this is just the server-rendered
light DOM (an empty rows container + a row ``<template>``). Inputs inherit
the global ``#add-form`` styling, so the markup stays minimal.
"""
row_template = Template(attributes=[("data-selection-fields-row", "")])[
Div(attributes=[("data-selection-fields-row-item", "")])[
Label(attributes=[("data-selection-fields-label", "")]),
Input(type=field_type, attributes=list(input_attributes or [])),
]
]
return _SelectionFields(
source=source,
name_prefix=name_prefix,
field_type=field_type,
min_items=min_items,
active="true" if active else "false",
)[
Div(attributes=[("data-selection-fields-rows", "")]),
row_template,
]
-344
View File
@@ -1,344 +0,0 @@
"""DateRangePicker: a segmented date-range input with a calendar popup.
``DateRangePicker`` composes two parts:
- ``DateRangeField`` — the visible widget, styled as a single input. Each
date is split into per-part segments (``DD``/``MM``/``YYYY``, ordered by
``common.time.dateformat_hyphenated``) that the user fills digit by digit,
plus a calendar icon that opens the popup.
- ``DateRangeCalendar`` — the popup: a preset column (today, yesterday,
last 7 days, …), a month grid rendered client-side, and a
Cancel / Clear / Select footer.
The committed value lives in two hidden ISO-date inputs named
``{input_name_prefix}-min`` / ``{input_name_prefix}-max`` — the same contract
as the older ``DateRangeFilter``, so ``filter_bar.ts`` serializes either
widget into a ``DateCriterion`` unchanged. All behaviour is wired by
``ts/date_range_picker.ts`` (compiled to ``dist/date_range_picker.js``).
"""
from common.components.core import Element, Node, Safe
from common.components.custom_elements import _DateRangePicker
from common.components.primitives import Div, Input, Span
from common.time import DatePartSpec, date_parts
_FIELD_CONTAINER_CLASS = (
"flex items-center gap-0.5 w-full rounded-base border border-default-medium "
"bg-neutral-secondary-medium text-sm text-heading p-1.5 cursor-text "
"focus-within:ring-1 focus-within:ring-brand focus-within:border-brand"
)
# The segments must not stand out from the container: transparent background,
# no border, and only a subtle highlight when active (focused).
_SEGMENT_INPUT_CLASS = (
"bg-transparent border-0 p-0 text-center text-sm text-heading "
"placeholder:text-body rounded-xs focus:outline-none focus:ring-0 "
"focus:bg-brand/30 caret-transparent"
)
_SEGMENT_WIDTH_CLASSES = {2: "w-[2.5ch]", 4: "w-[4.5ch]"}
_CALENDAR_ICON_SVG = (
'<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" '
'stroke="currentColor" aria-hidden="true">'
'<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.5'
"A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5"
"A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5"
'A2.25 2.25 0 0 1 21 11.25v7.5"/>'
"</svg>"
)
_PRESET_OPTIONS: list[tuple[str, str]] = [
("today", "Today"),
("yesterday", "Yesterday"),
("last_7_days", "Last 7 days"),
("last_30_days", "Last 30 days"),
("this_month", "This month"),
("last_month", "Last month"),
("this_year", "This year"),
]
_PRESET_BUTTON_CLASS = (
"px-3 py-1.5 text-sm text-start text-body hover:text-heading "
"hover:bg-neutral-tertiary-medium rounded-base cursor-pointer whitespace-nowrap"
)
_NAV_BUTTON_CLASS = (
"p-1.5 text-body hover:text-heading hover:bg-neutral-tertiary-medium "
"rounded-base cursor-pointer"
)
_FOOTER_BUTTON_CLASS = (
"px-3 py-1.5 text-sm font-medium rounded-base cursor-pointer "
"text-heading bg-neutral-secondary-medium border border-default-medium "
"hover:bg-neutral-tertiary-medium"
)
_FOOTER_SELECT_BUTTON_CLASS = (
"px-3 py-1.5 text-sm font-medium rounded-base cursor-pointer "
"text-white bg-brand border border-transparent hover:bg-brand-strong"
)
def _iso_part_values(iso_value: str, parts: list[DatePartSpec]) -> dict[str, str]:
"""Split an ISO ``YYYY-MM-DD`` string into per-part initial values.
Returns an empty mapping for empty/malformed input so a bad stored filter
renders as empty segments instead of crashing."""
if not iso_value:
return {}
pieces = iso_value.split("-")
if len(pieces) != 3:
return {}
year, month, day = pieces
values = {"year": year, "month": month, "day": day}
if any(not values[part.name].isdigit() for part in parts):
return {}
return values
def _segment_input(*, part: DatePartSpec, side: str, label: str, value: str) -> Node:
side_label = "from" if side == "min" else "to"
return Input(
attributes=[
("inputmode", "numeric"),
("autocomplete", "off"),
("maxlength", str(part.length)),
("placeholder", part.placeholder),
("value", value),
("data-date-part", part.name),
("data-date-side", side),
("aria-label", f"{label} {side_label} {part.name}"),
(
"class",
f"{_SEGMENT_INPUT_CLASS} "
f"{_SEGMENT_WIDTH_CLASSES.get(part.length, 'w-[4.5ch]')}",
),
],
)
def _segment_group(*, side: str, label: str, iso_value: str) -> Node:
"""One date's worth of segments (``DD - MM - YYYY``) for a range side."""
parts = date_parts()
initial_values = _iso_part_values(iso_value, parts)
children: list[Node] = []
for index, part in enumerate(parts):
if index > 0:
children.append(
Span(
attributes=[("class", "text-body select-none")],
children=["-"],
)
)
children.append(
_segment_input(
part=part,
side=side,
label=label,
value=initial_values.get(part.name, ""),
)
)
return Span(
attributes=[
("class", "flex items-center gap-0.5"),
("data-date-range-side", side),
],
children=children,
)
def DateRangeField(
*,
label: str,
input_name_prefix: str,
min_value: str = "",
max_value: str = "",
) -> Node:
"""The visible half of the DateRangePicker: a single-input-looking
container holding two segmented dates, a calendar toggle, and the two
hidden ISO inputs (``{prefix}-min`` / ``{prefix}-max``) that carry the
committed value to ``filter_bar.js``."""
min_input_id = f"{input_name_prefix}-min"
max_input_id = f"{input_name_prefix}-max"
return Div(
attributes=[
("class", _FIELD_CONTAINER_CLASS),
("data-date-range-field", ""),
],
children=[
Input(
type="hidden",
attributes=[
("name", min_input_id),
("id", min_input_id),
("value", min_value),
("data-date-range-hidden", "min"),
],
),
Input(
type="hidden",
attributes=[
("name", max_input_id),
("id", max_input_id),
("value", max_value),
("data-date-range-hidden", "max"),
],
),
_segment_group(side="min", label=label, iso_value=min_value),
Span(
attributes=[("class", "text-body select-none px-0.5")],
children=[""],
),
_segment_group(side="max", label=label, iso_value=max_value),
Element(
"button",
attributes=[
("type", "button"),
("data-date-range-calendar-toggle", ""),
("aria-label", f"Open {label} calendar"),
(
"class",
"ms-auto p-1 text-body hover:text-heading rounded "
"cursor-pointer shrink-0",
),
],
children=[Safe(_CALENDAR_ICON_SVG)],
),
],
)
def _calendar_nav_button(direction: str, arrow: str, label: str) -> Node:
return Element(
"button",
attributes=[
("type", "button"),
(f"data-date-range-{direction}", ""),
("aria-label", label),
("class", _NAV_BUTTON_CLASS),
],
children=[arrow],
)
def _footer_button(action: str, label: str, button_class: str) -> Node:
return Element(
"button",
attributes=[
("type", "button"),
(f"data-date-range-{action}", ""),
("class", button_class),
],
children=[label],
)
def DateRangeCalendar(*, input_name_prefix: str) -> Node:
"""The popup half of the DateRangePicker: preset column, month grid
(filled client-side into ``[data-date-range-grid]``), and the
Cancel / Clear / Select footer. Hidden until the calendar toggle opens it."""
preset_buttons = [
Element(
"button",
attributes=[
("type", "button"),
("data-date-range-preset", preset_value),
("class", _PRESET_BUTTON_CLASS),
],
children=[preset_label],
)
for preset_value, preset_label in _PRESET_OPTIONS
]
return Div(
attributes=[
(
"class",
"hidden absolute z-20 top-full start-0 mt-1 flex "
"rounded-base border border-default-medium "
"bg-neutral-secondary-medium shadow-lg",
),
("data-date-range-calendar", ""),
("data-input-name-prefix", input_name_prefix),
],
children=[
Div(
attributes=[
(
"class",
"flex flex-col gap-0.5 p-2 border-e border-default-medium",
),
("data-date-range-presets", ""),
],
children=preset_buttons,
),
Div(
attributes=[("class", "p-2")],
children=[
Div(
attributes=[
("class", "flex items-center justify-between gap-2"),
],
children=[
_calendar_nav_button("prev", "", "Previous month"),
Span(
attributes=[
("class", "text-sm font-medium text-heading"),
("data-date-range-month-label", ""),
],
),
_calendar_nav_button("next", "", "Next month"),
],
),
Div(
attributes=[
("class", "grid grid-cols-7 gap-y-0.5 mt-1"),
("data-date-range-grid", ""),
],
),
Div(
attributes=[
(
"class",
"flex justify-end gap-2 mt-2 pt-2 border-t "
"border-default-medium",
),
],
children=[
_footer_button("cancel", "Cancel", _FOOTER_BUTTON_CLASS),
_footer_button("clear", "Clear", _FOOTER_BUTTON_CLASS),
_footer_button(
"select", "Select", _FOOTER_SELECT_BUTTON_CLASS
),
],
),
],
),
],
)
def DateRangePicker(
*,
label: str,
input_name_prefix: str,
min_value: str = "",
max_value: str = "",
) -> Node:
"""A date-range widget: segmented manual entry plus a calendar popup.
Drop-in replacement for ``DateRangeFilter`` — exposes the same hidden
``{prefix}-min`` / ``{prefix}-max`` ISO inputs, so the filter-bar
serializer needs no changes. ``min_value`` / ``max_value`` are ISO
``YYYY-MM-DD`` strings used to prefill both the segments and the hidden
inputs."""
return _DateRangePicker(class_="relative")[
DateRangeField(
label=label,
input_name_prefix=input_name_prefix,
min_value=min_value,
max_value=max_value,
),
DateRangeCalendar(input_name_prefix=input_name_prefix),
]
-308
View File
@@ -1,308 +0,0 @@
"""Domain components for games / purchases / sessions."""
from typing import Any
from django.template.defaultfilters import floatformat
from django.urls import reverse
from common.components.core import Children, Node, Safe, as_children
from common.components.primitives import (
A,
Div,
Icon,
Popover,
PopoverTruncated,
Span,
)
from games.models import Game, Purchase, Session
def GameLink(
game_id: int,
name: str = "",
children: Children = None,
) -> Node:
"""Link to a game's detail page. Uses children (slot) if provided, otherwise name."""
from django.urls import reverse
display = as_children(children) or [name]
link = reverse("games:view_game", args=[game_id])
return Span(
attributes=[("class", "truncate-container")],
children=[
A(
href=link,
attributes=[
("class", "underline decoration-slate-500 sm:decoration-2"),
],
children=display,
),
],
)
_STATUS_COLORS = {
"u": "bg-gray-500",
"p": "bg-orange-400",
"f": "bg-green-500",
"a": "bg-red-500",
"r": "bg-purple-500",
}
def GameStatus(
children: Children = None,
status: str = "u",
display: str = "",
class_: str = "",
) -> Node:
"""Colored status dot with label. Status codes: u/p/f/a/r."""
children = children or []
outer_class = (
f"{'flex' if display == 'flex' else 'inline-flex'} "
"gap-2 items-center align-middle"
)
if class_:
outer_class += f" {class_}"
dot_color = _STATUS_COLORS.get(status, _STATUS_COLORS["u"])
dot = Span(
attributes=[("class", f"rounded-xl w-3 h-3 {dot_color}")],
children=["\xa0"],
)
return Span(
attributes=[("class", outer_class)],
children=[dot] + as_children(children),
)
def PriceConverted(
children: Children = None,
) -> Node:
"""Wrap content in a span that indicates the price was converted."""
children = children or []
return Span(
attributes=[
("title", "Price is a result of conversion and rounding."),
("class", "decoration-dotted underline"),
],
children=as_children(children),
)
def LinkedPurchase(purchase: Purchase) -> Node:
link = reverse("games:view_purchase", args=[int(purchase.id)])
link_content = ""
popover_content = ""
game_count = purchase.games.count()
popover_if_not_truncated = False
if game_count == 1:
link_content += purchase.games.first().name
popover_content = link_content
if game_count > 1:
if purchase.name:
link_content += f"{purchase.name}"
popover_content += f"<h1>{purchase.name}</h1><br>"
else:
link_content += f"{game_count} games"
popover_if_not_truncated = True
popover_content += f"""
<ul class="list-disc list-inside">
{"".join(f"<li>{game.name}</li>" for game in purchase.games.all())}
</ul>
"""
icon = (
(purchase.platform.icon if purchase.platform else "unspecified")
if game_count == 1
else "unspecified"
)
if link_content == "":
raise ValueError("link_content is empty!!")
a_content = Div(
[("class", "inline-flex gap-2 items-center")],
[
Icon(
icon,
[("title", "Multiple")],
),
PopoverTruncated(
input_string=link_content,
popover_content=Safe(popover_content),
popover_if_not_truncated=popover_if_not_truncated,
),
],
)
return A(href=link, children=[a_content])
def NameWithIcon(
name: str = "",
game: Game | None = None,
session: Session | None = None,
linkify: bool = True,
emulated: bool = False,
) -> Node:
_name, platform, final_emulated, create_link, link = _resolve_name_with_icon(
name, game, session, linkify
)
content = Div(
[("class", "inline-flex gap-2 items-center")],
[
Icon(
platform.icon,
[("title", platform.name)],
)
if platform
else "",
Icon("emulated", [("title", "Emulated")]) if final_emulated else "",
PopoverTruncated(_name),
],
)
return (
A(
href=link,
children=[content],
)
if create_link
else content
)
def _resolve_name_with_icon(
name: str,
game: Game | None,
session: Session | None,
linkify: bool,
) -> tuple[str, Any, bool, bool, str]:
create_link = False
link = ""
platform = None
final_emulated = False
if session is not None:
game = session.game
platform = game.platform
final_emulated = session.emulated
if linkify:
create_link = True
link = reverse("games:view_game", args=[int(game.pk)])
elif game is not None:
platform = game.platform
if linkify:
create_link = True
link = reverse("games:view_game", args=[int(game.pk)])
_name = name or (game.name if game else "")
return _name, platform, final_emulated, create_link, link
def PurchasePrice(purchase) -> Node:
return Popover(
popover_content=f"{floatformat(purchase.price)} {purchase.price_currency}",
wrapped_content=f"{floatformat(purchase.converted_price)} {purchase.converted_currency}",
wrapped_classes="underline decoration-dotted",
)
_SELECTOR_MENU_CLASS = (
"absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm "
"font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none "
"border border-gray-200 dark:border-gray-700"
)
_SELECTOR_TOGGLE_CLASS = (
"relative px-4 py-2 text-sm font-medium bg-white border border-gray-200 "
"rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 "
"dark:hover:text-white dark:hover:bg-gray-700 hover:cursor-pointer"
)
_SELECTOR_OPTION_CLASS = (
"block w-full text-left px-4 py-2 rounded-sm cursor-pointer "
"hover:bg-gray-700 hover:text-white dark:hover:bg-gray-700 "
"dark:hover:text-white border-0"
)
def GameStatusSelector(game, game_statuses, csrf_token: str) -> Node:
"""Light-DOM custom element; behavior in ts/elements/game-status-selector.ts."""
from common.components.core import Element
from common.components.custom_elements import _GameStatusSelector
from common.components.primitives import Li, Ul
options = [
Li()[
Element(
"button",
[
("type", "button"),
("data-option", ""),
("data-value", str(value)),
("class", _SELECTOR_OPTION_CLASS),
],
GameStatus(status=value, children=[label], display="flex"),
)
]
for value, label in game_statuses
]
current_label = Span(data_label="")[
GameStatus(
status=game.status,
children=[game.get_status_display()],
display="flex",
)
]
toggle = Element(
"button",
[("type", "button"), ("data-toggle", ""), ("class", _SELECTOR_TOGGLE_CLASS)],
Span(class_="flex flex-row gap-4 justify-between items-center")[
current_label, Icon("arrowdown")
],
)
menu = Div(data_menu="", hidden=True, class_=_SELECTOR_MENU_CLASS)[Ul()[*options]]
dropdown = Div(
data_dropdown="", class_="inline-flex rounded-md shadow-2xs relative"
)[toggle, menu]
return _GameStatusSelector(game_id=game.id, status=game.status, csrf=csrf_token)[
Div(class_="flex gap-2 items-center")[dropdown]
]
def SessionDeviceSelector(session, session_devices, csrf_token: str) -> Node:
"""Light-DOM custom element; behavior in ts/elements/session-device-selector.ts."""
from common.components.core import Element
from common.components.custom_elements import _SessionDeviceSelector
from common.components.primitives import Li, Ul
current_name = session.device.name if session.device else "Unknown"
options = [
Li()[
Element(
"button",
[
("type", "button"),
("data-option", ""),
("data-value", str(device.id)),
("class", _SELECTOR_OPTION_CLASS),
],
children=[device.name],
)
]
for device in session_devices
]
toggle = Element(
"button",
[("type", "button"), ("data-toggle", ""), ("class", _SELECTOR_TOGGLE_CLASS)],
Span(class_="flex flex-row gap-4 justify-between items-center")[
Span(data_label="")[current_name], Icon("arrowdown")
],
)
menu = Div(data_menu="", hidden=True, class_=_SELECTOR_MENU_CLASS)[Ul()[*options]]
dropdown = Div(
data_dropdown="", class_="inline-flex rounded-md shadow-2xs relative"
)[toggle, menu]
return _SessionDeviceSelector(session_id=session.id, csrf=csrf_token)[
Div(class_="flex gap-2 items-center")[dropdown]
]
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
-593
View File
@@ -1,593 +0,0 @@
"""Search field + dropdown select component (pure Python, domain-agnostic).
Pairs a search box with a dropdown of options. Supports single/multi select;
in multi-select, chosen items render as removable ``Pill``s, each backed by a
hidden ``<input>`` so an existing ``ModelMultipleChoiceField`` keeps validating.
This module imports only from ``common.components`` — it has no Django-forms or
``games`` knowledge. Styling is inline Tailwind utilities; behavioural hooks are
``data-*`` attributes wired up by ``ts/search_select.ts`` (compiled to
``games/static/js/dist/search_select.js``).
**Field id / label association**: when ``SearchSelect`` is used as a Django form
widget, the field ``id`` (e.g. ``id_related_game``) is placed on the inner
search ``<input>`` (``[data-search-select-search]``), making it a real labelable
control. ``<label for="id_X">`` therefore focuses the search box, and
``document.querySelector('#id_X').disabled`` behaves as for a native input.
**Disabling**: set ``disabled`` directly on the field id (or on the inner
``[data-search-select-search]`` input). The wrapper greys itself via the
``has-[:disabled]:`` utilities in ``_CONTAINER_CLASS``. The inner input stays
transparent — the widget reads as one faded element, not a nested box. Callers
toggle only the control's ``disabled`` — never styles.
Option sourcing follows two axes. *Population*: options are either rendered
inline up front (``options=``, no ``search_url``) or fetched from ``search_url``.
*Completeness*: without a ``search_url`` the inline set is the whole dataset and
filtering is purely client-side; with a ``search_url`` the loaded rows are a
window, so the JS filters the loaded rows instantly on each keystroke while
issuing a debounced server request for the rest. ``prefetch`` (rows to load on
first open, ``0`` = none) seeds that window so the panel is populated before the
user types.
"""
from collections.abc import Callable, Iterable
from typing import TypedDict
from common.components.core import Attributes, Element, HTMLAttribute, Node
from common.components.custom_elements import _SearchSelect
from common.components.primitives import (
DISABLED_WITHIN_CLASS,
Div,
Input,
Pill,
Span,
Template,
)
class SearchSelectOption(TypedDict):
value: str | int
label: str
data: dict[str, str] # becomes data-* attrs on the row / pill
# A lightweight (value, label) pair used wherever only those two fields are
# needed — e.g. filter pill lists and modifier pseudo-options. The richer
# SearchSelectOption adds a ``data`` dict for extra row attributes.
LabeledOption = tuple[str, str]
# The pills and the search box share one flex-wrap row (with padding) so the
# widget reads as a single clickable field; the pills wrapper uses `contents`
# so its pills/hidden inputs flow as direct participants of that row, inline
# with the search input. The options panel is absolute, so it sits outside the
# flex flow.
# Border + focus styling mirror a native input (INPUT_CLASS): border-default-medium
# normally, brand border + ring on focus. The search input is the focusable
# element, so the focus state is expressed on the wrapper with focus-within: (and
# the inner input suppresses its own ring — see _SEARCH_CLASS).
# The widget owns its disabled appearance: when any control inside it is
# :disabled (e.g. add_purchase.ts disabling the search input), the wrapper fades
# via :has() — the same opacity-50 a disabled native input uses (see
# _DISABLED_CONTROL in games/forms.py), so the two look identical. Callers only
# toggle the control's `disabled`, never styles.
# px-3 py-2.5 text-sm match a native input (INPUT_CLASS); the wrapper supplies
# the field padding, and the inner search box zeroes its own (p-0) so the two
# don't stack into a too-tall field.
_CONTAINER_CLASS = (
"relative flex flex-wrap items-center gap-1 px-3 py-2.5 rounded-base text-sm "
"bg-neutral-secondary-medium border border-default-medium "
"focus-within:border-brand focus-within:ring-1 focus-within:ring-brand "
f"{DISABLED_WITHIN_CLASS}"
)
_PILLS_CLASS = "contents"
# disabled:cursor-not-allowed matches the wrapper's cursor so hovering across
# the whole widget stays consistent (the wrapper handles the faded look via
# has-[:disabled]:opacity-50).
_SEARCH_CLASS = (
"flex-1 min-w-[8rem] border-0 p-0 bg-transparent text-sm text-heading "
"focus:ring-0 focus:outline-hidden placeholder:text-body "
"disabled:cursor-not-allowed"
)
# top-full anchors the panel to the container's bottom edge: as an absolutely
# positioned child of the flex field, its static position would otherwise be
# centered by items-center and overlap the search box.
_OPTIONS_CLASS = (
"absolute z-10 top-full left-0 right-0 mt-1 overflow-y-auto "
"border border-default-medium rounded-base bg-neutral-secondary-medium shadow-lg"
)
_OPTION_ROW_CLASS = (
"px-3 py-2 text-sm text-heading cursor-pointer "
"hover:bg-brand/15 data-[search-select-highlighted]:bg-brand/15"
)
_NO_RESULTS_CLASS = "px-3 py-2 text-sm italic text-body hidden"
# Approximate rendered height of one option row (px-3 py-2 text-sm) in rem,
# used to derive the panel's max-height from items_visible.
_ROW_HEIGHT_REM = 2.25
# Default number of rows to fetch on first focus when a search_url is set.
# Shared by filter and form widgets so the dropdown is populated for keyboard
# navigation as soon as the user opens it.
DEFAULT_PREFETCH = 20
# ── FilterSelect styling ───────────────────────────────────────────────────
# Inline class strings (ported verbatim from the retired SelectableFilter CSS)
# so the filter combobox is fully self-styled — nothing in input.css. JS-added
# rows/pills are cloned from server-rendered <template>s, so these strings live
# only here — never duplicated in ts/search_select.ts. The keyboard-highlighted
# state is expressed via Tailwind `data-[search-select-highlighted]` and
# `group-data-[search-select-highlighted]` variants on the row/label/button
# classes below; the JS only toggles the data attribute on the row.
_FILTER_INCLUDE_PILL_CLASS = (
"inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded "
"bg-brand/15 text-heading"
)
_FILTER_EXCLUDE_PILL_CLASS = (
"inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded "
"bg-red-500/15 text-red-600 line-through decoration-red-400"
)
_FILTER_MODIFIER_PILL_CLASS = (
"inline-flex items-center px-2 py-0.5 text-sm rounded "
"bg-amber-500/15 text-amber-600 cursor-pointer"
)
_FILTER_PILL_REMOVE_CLASS = "ml-1 text-body hover:text-heading font-bold cursor-pointer"
_FILTER_OPTION_ROW_CLASS = (
"group flex items-center justify-between px-2 py-1 rounded text-sm "
"hover:bg-neutral-secondary-strong cursor-pointer "
"data-[search-select-highlighted]:bg-brand "
"data-[search-select-highlighted]:outline data-[search-select-highlighted]:outline-1 "
"data-[search-select-highlighted]:outline-brand-strong"
)
_FILTER_OPTION_LABEL_CLASS = (
"truncate text-body group-data-[search-select-highlighted]:text-white"
)
_FILTER_OPTION_BUTTONS_CLASS = "flex gap-1 ml-2 shrink-0"
# text-body keeps the +/ readable on dark backgrounds; hover:border-brand-strong
# keeps the edge visible against the brand hover fill. When the row is the
# keyboard-highlighted one its bg is brand, so the button text/border switch
# to white and the hover fill shifts to brand-strong for contrast.
_FILTER_ACTION_BUTTON_CLASS = (
"w-5 h-5 flex items-center justify-center text-xs font-bold rounded text-body "
"border border-brand "
"hover:bg-brand hover:text-white hover:border-brand-strong "
"group-data-[search-select-highlighted]:text-white "
"group-data-[search-select-highlighted]:border-white "
"group-data-[search-select-highlighted]:hover:bg-brand-strong "
"group-data-[search-select-highlighted]:hover:border-white"
)
_FILTER_MODIFIER_ROW_CLASS = (
"px-2 py-1 text-sm text-body hover:bg-neutral-secondary-strong cursor-pointer"
)
def _normalize_option(option) -> SearchSelectOption:
"""Coerce a dict option or a ``(value, label)`` tuple into the TypedDict."""
if isinstance(option, dict):
return {
"value": option["value"],
"label": option["label"],
"data": option.get("data") or {},
}
value, label = option
return {"value": value, "label": label, "data": {}}
def _data_attributes(data: dict[str, str]) -> list[HTMLAttribute]:
return [(f"data-{key}", str(value)) for key, value in data.items()]
def _hidden_input(name: str, value) -> Node:
return Input(type="hidden", attributes=[("name", name), ("value", str(value))])
def _label_slot(text: str, *, extra_class: str = "") -> Node:
"""A ``<span data-search-select-label>`` holding a row/pill's visible label. JS fills this
one node when cloning the shape from a ``<template>``, so labels are the only
thing the JS sets — all classes and structure stay server-side."""
attributes: list[HTMLAttribute] = [("data-search-select-label", "")]
if extra_class:
attributes.append(("class", extra_class))
return Span(attributes=attributes, children=[text])
# A placeholder option for rendering template prototypes (JS overwrites it).
_BLANK_OPTION: SearchSelectOption = {"value": "", "label": "", "data": {}}
def _option_row(option: SearchSelectOption) -> Node:
return Div(
attributes=[
("data-search-select-option", ""),
("data-value", str(option["value"])),
("data-label", option["label"]),
("class", _OPTION_ROW_CLASS),
*_data_attributes(option["data"]),
],
children=[_label_slot(option["label"])],
)
def _combobox_children(
*,
pills: Node,
search_attributes: Attributes,
options_children: list[Node],
always_visible: bool,
items_visible: int,
templates: list[Node] | None = None,
) -> list[Node]:
"""Build and return the shared combobox interior nodes.
Returns the three content regions (pills, search box, options panel) plus
any templates — ready to be placed as children of the caller's container
element. The shell knows nothing about how individual rows or pills look.
"""
search = Input(attributes=search_attributes)
no_results = Div(
attributes=[
("data-search-select-no-results", ""),
("class", _NO_RESULTS_CLASS),
],
children=["No results"],
)
options_class = _OPTIONS_CLASS if always_visible else _OPTIONS_CLASS + " hidden"
options_panel = Div(
attributes=[
("data-search-select-options", ""),
("style", f"max-height: {items_visible * _ROW_HEIGHT_REM:.2f}rem"),
("class", options_class),
],
children=[*options_children, no_results],
)
return [pills, search, options_panel, *(templates or [])]
def SearchSelect(
*,
name: str,
selected: list[SearchSelectOption] | None = None,
options: list[SearchSelectOption] | None = None,
search_url: str = "",
multi_select: bool = False,
always_visible: bool = False,
items_visible: int = 5,
items_scroll: int = 10,
prefetch: int = 0,
placeholder: str = "Search…",
id: str = "",
sync_url: bool = False,
autofocus: bool = False,
) -> Node:
"""Render the search-select widget. See module docstring for the contract."""
selected = [_normalize_option(option) for option in (selected or [])]
options = [_normalize_option(option) for option in (options or [])]
# ── Pills + their hidden inputs (the submitted channel) ──
# Multi-select renders a removable Pill per value; single-select renders no
# pill — the committed label shows inside the search box instead, with a
# lone hidden input carrying the value. Both keep the hidden input(s) inside
# `[data-search-select-pills]` so the JS reads/writes values uniformly.
pills_children: list[Node] = []
search_value = ""
if multi_select:
for option in selected:
pills_children.append(
Pill(
option["label"],
value=str(option["value"]),
removable=True,
label_slot=True,
attributes=_data_attributes(option["data"]),
)
)
pills_children.append(_hidden_input(name, option["value"]))
elif selected:
option = selected[0]
pills_children.append(_hidden_input(name, option["value"]))
search_value = option["label"]
pills = Div(
attributes=[("data-search-select-pills", ""), ("class", _PILLS_CLASS)],
children=pills_children,
)
# ── Search box (NO name — the query is never submitted) ──
search_attrs: list[HTMLAttribute] = [
("data-search-select-search", ""),
("placeholder", placeholder),
("autocomplete", "off"),
("class", _SEARCH_CLASS),
]
if id:
search_attrs.append(("id", id))
if autofocus:
search_attrs.append(("autofocus", ""))
if search_value:
search_attrs.append(("value", search_value))
# ── Options panel (pre-rendered only when there is no search_url) ──
option_rows = [_option_row(option) for option in options] if not search_url else []
# ── Templates the JS clones: a row when results are fetched, a pill when
# multi-select adds chosen items. ──
templates: list[Node] = []
if search_url:
templates.append(
Template(
attributes=[("data-search-select-template", "row")],
children=[_option_row(_BLANK_OPTION)],
)
)
if multi_select:
templates.append(
Template(
attributes=[("data-search-select-template", "pill")],
children=[Pill("", value="", removable=True, label_slot=True)],
)
)
children = _combobox_children(
pills=pills,
search_attributes=search_attrs,
options_children=option_rows,
always_visible=always_visible,
items_visible=items_visible,
templates=templates,
)
return _SearchSelect(
name=name,
search_url=search_url,
multi="true" if multi_select else "false",
filter_mode="false",
free_text="false",
always_visible="true" if always_visible else "false",
prefetch=prefetch,
sync_url="true" if sync_url else "false",
class_=_CONTAINER_CLASS,
)[*children]
def _filter_remove_button() -> Node:
return Element(
"button",
attributes=[
("type", "button"),
("data-pill-remove", ""),
("class", _FILTER_PILL_REMOVE_CLASS),
("aria-label", "Remove"),
],
children=["×"],
)
def _filter_value_pill(option: SearchSelectOption, kind: str) -> Node:
"""An include (✓) or exclude (✗) value pill. ``kind`` is "include"/"exclude"."""
symbol = "" if kind == "include" else ""
css = (
_FILTER_INCLUDE_PILL_CLASS if kind == "include" else _FILTER_EXCLUDE_PILL_CLASS
)
return Span(
attributes=[
("class", css),
("data-pill", ""),
("data-value", str(option["value"])),
("data-label", option["label"]),
("data-search-select-type", kind),
*_data_attributes(option["data"]),
],
children=[f"{symbol} ", _label_slot(option["label"]), _filter_remove_button()],
)
def _filter_modifier_pill(modifier_value: str, label: str) -> Node:
"""The lone, sticky modifier pill (e.g. "(Any)"/"(None)")."""
return Span(
attributes=[
("class", _FILTER_MODIFIER_PILL_CLASS),
("data-pill", ""),
("data-search-select-modifier", modifier_value),
],
children=[_label_slot(label), _filter_remove_button()],
)
def _filter_action_button(action: str, symbol: str, title: str) -> Node:
return Element(
"button",
attributes=[
("type", "button"),
("data-search-select-action", action),
("class", _FILTER_ACTION_BUTTON_CLASS),
("title", title),
],
children=[symbol],
)
def _filter_option_row(value: str | int, label: str) -> Node:
"""A value row with include (+) and exclude () buttons."""
return Div(
attributes=[
("data-search-select-option", ""),
("data-value", str(value)),
("data-label", label),
("class", _FILTER_OPTION_ROW_CLASS),
],
children=[
_label_slot(label, extra_class=_FILTER_OPTION_LABEL_CLASS),
Span(
attributes=[("class", _FILTER_OPTION_BUTTONS_CLASS)],
children=[
_filter_action_button("include", "+", "Include"),
_filter_action_button("exclude", "", "Exclude"),
],
),
],
)
def _filter_modifier_row(modifier_value: str, label: str) -> Node:
"""A pinned pseudo-option row. It carries no ``data-search-select-option`` so the text
filter never hides it — modifiers stay visible at the top of the panel."""
return Div(
attributes=[
("data-search-select-modifier-option", modifier_value),
("data-label", label),
("class", _FILTER_MODIFIER_ROW_CLASS),
],
children=[label],
)
def FilterSelect(
*,
field_name: str,
options: list[LabeledOption | SearchSelectOption] | None = None,
included: list[LabeledOption | SearchSelectOption] | None = None,
excluded: list[LabeledOption | SearchSelectOption] | None = None,
modifier: str = "",
modifier_options: list[LabeledOption] | None = None,
search_url: str = "",
prefetch: int = 0,
items_visible: int = 6,
items_scroll: int = 10,
placeholder: str = "Search…",
id: str = "",
free_text: bool = False,
) -> Node:
"""Include/exclude filter combobox built on the shared ``_combobox_shell``.
Like ``SearchSelect`` but each value row carries +/ buttons that add an
*include* (✓) or *exclude* (✗) pill, plus an optional set of pinned
``modifier_options`` (e.g. ``[("NOT_NULL", "(Any)"), ("IS_NULL", "(None)")]``)
rendered above the value rows. Presence modifiers (NOT_NULL / IS_NULL) are
mutually exclusive with value pills. Non-presence modifiers (INCLUDES_ALL /
INCLUDES_ONLY) coexist with value pills — they govern how the include set
matches and are only surfaced for many-to-many fields. State is read from
the DOM into the filter JSON by ``readSearchSelect`` (filter mode) — nothing
is submitted by ``name``.
``included``/``excluded`` are resolved options (value + label) so pills show
labels even when the value rows come from ``search_url``. ``options``
pre-renders the value rows for the complete-set (no ``search_url``) case.
``free_text`` turns the widget into a typed-pill input: there is no backing
option list, the JS builds an ephemeral option row from whatever the user
types so the +/ buttons (and Enter) commit the typed string itself as an
include / exclude pill.
"""
options = [_normalize_option(option) for option in (options or [])]
included = [_normalize_option(option) for option in (included or [])]
excluded = [_normalize_option(option) for option in (excluded or [])]
modifier_options = modifier_options or []
active_modifier_label = ""
for modifier_value, label in modifier_options:
if modifier_value == modifier:
active_modifier_label = label
break
# ── Pills: modifier pill (if active), then include/exclude value pills ──
# Presence modifiers (NOT_NULL / IS_NULL) are mutually exclusive with value
# pills — but the stored state guarantees they never coexist, so we render
# both channels unconditionally. Non-presence modifiers (INCLUDES_ALL /
# INCLUDES_ONLY) coexist with value pills and render side by side.
pills_children: list[Node] = []
if active_modifier_label:
pills_children.append(_filter_modifier_pill(modifier, active_modifier_label))
for option in included:
pills_children.append(_filter_value_pill(option, "include"))
for option in excluded:
pills_children.append(_filter_value_pill(option, "exclude"))
pills = Div(
attributes=[("data-search-select-pills", ""), ("class", _PILLS_CLASS)],
children=pills_children,
)
# ── Search box (NO name — the query is never submitted) ──
search_attributes: list[HTMLAttribute] = [
("data-search-select-search", ""),
("placeholder", placeholder),
("autocomplete", "off"),
("class", _SEARCH_CLASS),
]
# ── Options: pinned modifier rows, then value rows (pre-rendered only when
# there is no search_url; otherwise the JS fetches them) ──
modifier_rows = [
_filter_modifier_row(value, label) for value, label in modifier_options
]
value_rows = (
[_filter_option_row(option["value"], option["label"]) for option in options]
if not search_url
else []
)
# ── Templates the JS clones: include/exclude pills (added on click), the
# modifier pill (when modifiers exist), and a value row (when fetched). ──
templates: list[Node] = [
Template(
attributes=[("data-search-select-template", "pill-include")],
children=[_filter_value_pill(_BLANK_OPTION, "include")],
),
Template(
attributes=[("data-search-select-template", "pill-exclude")],
children=[_filter_value_pill(_BLANK_OPTION, "exclude")],
),
]
if modifier_options:
templates.append(
Template(
attributes=[("data-search-select-template", "pill-modifier")],
children=[_filter_modifier_pill("", "")],
)
)
if search_url or free_text:
templates.append(
Template(
attributes=[("data-search-select-template", "row")],
children=[_filter_option_row("", "")],
)
)
children = _combobox_children(
pills=pills,
search_attributes=search_attributes,
options_children=[*modifier_rows, *value_rows],
always_visible=False,
items_visible=items_visible,
templates=templates,
)
return _SearchSelect(
name=field_name,
search_url=search_url,
multi="true",
filter_mode="true",
free_text="true" if free_text else "false",
always_visible="false",
prefetch=prefetch,
sync_url="false",
class_=_CONTAINER_CLASS,
id_=id or None,
data_modifier=modifier or None,
)[*children]
def searchselect_selected(
values: list,
resolver: Callable[[list], Iterable[SearchSelectOption]],
) -> list[SearchSelectOption]:
"""Resolve ``values`` into ``SearchSelectOption``s via ``resolver``.
``resolver(values)`` should resolve ONLY the given ids (a ``pk__in`` query)
— never iterating all choices, so it stays cheap.
"""
if not values:
return []
return [_normalize_option(option) for option in resolver(values)]
-602
View File
@@ -1,602 +0,0 @@
"""
Typed criterion inputs for building structured filters.
Inspired by Stash's filter architecture: every filterable field uses a typed
criterion with a value and a CriterionModifier. This separates *what* you're
filtering from *how* you're comparing, and makes filter serialization trivial.
"""
from __future__ import annotations
import json
from dataclasses import dataclass, field, fields as dc_fields
from enum import Enum
from typing import Any, Self, TypeVar
from django.db.models import Q
# ── Modifier ──────────────────────────────────────────────────────────────
class Modifier(str, Enum):
"""Comparison operators shared across all criterion types."""
EQUALS = "EQUALS"
NOT_EQUALS = "NOT_EQUALS"
GREATER_THAN = "GREATER_THAN"
LESS_THAN = "LESS_THAN"
BETWEEN = "BETWEEN"
NOT_BETWEEN = "NOT_BETWEEN"
INCLUDES = "INCLUDES"
EXCLUDES = "EXCLUDES"
INCLUDES_ALL = "INCLUDES_ALL"
INCLUDES_ONLY = "INCLUDES_ONLY"
IS_NULL = "IS_NULL"
NOT_NULL = "NOT_NULL"
MATCHES_REGEX = "MATCHES_REGEX"
NOT_MATCHES_REGEX = "NOT_MATCHES_REGEX"
@classmethod
def for_strings(cls) -> list[Self]:
return [
cls.EQUALS,
cls.NOT_EQUALS,
cls.INCLUDES,
cls.EXCLUDES,
cls.MATCHES_REGEX,
cls.NOT_MATCHES_REGEX,
cls.IS_NULL,
cls.NOT_NULL,
]
@classmethod
def for_numbers(cls) -> list[Self]:
return [
cls.EQUALS,
cls.NOT_EQUALS,
cls.GREATER_THAN,
cls.LESS_THAN,
cls.BETWEEN,
cls.NOT_BETWEEN,
cls.IS_NULL,
cls.NOT_NULL,
]
@classmethod
def for_dates(cls) -> list[Self]:
return cls.for_numbers()
@classmethod
def for_multi(cls) -> list[Self]:
return [
cls.INCLUDES,
cls.EXCLUDES,
cls.INCLUDES_ALL,
cls.INCLUDES_ONLY,
cls.IS_NULL,
cls.NOT_NULL,
]
# ── Base criterion ─────────────────────────────────────────────────────────
T = TypeVar("T")
@dataclass
class _Criterion:
"""Base for all typed criteria."""
value: Any = None
modifier: Modifier = Modifier.EQUALS
def to_q(self, field_name: str) -> Q:
raise NotImplementedError
@classmethod
def from_json(cls, data: dict | None) -> Self | None:
if data is None or not isinstance(data, dict):
return None
kwargs: dict[str, Any] = {}
for f in dc_fields(cls):
if f.name in data:
val = data[f.name]
# Coerce string modifier to Modifier enum
if f.name == "modifier" and isinstance(val, str):
val = Modifier(val)
kwargs[f.name] = val
return cls(**kwargs)
def to_json(self) -> dict[str, Any]:
result: dict[str, Any] = {}
for f in dc_fields(self):
v = getattr(self, f.name)
if v is not None and v != f.default:
result[f.name] = v
return result
# ── Concrete criteria ──────────────────────────────────────────────────────
@dataclass
class StringCriterion(_Criterion):
value: str = ""
modifier: Modifier = Modifier.EQUALS
def to_q(self, field_name: str) -> Q:
m = self.modifier
if m == Modifier.EQUALS:
return Q(**{field_name: self.value})
if m == Modifier.NOT_EQUALS:
return ~Q(**{field_name: self.value})
if m == Modifier.INCLUDES:
return Q(**{f"{field_name}__icontains": self.value})
if m == Modifier.EXCLUDES:
return ~Q(**{f"{field_name}__icontains": self.value})
if m == Modifier.MATCHES_REGEX:
return Q(**{f"{field_name}__regex": self.value})
if m == Modifier.NOT_MATCHES_REGEX:
return ~Q(**{f"{field_name}__regex": self.value})
if m == Modifier.IS_NULL:
return Q(**{f"{field_name}__isnull": True})
if m == Modifier.NOT_NULL:
return Q(**{f"{field_name}__isnull": False})
raise ValueError(f"Unsupported modifier {m} for string field")
@dataclass
class IntCriterion(_Criterion):
value: int = 0
value2: int | None = None
modifier: Modifier = Modifier.EQUALS
def to_q(self, field_name: str) -> Q:
m = self.modifier
if m == Modifier.EQUALS:
return Q(**{field_name: self.value})
if m == Modifier.NOT_EQUALS:
return ~Q(**{field_name: self.value})
if m == Modifier.GREATER_THAN:
return Q(**{f"{field_name}__gt": self.value})
if m == Modifier.LESS_THAN:
return Q(**{f"{field_name}__lt": self.value})
if m == Modifier.BETWEEN:
if self.value2 is None:
raise ValueError("BETWEEN requires value2")
return Q(
**{
f"{field_name}__gte": min(self.value, self.value2),
f"{field_name}__lte": max(self.value, self.value2),
}
)
if m == Modifier.NOT_BETWEEN:
if self.value2 is None:
raise ValueError("NOT_BETWEEN requires value2")
lo, hi = min(self.value, self.value2), max(self.value, self.value2)
return Q(**{f"{field_name}__lt": lo}) | Q(**{f"{field_name}__gt": hi})
if m == Modifier.IS_NULL:
return Q(**{f"{field_name}__isnull": True})
if m == Modifier.NOT_NULL:
return Q(**{f"{field_name}__isnull": False})
raise ValueError(f"Unsupported modifier {m} for int field")
@dataclass
class FloatCriterion(_Criterion):
value: float = 0.0
value2: float | None = None
modifier: Modifier = Modifier.EQUALS
def to_q(self, field_name: str) -> Q:
m = self.modifier
if m == Modifier.EQUALS:
return Q(**{field_name: self.value})
if m == Modifier.NOT_EQUALS:
return ~Q(**{field_name: self.value})
if m == Modifier.GREATER_THAN:
return Q(**{f"{field_name}__gt": self.value})
if m == Modifier.LESS_THAN:
return Q(**{f"{field_name}__lt": self.value})
if m == Modifier.BETWEEN:
if self.value2 is None:
raise ValueError("BETWEEN requires value2")
return Q(
**{
f"{field_name}__gte": min(self.value, self.value2),
f"{field_name}__lte": max(self.value, self.value2),
}
)
if m == Modifier.NOT_BETWEEN:
if self.value2 is None:
raise ValueError("NOT_BETWEEN requires value2")
lo, hi = min(self.value, self.value2), max(self.value, self.value2)
return Q(**{f"{field_name}__lt": lo}) | Q(**{f"{field_name}__gt": hi})
if m == Modifier.IS_NULL:
return Q(**{f"{field_name}__isnull": True})
if m == Modifier.NOT_NULL:
return Q(**{f"{field_name}__isnull": False})
raise ValueError(f"Unsupported modifier {m} for float field")
@dataclass
class DateCriterion(_Criterion):
value: str = ""
value2: str | None = None
modifier: Modifier = Modifier.EQUALS
def to_q(self, field_name: str) -> Q:
m = self.modifier
if m == Modifier.EQUALS:
return Q(**{field_name: self.value})
if m == Modifier.NOT_EQUALS:
return ~Q(**{field_name: self.value})
if m == Modifier.GREATER_THAN:
return Q(**{f"{field_name}__gt": self.value})
if m == Modifier.LESS_THAN:
return Q(**{f"{field_name}__lt": self.value})
if m == Modifier.BETWEEN:
if self.value2 is None:
raise ValueError("BETWEEN requires value2")
return Q(
**{f"{field_name}__gte": self.value, f"{field_name}__lte": self.value2}
)
if m == Modifier.NOT_BETWEEN:
if self.value2 is None:
raise ValueError("NOT_BETWEEN requires value2")
return Q(**{f"{field_name}__lt": self.value}) | Q(
**{f"{field_name}__gt": self.value2}
)
if m == Modifier.IS_NULL:
return Q(**{f"{field_name}__isnull": True})
if m == Modifier.NOT_NULL:
return Q(**{f"{field_name}__isnull": False})
raise ValueError(f"Unsupported modifier {m} for date field")
@dataclass
class BoolCriterion(_Criterion):
value: bool = False
# Bool only makes sense with EQUALS
modifier: Modifier = Modifier.EQUALS
def to_q(self, field_name: str) -> Q:
if self.modifier == Modifier.EQUALS:
return Q(**{field_name: self.value})
if self.modifier == Modifier.NOT_EQUALS:
return ~Q(**{field_name: self.value})
raise ValueError(f"Unsupported modifier {self.modifier} for bool field")
@dataclass
class _SetCriterion(_Criterion):
"""Shared base for set-membership criteria (``MultiCriterion`` /
``ChoiceCriterion``).
Two orthogonal channels, mirroring Stash's modifier model:
- ``value`` is the *include* set. The ``modifier`` governs how it matches:
- ``INCLUDES`` — in ``value`` (match *any*); ``EQUALS`` is an alias.
- ``INCLUDES_ALL`` — related to *all* of ``value`` (meaningful for
many-to-many fields, e.g. a purchase's games).
- ``EXCLUDES`` — in none of ``value`` (match *none*); ``NOT_EQUALS`` is an
alias.
- ``excludes`` is an *always-orthogonal* negative: it contributes
``AND NOT IN (excludes)`` for every (non-presence) modifier, never
swapped into the include set. An exclude-only criterion therefore means
"everything except ``excludes``".
Empty lists contribute no constraint. ``IS_NULL`` / ``NOT_NULL`` test
presence and ignore both lists.
The logic lives entirely here so the two subclasses (which differ only in
their value type) cannot drift.
"""
value: list = field(default_factory=list)
excludes: list = field(default_factory=list)
modifier: Modifier = Modifier.INCLUDES
def to_q(self, field_name: str) -> Q:
modifier = self.modifier
if modifier == Modifier.IS_NULL:
return Q(**{f"{field_name}__isnull": True})
if modifier == Modifier.NOT_NULL:
return Q(**{f"{field_name}__isnull": False})
# The modifier governs only the include set; ``excludes`` is an orthogonal
# AND'd negative applied for every (non-presence) modifier.
q = self._value_q(field_name)
if self.excludes:
q &= ~Q(**{f"{field_name}__in": self.excludes})
return q
def _value_q(self, field_name: str) -> Q:
"""Build the Q for the include (``value``) set, per the modifier."""
modifier = self.modifier
if modifier in (Modifier.INCLUDES, Modifier.EQUALS):
return Q(**{f"{field_name}__in": self.value}) if self.value else Q()
if modifier in (Modifier.EXCLUDES, Modifier.NOT_EQUALS):
return ~Q(**{f"{field_name}__in": self.value}) if self.value else Q()
if modifier in (Modifier.INCLUDES_ALL, Modifier.INCLUDES_ONLY):
# INCLUDES_ALL ("related to all of these") and INCLUDES_ONLY
# ("related to exactly these, nothing else") are only meaningful
# for many-to-many fields. A naive Q(field=a) & Q(field=b)
# collapses to a single join requiring one through-row to equal
# both values (impossible), so the generic criterion layer cannot
# build a correct Q. M2M callers must supply their own Q builder
# at the filter level — see PurchaseFilter._games_to_q for the
# chained-subquery pattern.
assert False, (
f"{modifier} requires a filter-level Q builder for M2M fields. "
"See PurchaseFilter._games_to_q for the chained-subquery pattern."
)
raise ValueError(f"Unsupported modifier {modifier} for {type(self).__name__}")
@classmethod
def from_json(cls, data: dict | None) -> Self | None:
result = super().from_json(data)
if result is None:
return None
# Labels embedded as {id, label} dicts are display-only; strip to bare ids
# so the querying layer stays clean and typed.
result.value = [
item["id"] if isinstance(item, dict) else item for item in result.value
]
result.excludes = [
item["id"] if isinstance(item, dict) else item for item in result.excludes
]
return result
@dataclass
class MultiCriterion(_SetCriterion):
"""Filter on a many-to-many or ForeignKey relationship by ID list.
All modifier logic (including ``INCLUDES_ALL`` and ``EXCLUDES``) lives in
``_SetCriterion``; this subclass only refines the value type.
"""
value: list[int] = field(default_factory=list)
excludes: list[int] = field(default_factory=list)
@dataclass
class ChoiceCriterion(_SetCriterion):
"""Filter on a choice/enum field with multi-select include/exclude.
Used by FilterSelect widgets for status, ownership_type, etc. Shares all
modifier logic with ``MultiCriterion`` via ``_SetCriterion``.
"""
value: list[str] = field(default_factory=list)
excludes: list[str] = field(default_factory=list)
# ── OperatorFilter base ────────────────────────────────────────────────────
F = TypeVar("F", bound="OperatorFilter")
# Maps criterion class names (as they appear in dataclass annotations) to the
# concrete class. Shared by from_json() and where() so the two construction
# paths resolve field types identically and cannot drift.
_CRITERION_TYPES: dict[str, type[_Criterion]] = {
"StringCriterion": StringCriterion,
"IntCriterion": IntCriterion,
"FloatCriterion": FloatCriterion,
"DateCriterion": DateCriterion,
"BoolCriterion": BoolCriterion,
"MultiCriterion": MultiCriterion,
"ChoiceCriterion": ChoiceCriterion,
}
def _criterion_class_for(
cls: type["OperatorFilter"], field_name: str
) -> type[_Criterion] | None:
"""Resolve the criterion class declared for ``field_name`` on a filter, or
None if the field is absent or isn't a criterion field."""
for dataclass_field in dc_fields(cls):
if dataclass_field.name != field_name:
continue
field_type = dataclass_field.type
if isinstance(field_type, str):
# e.g. "StringCriterion | None" → "StringCriterion"
field_type = field_type.split("|")[0].strip()
return _CRITERION_TYPES.get(field_type)
if isinstance(field_type, type) and issubclass(field_type, _Criterion):
return field_type
return None
return None
# Lookup suffix → Modifier. A missing suffix defaults per criterion type
# (EQUALS for scalars, INCLUDES for set criteria) and is handled in where().
_SUFFIX_MODIFIER: dict[str, Modifier] = {
"gt": Modifier.GREATER_THAN,
"lt": Modifier.LESS_THAN,
"ne": Modifier.NOT_EQUALS,
"between": Modifier.BETWEEN,
"not_between": Modifier.NOT_BETWEEN,
"in": Modifier.INCLUDES,
"exclude": Modifier.EXCLUDES,
"all": Modifier.INCLUDES_ALL,
"contains": Modifier.INCLUDES,
"regex": Modifier.MATCHES_REGEX,
"isnull": Modifier.IS_NULL,
"notnull": Modifier.NOT_NULL,
}
@dataclass
class OperatorFilter:
"""Mixin providing AND/OR/NOT composition for entity filter types.
Subclasses should declare nullable references to themselves::
@dataclass
class GameFilter(OperatorFilter):
AND: "GameFilter | None" = None
OR: "GameFilter | None" = None
NOT: "GameFilter | None" = None
name: StringCriterion | None = None
...
"""
@classmethod
def where(cls: type[F], **lookups: Any) -> F:
"""Build a filter from Django-``QuerySet.filter()``-style lookups.
Each keyword is ``field__suffix=value`` (or ``field=value`` for the
default modifier). The criterion class is resolved from the field's
annotation, so the same value can target an int / string / date / set
field without naming the criterion type::
GameFilter.where(year_released__gt=2010, status=["f", "p"])
Suffix → modifier follows ``_SUFFIX_MODIFIER``; a missing suffix means
EQUALS for scalars and INCLUDES for set criteria. ``between`` /
``not_between`` consume a 2-tuple; ``isnull`` / ``notnull`` ignore the
value. Unknown fields or suffixes raise ``TypeError``.
"""
field_criteria: dict[str, Any] = {}
for lookup, value in lookups.items():
field_name, _, suffix = lookup.rpartition("__")
if not field_name:
field_name, suffix = lookup, ""
criterion_class = _criterion_class_for(cls, field_name)
if criterion_class is None:
raise TypeError(f"{cls.__name__} has no filter field {field_name!r}")
is_set_criterion = issubclass(criterion_class, _SetCriterion)
if suffix == "":
modifier = Modifier.INCLUDES if is_set_criterion else Modifier.EQUALS
elif suffix in _SUFFIX_MODIFIER:
modifier = _SUFFIX_MODIFIER[suffix]
else:
raise TypeError(f"Unknown lookup suffix {suffix!r} on {field_name!r}")
criterion_arguments: dict[str, Any] = {"modifier": modifier}
if suffix in ("isnull", "notnull"):
pass # presence test ignores the value
elif modifier in (Modifier.BETWEEN, Modifier.NOT_BETWEEN):
lower_bound, upper_bound = value
criterion_arguments["value"] = lower_bound
criterion_arguments["value2"] = upper_bound
else:
criterion_arguments["value"] = value
field_criteria[field_name] = criterion_class(**criterion_arguments)
return cls(**field_criteria)
def sub_filter(self) -> OperatorFilter | None:
"""Return the first non-None of AND / OR / NOT."""
for attr in ("AND", "OR", "NOT"):
if hasattr(self, attr):
v = getattr(self, attr)
if v is not None:
return v
return None
def _criterion_fields(self) -> list[str]:
"""Return field names that hold a _Criterion instance."""
names: list[str] = []
for f in dc_fields(self):
if f.name in ("AND", "OR", "NOT"):
continue
v = getattr(self, f.name)
if isinstance(v, _Criterion):
names.append(f.name)
return names
def to_q(self) -> Q:
"""Build a Django Q object from this filter and its sub-filters."""
q = Q()
for field_name in self._criterion_fields():
c = getattr(self, field_name)
if c is not None:
q &= c.to_q(field_name)
sub = self.sub_filter()
if sub is not None:
if getattr(self, "AND", None) is not None:
q &= sub.to_q()
elif getattr(self, "OR", None) is not None:
q |= sub.to_q()
elif getattr(self, "NOT", None) is not None:
q &= ~sub.to_q()
return q
@classmethod
def from_json(cls, data: dict[str, Any] | None) -> Self | None:
if data is None or not isinstance(data, dict):
return None
# Resolve criterion class names to actual types
criterion_types = _CRITERION_TYPES
kwargs: dict[str, Any] = {}
for f in dc_fields(cls):
if f.name not in data:
continue
raw = data[f.name]
if raw is None:
kwargs[f.name] = None
continue
# Recurse into sub-filters (AND / OR / NOT)
if f.name in ("AND", "OR", "NOT"):
kwargs[f.name] = cls.from_json(raw) if isinstance(raw, dict) else None
continue
# Resolve criterion fields from string type annotation
f_type = f.type
if isinstance(f_type, str):
# e.g. "StringCriterion | None" → "StringCriterion"
f_type = f_type.split("|")[0].strip()
if isinstance(f_type, str) and f_type in criterion_types:
criterion_cls = criterion_types[f_type]
kwargs[f.name] = (
criterion_cls.from_json(raw) if isinstance(raw, dict) else None
)
elif isinstance(f_type, type) and issubclass(f_type, _Criterion):
kwargs[f.name] = (
f_type.from_json(raw) if isinstance(raw, dict) else None
)
return cls(**kwargs)
def to_json(self) -> dict[str, Any]:
result: dict[str, Any] = {}
for f in dc_fields(self):
v = getattr(self, f.name)
if v is None:
continue
if f.name in ("AND", "OR", "NOT"):
result[f.name] = v.to_json()
elif isinstance(v, _Criterion):
j = v.to_json()
if j:
result[f.name] = j
return result
# ── JSON helpers ───────────────────────────────────────────────────────────
def filter_from_json(cls: type[F], json_str: str) -> F | None:
"""Deserialize a filter from a JSON string.
Usage:
f = filter_from_json(GameFilter, request.GET.get("filter", ""))
games = Game.objects.filter(f.to_q())
"""
if not json_str:
return None
try:
data = json.loads(json_str)
except json.JSONDecodeError:
return None
return cls.from_json(data)
def filter_to_json(f: OperatorFilter) -> str:
"""Serialize a filter to a JSON string for URL params or storage."""
return json.dumps(f.to_json())
-25
View File
@@ -1,25 +0,0 @@
import functools
from pathlib import Path
_ICON_DIR = Path(__file__).resolve().parent.parent / "games" / "templates" / "icons"
@functools.lru_cache(maxsize=1)
def _load_icons() -> dict[str, str]:
"""Load all icon HTML files into a dict.
Cached so files are read once per process lifetime.
Delegation (e.g. nintendo-3ds -> nintendo) is handled by
both files containing identical SVG content.
"""
icons: dict[str, str] = {}
for filepath in _ICON_DIR.glob("*.html"):
name = filepath.stem
icons[name] = filepath.read_text()
return icons
def get_icon(name: str) -> str:
"""Return the HTML for an icon by name. Falls back to 'unspecified'."""
icons = _load_icons()
return icons.get(name, icons.get("unspecified", ""))
+2 -2
View File
@@ -20,8 +20,8 @@ def import_data(data: DataList):
# try exact match first # try exact match first
try: try:
game_id = Game.objects.get(name__iexact=name) game_id = Game.objects.get(name__iexact=name)
except (Game.DoesNotExist, Game.MultipleObjectsReturned): except:
game_id = None pass
matching_names[name] = game_id matching_names[name] = game_id
print(f"Exact matched {len(matching_names)} games.") print(f"Exact matched {len(matching_names)} games.")
+125 -109
View File
@@ -1,135 +1,126 @@
@import 'tailwindcss'; @tailwind base;
@tailwind components;
@tailwind utilities;
@plugin '@tailwindcss/typography'; @font-face {
@plugin '@tailwindcss/forms'; font-family: "IBM Plex Mono";
@plugin 'flowbite/plugin'; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@source "../node_modules/flowbite"; @font-face {
@import "flowbite/src/themes/default"; font-family: "IBM Plex Sans";
src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@custom-variant dark (&:is(.dark *)); @font-face {
font-family: "IBM Plex Serif";
src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@theme { @font-face {
--font-sans: font-family: "IBM Plex Serif";
IBM Plex Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2");
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-weight: 700;
--font-mono: font-style: normal;
IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, }
'Liberation Mono', 'Courier New', monospace;
--font-serif:
IBM Plex Serif, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-condensed:
IBM Plex Sans Condensed, ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--color-accent: #7c3aed; @font-face {
--color-background: #1f2937; font-family: "IBM Plex Sans Condensed";
src: url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
} }
/* /* a:hover {
The default border color has changed to `currentcolor` in Tailwind CSS v4, text-decoration-color: #ff4400;
so we've added these compatibility styles to make sure everything still color: rgb(254, 185, 160);
looks the same as it did with Tailwind CSS v3. transition: all 0.2s ease-out;
} */
If we ever want to remove these styles, we need to add an explicit border /* form label {
color utility to any element that depends on these defaults. @apply dark:text-slate-400;
*/ } */
@layer base {
*, .responsive-table {
::after, @apply dark:text-white mx-auto table-fixed;
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
} }
@utility min-w-20char { .responsive-table tr:nth-child(even) {
min-width: 20ch; @apply bg-slate-800
} }
@utility max-w-20char { .responsive-table tbody tr:nth-child(odd) {
max-width: 20ch; @apply bg-slate-900
} }
@utility min-w-30char { .responsive-table thead th {
min-width: 30ch; @apply text-left border-b-2 border-b-slate-500 text-xl;
} }
@utility max-w-30char { .responsive-table thead th:not(:first-child),
max-width: 30ch; .responsive-table td:not(:first-child) {
} @apply border-l border-l-slate-500;
@utility max-w-35char {
max-width: 35ch;
}
@utility max-w-40char {
max-width: 40ch;
} }
@layer utilities { @layer utilities {
@font-face { .min-w-20char {
font-family: 'IBM Plex Mono'; min-width: 20ch;
src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
} }
.max-w-20char {
@font-face { max-width: 20ch;
font-family: 'IBM Plex Sans';
src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
} }
.min-w-30char {
@font-face { min-width: 30ch;
font-family: 'IBM Plex Serif';
src: url('fonts/IBMPlexSerif-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
} }
.max-w-30char {
@font-face { max-width: 30ch;
font-family: 'IBM Plex Serif';
src: url('fonts/IBMPlexSerif-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
} }
.max-w-35char {
@font-face { max-width: 35ch;
font-family: 'IBM Plex Sans Condensed';
src: url('fonts/IBMPlexSansCondensed-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
} }
.max-w-40char {
.responsive-table { max-width: 40ch;
@apply dark:text-white mx-auto table-fixed;
}
.responsive-table tr:nth-child(even) {
@apply bg-indigo-100 dark:bg-slate-800;
}
.responsive-table tbody tr:nth-child(odd) {
@apply bg-indigo-200 dark:bg-slate-900;
}
.responsive-table thead th {
@apply text-left border-b-2 border-b-slate-500 text-xl;
}
.responsive-table thead th:not(:first-child),
.responsive-table td:not(:first-child) {
@apply border-l border-l-slate-500;
} }
} }
/* Form controls (incl. disabled state) and form-field markup (labels, errors, /* form input,
rows) are styled by utilities on the elements themselves — see select,
PrimitiveWidgetsMixin and FormFields. No form styling lives here. */ textarea {
@apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
} */
form input:disabled,
select:disabled,
textarea:disabled {
@apply dark:bg-slate-800 dark:text-slate-500 cursor-not-allowed;
}
.errorlist {
@apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
}
/* @media screen and (min-width: 768px) {
form input,
select,
textarea {
width: 300px;
}
} */
/* @media screen and (max-width: 768px) {
form input,
select,
textarea {
width: 150px;
}
} */
#button-container button { #button-container button {
@apply mx-1; @apply mx-1;
@@ -140,7 +131,7 @@
} }
.basic-button { .basic-button {
@apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-sm shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-hidden focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out; @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
} }
.markdown-content ul { .markdown-content ul {
@@ -171,9 +162,34 @@
padding-left: 1em; padding-left: 1em;
} }
@layer utilities { /* .truncate-container {
.toast-container { @apply inline-block relative;
@apply fixed z-50 flex flex-col items-end bottom-0 right-0 p-4; a {
} @apply inline-block truncate max-w-20char transition-all group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4;
}
} */
label {
@apply dark:text-slate-500;
} }
[type="text"], [type="password"], [type="datetime-local"], [type="datetime"], [type="date"], [type="number"], select, textarea {
@apply dark:bg-slate-600 dark:text-slate-300;
}
[type="submit"] {
@apply dark:text-white font-bold dark:bg-blue-600 px-4 py-2;
}
form div label {
@apply dark:text-white;
}
form div {
@apply flex flex-col;
}
div [type="submit"] {
@apply mt-3;
}
-425
View File
@@ -1,425 +0,0 @@
"""A small fast_app-style layout system.
Instead of Django template inheritance (`{% extends "base.html" %}`), views
build their page body with Python components and wrap it with `Page()` /
`render_page()`. `Page()` is the equivalent of FastHTML's document wrapper:
it hoists shared `<head>` content (the `_HEADERS` block, analogous to
`fast_app(hdrs=...)`), renders the navbar, and assembles the full document.
"""
import json
from typing import TYPE_CHECKING
from django.contrib.messages import get_messages
from django.http import HttpRequest, HttpResponse
from django.middleware.csrf import get_token
from django.templatetags.static import static
from django.urls import reverse
from django.utils.html import conditional_escape
from django.utils.safestring import SafeText, mark_safe
from django_htmx.jinja import django_htmx_script
from games.templatetags.version import version, version_date
if TYPE_CHECKING:
from common.components import Node
# Static head script that sets the dark/light class before paint (avoids FOUC).
_THEME_FOUC_SCRIPT = """<script>
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark')
}
</script>"""
# The main module script: crown icon mount + theme-toggle wiring.
# Split around the single dynamic value (game.mastered).
_MAIN_SCRIPT_A = """<script type="module">
document.addEventListener('DOMContentLoaded', () => {
if (window.mountCrownIcon) {
window.mountCrownIcon('#crown-icon-mount-point', {
mastered: """
_MAIN_SCRIPT_B = """
});
}
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const themeToggleBtn = document.getElementById('theme-toggle');
if (themeToggleDarkIcon && themeToggleLightIcon && themeToggleBtn) {
if (document.documentElement.classList.contains('dark')) {
themeToggleLightIcon.classList.remove('hidden');
themeToggleDarkIcon.classList.add('hidden');
} else {
themeToggleDarkIcon.classList.remove('hidden');
themeToggleLightIcon.classList.add('hidden');
}
themeToggleBtn.addEventListener('click', function () {
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
});
}
});
</script>"""
# Toast notification region (Alpine.js). Verbatim from the old base.html.
_TOAST_CONTAINER = """<div x-data="toastStore()"
role="region"
aria-label="Notifications"
aria-atomic="true"
class="fixed z-50 bottom-0 right-0 flex flex-col items-end pointer-events-none p-4">
<template x-for="toast in $store.toasts.toasts" :key="toast.id">
<div x-show="toast.visible"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 translate-x-8"
x-transition:enter-end="opacity-100 translate-x-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 translate-x-8"
:role="toast.type === 'error' || toast.type === 'warning' ? 'alert' : 'status'"
:aria-live="toast.type === 'error' ? 'assertive' : 'polite'"
tabindex="0"
class="pointer-events-auto max-w-sm w-72 cursor-pointer mb-3 last:mb-0"
:class="{
'success': toast.type === 'success',
'error': toast.type === 'error',
'info': toast.type === 'info',
'warning': toast.type === 'warning',
'debug': toast.type === 'debug'
}"
@click="dismissToast(toast.id)"
@mouseenter="$store.toasts.clearToastTimer(toast.id)"
@mouseleave="$store.toasts.resumeToastTimer(toast.id, 5000)"
@keydown.escape="dismissToast(toast.id)">
<div class="rounded-lg shadow-lg p-4 flex items-start gap-3"
:class="{
'bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700': toast.type === 'success',
'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700': toast.type === 'error',
'bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700': toast.type === 'info',
'bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-700': toast.type === 'warning',
'bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700': toast.type === 'debug'
}">
<span class="flex-shrink-0 mt-0.5"
:class="{
'text-green-500': toast.type === 'success',
'text-red-500': toast.type === 'error',
'text-blue-500': toast.type === 'info',
'text-amber-500': toast.type === 'warning',
'text-gray-500': toast.type === 'debug'
}">
<template x-if="toast.type === 'success'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</template>
<template x-if="toast.type === 'error'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</template>
<template x-if="toast.type === 'info'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 20a8 8 0 100-16 8 8 0 000 16z"/>
</svg>
</template>
<template x-if="toast.type === 'warning'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
</svg>
</template>
<template x-if="toast.type === 'debug'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</template>
</span>
<p class="flex-1 text-sm"
:class="{
'text-green-800 dark:text-green-200': toast.type === 'success',
'text-red-800 dark:text-red-200': toast.type === 'error',
'text-blue-800 dark:text-blue-200': toast.type === 'info',
'text-amber-800 dark:text-amber-200': toast.type === 'warning',
'text-gray-800 dark:text-gray-200': toast.type === 'debug'
}"
x-text="toast.message"></p>
<button @click.stop="dismissToast(toast.id)"
class="flex-shrink-0"
:class="{
'text-green-400 hover:text-green-600 dark:text-green-500 dark:hover:text-green-300': toast.type === 'success',
'text-red-400 hover:text-red-600 dark:text-red-500 dark:hover:text-red-300': toast.type === 'error',
'text-blue-400 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-300': toast.type === 'info',
'text-amber-400 hover:text-amber-600 dark:text-amber-500 dark:hover:text-amber-300': toast.type === 'warning',
'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300': toast.type === 'debug'
}">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
</template>
</div>"""
def _main_script(mastered: bool) -> str:
return _MAIN_SCRIPT_A + ("true" if mastered else "false") + _MAIN_SCRIPT_B
def NavbarPlaytime(
today_played: str,
last_7_played: str,
*,
today_url: str | None = None,
last_7_url: str | None = None,
oob: bool = False,
) -> "Node":
"""The navbar 'Today · Last 7 days' totals. Carries a stable id so
htmx endpoints can refresh it out-of-band after a session change.
When ``today_url`` / ``last_7_url`` are given, each total links to the
matching filtered session list."""
from common.components import Safe
def total(text: str, url: str | None) -> str:
if not url:
return text
return f'<a href="{url}" class="hover:underline">{text}</a>'
oob_attr = ' hx-swap-oob="true"' if oob else ""
return Safe(
f'<li id="navbar-playtime"{oob_attr} '
'class="dark:text-white flex flex-col items-center text-xs">'
'<span class="flex uppercase gap-1">Today'
'<span class="dark:text-gray-400">·</span>Last 7 days</span>'
'<span class="flex items-center gap-1">'
f"{total(today_played, today_url)}"
'<span class="dark:text-gray-400">·</span>'
f"{total(last_7_played, last_7_url)}</span></li>"
)
def Navbar(
*,
today_played: str,
last_7_played: str,
today_url: str | None = None,
last_7_url: str | None = None,
current_year: int,
csrf_token: str,
) -> "Node":
"""Top navigation bar.
Static chrome, so it's a single ``Safe`` node wrapping its markup rather
than a hand-built element tree — trusted HTML belongs in a ``Safe`` node,
not a ``mark_safe`` string."""
from common.components import Safe
logo = static("icons/schedule.png")
return Safe(f"""<nav class="bg-neutral-primary-soft border-b border-default">
<div class="max-w-(--breakpoint-xl) flex flex-wrap items-center justify-between mx-auto p-4">
<a href="{reverse("games:index")}"
class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="{logo}" height="48" width="48" alt="Timetracker Logo" class="mr-4" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Timetracker</span>
</a>
<button data-collapse-toggle="navbar-dropdown" type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-dropdown" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
<ul class="items-center flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li class="flex items-center">
<button id="theme-toggle" type="button" class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm hover:cursor-pointer">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</li>
{NavbarPlaytime(today_played, last_7_played, today_url=today_url, last_7_url=last_7_url)}
<li>
<a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
</li>
<li>
<button id="dropdownNavbarNewLink" data-dropdown-toggle="dropdownNavbarNew"
class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent hover:cursor-pointer">
New
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
</svg>
</button>
<div id="dropdownNavbarNew" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
<li><a href="{reverse("games:add_device")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Device</a></li>
<li><a href="{reverse("games:add_game")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Game</a></li>
<li><a href="{reverse("games:add_platform")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Platform</a></li>
<li><a href="{reverse("games:add_purchase")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Purchase</a></li>
<li><a href="{reverse("games:add_session")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Session</a></li>
</ul>
</div>
</li>
<li>
<button id="dropdownNavbarManageLink" data-dropdown-toggle="dropdownNavbarManage"
class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent hover:cursor-pointer">
Manage
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
</svg>
</button>
<div id="dropdownNavbarManage" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
<li><a href="{reverse("games:list_devices")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Devices</a></li>
<li><a href="{reverse("games:list_games")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Games</a></li>
<li><a href="{reverse("games:list_platforms")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Platforms</a></li>
<li><a href="{reverse("games:list_playevents")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Play events</a></li>
<li><a href="{reverse("games:list_purchases")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Purchases</a></li>
<li><a href="{reverse("games:list_sessions")}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sessions</a></li>
</ul>
</div>
</li>
<li>
<a href="{reverse("games:stats_by_year", args=[current_year])}" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Stats</a>
</li>
<li>
<form method="post" action="{reverse("logout")}">
<input type="hidden" name="csrfmiddlewaretoken" value="{csrf_token}">
<button type="submit" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Log out</button>
</form>
</li>
</ul>
</div>
</div>
</nav>""")
def Page(
content: "Node | SafeText | str",
*,
request: HttpRequest,
title: str = "",
scripts: "Node | SafeText | str" = "",
mastered: bool = False,
) -> SafeText:
"""Assemble a full HTML document around `content` (the fast_app equivalent).
Scripts are collected from `content`'s component tree: every component
declares its JS via `Media`, and `collect_media` gathers (deduped) the union
for the whole page. The `scripts` argument remains for page-specific glue
that isn't owned by a reusable component (e.g. the add-form helpers).
"""
from common.components import ModuleScript, StaticScript, collect_media
from games.views.general import global_current_year, model_counts
media = collect_media(content)
collected_scripts = "".join(
[str(ModuleScript(name)) for name in media.js]
+ [str(StaticScript(name)) for name in media.js_external]
)
all_scripts = collected_scripts + (str(scripts) if scripts else "")
counts = model_counts(request)
year = global_current_year(request)["global_current_year"]
navbar = Navbar(
today_played=counts["today_played"],
last_7_played=counts["last_7_played"],
today_url=counts["today_url"],
last_7_url=counts["last_7_url"],
current_year=year,
csrf_token=get_token(request),
)
messages = [
{"message": str(m.message), "type": (m.tags or "info")}
for m in get_messages(request)
]
# Embed as JSON; guard against `</script>` breaking out of the tag.
messages_json = json.dumps(messages).replace("</", "<\\/")
head = (
'<!DOCTYPE html>\n<html lang="en">\n <head>\n'
' <meta charset="utf-8" />\n'
' <meta name="description" content="Self-hosted time-tracker." />\n'
' <meta name="keywords" content="time, tracking, video games, self-hosted" />\n'
' <meta name="viewport" content="width=device-width, initial-scale=1" />\n'
f" <title>Timetracker - {conditional_escape(title)}</title>\n"
f' <script src="{static("js/htmx.min.js")}"></script>\n'
" <script>\n"
" htmx.config.scrollBehavior = 'smooth';\n"
" htmx.config.selfRequestsOnly = false;\n"
" </script>\n"
f' <script src="{static("js/dist/htmx-redirect-toast.js")}"></script>\n'
f" {django_htmx_script(nonce=None)}\n"
f' <link rel="stylesheet" href="{static("base.css")}" />\n'
# Vendored bundles (flowbite 2.4.1, alpinejs/@alpinejs/mask 3.15.12) —
# served locally so pages work offline (and in browser tests). The mask
# plugin must load before Alpine core; both stay deferred.
f' <script src="{static("js/flowbite.min.js")}"></script>\n'
f' <script defer src="{static("js/alpine-mask.min.js")}"></script>\n'
f' <script defer src="{static("js/alpine.min.js")}"></script>\n'
f" {_THEME_FOUC_SCRIPT}\n"
" </head>\n"
)
body = (
' <body hx-indicator="#indicator" class="bg-neutral-primary">\n'
f' <script id="django-messages" type="application/json">{messages_json}</script>\n'
f' <img id="indicator" src="{static("icons/loading.png")}" class="absolute right-3 top-3 animate-spin htmx-indicator" height="24" width="24" alt="loading indicator" />\n'
' <div class="flex flex-col min-h-screen">\n'
f" {navbar}\n"
f' <div id="main-container" class="flex flex-1 flex-col pt-8 pb-16">{content}</div>\n'
f' <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{version()} ({version_date()})</span>\n'
" </div>\n"
f" {all_scripts}\n"
f" {_main_script(mastered)}\n"
" <!-- hx-swap-oob makes sure the modal gets removed upon any HTMX response -->\n"
' <div id="global-modal-container" hx-swap-oob="true"></div>\n'
f" {_TOAST_CONTAINER}\n"
f' <script src="{static("js/dist/toast.js")}"></script>\n'
" </body>\n</html>\n"
)
return mark_safe(head + body)
def render_page(
request: HttpRequest,
content: "Node | SafeText | str",
*,
title: str = "",
scripts: "Node | SafeText | str" = "",
mastered: bool = False,
status: int = 200,
) -> HttpResponse:
"""`render()`-style shortcut: build a full page and return an HttpResponse."""
return HttpResponse(
Page(content, request=request, title=title, scripts=scripts, mastered=mastered),
status=status,
)
+1 -27
View File
@@ -1,45 +1,19 @@
import re import re
from datetime import date, datetime, timedelta from datetime import date, datetime, timedelta
from typing import NamedTuple
from django.utils import timezone from django.utils import timezone
from common.utils import generate_split_ranges from common.utils import generate_split_ranges
dateformat: str = "%d/%m/%Y" dateformat: str = "%d/%m/%Y"
dateformat_hyphenated: str = "%d-%m-%Y"
datetimeformat: str = "%d/%m/%Y %H:%M" datetimeformat: str = "%d/%m/%Y %H:%M"
timeformat: str = "%H:%M" timeformat: str = "%H:%M"
durationformat: str = "%2.1H hours" durationformat: str = "%2.1H hours"
durationformat_manual: str = "%H hours" durationformat_manual: str = "%H hours"
class DatePartSpec(NamedTuple):
"""One date part (day/month/year) of a hyphenated date format."""
name: str
placeholder: str
length: int
_DATE_PART_SPECS: dict[str, DatePartSpec] = {
"%d": DatePartSpec("day", "DD", 2),
"%m": DatePartSpec("month", "MM", 2),
"%Y": DatePartSpec("year", "YYYY", 4),
}
def date_parts(format_string: str = dateformat_hyphenated) -> list[DatePartSpec]:
"""Split a hyphenated strftime date format into its ordered parts.
``"%d-%m-%Y"`` becomes ``[day, month, year]`` specs, each carrying the
placeholder text (``DD``/``MM``/``YYYY``) and digit length shown by the
DateRangeField segments."""
return [_DATE_PART_SPECS[directive] for directive in format_string.split("-")]
def _safe_timedelta(duration: timedelta | int | None): def _safe_timedelta(duration: timedelta | int | None):
if duration is None: if duration == None:
return timedelta(0) return timedelta(0)
elif isinstance(duration, int): elif isinstance(duration, int):
return timedelta(seconds=duration) return timedelta(seconds=duration)
+4 -75
View File
@@ -1,37 +1,10 @@
import operator import operator
from dataclasses import dataclass from dataclasses import dataclass
from datetime import date from datetime import date
from functools import reduce, wraps from functools import reduce
from typing import Any, Callable, Generator, Literal, TypeVar from typing import Any, Callable, Generator, Literal, TypeVar
from urllib.parse import urlencode
from django.core.paginator import Page, Paginator
from django.db.models import Q from django.db.models import Q
from django.http import HttpRequest
from django.shortcuts import redirect
def paginate(request: HttpRequest, queryset, per_page: int = 10):
"""Standard list-view pagination.
Reads ``page`` and ``limit`` from the query string (``limit=0`` disables
pagination) and returns ``(object_list, page_obj, elided_page_range)`` ready
to hand to ``paginated_table_content``.
"""
page_number = request.GET.get("page", 1)
limit = int(request.GET.get("limit", per_page))
object_list = queryset
page_obj: Page | None = None
if limit != 0:
page_obj = Paginator(queryset, limit).get_page(page_number)
object_list = page_obj.object_list
elided_page_range = (
page_obj.paginator.get_elided_page_range(page_number, on_each_side=1, on_ends=1)
if page_obj
else None
)
return object_list, page_obj, elided_page_range
def safe_division(numerator: int | float, denominator: int | float) -> int | float: def safe_division(numerator: int | float, denominator: int | float) -> int | float:
""" """
@@ -67,7 +40,7 @@ def safe_getattr(obj: object, attr_chain: str, default: Any | None = None) -> ob
def truncate_(input_string: str, length: int = 30, ellipsis: str = "") -> str: def truncate_(input_string: str, length: int = 30, ellipsis: str = "") -> str:
return ( return (
(f"{input_string[: length - len(ellipsis)].rstrip()}{ellipsis}") (f"{input_string[:length-len(ellipsis)].rstrip()}{ellipsis}")
if len(input_string) > length if len(input_string) > length
else input_string else input_string
) )
@@ -81,12 +54,12 @@ def truncate(
raise ValueError("Length cannot be shorter than the length of endpart.") raise ValueError("Length cannot be shorter than the length of endpart.")
if len(input_string) > max_content_length: if len(input_string) > max_content_length:
return f"{input_string[: max_content_length - len(ellipsis)].rstrip()}{ellipsis}{endpart}" return f"{input_string[:max_content_length - len(ellipsis)].rstrip()}{ellipsis}{endpart}"
return ( return (
f"{input_string}{endpart}" f"{input_string}{endpart}"
if len(input_string) + len(endpart) <= length if len(input_string) + len(endpart) <= length
else f"{input_string[: length - len(ellipsis) - len(endpart)].rstrip()}{ellipsis}{endpart}" else f"{input_string[:length - len(ellipsis) - len(endpart)].rstrip()}{ellipsis}{endpart}"
) )
@@ -114,17 +87,6 @@ def format_float_or_int(number: int | float):
return int(number) if float(number).is_integer() else f"{number:03.2f}" return int(number) if float(number).is_integer() else f"{number:03.2f}"
def label_with_details(name: str, *details: object, separator: str = ", ") -> str:
"""Build a ``"Name (detail, detail)"`` label from a name and optional details.
Falsy details (``None``, ``""``, ``0``) are dropped; the rest are stringified
and joined with ``separator`` inside parentheses. With no details remaining,
the bare ``name`` is returned without parentheses.
"""
present = [str(detail) for detail in details if detail]
return f"{name} ({separator.join(present)})" if present else name
OperatorType = Literal["|", "&"] OperatorType = Literal["|", "&"]
@@ -166,36 +128,3 @@ def build_dynamic_filter(
processed_filters, processed_filters,
Q(), Q(),
) )
def redirect_to(default_view: str, *default_args):
"""
A decorator that redirects the user back to the referring page or a default view if no 'next' parameter is provided.
:param default_view: The name of the default view to redirect to if 'next' is missing.
:param default_args: Any arguments required for the default view.
"""
def decorator(view_func):
@wraps(view_func)
def wrapped_view(request: HttpRequest, *args, **kwargs):
next_url = request.GET.get("next")
if not next_url:
from django.urls import (
reverse, # Import inside function to avoid circular imports
)
next_url = reverse(default_view, args=default_args)
# Execute the original view logic for its side effects, then
# redirect to `next_url` instead of returning its response.
view_func(request, *args, **kwargs)
return redirect(next_url)
return wrapped_view
return decorator
def add_next_param_to_url(url: str, nexturl: str) -> str:
return f"{url}?{urlencode({'next': nexturl})}"
@@ -1,33 +0,0 @@
from datetime import datetime
import requests
url = "https://data.kurzy.cz/json/meny/b[6]den[{0}].json"
date_format = "%Y%m%d"
years = range(2000, datetime.now().year + 1)
dates = [
datetime.strftime(datetime(day=1, month=1, year=year), format=date_format)
for year in years
]
for date in dates:
final_url = url.format(date)
year = date[:4]
response = requests.get(final_url)
response.raise_for_status()
data = response.json()
if kurzy := data.get("kurzy"):
with open("output.yaml", mode="a") as o:
rates = [
f"""
- model: games.exchangerate
fields:
currency_from: {currency_name}
currency_to: CZK
year: {year}
rate: {kurzy.get(currency_name, {}).get("dev_stred", 0)}
"""
for currency_name in ["EUR", "USD", "CNY"]
if kurzy.get(currency_name)
]
o.writelines(rates)
# time.sleep(0.5)
-65
View File
@@ -1,65 +0,0 @@
import sys
import yaml
def load_yaml(filename):
with open(filename, "r", encoding="utf-8") as file:
return yaml.safe_load(file) or []
def save_yaml(filename, data):
with open(filename, "w", encoding="utf-8") as file:
yaml.safe_dump(data, file, allow_unicode=True, default_flow_style=False)
def extract_existing_combinations(data):
return {
(
entry["fields"]["currency_from"],
entry["fields"]["currency_to"],
entry["fields"]["year"],
)
for entry in data
if entry["model"] == "games.exchangerate"
}
def filter_new_entries(existing_combinations, additional_files):
new_entries = []
for filename in additional_files:
data = load_yaml(filename)
for entry in data:
if entry["model"] == "games.exchangerate":
key = (
entry["fields"]["currency_from"],
entry["fields"]["currency_to"],
entry["fields"]["year"],
)
if key not in existing_combinations:
new_entries.append(entry)
return new_entries
def main():
if len(sys.argv) < 3:
print("Usage: script.py example.yaml additions1.yaml [additions2.yaml ...]")
sys.exit(1)
example_file = sys.argv[1]
additional_files = sys.argv[2:]
output_file = "filtered_output.yaml"
existing_data = load_yaml(example_file)
existing_combinations = extract_existing_combinations(existing_data)
new_entries = filter_new_entries(existing_combinations, additional_files)
save_yaml(output_file, new_entries)
print(f"Filtered data saved to {output_file}")
if __name__ == "__main__":
main()
+1 -4
View File
@@ -7,11 +7,8 @@ services:
dockerfile: Dockerfile dockerfile: Dockerfile
container_name: timetracker container_name: timetracker
environment: environment:
- DEBUG=false
- TZ=Europe/Prague - TZ=Europe/Prague
# APP_URL drives ALLOWED_HOSTS and CSRF_TRUSTED_ORIGINS unless overridden. - CSRF_TRUSTED_ORIGINS="https://tracker.kucharczyk.xyz"
# Behind your own reverse proxy you may also set ALLOWED_HOSTS=* directly.
- APP_URL=https://tracker.kucharczyk.xyz
user: "1000" user: "1000"
# volumes: # volumes:
# - "db:/home/timetracker/app/src/timetracker/db.sqlite3" # - "db:/home/timetracker/app/src/timetracker/db.sqlite3"
+21 -16
View File
@@ -1,25 +1,30 @@
--- ---
services: services:
timetracker: backend:
image: ${REGISTRY_URL:-registry.kucharczyk.xyz}/timetracker:latest image: registry.kucharczyk.xyz/timetracker
build: build:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
container_name: timetracker
environment: environment:
- DEBUG=${DEBUG:-false} - TZ=Europe/Prague
- SECRET_KEY=${SECRET_KEY} - CSRF_TRUSTED_ORIGINS="https://tracker.kucharczyk.xyz"
- TZ=${TZ:-Europe/Prague} user: "1000"
# APP_URL drives ALLOWED_HOSTS and CSRF_TRUSTED_ORIGINS unless overridden.
- APP_URL=${APP_URL:-http://localhost:8000}
- PUID=${PUID:-1000}
- PGID=${PGID:-100}
- DATA_DIR=${DATA_DIR:-/home/timetracker/app/data}
- CREATE_DEFAULT_SUPERUSER=${CREATE_DEFAULT_SUPERUSER:-false}
ports:
- "${TIMETRACKER_EXTERNAL_PORT:-8000}:8000"
volumes: volumes:
- "./data:/home/timetracker/app/data" - "static-files:/var/www/django/static"
- "${DOCKER_STORAGE_PATH:-/tmp}/timetracker/backups:/home/timetracker/app/games/fixtures/backups" - "$PWD/db.sqlite3:/home/timetracker/app/db.sqlite3"
restart: unless-stopped restart: unless-stopped
frontend:
image: caddy
volumes:
- "static-files:/usr/share/caddy:ro"
- "$PWD/Caddyfile:/etc/caddy/Caddyfile"
ports:
- "8000:8000"
depends_on:
- backend
volumes:
static-files:
-157
View File
@@ -1,157 +0,0 @@
# Game & Purchase Status Definitions
## Game Statuses
Games have a `status` field with the following values:
| Status | Code | Description |
|--------|------|-------------|
| **Unplayed** | `u` | Game was purchased but never played |
| **Played** | `p` | Game was played but not yet finished |
| **Finished** | `f` | Game has been completed |
| **Retired** | `r` | Game was intentionally retired (e.g., no longer accessible, collector's item) |
| **Abandoned** | `a` | Game was played but the user gave up on it |
**Setting game status:**
- Users explicitly set game status via the UI (finish/drop purchase buttons, status change form)
- Status changes are tracked in `GameStatusChange` model
- Refunding a purchase always marks its games as abandoned
---
## Purchase-Level Status Concepts
These concepts determine whether a purchase appears in the "unfinished" or "dropped" lists in stats views.
### Finished
A purchase is considered **finished** when:
```
Game.status == "f" OR Purchase.games.* has a PlayEvent with an ended date
```
Either signal indicates the game is complete:
- **Explicit**: User marked the game as finished (`Game.status = "f"`)
- **Implicit**: A PlayEvent exists with `ended` date set (data-driven)
This uses **OR** logic during a transition period. Later, these signals should be kept in sync so only one source of truth is needed.
### Dropped
A purchase is considered **dropped** when:
```
Game.status == "a" OR Purchase.date_refunded IS NOT NULL
```
Either signal indicates the user no longer has an active interest in the game:
- **Explicit**: User marked the game as abandoned (`Game.status = "a"`)
- **Implicit**: User refunded the purchase (which automatically sets games to abandoned)
Note: Refunding a purchase always marks its games as abandoned. There is no option to refund without abandoning.
---
## Unfinished vs. Dropped
The stats views categorize purchases into **unfinished** and **dropped** lists.
### Unfinished
A purchase is **unfinished** when:
1. It was purchased in the relevant time period (this year for yearly stats, all time for all-time stats)
2. It was NOT refunded (only counts toward unfinished/backlog)
3. It is NOT finished (per the finished definition above)
4. It is NOT dropped (per the dropped definition above)
5. It is NOT infinite (subscription, etc.)
6. It IS a game or DLC (not season passes or battle passes)
**Unfinished = Active backlog** — games the user may still play.
### Dropped
A purchase is **dropped** when:
1. It was purchased in the relevant time period
2. It is NOT finished (per the finished definition above)
3. It matches at least one dropped signal (per the dropped definition above)
4. It is NOT infinite
5. It IS a game or DLC
**Dropped = Terminal state** — games the user has given up on or refunded.
### Summary Table
| Category | Includes Refunded? | Key Condition |
|----------|-------------------|---------------|
| **Unfinished** | No | NOT finished, NOT dropped |
| **Dropped** | Yes | Finished OR Abandoned/Retired |
| **Refunded** | Yes | `date_refunded IS NOT NULL` |
| **Infinite** | Yes | `infinite = True` |
---
## Query Patterns
### Checking if a game is finished
```python
game.finished() # Returns True if status="f" or has PlayEvent with ended date
```
### Checking if a game is abandoned
```python
game.abandoned() # Returns True if status="a"
```
### Getting finished purchases
```python
Purchase.objects.finished() # All purchases where games are finished
```
### Getting dropped purchases
```python
Purchase.objects.dropped() # All purchases that are abandoned or refunded
```
---
## Transition State
The system uses **OR logic** for both finished and dropped to catch any mismatch between explicit user actions and data signals:
- **Finished**: `status="f" OR PlayEvent.ended`
- **Dropped**: `status="a" OR date_refunded`
This bridges the gap between the old model (where `date_finished` and `date_dropped` were on the Purchase model) and the new model (where `Game.status` and `PlayEvent` are the sources of truth).
**Future:** These signals should be kept in sync. For example:
- Setting `Game.status = "f"` should create a PlayEvent with `ended` date
- When the sync is reliable, the OR can be simplified to a single check
Note: Refunding a purchase always automatically sets its games' status to Abandoned. This is not optional — there is no way to refund without abandoning.
---
## Edge Cases
### Unplayed games
- Unplayed games (`status="u"`) are considered **unfinished**, not dropped
- They appear in the unfinished/backlog list since they are still games the user may play
- Unplayed games that are refunded DO count as **dropped** (refund signal overrides)
### Multiple games per purchase
- A purchase can have multiple games via `Purchase.games` (many-to-many)
- A purchase is finished if ANY of its games is finished
- A purchase is dropped if ANY of its games is abandoned OR the purchase itself is refunded
### PlayEvents without ended date
- A PlayEvent with `started` but no `ended` does NOT count as finished
- This represents a game that was started but not completed
### Retired games
- Retired games (`status="r"`) are considered **dropped**
- Retirement is for games the user intentionally removed from their collection (collector's items, no longer accessible, etc.)
-133
View File
@@ -1,133 +0,0 @@
# Configuration
All configurable Django settings are read through a single helper,
`config()` in [`timetracker/config.py`](../timetracker/config.py). It resolves
each value from a fixed chain of sources so the same setting can come from an
environment variable, a `.env` file, an `.ini` file, or a built-in default —
without any per-setting special-casing in `settings.py`.
## Resolution priority
For a setting named `NAME`, the first source that provides a value wins:
| Priority | Source | Notes |
|---------:|--------|-------|
| 1 | `NAME__FILE` env var | Path to a file; its *stripped* contents are the value. Opt-in per setting (`allow_file=True`). For Docker/Kubernetes secrets. |
| 2 | `NAME` env var | A real process environment variable. |
| 3 | `.env` file | `KEY=value` lines (see [.env syntax](#env-syntax)). |
| 4 | `settings.ini` file | The `[timetracker]` section, parsed with `configparser`. |
| 5 | `default` | The in-code fallback in `settings.py`. |
If no source supplies a value and no `default` is defined, startup fails with
`ImproperlyConfigured` rather than silently using an empty value.
**Worked example.** With `VALUE` set in the environment *and* in `.env` *and*
in `settings.ini`, the environment variable wins. Remove it and `.env` wins;
remove that and `settings.ini` wins; remove that and the code default applies.
## Settings reference
| Setting | Cast | Default | `__FILE`? | Description |
|---------|------|---------|:---------:|-------------|
| `SECRET_KEY` | str | insecure dev key | yes | Django secret key. **Required in production** (DEBUG off) — a missing value is a hard error, not a silent insecure fallback. |
| `DEBUG` | bool | `true` (dev) | no | Debug mode. Turn **off** in production. Defaults on for local development. |
| `APP_URL` | str (or comma-separated URLs) | `http://localhost:8000` | no | Public URL(s) of the site. One full URL or a comma-separated list. Derives `ALLOWED_HOSTS` and `CSRF_TRUSTED_ORIGINS` from all listed URLs. |
| `ALLOWED_HOSTS` | list | derived from `APP_URL` | no | Comma-separated hostnames. Overrides the `APP_URL` derivation (useful for `ALLOWED_HOSTS=*` behind a reverse proxy). |
| `TZ` | str | `Europe/Prague` (dev) / `UTC` (prod) | no | Time zone. |
| `DATA_DIR` | path | project root | no | Directory holding the SQLite database. Also read by `entrypoint.sh`. |
`cast` understands `bool` (`true/1/yes/on``True`), `list` (comma-separated,
whitespace-trimmed, empty items dropped), `int`, `Path`, or any callable.
## APP_URL, ALLOWED_HOSTS and CSRF
`APP_URL` accepts one full URL or a comma-separated list of full URLs. Both
`ALLOWED_HOSTS` and `CSRF_TRUSTED_ORIGINS` are derived from all listed URLs —
no need to repeat the same information in separate variables.
Single domain (common case):
```
APP_URL=https://tracker.example.com
# -> ALLOWED_HOSTS = ["tracker.example.com"]
# -> CSRF_TRUSTED_ORIGINS = ["https://tracker.example.com"]
```
Multiple domains:
```
APP_URL=https://tracker.example.com,https://www.tracker.example.com
# -> ALLOWED_HOSTS = ["tracker.example.com", "www.tracker.example.com"]
# -> CSRF_TRUSTED_ORIGINS = ["https://tracker.example.com", "https://www.tracker.example.com"]
```
`ALLOWED_HOSTS` can still be overridden directly for edge cases. A typical
reverse-proxy setup where the proxy validates the host:
```
ALLOWED_HOSTS=*
```
## Secrets and `__FILE`
Secret managers (Docker secrets, Kubernetes) mount secrets as files. For any
setting that opts in (currently `SECRET_KEY`), point a `*__FILE` variable at
the mounted path:
```
SECRET_KEY__FILE=/run/secrets/timetracker_secret_key
```
The file contents are read and `.strip()`-ed. The strip matters: editors and
`echo` often append a trailing newline, and a stray `\n` inside `SECRET_KEY`
would silently invalidate every signed cookie/token when the file is recreated
without it.
## .env syntax
```dotenv
# full-line comment
KEY=value
export KEY=value # optional leading "export"
QUOTED="value with spaces" # surrounding quotes are stripped
SINGLE='also fine'
WITH_HASH="a # b" # '#' inside quotes is literal
INLINE=value # trailing comment after an unquoted value is dropped
```
Deliberately **not** supported (documented limits, not bugs):
- variable interpolation (`${OTHER}`)
- multiline values
File locations default to `.env` and `settings.ini` at the project root and
can be moved with the `ENV_FILE` / `INI_FILE` environment variables. Missing
files are ignored, so env-only deployments need neither. A `.env` file used by
`docker-compose` for `${VAR}` substitution is the same file Django reads in
local development; inside the container, real environment variables apply.
See [`.env.example`](../.env.example) and
[`settings.ini.example`](../settings.ini.example) for starting points.
## Container / entrypoint-only variables
These are consumed by [`entrypoint.sh`](../entrypoint.sh) during container
bootstrap, **not** by Django. They are intentionally not part of the Python
config — moving them there would buy nothing and force a bash↔Python bridge.
| Variable | Default | Purpose |
|----------|---------|---------|
| `PUID` / `PGID` | `1000` / `100` | uid/gid the container process runs as. |
| `DATA_DIR` | `/home/timetracker/app/data` | Database directory. Shared with Django via the same env var + matching default. |
| `CREATE_DEFAULT_SUPERUSER` | `false` | Create an `admin`/`admin` superuser on first start. |
| `STAGING` | `false` | Scrub copied sessions / django-q schedule on staging. |
| `LOAD_SAMPLE_DATA` | `false` | Seed sample fixtures when the database is empty. |
## Migrating from the old config
- `PROD=1``DEBUG=false`. `PROD` still works as a **deprecated alias** for
one release and emits a `DeprecationWarning`.
- `ALLOWED_HOSTS` is now configurable (it was previously hard-coded to `*`).
After upgrading, set `APP_URL` (or `ALLOWED_HOSTS` explicitly) or the host
will be rejected. Reverse-proxy deployments that relied on `*` should set
`ALLOWED_HOSTS=*`.
-51
View File
@@ -1,51 +0,0 @@
# Custom Element API: Two patterns, one goal
## Pattern 1: Named builder (current, preferred)
A tag builder with auto-attached `Media`, created via `custom_element_builder()`:
```python
# definition (custom_elements.py)
SessionTimestampButtons = custom_element_builder("session-timestamp-buttons")
# usage (session.py)
SessionTimestampButtons(class_="form-row-button-group", hx_boost="false")[
Button(data_target="timestamp_start", data_type="now", size="xs")["Set to now"],
Button(data_target="timestamp_start", data_type="toggle", size="xs")["Toggle text"],
]
```
**Pros:** explicit dependency, visible import, fails loudly if builder deleted
**Cons:** one line of ceremony per element
## Pattern 2: Element + registry (proposed, not implemented)
A global `CUSTOM_ELEMENT_MEDIA` dict in `core.py` that maps tag names to their `Media`. `register_element()` populates it automatically at import time, so `Element("session-timestamp-buttons")` silently picks up its JS dependency:
```python
# definition (custom_elements.py)
register_element("session-timestamp-buttons", "SessionTimestampButtons", EmptyProps)
# CUSTOM_ELEMENT_MEDIA["session-timestamp-buttons"] = Media(js=("dist/elements/...",))
# usage (session.py) — no builder import needed
Element("session-timestamp-buttons",
[("class", "form-row-button-group"), ("hx-boost", "false")],
children=[...],
)
```
**Pros:** one universal API — `Div(...)`, `Button(...)`, `Element("custom-tag")` all same pattern
**Cons:** implicit dependency — deleting a `register_element()` call produces no error, just broken JS at runtime
## Recommendation
Start with Pattern 1 (named builders) — safe by default. Add Pattern 2 later if the ceremony becomes annoying. The two are **not mutually exclusive**: a named builder is just a thin wrapper around an `Element`; the registry can be added without changing any call sites.
## Quick reference
| Want | Write |
|------|-------|
| Plain HTML tag | `Div(class_="flex")["text"]` |
| Custom element (builder) | `SessionTimestampButtons(class_="...")[child]` |
| Raw element | `Element("custom-tag", attributes_list, children=[...])` |
| Builder from scratch | `custom_element_builder("tag-name")` |
-398
View File
@@ -1,398 +0,0 @@
# Form Overhaul Plan
> Last updated: 2026-05-12
> Status: Decided — awaiting implementation
>
> **Decisions made:**
> - All forms (simple and complex) get section headers for consistency
> - Two-column layout uses **flexbox** (auto-reflow on different screen sizes)
> - `cotton/layouts/add.html` enhanced with **Option A**: `c-section` component slots
> - `add_purchase.html` dual-submit **simplified** — remove `<tr><td>`, use same `c-button` pattern as `add_game.html`
> - GameStatusChange delete confirmation **converted to modal** (via HTMX trigger)
## Goal
Modernize all forms and form-like elements to align with Flowbite design, improve visual consistency, and adopt responsive multi-column layouts for complex forms.
---
## Current State Analysis
### Form Pages (add/edit)
All use `cotton/layouts/add.html` — single column, `max-w-xl`, `form.as_div`:
| Page | Form | Fields | Complexity |
|---|---|---|---|
| Game | `GameForm` | 7 fields: name, sort_name, platform, year, year_orig, status, mastered, wikidata | Medium |
| Purchase | `PurchaseForm` | 11 fields: games, platform, dates, price, currency, type, ownership, related, infinite, name | High |
| Session | `SessionForm` | 8 fields: game, timestamps, duration, emulated, device, note, checkbox (custom rendering) | High |
| Platform | `PlatformForm` | 3 fields: name, icon, group | Low |
| Device | `DeviceForm` | 2 fields: name, type | Low |
| PlayEvent | `PlayEventForm` | 5 fields: game, dates, note, checkbox | Low |
| GameStatusChange | `GameStatusChangeForm` | 4 fields | Low |
### Other Form-Like Elements
| Element | Template | Notes |
|---|---|---|
| Login | `registration/login.html` | Flowbite card, already good |
| Search | `cotton/search_field.html` | Reusable, already good |
| Delete Game | `partials/delete_game_confirmation.html` | Inline modal, inconsistent button layout |
| Delete PlayEvent | `gamestatuschange_confirm_delete.html` | Full-page form, no modal |
| Refund Purchase | `partials/refund_purchase_confirmation.html` | Inline modal, inconsistent button layout |
| Stats Year Select | `stats.html` | Manual `<select>`, no Flowbite styling |
| Status Selector | `partials/gamestatus_selector.html` | Alpine.js dropdown, old Tailwind classes |
| Device Selector | `partials/sessiondevice_selector.html` | Alpine.js dropdown, old Tailwind classes |
---
## Issues to Fix
### P0: Broken/Inconsistent
1. ~~**`modal.html` has a missing `<form>` tag** (line 13: `</form>` with no opening `<form>`)** — *Resolved: rewritten as proper component with form wrapping support, body + footer slots, reusable `close_button` component. Ready for standardizing all inline modals later.*
2. **Delete confirmations are inconsistent** — three different patterns (inline modal, full-page form, inline modal)
3. **`.errorlist` CSS** has fixed `width: 300px` — too narrow, breaks on mobile. *No scoping needed: Django auto-applies `.errorlist` to form error output only, never used explicitly in templates.*
4. **`add_purchase.html` has `<tr><td>`** in a `c-slot` that renders inside a `<div>` — semantic mismatch. **Decision: simplify dual-submit** to match `add_game.html` pattern (use `<c-button>` only).
5. **`#button-container` and `.basic-button` in `input.css`** — legacy patterns, unused or dead code
### P1: Layout & UX
6. **All add/edit forms are single-column** — PurchaseForm (11 fields) and GameForm (7 fields) would benefit from multi-column
7. **No field grouping** — related fields listed flat without visual hierarchy
8. **Stats year `<select>`** has no Flowbite styling
9. **Search field** is not wrapped in `<form method="get">` — no native clear-on-Enter behavior
### P2: Styling Consistency
10. **Status/device selectors** use old Tailwind v3 patterns (`rounded-sm`, `shadow-2xs`, `border-gray-200` without explicit color)
11. **`navbar.html` buttons** use `rounded-sm` instead of `rounded-base`
12. **`simple_table.html` pagination buttons** use `rounded-s-lg`/`rounded-e-lg` — could be simplified
---
## Proposed Improvements
### 1. Two-Column Layout for Complex Forms (Flexbox)
**Scope**: `GameForm`, `PurchaseForm`, `PlayEventForm`, `SessionForm`
Use **flexbox** with wrap behavior so fields auto-reflow on different screen sizes. No fixed column count — fields sit side-by-side on `md:`+ and wrap naturally on smaller screens.
#### GameForm Layout
```
┌──────────────────────────────────┐
│ Game Details │
│ ┌──────────────────┬───────────┐ │
│ │ Name │ Platform │ │
│ │ Sort Name │ Year │ │
│ │ Original Year │ Wikidata │ │
│ └──────────────────┴───────────┘ │
│ Status │
│ ┌──────────────────┬───────────┐ │
│ │ Status │ Mastered │ │
│ └──────────────────┴───────────┘ │
│ [Submit] │
└──────────────────────────────────┘
```
#### PurchaseForm Layout (simplified)
```
┌──────────────────────────────────────────┐
│ Purchase Details │
│ ┌──────────────────────┬───────────────┐ │
│ │ Games (multi-select) │ Platform │ │
│ │ Type │ Ownership │ │
│ │ Name │ Related Purch │ │
│ └──────────────────────┴───────────────┘ │
│ Dates │ Price │
│ ┌───────────────┬──────┴───────────────┐ │
│ │ Date Purch │ Price Curr │ │
│ │ Date Refund │ Infinite [ ] │ │
│ └───────────────┴──────────────────────┘ │
│ [Submit] [Submit + Session] │
└──────────────────────────────────────────┘
```
**Implementation**: `c-section` component accepts `columns="2"` (or `"3"`) which applies `flex flex-wrap gap-4 [&>div]:w-[calc(50%-0.5rem)]` on md+ screens. Each field wraps in a `<div>` inside the section slot.
**Decision**: Dual-submit in `add_purchase.html` simplified — remove `<tr><td>`, use same `<c-button>` pattern as `add_game.html`.
### 2. Field Grouping with Card Sections
**Decision**: ALL forms get section headers for consistency (not just complex forms).
Group related fields with section headings and subtle borders/backgrounds:
```html
<c-section title="Game Details" columns="2">
{{ form.name }}
{{ form.platform }}
{{ form.sort_name }}
{{ form.year_released }}
</c-section>
```
Each section renders as:
```html
<fieldset class="form-section p-5 border-t border-default-medium bg-neutral-primary-soft/30 first-of-type:border-t-0 first-of-type:pt-0">
<h3 class="text-sm font-medium text-heading uppercase mb-4">Section Title</h3>
<div class="flex flex-wrap gap-4">
<!-- fields in <div> wrappers, each taking calc(50% - 0.5rem) on md+ -->
</div>
</fieldset>
```
Each section gets:
- Subtle background (`bg-neutral-primary-soft/30`)
- Top border with spacing (`border-t border-default-medium`)
- Section heading (`text-sm font-medium text-heading uppercase mb-4`)
- Flexbox gap for responsive field reflow
### 1b. `c-section` Component Specification
New cotton component for the `cotton/` directory:
```python
# games/templates/cotton/section.py (or inline in components.py)
from common.components import Div
def Section(title: str = "", columns: str = "1", children: str = "") -> SafeText:
"""Renders a form field section with optional multi-column flexbox layout.
Args:
title: Section heading (renders as uppercase label)
columns: "1" (default), "2", or "3" — target column count on md+ screens
children: Field markup (each field wrapped in <div> for flex wrapping)
"""
col_class = {
"1": "flex flex-col",
"2": "flex flex-wrap gap-4 [&>div]:w-[calc(50%-0.5rem)]",
"3": "flex flex-wrap gap-4 [&>div]:w-[calc(33.333%-0.67rem)]",
}.get(columns, "flex flex-col")
return Div(
cls=f"form-section p-5 border-t border-default-medium bg-neutral-primary-soft/30 first-of-type:border-t-0 first-of-type:pt-0",
children=f"""
<h3 class="text-sm font-medium text-heading uppercase mb-4">{title}</h3>
<div class="{col_class}">{children}</div>
"""
)
```
**Template usage:**
```django
{# add_game.html #}
<c-layouts.add title="New Game">
<c-section title="Game Details" columns="2">
<div>{{ form.name }}</div>
<div>{{ form.platform }}</div>
<div>{{ form.sort_name }}</div>
<div>{{ form.year_released }}</div>
<div>{{ form.original_year_released }}</div>
<div>{{ form.wikidata }}</div>
</c-section>
<c-section title="Status" columns="2">
<div>{{ form.status }}</div>
<div>{{ form.mastered }}</div>
</c-section>
</c-layouts.add>
```
**`cotton/layouts/add.html` changes:**
- Remove hardcoded `{{ form.as_div }}` rendering
- Accept optional `sections` variable (list of rendered `c-section` output)
- If `sections` provided, render them; otherwise fall back to `{{ form.as_div }}` for simple forms
- Keep `additional_row` slot for dual-submit buttons
### 3. CSS/Style Fixes
#### `input.css` changes:
```css
/* Update errorlist */
.errorlist {
@apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-full max-w-xl; /* was w-[300px] */
}
/* Remove: #button-container, .basic-button — unused legacy */
/* Remove: .flowbite-input — custom class is code smell with Tailwind */
/* Remove: flowbite-input @apply block (line 229-234) */
/* Add Flowbite styling for select in stats */
#yearSelect {
@apply bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand;
}
```
**Important**: The styling previously provided by `.flowbite-input` must be preserved. The element-level `@apply` rules for `input`, `select`, and `textarea` in `input.css` (lines 209-219) already provide equivalent styling. These rules automatically apply to all form inputs without needing custom classes:
- `input:not([type="checkbox"])` — background, border, text, radius, focus ring, padding
- `select` — same base styling as inputs
- `textarea` — same base styling with adjusted padding
**Files to clean up:**
- `common/input.css`: Remove `.flowbite-input` class entirely (lines 229-234)
- `games/forms.py`: Remove `flowbite_input_widget` and `flowbite_password_widget` (lines 22-23)
- `games/forms.py`: Remove `widget=` from `LoginForm` fields (lines 28, 32) — login template uses explicit Tailwind classes already
#### Rewrite `modal.html`:
- Remove stray `</form>` tag and restructure as a proper cotton component
- New `c-modal` component with: `modal_id`, `title`, `size="xl"`, `backdrop_close` variables
- `{{ slot }}` (cotton default slot) for body content — passed as children of `<c-modal>`, no block tags needed
- `{{ footer }}` (optional named slot via `<c-slot name="footer">`) for non-form buttons
- Reusable `cotton/close_button.html` via `<c-close-button />`
- Size mapping via inline `{% if %}`: `{% if size == 'sm' %}max-w-sm{% elif size == 'lg' %}max-w-lg{% else %}max-w-xl{% endif %}`
- Horizontal centering: `mx-auto` on inner container (matching old modal pattern)
- Click-to-dismiss backdrop with `event.stopPropagation()` on inner container
- Flowbite-style styling: `rounded-lg shadow`, `bg-white dark:bg-gray-800`, `sm:p-5`
### 4. Unify Delete Confirmations (All Modal)
**Decision**: GameStatusChange delete confirmation converted from full-page to modal. All three use the same modal pattern.
**Target**: All confirmation modals use the same pattern:
```html
<div class="fixed inset-0 bg-black/70 dark:bg-gray-600/50 ...">
<div class="relative mx-auto p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-md w-full">
<h2 class="text-xl font-medium text-center">Confirm Action</h2>
<p class="text-center mt-4 text-sm text-body">Are you sure...?</p>
{% if details %}
<ul class="text-center mt-2 text-sm text-body list-disc list-inside">
<li>{{ detail }}</li>
</ul>
{% endif %}
<p class="text-center mt-3 text-sm font-medium text-red-600">This action cannot be undone.</p>
<div class="flex gap-3 mt-6">
<c-button color="red" class="w-full" type="submit">Delete</c-button>
<c-button color="gray" class="w-full">Cancel</c-button>
</div>
</div>
</div>
```
- **Delete Game** (`partials/delete_game_confirmation.html`): Update template to match standard pattern
- **Delete StatusChange** (`gamestatuschange_confirm_delete.html``partials/statuschange_delete_confirmation.html`): Adopt the same 2-view pattern as delete-game.
- Add `delete_statuschange_confirmation` view (GET → renders modal partial) + URL before the delete URL
- Update `partials/history.html` — add `hx-get="{% url 'games:delete_statuschange_confirmation' change.id %}" hx-target="#global-modal-container"` to the Delete link
- Create new `partials/statuschange_delete_confirmation.html` using `<c-modal>`, same structure as `delete_game_confirmation.html` (detail list, red warning text, same button layout, `<c-gamestatus>` badge for old status)
- Modify `GameStatusChangeDeleteView` to only handle POST (remove its GET-rendered template)
- Delete old `gamestatuschange_confirm_delete.html` after migration
- **Refund Purchase** (`partials/refund_purchase_confirmation.html`): Update template to match standard pattern
### 5. Search Form Enhancement
Wrap `search_field.html` in proper `<form method="get">`:
```html
<form class="max-w-md mx-auto" method="get" x-data x-on:keydown.escape="this.querySelector('input').value=''; this.submit()">
<!-- input + button -->
</form>
```
This enables:
- Native form submission on Enter
- Potential for "clear all" functionality
- Proper browser form autofill behavior
### 6. Status/Device Selector Styling
Update Alpine.js dropdowns to use consistent button classes:
- Replace `rounded-lg` with `rounded-base`
- Replace `shadow-2xs` with `shadow-xs`
- Standardize border colors with `border-default`
- Use `text-heading` / `text-body` for dark mode compatibility
---
## Templates That Need Changes
| Template | Change | Effort |
|---|---|---|
| `cotton/layouts/add.html` | Add `c-section` component support (title, columns, fields slots) | Medium |
| `add_game.html` | Multi-column flexbox layout, section headers | Medium |
| `add_purchase.html` | Multi-column flexbox layout, simplify dual-submit, section headers | High |
| `add_session.html` | Flexbox layout for timestamps+duration, section headers | Low |
| `add_playevent.html` | Flexbox layout, section headers | Low |
| `add_platform.html` | Section headers (was flat single-column) | Low |
| `add_device.html` | Section headers (was flat single-column) | Low |
| `partials/delete_game_confirmation.html` | Standardize to shared modal pattern | Low |
| `partials/refund_purchase_confirmation.html` | Standardize to shared modal pattern | Low |
| `partials/statuschange_delete_confirmation.html` | New — adopt same 2-view pattern as delete-game (modal, `<c-modal>`, HTMX triggers) | Medium |
| `gamestatuschange_confirm_delete.html` | Delete (replaced by new partial) | Trivial |
| `cotton/modal.html` | Fix missing `<form>` tag | Low |
| `stats.html` | Add Flowbite select styling | Low |
| `partials/gamestatus_selector.html` | Update button classes | Low |
| `partials/sessiondevice_selector.html` | Update button classes | Low |
| `cotton/search_field.html` | Wrap in `<form method="get">` | Low |
| `common/input.css` | Remove legacy, fix errorlist, add select styles | Low |
---
## Implementation Order
### Phase 1: Quick Wins (low risk, no breaking changes)
1. **CSS fixes** (`input.css`) — fix errorlist width, remove legacy `.basic-button` / `#button-container`, add select styles
2. ~~**`modal.html` rewrite**~~ — add missing `<form>` tag, conditional form wrapper ✓ Implemented (uses `{{ slot }}` cotton default slot, no `{% partial %}` tags; `size` defaults to `"xl"` with inline `{% if %}` mapping)
3. **Delete confirmation standardization** — 3 templates → all modal, same pattern (including GameStatusChange: full-page → modal)
4. **Search field enhancement** — wrap in `<form method="get">`
5. **Stats select styling** — add Flowbite select classes
6. **Selector styling updates** — gamestatus + sessiondevice selectors, consistent classes
### Phase 2: `c-section` Component
7. **Create `c-section` component** — title, columns, fields slots
8. **Update `cotton/layouts/add.html`** — support `sections` variable, fallback to `form.as_div`
### Phase 3: Form Layout Overhaul (largest change)
9. **`GameForm`** — section headers + 2-col flexbox (`add_game.html`)
10. **`PlayEventForm`** — section headers + 2-col flexbox
11. **`PurchaseForm`** — section headers + 2/3-col flexbox + simplify dual-submit (`add_purchase.html`)
12. **`SessionForm`** — section headers + flexbox for timestamps+duration (custom rendering already exists)
13. **Simple forms**`add_platform.html`, `add_device.html` get section headers (single column)
---
## Testing Strategy
- Run `make test` after Phase 1 changes to verify nothing broke
- `tests/test_paths_return_200.py` — URL-level smoke tests (186 tests). All views must have a `test_*_returns_200` test. Adding new views requires a corresponding test to prevent `TemplateDoesNotExist` regressions.
- CSS changes do not require test changes (no test coverage for rendering), but visual verification is recommended
---
## Open Questions
- [x] Simple forms section headers? → **All forms get section headers** for consistency
- [x] CSS Grid or Flexbox? → **Flexbox** — auto-reflow on different screen sizes
- [x] add.html layout variable? → **Option A**`c-section` cotton component with `title` and `columns` slots
- [x] add_purchase.html dual-submit? → **Simplify** — remove `<tr><td>`, use same `<c-button>` pattern as `add_game.html`
- [x] GameStatusChange modal or full-page? → **Modal** — trigger via HTMX, same pattern as delete-game
- [x] .flowbite-input class? → **Remove entirely** — rely on element-level `@apply` in `input.css`
## Decision Summary
| Question | Decision |
|---|---|
| Section headers on simple forms | Yes, all forms get them |
| Layout approach for multi-column | Flexbox with wrap |
| Layout mechanism in add.html | Option A: `c-section` cotton component |
| Purchase dual-submit | Simplify — single submit button, same as Game |
| GameStatusChange delete | Convert to modal (HTMX-triggered) |
| .flowbite-input class | Remove — preserve styling via element-level `@apply` in `input.css` |
| `modal.html` component | Rewrite with form wrapping, body + footer slots, reusable close button ✓ Implemented
## Build Step
After any CSS changes to `common/input.css`, the compiled output must be rebuilt:
- **`make css`** — one-shot build: `npx @tailwindcss/cli -i ./common/input.css -o ./games/static/base.css`
- **`make dev`** — watch mode: Tailwind rebuilds automatically on every `input.css` save
Running `make dev` is sufficient for development since it concurrently runs Django and the CSS watcher.
Only use `make css` if you only want to rebuild CSS without starting the dev server.
**Important**: Legacy CSS removals (`.basic-button`, `#button-container`, `.flowbite-input`) will only take effect in the browser after a rebuild. The old compiled `base.css` will still contain them until rebuilt.
@@ -1,485 +0,0 @@
# Boolean Filters Overhaul Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Overhaul the boolean criterion filters from a single checkbox (representing True/Not set) to a 2-radio-button UI representing True, False, and Unset states across all filter bars.
**Architecture:**
1. Generalize `_filter_checkbox` into a filter-agnostic `Checkbox` component and introduce a `Radio` component in `common/components/primitives.py`.
2. Implement a nullable boolean filter JSON parsing helper `_parse_bool_nullable` and a component helper `_filter_boolean_radio` in `common/components/filters.py`.
3. Update `GameFilterBar`, `SessionFilterBar`, and `PurchaseFilterBar` in `common/components/filters.py` to leverage these new helpers.
4. Enhance `games/static/js/filter_bar.js` with deselectable radio toggling behavior and updated checked-radio state serialization.
**Tech Stack:** Python, Django, vanilla JavaScript, HTML.
---
### Task 1: Generalize Checkbox and Introduce Radio in Primitives
**Files:**
- Modify: `common/components/primitives.py`
- [ ] **Step 1: Write the failing test for the new Checkbox and Radio primitives**
Create a new test class `ComponentPrimitivesTest` in `tests/test_components.py` (or verify where to append) to check the output of `Checkbox` and `Radio`.
Add the following code to `tests/test_components.py`:
```python
from common.components.primitives import Checkbox, Radio
class ComponentPrimitivesTest(SimpleTestCase):
def test_checkbox_primitive(self):
html = Checkbox(name="test-check", label="Accept Terms", checked=True, value="yes")
self.assertIn('type="checkbox"', html)
self.assertIn('name="test-check"', html)
self.assertIn('value="yes"', html)
self.assertIn('checked="true"', html)
self.assertIn("Accept Terms", html)
def test_radio_primitive(self):
html = Radio(name="test-radio", label="Option A", checked=False, value="A")
self.assertIn('type="radio"', html)
self.assertIn('name="test-radio"', html)
self.assertIn('value="A"', html)
self.assertNotIn('checked="true"', html)
self.assertIn("Option A", html)
```
- [ ] **Step 2: Run test to verify it fails**
Run: `pytest tests/test_components.py -k ComponentPrimitivesTest`
Expected output: Failures/errors due to `Checkbox` and `Radio` not being defined/imported.
- [ ] **Step 3: Implement Checkbox and Radio in `common/components/primitives.py`**
Open `common/components/primitives.py` and find the other basic primitives (e.g. `Input`, `Label`). Add the following implementations and ensure they are exported / added to imports/exports:
```python
def Checkbox(
name: str,
label: str,
checked: bool = False,
value: str = "1",
attributes: list[HTMLAttribute] | None = None,
) -> SafeText:
"""A filter-agnostic Checkbox component."""
attributes = attributes or []
input_attrs = [
("name", name),
("value", value),
("class", "rounded border-default-medium bg-neutral-secondary-medium text-brand focus:ring-brand"),
] + attributes
if checked:
input_attrs.append(("checked", "true"))
return Label(
attributes=[("class", "flex items-center gap-2 text-sm text-heading cursor-pointer")],
children=[
Input(type="checkbox", attributes=input_attrs),
label,
],
)
def Radio(
name: str,
label: str,
checked: bool = False,
value: str = "",
attributes: list[HTMLAttribute] | None = None,
) -> SafeText:
"""A filter-agnostic Radio component."""
attributes = attributes or []
input_attrs = [
("name", name),
("value", value),
("class", "rounded-full border-default-medium bg-neutral-secondary-medium text-brand focus:ring-brand"),
] + attributes
if checked:
input_attrs.append(("checked", "true"))
return Label(
attributes=[("class", "flex items-center gap-1.5 text-sm text-heading cursor-pointer")],
children=[
Input(type="radio", attributes=input_attrs),
label,
],
)
```
- [ ] **Step 4: Run test to verify it passes**
Run: `pytest tests/test_components.py -k ComponentPrimitivesTest`
Expected output: `2 passed`
- [ ] **Step 5: Commit**
Run:
```bash
git add common/components/primitives.py tests/test_components.py
git commit -m "refactor: generalize Checkbox and add Radio primitive component"
```
---
### Task 2: Implement Filter Parsers & Helpers in filters.py
**Files:**
- Modify: `common/components/filters.py`
- Modify: `tests/test_filter_helpers.py`
- [ ] **Step 1: Write failing unit tests for `_parse_bool_nullable` in `tests/test_filter_helpers.py`**
Add a new test class `ParseBoolNullableTest` to `tests/test_filter_helpers.py`:
```python
from common.components.filters import _parse_bool_nullable
class ParseBoolNullableTest(SimpleTestCase):
def test_missing_key(self):
self.assertIsNone(_parse_bool_nullable({}, "field"))
def test_null_value(self):
self.assertIsNone(_parse_bool_nullable({"field": None}, "field"))
self.assertIsNone(_parse_bool_nullable({"field": {}}, "field"))
def test_boolean_values(self):
self.assertTrue(_parse_bool_nullable({"field": {"value": True}}, "field"))
self.assertFalse(_parse_bool_nullable({"field": {"value": False}}, "field"))
def test_string_values(self):
self.assertTrue(_parse_bool_nullable({"field": {"value": "true"}}, "field"))
self.assertTrue(_parse_bool_nullable({"field": {"value": "1"}}, "field"))
self.assertFalse(_parse_bool_nullable({"field": {"value": "false"}}, "field"))
self.assertFalse(_parse_bool_nullable({"field": {"value": "0"}}, "field"))
```
- [ ] **Step 2: Run tests to verify they fail**
Run: `pytest tests/test_filter_helpers.py -k ParseBoolNullableTest`
Expected output: Failures/errors due to `_parse_bool_nullable` not found.
- [ ] **Step 3: Implement `_parse_bool_nullable` and `_filter_boolean_radio` in `common/components/filters.py`**
1. Import `Checkbox` and `Radio` from `common.components.primitives` at the top of `common/components/filters.py`.
2. Define `_FILTER_RADIO_CLASS` and add `_parse_bool_nullable`.
3. Create `_filter_boolean_radio`.
4. Refactor `_filter_checkbox` to use `Checkbox` instead of raw `Label` and `Input`.
Code to implement:
```python
_FILTER_RADIO_CLASS = (
"rounded-full border-default-medium bg-neutral-secondary-medium "
"text-brand focus:ring-brand"
)
def _parse_bool_nullable(existing: dict, key: str) -> bool | None:
"""Extract a nullable boolean value from a filter criterion."""
if key not in existing:
return None
field = existing[key]
if not isinstance(field, dict):
return None
val = field.get("value")
if val is None:
return None
if isinstance(val, str):
if val.lower() in ("true", "1", "yes"):
return True
if val.lower() in ("false", "0", "no"):
return False
return bool(val)
def _filter_checkbox(name: str, label: str, checked: bool) -> SafeText:
"""Thin adapter mapping legacy checkbox filters to the generalized Checkbox primitive."""
return Checkbox(name=name, label=label, checked=checked)
def _filter_boolean_radio(name: str, label: str, value: bool | None) -> SafeText:
"""Renders a filter-specific boolean radio button group with 'True' and 'False' options."""
return Div(
attributes=[("class", "flex flex-col gap-1")],
children=[
Span(
attributes=[("class", _FILTER_LABEL_CLASS)],
children=[label],
),
Div(
attributes=[("class", "flex items-center gap-4 h-9")],
children=[
Radio(name=name, label="True", checked=value is True, value="true"),
Radio(name=name, label="False", checked=value is False, value="false"),
],
),
],
)
```
- [ ] **Step 4: Run unit tests to verify they pass**
Run: `pytest tests/test_filter_helpers.py`
Expected output: All helper tests passed (including `ParseBoolNullableTest`).
- [ ] **Step 5: Commit**
Run:
```bash
git add common/components/filters.py tests/test_filter_helpers.py
git commit -m "feat: implement _parse_bool_nullable and _filter_boolean_radio helper"
```
---
### Task 3: Replace Single Checkboxes with Radio Groups in Filter Bars
**Files:**
- Modify: `common/components/filters.py`
- [ ] **Step 1: Update GameFilterBar**
In `common/components/filters.py` inside `GameFilterBar`:
1. Parse using `_parse_bool_nullable` instead of `_parse_bool` for:
- `mastered_value`
- `purchase_refunded_value`
- `purchase_infinite_value`
- `session_emulated_value`
2. Update the fields list to replace `_filter_checkbox` with `_filter_boolean_radio`, changing the wrapper div to have `gap-6` for better horizontal radio button spacing.
Code snippet modification:
```python
# Parsing:
mastered_value = _parse_bool_nullable(existing, "mastered")
# ...
purchase_refunded_value = _parse_bool_nullable(existing, "purchase_refunded")
purchase_infinite_value = _parse_bool_nullable(existing, "purchase_infinite")
session_emulated_value = _parse_bool_nullable(existing, "session_emulated")
# Rendering (in fields):
Div(
attributes=[("class", "flex items-end gap-6 mb-4 flex-wrap")],
children=[
_filter_boolean_radio("filter-mastered", "Mastered", mastered_value),
_filter_boolean_radio(
"filter-purchase-refunded", "Refunded", purchase_refunded_value
),
_filter_boolean_radio(
"filter-purchase-infinite", "Infinite", purchase_infinite_value
),
_filter_boolean_radio(
"filter-session-emulated", "Emulated", session_emulated_value
),
],
),
```
- [ ] **Step 2: Update SessionFilterBar**
In `common/components/filters.py` inside `SessionFilterBar`:
1. Parse using `_parse_bool_nullable` for:
- `emulated_value`
- `is_active_value`
2. Update the fields to replace `_filter_checkbox` with `_filter_boolean_radio`.
Code snippet modification:
```python
# Parsing:
emulated_value = _parse_bool_nullable(existing, "emulated")
is_active_value = _parse_bool_nullable(existing, "is_active")
# Rendering (in fields):
Div(
attributes=[("class", "flex gap-6 mb-4")],
children=[
_filter_boolean_radio("filter-emulated", "Emulated", emulated_value),
_filter_boolean_radio("filter-active", "Active", is_active_value),
],
),
```
- [ ] **Step 3: Update PurchaseFilterBar**
In `common/components/filters.py` inside `PurchaseFilterBar`:
1. Parse using `_parse_bool_nullable` for:
- `is_refunded_value`
- `infinite_value`
- `needs_price_update_value`
2. Update the fields to replace `_filter_checkbox` with `_filter_boolean_radio`.
Code snippet modification:
```python
# Parsing:
is_refunded_value = _parse_bool_nullable(existing, "is_refunded")
infinite_value = _parse_bool_nullable(existing, "infinite")
needs_price_update_value = _parse_bool_nullable(existing, "needs_price_update")
# Rendering (in fields):
Div(
attributes=[("class", "flex flex-col items-start gap-4 mb-4")],
children=[
_filter_boolean_radio(
"filter-refunded", "Refunded", is_refunded_value
),
_filter_boolean_radio("filter-infinite", "Infinite", infinite_value),
_filter_boolean_radio(
"filter-needs-price-update",
"Needs Price Update",
needs_price_update_value,
),
],
),
```
- [ ] **Step 4: Run component tests to verify output**
Run: `pytest tests/test_filter_bars.py`
Expected output: Since we only changed the internal input type from checkbox to radio but kept the `name="..."` attribute intact, the tests asserting name occurrences should still pass!
- [ ] **Step 5: Commit**
Run:
```bash
git add common/components/filters.py
git commit -m "feat: replace single boolean checkboxes with radio groups in all FilterBars"
```
---
### Task 4: Frontend Behavior and Serialization in JS
**Files:**
- Modify: `games/static/js/filter_bar.js`
- [ ] **Step 1: Update Radio Serialization in `buildFilterJSON`**
In `games/static/js/filter_bar.js`, locate the `// 2. Boolean Fields (Checkboxes)` section.
Update the loop to check for `:checked` radio options:
```javascript
// 2. Boolean Fields (Radio Button Groups)
var booleanFields = [
{ name: "filter-mastered", key: "mastered" },
{ name: "filter-emulated", key: "emulated" },
{ name: "filter-active", key: "is_active" },
{ name: "filter-refunded", key: "is_refunded" },
{ name: "filter-infinite", key: "infinite" },
{ name: "filter-needs-price-update", key: "needs_price_update" },
{ name: "filter-purchase-refunded", key: "purchase_refunded" },
{ name: "filter-purchase-infinite", key: "purchase_infinite" },
{ name: "filter-session-emulated", key: "session_emulated" }
];
booleanFields.forEach(function (bf) {
var el = form.querySelector('[name="' + bf.name + '"]:checked');
if (el) {
var val = el.value === "true";
filter[bf.key] = criterion(val, null, "EQUALS");
}
});
```
- [ ] **Step 2: Add click-to-deselect functionality for radios**
In `games/static/js/filter_bar.js`, add `setupDeselectableRadios` and call it inside `DOMContentLoaded`:
```javascript
/**
* Enable deselect-on-click behavior for filter radio buttons.
*/
function setupDeselectableRadios() {
document.querySelectorAll('input[type="radio"]').forEach(function (radio) {
radio.addEventListener('click', function (e) {
if (this.wasChecked) {
this.checked = false;
this.wasChecked = false;
this.dispatchEvent(new Event('change', { bubbles: true }));
} else {
var name = this.getAttribute('name');
if (name) {
document.querySelectorAll('input[type="radio"][name="' + name + '"]').forEach(function (r) {
r.wasChecked = false;
});
}
this.wasChecked = true;
}
});
if (radio.checked) {
radio.wasChecked = true;
}
});
}
```
Locate the `document.addEventListener("DOMContentLoaded", ...)` callback at the bottom of the file and update it:
```javascript
document.addEventListener("DOMContentLoaded", function () {
injectSearchInputs();
setupDeselectableRadios();
loadPresets();
});
```
- [ ] **Step 3: Run existing frontend / component tests to verify no syntax errors or simple breaks**
Run: `pytest tests/test_filter_bars.py`
Expected output: PASS
- [ ] **Step 4: Commit**
Run:
```bash
git add games/static/js/filter_bar.js
git commit -m "feat: add click-to-deselect behavior and update checked-radio serialization in JS"
```
---
### Task 5: Add Comprehensive Test Coverage & Verification
**Files:**
- Modify: `tests/test_filter_bars.py`
- [ ] **Step 1: Write explicit tests for boolean radio elements in filter bars**
Add a test case checking that the filter bars output `type="radio"` and contain `value="true"` and `value="false"` for boolean fields:
In `tests/test_filter_bars.py`, add the following test method:
```python
def test_boolean_fields_render_as_radio_groups(self):
"""Boolean fields must render as radio groups with True/False choices."""
from common.components import FilterBar, SessionFilterBar, PurchaseFilterBar
# 1. Games Filter Bar
games_html = str(FilterBar(filter_json=""))
self.assertIn('type="radio"', games_html)
self.assertIn('name="filter-mastered"', games_html)
self.assertIn('value="true"', games_html)
self.assertIn('value="false"', games_html)
# 2. Session Filter Bar
session_html = str(SessionFilterBar(filter_json=""))
self.assertIn('type="radio"', session_html)
self.assertIn('name="filter-emulated"', session_html)
self.assertIn('value="true"', session_html)
self.assertIn('value="false"', session_html)
# 3. Purchase Filter Bar
purchase_html = str(PurchaseFilterBar(filter_json=""))
self.assertIn('type="radio"', purchase_html)
self.assertIn('name="filter-refunded"', purchase_html)
self.assertIn('value="true"', purchase_html)
self.assertIn('value="false"', purchase_html)
```
- [ ] **Step 2: Run pytest to verify all tests (including new ones) pass**
Run: `pytest`
Expected output: `356 passed` (including the new test case).
- [ ] **Step 3: Commit final tests**
Run:
```bash
git add tests/test_filter_bars.py
git commit -m "test: add explicit radio group and True/False choice checks for boolean fields"
```
@@ -1,662 +0,0 @@
# Comprehensive Filters Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Implement a comprehensive suite of backend filter classes and filter field expansions across all 6 main models (Game, Session, Purchase, Device, Platform, PlayEvent) using a subquery-based cross-entity approach.
**Architecture:** We will implement missing filter classes (`DeviceFilter`, `PlatformFilter`, `PlayEventFilter`) in `games/filters.py`. We will extend all filters to support powerful, deeply linked "cross-entity" subqueries (e.g. `GameFilter.session_filter` or `PlatformFilter.game_filter`) which builds robust `Q` objects without causing duplicate join rows in list queries.
**Tech Stack:** Django, Python dataclasses, Pytest.
---
### Task 1: Implement New Filter Classes (Device, Platform, PlayEvent)
**Files:**
- Modify: `games/filters.py`
- Test: `tests/test_filters.py`
- [ ] **Step 1: Implement DeviceFilter, PlatformFilter, and PlayEventFilter**
Add the three new operator filters to `games/filters.py`. Ensure we import all necessary criterion types and add the `parse_device_filter`, `parse_platform_filter`, and `parse_playevent_filter` helper functions at the end of the file.
```python
# Insert new filter imports and classes in games/filters.py
@dataclass
class DeviceFilter(OperatorFilter):
"""Filter for the Device model."""
AND: DeviceFilter | None = None
OR: DeviceFilter | None = None
NOT: DeviceFilter | None = None
name: StringCriterion | None = None
type: ChoiceCriterion | None = None
created_at: StringCriterion | None = None
# Free-text search
search: StringCriterion | None = None
# Cross-entity: Devices that have sessions matching these criteria
session_filter: SessionFilter | None = None
def to_q(self) -> Q:
q = Q()
if self.name is not None:
q &= self.name.to_q("name")
if self.type is not None:
q &= self.type.to_q("type")
if self.created_at is not None:
q &= self.created_at.to_q("created_at")
# Free-text search
if self.search is not None and self.search.value:
search_q = (
Q(name__icontains=self.search.value)
| Q(type__icontains=self.search.value)
)
if self.search.modifier == Modifier.EXCLUDES:
search_q = ~search_q
q &= search_q
# Cross-entity filter: session_filter
if self.session_filter is not None:
from games.models import Session
session_q = self.session_filter.to_q()
matching_ids = Session.objects.filter(session_q).values_list("device_id", flat=True)
q &= Q(id__in=matching_ids)
sub = self.sub_filter()
if sub is not None:
if self.AND is not None:
q &= sub.to_q()
elif self.OR is not None:
q |= sub.to_q()
elif self.NOT is not None:
q &= ~sub.to_q()
return q
@dataclass
class PlatformFilter(OperatorFilter):
"""Filter for the Platform model."""
AND: PlatformFilter | None = None
OR: PlatformFilter | None = None
NOT: PlatformFilter | None = None
name: StringCriterion | None = None
group: StringCriterion | None = None
icon: StringCriterion | None = None
created_at: StringCriterion | None = None
# Free-text search
search: StringCriterion | None = None
# Cross-entity
game_filter: GameFilter | None = None
purchase_filter: PurchaseFilter | None = None
def to_q(self) -> Q:
q = Q()
if self.name is not None:
q &= self.name.to_q("name")
if self.group is not None:
q &= self.group.to_q("group")
if self.icon is not None:
q &= self.icon.to_q("icon")
if self.created_at is not None:
q &= self.created_at.to_q("created_at")
# Free-text search
if self.search is not None and self.search.value:
search_q = (
Q(name__icontains=self.search.value)
| Q(group__icontains=self.search.value)
)
if self.search.modifier == Modifier.EXCLUDES:
search_q = ~search_q
q &= search_q
# Cross-entity filter: game_filter
if self.game_filter is not None:
from games.models import Game
game_q = self.game_filter.to_q()
matching_ids = Game.objects.filter(game_q).values_list("platform_id", flat=True)
q &= Q(id__in=matching_ids)
# Cross-entity filter: purchase_filter
if self.purchase_filter is not None:
from games.models import Purchase
purchase_q = self.purchase_filter.to_q()
matching_ids = Purchase.objects.filter(purchase_q).values_list("platform_id", flat=True)
q &= Q(id__in=matching_ids)
sub = self.sub_filter()
if sub is not None:
if self.AND is not None:
q &= sub.to_q()
elif self.OR is not None:
q |= sub.to_q()
elif self.NOT is not None:
q &= ~sub.to_q()
return q
@dataclass
class PlayEventFilter(OperatorFilter):
"""Filter for the PlayEvent model."""
AND: PlayEventFilter | None = None
OR: PlayEventFilter | None = None
NOT: PlayEventFilter | None = None
game: MultiCriterion | None = None # filters on game_id
started: StringCriterion | None = None # date string
ended: StringCriterion | None = None # date string
days_to_finish: IntCriterion | None = None
note: StringCriterion | None = None
created_at: StringCriterion | None = None
# Free-text search
search: StringCriterion | None = None
# Cross-entity: PlayEvents for games matching these criteria
game_filter: GameFilter | None = None
def to_q(self) -> Q:
q = Q()
if self.game is not None:
q &= self.game.to_q("game_id")
if self.started is not None:
q &= self.started.to_q("started")
if self.ended is not None:
q &= self.ended.to_q("ended")
if self.days_to_finish is not None:
q &= self.days_to_finish.to_q("days_to_finish")
if self.note is not None:
q &= self.note.to_q("note")
if self.created_at is not None:
q &= self.created_at.to_q("created_at")
# Free-text search
if self.search is not None and self.search.value:
search_q = (
Q(game__name__icontains=self.search.value)
| Q(note__icontains=self.search.value)
)
if self.search.modifier == Modifier.EXCLUDES:
search_q = ~search_q
q &= search_q
# Cross-entity filter: game_filter
if self.game_filter is not None:
from games.models import Game
game_q = self.game_filter.to_q()
matching_ids = Game.objects.filter(game_q).values_list("id", flat=True)
q &= Q(game_id__in=matching_ids)
sub = self.sub_filter()
if sub is not None:
if self.AND is not None:
q &= sub.to_q()
elif self.OR is not None:
q |= sub.to_q()
elif self.NOT is not None:
q &= ~sub.to_q()
return q
# Add to convenience helpers section:
def parse_device_filter(json_str: str) -> DeviceFilter | None:
return filter_from_json(DeviceFilter, json_str)
def parse_platform_filter(json_str: str) -> PlatformFilter | None:
return filter_from_json(PlatformFilter, json_str)
def parse_playevent_filter(json_str: str) -> PlayEventFilter | None:
return filter_from_json(PlayEventFilter, json_str)
```
- [ ] **Step 2: Run existing tests to verify everything compiles**
Run: `pytest tests/test_filters.py -v`
Expected: All existing tests PASS without issues.
---
### Task 2: Expand SessionFilter (Duration Fields + Cross-Entity)
**Files:**
- Modify: `games/filters.py:SessionFilter`
- Test: `tests/test_filters.py`
- [ ] **Step 1: Refactor SessionFilter and add new duration fields & device_filter**
Modify `SessionFilter` to replace `duration_minutes: IntCriterion` with `duration_total_minutes`, `duration_manual_minutes`, and `duration_calculated_minutes`. Add `device_filter: DeviceFilter`.
Update `to_q()` inside `SessionFilter` to map duration fields correctly to their respective GeneratedFields (`duration_total`, `duration_calculated`) or manual field (`duration_manual`). Use standard Python `timedelta` logic.
```python
# Inside SessionFilter class:
duration_total_minutes: IntCriterion | None = None
duration_manual_minutes: IntCriterion | None = None
duration_calculated_minutes: IntCriterion | None = None
# Cross-entity: sessions for devices matching these criteria
device_filter: DeviceFilter | None = None
```
```python
# Helper inside SessionFilter or refactored:
def _duration_to_q(self, c: IntCriterion, field: str) -> Q:
from datetime import timedelta
q = Q()
td_val = timedelta(minutes=c.value)
m = c.modifier
if m == Modifier.EQUALS:
q &= Q(
**{
f"{field}__gte": td_val,
f"{field}__lt": timedelta(minutes=c.value + 1),
}
)
elif m == Modifier.NOT_EQUALS:
q &= ~Q(
**{
f"{field}__gte": td_val,
f"{field}__lt": timedelta(minutes=c.value + 1),
}
)
elif m == Modifier.GREATER_THAN:
q &= Q(**{f"{field}__gt": td_val})
elif m == Modifier.LESS_THAN:
q &= Q(**{f"{field}__lt": td_val})
elif m == Modifier.BETWEEN and c.value2 is not None:
lo = timedelta(minutes=min(c.value, c.value2))
hi = timedelta(minutes=max(c.value, c.value2))
q &= Q(**{f"{field}__gte": lo, f"{f_field}__lte": hi})
elif m == Modifier.NOT_BETWEEN and c.value2 is not None:
lo = timedelta(minutes=min(c.value, c.value2))
hi = timedelta(minutes=max(c.value, c.value2))
q &= Q(**{f"{field}__lt": lo}) | Q(**{f"{field}__gt": hi})
elif m == Modifier.IS_NULL:
q &= Q(**{f"{field}": timedelta(0)})
elif m == Modifier.NOT_NULL:
q &= ~Q(**{f"{field}": timedelta(0)})
return q
```
Then in `to_q()` inside `SessionFilter`:
```python
if self.duration_total_minutes is not None:
q &= self._duration_to_q(self.duration_total_minutes, "duration_total")
if self.duration_manual_minutes is not None:
q &= self._duration_to_q(self.duration_manual_minutes, "duration_manual")
if self.duration_calculated_minutes is not None:
q &= self._duration_to_q(self.duration_calculated_minutes, "duration_calculated")
# Cross-entity filter: device_filter
if self.device_filter is not None:
from games.models import Device
device_q = self.device_filter.to_q()
matching_ids = Device.objects.filter(device_q).values_list("id", flat=True)
q &= Q(device_id__in=matching_ids)
```
- [ ] **Step 2: Run tests to verify compiles correctly**
Run: `pytest tests/test_filters.py -v`
Expected: PASS (existing tests may need updating if they referenced `duration_minutes`).
---
### Task 3: Expand PurchaseFilter (Original Currency, Infinite, Needs Price Update, Converted Currency)
**Files:**
- Modify: `games/filters.py:PurchaseFilter`
- Test: `tests/test_filters.py`
- [ ] **Step 1: Add new fields to PurchaseFilter and platform_filter**
Expand `PurchaseFilter` with `infinite: BoolCriterion`, `needs_price_update: BoolCriterion`, `converted_currency: StringCriterion`, and `platform_filter: PlatformFilter`.
```python
# Inside PurchaseFilter class:
infinite: BoolCriterion | None = None
needs_price_update: BoolCriterion | None = None
converted_currency: StringCriterion | None = None
# Cross-entity
platform_filter: PlatformFilter | None = None
```
Update `to_q()` inside `PurchaseFilter`:
```python
if self.infinite is not None:
q &= self.infinite.to_q("infinite")
if self.needs_price_update is not None:
q &= self.needs_price_update.to_q("needs_price_update")
if self.converted_currency is not None:
q &= self.converted_currency.to_q("converted_currency")
# Cross-entity filter: platform_filter
if self.platform_filter is not None:
from games.models import Platform
platform_q = self.platform_filter.to_q()
matching_ids = Platform.objects.filter(platform_q).values_list("id", flat=True)
q &= Q(platform_id__in=matching_ids)
```
- [ ] **Step 2: Verify test suite continues to pass**
Run: `pytest tests/test_filters.py -v`
Expected: PASS
---
### Task 4: Expand GameFilter (Has Purchases, Has PlayEvents, Session Stats, Cross-Entity)
**Files:**
- Modify: `games/filters.py:GameFilter`
- Test: `tests/test_filters.py`
- [ ] **Step 1: Expand GameFilter with session stats, purchase/playevent existence, and cross-entity filters**
Add fields and cross-entity filters to `GameFilter`:
```python
# Inside GameFilter class:
has_purchases: BoolCriterion | None = None
has_playevents: BoolCriterion | None = None
session_count: IntCriterion | None = None
session_average: IntCriterion | None = None # average in minutes
# Cross-entity filters
session_filter: SessionFilter | None = None
purchase_filter: PurchaseFilter | None = None
playevent_filter: PlayEventFilter | None = None
platform_filter: PlatformFilter | None = None
```
Update `to_q()` inside `GameFilter`.
For existence and session stats filters, we use Subqueries to avoid complex inline annotations during the generic filter generation (which is much cleaner and less bug-prone):
```python
if self.has_purchases is not None:
from games.models import Purchase
purchased_ids = Purchase.objects.values_list("games__id", flat=True).distinct()
if self.has_purchases.value:
q &= Q(id__in=purchased_ids)
else:
q &= ~Q(id__in=purchased_ids)
if self.has_playevents is not None:
from games.models import PlayEvent
played_ids = PlayEvent.objects.values_list("game_id", flat=True).distinct()
if self.has_playevents.value:
q &= Q(id__in=played_ids)
else:
q &= ~Q(id__in=played_ids)
if self.session_count is not None:
from games.models import Game
from django.db.models import Count
matching_ids = Game.objects.annotate(s_count=Count("sessions")).filter(self.session_count.to_q("s_count")).values_list("id", flat=True)
q &= Q(id__in=matching_ids)
if self.session_average is not None:
from games.models import Game, Session
from django.db.models import Avg, F, ExpressionWrapper, DurationField
# Compute average session total duration.
# Avg returns an interval/duration type, so we can convert it to minutes in Python or do duration comparisons directly.
# To match the criterion easily, we can filter Game objects using Avg:
matching_ids = Game.objects.annotate(s_avg=Avg("sessions__duration_total")).filter(self._playtime_to_q_for_field(self.session_average, "s_avg")).values_list("id", flat=True)
q &= Q(id__in=matching_ids)
# Cross-entity filters
if self.session_filter is not None:
from games.models import Session
session_q = self.session_filter.to_q()
matching_ids = Session.objects.filter(session_q).values_list("game_id", flat=True)
q &= Q(id__in=matching_ids)
if self.purchase_filter is not None:
from games.models import Purchase
purchase_q = self.purchase_filter.to_q()
matching_ids = Purchase.objects.filter(purchase_q).values_list("games__id", flat=True)
q &= Q(id__in=matching_ids)
if self.playevent_filter is not None:
from games.models import PlayEvent
playevent_q = self.playevent_filter.to_q()
matching_ids = PlayEvent.objects.filter(playevent_q).values_list("game_id", flat=True)
q &= Q(id__in=matching_ids)
if self.platform_filter is not None:
from games.models import Platform
platform_q = self.platform_filter.to_q()
matching_ids = Platform.objects.filter(platform_q).values_list("id", flat=True)
q &= Q(platform_id__in=matching_ids)
```
Add a helper `_playtime_to_q_for_field` in `GameFilter` that works exactly like `_playtime_to_q` but accepts a customized field name (e.g. `s_avg`):
```python
@staticmethod
def _playtime_to_q_for_field(c: IntCriterion, field: str) -> Q:
from datetime import timedelta
m = c.modifier
td_val = timedelta(minutes=c.value)
if m == Modifier.EQUALS:
return Q(
**{
f"{field}__gte": td_val,
f"{field}__lt": timedelta(minutes=c.value + 1),
}
)
if m == Modifier.NOT_EQUALS:
return ~Q(
**{
f"{field}__gte": td_val,
f"{field}__lt": timedelta(minutes=c.value + 1),
}
)
if m == Modifier.GREATER_THAN:
return Q(**{f"{field}__gt": td_val})
if m == Modifier.LESS_THAN:
return Q(**{f"{field}__lt": td_val})
if m == Modifier.BETWEEN and c.value2 is not None:
lo = timedelta(minutes=min(c.value, c.value2))
hi = timedelta(minutes=max(c.value, c.value2))
return Q(**{f"{field}__gte": lo, f"{field}__lte": hi})
if m == Modifier.NOT_BETWEEN and c.value2 is not None:
lo = timedelta(minutes=min(c.value, c.value2))
hi = timedelta(minutes=max(c.value, c.value2))
return Q(**{f"{field}__lt": lo}) | Q(**{f"{field}__gt": hi})
if m == Modifier.IS_NULL:
return Q(**{f"{field}": timedelta(0)})
if m == Modifier.NOT_NULL:
return ~Q(**{f"{field}": timedelta(0)})
return Q()
```
- [ ] **Step 2: Update existing `_playtime_to_q` to delegate to `_playtime_to_q_for_field`**
```python
@staticmethod
def _playtime_to_q(c: IntCriterion) -> Q:
return GameFilter._playtime_to_q_for_field(c, "playtime")
```
---
### Task 5: Add Exhaustive DB Tests for the Expanded and New Filters
**Files:**
- Modify: `tests/test_filters.py`
- [ ] **Step 1: Write DB-backed unit tests for the new filter behaviors**
Add comprehensive test cases inside `tests/test_filters.py` covering:
- New cross-entity filters (e.g. Platform -> Game -> Session -> Device chain).
- Session total vs manual vs calculated duration filters.
- Game session stats (`session_count`, `session_average`) and presence flags (`has_purchases`, `has_playevents`).
- Device, Platform, and PlayEvent specific filters.
```python
# Add test class at the end of tests/test_filters.py:
@pytest.mark.django_db
class TestExpandedFiltersAgainstDB:
def _setup_entities(self):
from games.models import Game, Platform, Device, Session, Purchase, PlayEvent
import datetime
from datetime import timedelta
# 1. Platform & Game
plat, _ = Platform.objects.get_or_create(name="Retro Console", group="Nintendo", icon="retro")
game, _ = Game.objects.get_or_create(name="Super Mario World", defaults={"platform": plat, "status": "f"})
game2, _ = Game.objects.get_or_create(name="Zelda", defaults={"platform": plat, "status": "u"})
# 2. Device & Session
dev, _ = Device.objects.get_or_create(name="Super Famicom", type="Console")
# Session 1: total 40 minutes (30 calc, 10 manual)
s1 = Session.objects.create(
game=game,
device=dev,
timestamp_start=datetime.datetime(2026, 6, 1, 12, 0, 0, tzinfo=datetime.timezone.utc),
timestamp_end=datetime.datetime(2026, 6, 1, 12, 30, 0, tzinfo=datetime.timezone.utc),
duration_manual=timedelta(minutes=10)
)
# 3. Purchase
pur = Purchase.objects.create(
platform=plat,
date_purchased=datetime.date(2026, 1, 1),
infinite=True,
price=49.99,
price_currency="JPY",
converted_price=45.00,
converted_currency="USD",
needs_price_update=False
)
pur.games.add(game)
# 4. PlayEvent
pe = PlayEvent.objects.create(
game=game,
started=datetime.date(2026, 6, 1),
ended=datetime.date(2026, 6, 2),
note="Completed 100%"
)
return {
"plat": plat,
"game": game,
"game2": game2,
"dev": dev,
"s1": s1,
"pur": pur,
"pe": pe
}
def test_device_filter_and_cross_entity(self):
from games.filters import DeviceFilter, SessionFilter
from games.models import Device
data = self._setup_entities()
# Find devices that have sessions on "Super Mario World"
df = DeviceFilter.from_json({
"session_filter": {
"game_filter": {
"name": {"value": "Super Mario World", "modifier": "EQUALS"}
}
}
})
results = list(Device.objects.filter(df.to_q()))
assert data["dev"] in results
def test_platform_filter_and_cross_entity(self):
from games.filters import PlatformFilter, GameFilter
from games.models import Platform
data = self._setup_entities()
# Find platforms with games that are finished
pf = PlatformFilter.from_json({
"game_filter": {
"status": {"value": ["f"], "modifier": "INCLUDES"}
}
})
results = list(Platform.objects.filter(pf.to_q()))
assert data["plat"] in results
def test_session_filter_duration_splits(self):
from games.filters import SessionFilter
from games.models import Session
data = self._setup_entities()
# Test duration_total_minutes equals 40
sf_tot = SessionFilter.from_json({
"duration_total_minutes": {"value": 40, "modifier": "EQUALS"}
})
assert Session.objects.filter(sf_tot.to_q()).count() == 1
# Test duration_manual_minutes equals 10
sf_man = SessionFilter.from_json({
"duration_manual_minutes": {"value": 10, "modifier": "EQUALS"}
})
assert Session.objects.filter(sf_man.to_q()).count() == 1
# Test duration_calculated_minutes equals 30
sf_calc = SessionFilter.from_json({
"duration_calculated_minutes": {"value": 30, "modifier": "EQUALS"}
})
assert Session.objects.filter(sf_calc.to_q()).count() == 1
def test_purchase_filter_new_fields(self):
from games.filters import PurchaseFilter
from games.models import Purchase
data = self._setup_entities()
pf = PurchaseFilter.from_json({
"infinite": {"value": True, "modifier": "EQUALS"},
"needs_price_update": {"value": False, "modifier": "EQUALS"},
"converted_currency": {"value": "USD", "modifier": "EQUALS"}
})
assert Purchase.objects.filter(pf.to_q()).count() == 1
def test_game_filter_stats_and_existence(self):
from games.filters import GameFilter
from games.models import Game
data = self._setup_entities()
# has_purchases = True
gf_pur = GameFilter.from_json({
"has_purchases": {"value": True, "modifier": "EQUALS"}
})
assert data["game"] in list(Game.objects.filter(gf_pur.to_q()))
assert data["game2"] not in list(Game.objects.filter(gf_pur.to_q()))
# session_count = 1
gf_cnt = GameFilter.from_json({
"session_count": {"value": 1, "modifier": "EQUALS"}
})
assert data["game"] in list(Game.objects.filter(gf_cnt.to_q()))
```
- [ ] **Step 2: Run all unit tests to confirm success**
Run: `pytest tests/test_filters.py -v`
Expected: ALL tests pass perfectly.
@@ -1,577 +0,0 @@
# Frontend Filters Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Implement a comprehensive frontend filter bar interface for all 6 list views (Games, Sessions, Purchases, Devices, Platforms, PlayEvents) with specific field controls, simple cross-entity toggles, and full JSON preset support.
**Architecture:** We will extend existing components in `common/components/filters.py` and implement new filter bars (`DeviceFilterBar`, `PlatformFilterBar`, `PlayEventFilterBar`). We will update the views in `games/views/` to parse standard filter JSON from `request.GET.get('filter')`, apply them to querysets, render the filter bars, and export them in `common/components/__init__.py`.
**Tech Stack:** Django, Python dataclasses, Pytest.
---
### Task 1: Update existing FilterBars in `common/components/filters.py`
**Files:**
- Modify: `common/components/filters.py`
- [ ] **Step 1: Add new fields to GameFilterBar**
Add checkboxes for `has_purchases`, `has_playevents` and RangeSliders for `session_count`, `session_average`.
```python
# Inside common/components/filters.py: FilterBar()
# Parse new values
has_purchases_value = _parse_bool(existing, "has_purchases")
has_playevents_value = _parse_bool(existing, "has_playevents")
session_count_min, session_count_max = _parse_range(existing, "session_count")
session_avg_min, session_avg_max = _parse_range(existing, "session_average")
# Add components to fields:
# 1. Under status and platform, add the checkboxes for purchases/playevents
# 2. Add RangeSliders for session count and average
```
Code change to apply in `FilterBar`:
```python
fields = [
Component(
tag_name="div",
attributes=[("class", _FILTER_GRID_CLASS)],
children=[
_filter_field(
"Status",
_enum_filter(
"status",
status_options,
status_choice,
nullable=not Game._meta.get_field("status").has_default(),
),
),
_filter_field(
"Platform",
_model_filter(
"platform",
platform_choice,
search_url="/api/platforms/search",
nullable=Game._meta.get_field("platform").null,
),
),
],
),
RangeSlider(
label="Year",
input_name_prefix="filter-year",
min_value=year_min,
max_value=year_max,
range_min=year_range_min,
range_max=year_range_max,
min_placeholder="e.g. 2020",
max_placeholder="e.g. 2024",
),
Component(
tag_name="div",
attributes=[("class", "flex items-end gap-4 mb-4")],
children=[
_filter_checkbox("filter-mastered", "Mastered", mastered_value),
_filter_checkbox("filter-has-purchases", "Has Purchases", has_purchases_value),
_filter_checkbox("filter-has-playevents", "Has Play Events", has_playevents_value),
],
),
RangeSlider(
label="Playtime",
input_name_prefix="filter-playtime",
min_value=playtime_min,
max_value=playtime_max,
range_min=0,
range_max=playtime_range_max,
step="1",
min_placeholder="e.g. 1",
max_placeholder="e.g. 100",
),
RangeSlider(
label="Session Count",
input_name_prefix="filter-session-count",
min_value=session_count_min,
max_value=session_count_max,
range_min=0,
range_max=100,
step="1",
min_placeholder="e.g. 1",
max_placeholder="e.g. 50",
),
RangeSlider(
label="Average Session Duration (mins)",
input_name_prefix="filter-session-average",
min_value=session_avg_min,
max_value=session_avg_max,
range_min=0,
range_max=240,
step="1",
min_placeholder="e.g. 10",
max_placeholder="e.g. 120",
),
]
```
- [ ] **Step 2: Update SessionFilterBar to support split duration fields**
Replace old `duration_minutes` RangeSlider with split total, manual, and calculated duration RangeSliders.
```python
# Inside common/components/filters.py: SessionFilterBar()
dur_tot_min, dur_tot_max = _parse_range(existing, "duration_total_minutes")
dur_man_min, dur_man_max = _parse_range(existing, "duration_manual_minutes")
dur_calc_min, dur_calc_max = _parse_range(existing, "duration_calculated_minutes")
# Inside fields array, replace RangeSlider "Duration" with:
RangeSlider(
label="Total Duration (mins)",
input_name_prefix="filter-duration-total-minutes",
min_value=dur_tot_min,
max_value=dur_tot_max,
range_min=0,
range_max=duration_range_max * 60, # Range sliders use minutes now
step="1",
min_placeholder="e.g. 30",
max_placeholder="e.g. 180",
),
RangeSlider(
label="Manual Duration (mins)",
input_name_prefix="filter-duration-manual-minutes",
min_value=dur_man_min,
max_value=dur_man_max,
range_min=0,
range_max=240,
step="1",
min_placeholder="e.g. 10",
max_placeholder="e.g. 120",
),
RangeSlider(
label="Calculated Duration (mins)",
input_name_prefix="filter-duration-calculated-minutes",
min_value=dur_calc_min,
max_value=dur_calc_max,
range_min=0,
range_max=duration_range_max * 60,
step="1",
min_placeholder="e.g. 30",
max_placeholder="e.g. 180",
),
```
- [ ] **Step 3: Update PurchaseFilterBar to support original and converted currencies and infinite flag**
Add Checkboxes `infinite`, `needs_price_update` and currency StringCriterion text field / Choice options.
```python
# Inside common/components/filters.py: PurchaseFilterBar()
infinite_value = _parse_bool(existing, "infinite")
needs_price_update_value = _parse_bool(existing, "needs_price_update")
price_currency_value = existing.get("price_currency", {}).get("value", "")
converted_currency_value = existing.get("converted_currency", {}).get("value", "")
# Expand fields component array with:
Component(
tag_name="div",
attributes=[("class", "flex gap-4 mb-4")],
children=[
_filter_checkbox("filter-refunded", "Refunded", is_refunded_value),
_filter_checkbox("filter-infinite", "Infinite", infinite_value),
_filter_checkbox("filter-needs-price-update", "Needs Price Update", needs_price_update_value),
],
),
```
Add currency text filters (as primitive `Input` controls for string criteria):
```python
Component(
tag_name="div",
attributes=[("class", _FILTER_GRID_CLASS)],
children=[
_filter_field(
"Original Currency",
Component(
tag_name="input",
attributes=[
("type", "text"),
("name", "filter-price_currency"),
("value", price_currency_value),
("placeholder", "e.g. USD, EUR"),
("class", "w-full rounded border-default-medium p-2 bg-neutral-secondary-medium text-body"),
],
),
),
_filter_field(
"Converted Currency",
Component(
tag_name="input",
attributes=[
("type", "text"),
("name", "filter-converted_currency"),
("value", converted_currency_value),
("placeholder", "e.g. USD, EUR"),
("class", "w-full rounded border-default-medium p-2 bg-neutral-secondary-medium text-body"),
],
),
),
],
),
```
---
### Task 2: Create New FilterBars in `common/components/filters.py`
**Files:**
- Modify: `common/components/filters.py`
- [ ] **Step 1: Implement DeviceFilterBar, PlatformFilterBar, and PlayEventFilterBar**
Append these three new filter bar components to `common/components/filters.py`:
```python
def DeviceFilterBar(
filter_json="", preset_list_url="", preset_save_url=""
) -> SafeText:
"""Collapsible filter bar for the Device list."""
from games.models import Device
existing = _filter_parse(filter_json)
type_options = Device.DEVICE_TYPES
type_choice = _filter_get_choice(existing, "type")
fields = [
Component(
tag_name="div",
attributes=[("class", _FILTER_GRID_CLASS)],
children=[
_filter_field(
"Device Type",
_enum_filter(
"type",
type_options,
type_choice,
nullable=True,
),
),
],
),
]
return _filter_bar(fields, filter_json, preset_list_url, preset_save_url)
def PlatformFilterBar(
filter_json="", preset_list_url="", preset_save_url=""
) -> SafeText:
"""Collapsible filter bar for the Platform list."""
existing = _filter_parse(filter_json)
name_value = existing.get("name", {}).get("value", "")
group_value = existing.get("group", {}).get("value", "")
fields = [
Component(
tag_name="div",
attributes=[("class", _FILTER_GRID_CLASS)],
children=[
_filter_field(
"Platform Name",
Component(
tag_name="input",
attributes=[
("type", "text"),
("name", "filter-name"),
("value", name_value),
("placeholder", "e.g. Nintendo Switch"),
("class", "w-full rounded border-default-medium p-2 bg-neutral-secondary-medium text-body"),
],
),
),
_filter_field(
"Platform Group",
Component(
tag_name="input",
attributes=[
("type", "text"),
("name", "filter-group"),
("value", group_value),
("placeholder", "e.g. Nintendo"),
("class", "w-full rounded border-default-medium p-2 bg-neutral-secondary-medium text-body"),
],
),
),
],
),
]
return _filter_bar(fields, filter_json, preset_list_url, preset_save_url)
def PlayEventFilterBar(
filter_json="", preset_list_url="", preset_save_url=""
) -> SafeText:
"""Collapsible filter bar for the PlayEvent list."""
from games.models import PlayEvent
existing = _filter_parse(filter_json)
game_choice = _filter_get_choice(existing, "game")
days_min, days_max = _parse_range(existing, "days_to_finish")
fields = [
Component(
tag_name="div",
attributes=[("class", _FILTER_GRID_CLASS)],
children=[
_filter_field(
"Game",
_model_filter(
"game",
game_choice,
search_url="/api/games/search",
nullable=False,
),
),
],
),
RangeSlider(
label="Days to Finish",
input_name_prefix="filter-days-to-finish",
min_value=days_min,
max_value=days_max,
range_min=0,
range_max=365,
step="1",
min_placeholder="e.g. 1",
max_placeholder="e.g. 30",
),
]
return _filter_bar(fields, filter_json, preset_list_url, preset_save_url)
```
- [ ] **Step 2: Export new FilterBars in `common/components/__init__.py`**
Modify: `common/components/__init__.py` to import and expose `DeviceFilterBar`, `PlatformFilterBar`, and `PlayEventFilterBar`.
```python
# Import section:
from common.components.filters import (
FilterBar,
PurchaseFilterBar,
SessionFilterBar,
DeviceFilterBar,
PlatformFilterBar,
PlayEventFilterBar,
)
# In __all__:
"FilterBar",
"PurchaseFilterBar",
"SessionFilterBar",
"DeviceFilterBar",
"PlatformFilterBar",
"PlayEventFilterBar",
```
---
### Task 3: Integrate FilterBars into `Device`, `Platform`, and `PlayEvent` views
**Files:**
- Modify: `games/views/device.py`
- Modify: `games/views/platform.py`
- Modify: `games/views/playevent.py`
- [ ] **Step 1: Integrate FilterBar in `list_devices` in `games/views/device.py`**
Import and parse the filter, apply to queryset, instantiate `DeviceFilterBar`, prepend it to the output page content.
```python
# At top of games/views/device.py:
from django.utils.safestring import mark_safe
from common.components import DeviceFilterBar, ModuleScript
from games.filters import parse_device_filter
# Inside list_devices(request):
devices = Device.objects.order_by("-created_at")
filter_json = request.GET.get("filter", "")
if filter_json:
device_filter = parse_device_filter(filter_json)
if device_filter is not None:
devices = devices.filter(device_filter.to_q())
devices, page_obj, elided_page_range = paginate(request, devices)
# ... create data dict ...
# Prepend the filter bar above table:
filter_bar = DeviceFilterBar(
filter_json=filter_json,
preset_list_url=reverse("games:list_presets") + "?mode=devices",
preset_save_url=reverse("games:save_preset") + "?mode=devices",
)
content = mark_safe(str(filter_bar) + str(content))
return render_page(
request,
content,
title="Manage devices",
scripts=ModuleScript("range_slider.js")
+ ModuleScript("search_select.js")
+ ModuleScript("filter_bar.js"),
)
```
- [ ] **Step 2: Integrate FilterBar in `list_platforms` in `games/views/platform.py`**
Import and parse the filter, apply to platform queryset, instantiate platform filter bar, prepend to page content.
```python
# At top of games/views/platform.py:
from django.utils.safestring import mark_safe
from common.components import PlatformFilterBar, ModuleScript
from games.filters import parse_platform_filter
# Inside list_platforms(request):
platforms = Platform.objects.order_by("name")
filter_json = request.GET.get("filter", "")
if filter_json:
platform_filter = parse_platform_filter(filter_json)
if platform_filter is not None:
platforms = platforms.filter(platform_filter.to_q())
platforms, page_obj, elided_page_range = paginate(request, platforms)
# ... create data dict ...
filter_bar = PlatformFilterBar(
filter_json=filter_json,
preset_list_url=reverse("games:list_presets") + "?mode=platforms",
preset_save_url=reverse("games:save_preset") + "?mode=platforms",
)
content = mark_safe(str(filter_bar) + str(content))
return render_page(
request,
content,
title="Manage platforms",
scripts=ModuleScript("range_slider.js")
+ ModuleScript("search_select.js")
+ ModuleScript("filter_bar.js"),
)
```
- [ ] **Step 3: Integrate FilterBar in `list_playevents` in `games/views/playevent.py`**
Import and parse the filter, apply to playevent queryset, instantiate playevent filter bar, prepend to page content.
```python
# At top of games/views/playevent.py:
from django.utils.safestring import mark_safe
from common.components import PlayEventFilterBar
from games.filters import parse_playevent_filter
# Inside list_playevents(request):
playevents = PlayEvent.objects.order_by("-created_at")
filter_json = request.GET.get("filter", "")
if filter_json:
playevent_filter = parse_playevent_filter(filter_json)
if playevent_filter is not None:
playevents = playevents.filter(playevent_filter.to_q())
playevents, page_obj, elided_page_range = paginate(request, playevents)
# ... create data ...
filter_bar = PlayEventFilterBar(
filter_json=filter_json,
preset_list_url=reverse("games:list_presets") + "?mode=playevents",
preset_save_url=reverse("games:save_preset") + "?mode=playevents",
)
content = mark_safe(str(filter_bar) + str(content))
return render_page(
request,
content,
title="Manage play events",
scripts=ModuleScript("range_slider.js")
+ ModuleScript("search_select.js")
+ ModuleScript("filter_bar.js"),
)
```
---
### Task 4: Support new preset modes in Preset View/Model
Ensure FilterPreset allows `devices` and `platforms` modes.
**Files:**
- Modify: `games/models.py`
- Modify: `games/views/filter_presets.py`
- [ ] **Step 1: Expand FilterPreset mode choices**
Verify or expand `MODE_CHOICES` inside `FilterPreset` model in `games/models.py`.
```python
# Inside FilterPreset class:
MODE_CHOICES = [
("games", "Games"),
("sessions", "Sessions"),
("purchases", "Purchases"),
("playevents", "Play Events"),
("devices", "Devices"),
("platforms", "Platforms"),
]
```
---
### Task 5: Add Render Tests for new FilterBars
**Files:**
- Modify: `tests/test_filter_bars.py`
- [ ] **Step 1: Write tests to verify new FilterBars render correctly**
Add test cases in `tests/test_filter_bars.py`:
```python
def test_device_filter_bar(self):
from common.components import DeviceFilterBar
html = str(
DeviceFilterBar(
filter_json="",
preset_list_url="/presets/devices/list",
preset_save_url="/presets/devices/save",
)
)
self._assert_shell(html, "/presets/devices/list", "/presets/devices/save")
def test_platform_filter_bar(self):
from common.components import PlatformFilterBar
html = str(
PlatformFilterBar(
filter_json="",
preset_list_url="/presets/platforms/list",
preset_save_url="/presets/platforms/save",
)
)
self._assert_shell(html, "/presets/platforms/list", "/presets/platforms/save")
def test_playevent_filter_bar(self):
from common.components import PlayEventFilterBar
html = str(
PlayEventFilterBar(
filter_json="",
preset_list_url="/presets/playevents/list",
preset_save_url="/presets/playevents/save",
)
)
self._assert_shell(html, "/presets/playevents/list", "/presets/playevents/save")
```
- [ ] **Step 2: Run all test suites to confirm complete success**
Run: `pytest tests/test_filter_bars.py -v`
Expected: ALL filter bar render tests pass.
@@ -1,177 +0,0 @@
# Unify Form Checkboxes Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Unify all Django form checkboxes across the codebase by routing them through our new Python `Checkbox` primitive.
**Architecture:**
1. Modify `Checkbox` and `Radio` primitives in `common/components/primitives.py` to support headless (label-less) rendering when `label` is `None`, so they can be injected into Django's native `form.as_div()` rendering without duplicating labels.
2. Create a `PrimitiveCheckboxWidget` in `games/forms.py` that extends `forms.CheckboxInput` but renders using our `Checkbox` Python component.
3. Create a `PrimitiveWidgetsMixin` in `games/forms.py` that automatically applies the `PrimitiveCheckboxWidget` to all `forms.BooleanField` instances in a form. Add this mixin to all ModelForms.
**Tech Stack:** Python, Django Forms, HTML.
---
### Task 1: Update Primitives for Headless Rendering
**Files:**
- Modify: `common/components/primitives.py`
- Modify: `tests/test_components.py`
- [ ] **Step 1: Write a failing test for headless rendering**
In `tests/test_components.py`, add a test to `ComponentPrimitivesTest`:
```python
def test_checkbox_headless(self):
html = Checkbox(name="test-headless", label=None, checked=True)
self.assertNotIn('<label', html)
self.assertIn('<input', html)
self.assertIn('type="checkbox"', html)
self.assertIn('name="test-headless"', html)
```
- [ ] **Step 2: Run test to verify it fails**
Run: `pytest tests/test_components.py -k test_checkbox_headless`
Expected: Fail because `Checkbox` currently requires `label` as a `str` and always renders a `Label` wrapper.
- [ ] **Step 3: Update `Checkbox` and `Radio` in `common/components/primitives.py`**
Update the function signatures to accept `label: str | None = None` and selectively return only the `Input` if `label` is missing.
```python
def Checkbox(
name: str,
label: str | None = None,
checked: bool = False,
value: str = "1",
attributes: list[HTMLAttribute] | None = None,
) -> SafeText:
"""A filter-agnostic Checkbox component."""
attributes = attributes or []
input_attrs = [
("name", name),
("value", value),
("class", "rounded border-default-medium bg-neutral-secondary-medium text-brand focus:ring-brand"),
] + attributes
if checked:
input_attrs.append(("checked", "true"))
input_el = Input(type="checkbox", attributes=input_attrs)
if label is None:
return input_el
return Label(
attributes=[("class", "flex items-center gap-2 text-sm text-heading cursor-pointer")],
children=[input_el, label],
)
def Radio(
name: str,
label: str | None = None,
checked: bool = False,
value: str = "",
attributes: list[HTMLAttribute] | None = None,
) -> SafeText:
"""A filter-agnostic Radio component."""
attributes = attributes or []
input_attrs = [
("name", name),
("value", value),
("class", "rounded-full border-default-medium bg-neutral-secondary-medium text-brand focus:ring-brand"),
] + attributes
if checked:
input_attrs.append(("checked", "true"))
input_el = Input(type="radio", attributes=input_attrs)
if label is None:
return input_el
return Label(
attributes=[("class", "flex items-center gap-1.5 text-sm text-heading cursor-pointer")],
children=[input_el, label],
)
```
- [ ] **Step 4: Run test to verify it passes**
Run: `pytest tests/test_components.py -k ComponentPrimitivesTest`
Expected: PASS
- [ ] **Step 5: Commit**
Run:
```bash
git add common/components/primitives.py tests/test_components.py
git commit -m "refactor: allow Checkbox and Radio primitives to render headlessly without labels"
```
---
### Task 2: Create Django Widget Adapter and Mixin
**Files:**
- Modify: `games/forms.py`
- [ ] **Step 1: Write the Widget and Mixin implementations**
At the top of `games/forms.py`, import `Checkbox` and implement `PrimitiveCheckboxWidget` and `PrimitiveWidgetsMixin`.
```python
from common.components.primitives import Checkbox
class PrimitiveCheckboxWidget(forms.CheckboxInput):
"""Adapts Django's CheckboxInput to use our Checkbox component."""
def render(self, name, value, attrs=None, renderer=None):
final_attrs = self.build_attrs(self.attrs, attrs)
checked = self.check_test(value)
attributes = [(k, str(v)) for k, v in final_attrs.items() if k not in ("type", "name", "value", "checked")]
# Django uses boolean values differently for checkboxes, we omit value if empty
return str(Checkbox(
name=name,
label=None,
checked=checked,
value=str(value) if value else "1",
attributes=attributes
))
class PrimitiveWidgetsMixin:
"""Automatically applies primitive custom widgets to native Django form fields."""
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for field_name, field in self.fields.items():
if isinstance(field, forms.BooleanField):
field.widget = PrimitiveCheckboxWidget()
# Maintain the field's explicit required status (usually False for booleans)
```
- [ ] **Step 2: Apply the Mixin to all Forms**
In `games/forms.py`, update all the ModelForm classes to inherit from `PrimitiveWidgetsMixin` as the **first** base class (before `forms.ModelForm`).
Example:
```python
class SessionForm(PrimitiveWidgetsMixin, forms.ModelForm):
# ...
class PurchaseForm(PrimitiveWidgetsMixin, forms.ModelForm):
# ...
class GameForm(PrimitiveWidgetsMixin, forms.ModelForm):
# ...
class PlatformForm(PrimitiveWidgetsMixin, forms.ModelForm):
# ...
class DeviceForm(PrimitiveWidgetsMixin, forms.ModelForm):
# ...
class PlayEventForm(PrimitiveWidgetsMixin, forms.ModelForm):
# ...
class GameStatusChangeForm(PrimitiveWidgetsMixin, forms.ModelForm):
# ...
```
- [ ] **Step 3: Test Django Form Rendering**
Run the full test suite to ensure forms still validate properly and render without error.
Run: `pytest`
Expected: PASS
- [ ] **Step 4: Commit**
Run:
```bash
git add games/forms.py
git commit -m "feat: replace all form BooleanFields with PrimitiveCheckboxWidget via mixin"
```
File diff suppressed because it is too large Load Diff
@@ -1,595 +0,0 @@
# Issue #53 — Rebuild session row fragment via shared builder — Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Make the htmx session-row fragment reuse the same row builder as the list table, and give the finish/reset actions a real in-place row swap with the navbar playtime totals kept correct via an out-of-band swap.
**Architecture:** Extract the session row's content into one `session_row_data()` dict builder used by both `list_sessions` and a thin `session_row()` Node wrapper (`TableRow(session_row_data(...))`). The navbar's playtime `<li>` becomes a `NavbarPlaytime` component with a stable id so endpoints can return it `hx-swap-oob`. `end_session`/`reset_session_start` return `Fragment(row, NavbarPlaytime(oob=True))`; clone keeps `HX-Refresh`.
**Tech Stack:** Django 6, the in-house Python component system (`common/components`), HTMX, pytest / pytest-django, Playwright (e2e).
## Global Constraints
- Build UI with Python components from `common.components`; never raw HTML strings or Django templates. Builders return `Node`; stringify only at the `HttpResponse` boundary (Django str-encodes content). Do **not** return `SafeText`/`mark_safe` from row builders.
- Never write to `GeneratedField`s (`duration_calculated`, `duration_total`, `days_to_finish`).
- Name variables with complete words (`device_list`, `csrf_token`, `session`, not abbreviations).
- Name compound types explicitly: the row dict is a `TypedDict` (`SessionRowData`).
- Signals handle playtime recalculation — do not recompute `Game.playtime` by hand.
- Run tests with `uv run --with pytest-django pytest`. A bare `pytest` also collects `e2e/` (needs a browser); scope unit/view runs to `tests/...` paths.
- Spec: `docs/superpowers/specs/2026-06-20-issue-53-session-row-fragment-rebuild-design.md`.
---
## File Structure
- `games/views/session.py` — add `SessionRowData` (TypedDict), `session_row_data()`, `session_row()`; refactor `list_sessions` to use them; delete `_session_row_fragment()`; rewire `end_session`, `reset_session_start`, `new_session_from_existing_session`.
- `common/layout.py` — add `NavbarPlaytime()`; embed it inside `Navbar()`.
- `tests/test_session_row.py` — new: unit tests for `session_row_data` / `session_row`.
- `tests/test_navbar_playtime.py` — new: unit tests for `NavbarPlaytime`.
- `tests/test_session_endpoints.py` — new: view tests for the three rewired endpoints.
- `e2e/test_session_inplace_swap_e2e.py` — new: in-place finish swap + navbar update.
---
### Task 1: Extract `session_row_data` + `session_row` (canonical row builder)
**Files:**
- Modify: `games/views/session.py` (the `data["rows"]` comprehension at ~line 126-190, and the `list_sessions` body)
- Test: `tests/test_session_row.py` (create)
**Interfaces:**
- Produces:
- `class SessionRowData(TypedDict)` with keys `row_id: str`, `hx_trigger: str`, `hx_get: str`, `hx_select: str`, `hx_swap: str`, `cell_data: list[Node]`.
- `session_row_data(session: Session, device_list, csrf_token: str) -> SessionRowData` — the 6-cell row dict (Name, Date, Duration, Device, Created, Actions) with `row_id="session-row-{pk}"` and the device-change self-refresh hx attrs. For a running session (`timestamp_end is None`) the Actions `ButtonGroup` includes Finish and Reset buttons wired for htmx row swap (`hx_get` to the end/reset URL, `hx_target=f"#session-row-{pk}"`, `hx_swap="outerHTML"`).
- `session_row(session: Session, device_list, csrf_token: str) -> Node``TableRow(session_row_data(...))`.
- [ ] **Step 1: Write the failing test**
```python
# tests/test_session_row.py
import pytest
from django.utils import timezone
from games.models import Device, Game, Platform, Session
from games.views.session import session_row, session_row_data
@pytest.fixture
def running_session(db):
platform = Platform.objects.create(name="PC")
game = Game.objects.create(name="Celeste", platform=platform)
device = Device.objects.create(name="Desktop")
return Session.objects.create(
game=game, device=device, timestamp_start=timezone.now()
)
def test_session_row_data_shape(running_session):
device_list = Device.objects.order_by("name")
data = session_row_data(running_session, device_list, "tok")
assert data["row_id"] == f"session-row-{running_session.pk}"
assert len(data["cell_data"]) == 6
assert data["hx_select"] == f"#session-row-{running_session.pk}"
def test_session_row_renders_id_and_six_cells(running_session):
device_list = Device.objects.order_by("name")
html = str(session_row(running_session, device_list, "tok"))
assert f'id="session-row-{running_session.pk}"' in html
assert html.count("<td") + html.count("<th") == 6
def test_running_session_finish_button_targets_row(running_session):
device_list = Device.objects.order_by("name")
html = str(session_row(running_session, device_list, "tok"))
assert f'hx-target="#session-row-{running_session.pk}"' in html
assert 'hx-swap="outerHTML"' in html
```
- [ ] **Step 2: Run test to verify it fails**
Run: `uv run --with pytest-django pytest tests/test_session_row.py -v`
Expected: FAIL with `ImportError: cannot import name 'session_row'` (and `session_row_data`).
- [ ] **Step 3: Write minimal implementation**
In `games/views/session.py`, add `TypedDict` to the `typing` import (`from typing import Any, TypedDict`) and add `from common.components import Fragment` is already present. Add the type + builders above `list_sessions`:
```python
class SessionRowData(TypedDict):
row_id: str
hx_trigger: str
hx_get: str
hx_select: str
hx_swap: str
cell_data: list[Node]
def session_row_data(
session: Session, device_list, csrf_token: str
) -> SessionRowData:
"""Canonical session-list row. Single source of truth shared by
list_sessions and the htmx finish/reset fragments."""
row_selector = f"#session-row-{session.pk}"
end_url = reverse("games:list_sessions_end_session", args=[session.pk])
reset_url = reverse(
"games:list_sessions_reset_session_start", args=[session.pk]
)
actions = ButtonGroup(
[
{
"href": end_url,
"hx_get": end_url,
"hx_target": row_selector,
"hx_swap": "outerHTML",
"slot": Icon("end"),
"title": "Finish session now",
"color": "green",
}
if session.timestamp_end is None
else {},
{
"href": reset_url,
"hx_get": reset_url,
"hx_target": row_selector,
"hx_swap": "outerHTML",
"hx_confirm": "Reset this session's start time to now?",
"slot": Icon("reset"),
"title": "Reset start to now",
"color": "gray",
}
if session.timestamp_end is None
else {},
{
"href": reverse("games:edit_session", args=[session.pk]),
"slot": Icon("edit"),
"title": "Edit",
},
{
"href": reverse("games:delete_session", args=[session.pk]),
"slot": Icon("delete"),
"title": "Delete",
"color": "red",
},
]
)
return SessionRowData(
row_id=f"session-row-{session.pk}",
hx_trigger="device-changed from:body",
hx_get="",
hx_select=row_selector,
hx_swap="outerHTML",
cell_data=[
NameWithIcon(session=session),
f"{local_strftime(session.timestamp_start)}"
f"{f' — {local_strftime(session.timestamp_end, timeformat)}' if session.timestamp_end else ''}",
session.duration_formatted_with_mark(),
SessionDeviceSelector(session, device_list, csrf_token),
session.created_at.strftime(dateformat),
actions,
],
)
def session_row(session: Session, device_list, csrf_token: str) -> Node:
"""The single-session <tr> node, rendered through the same TableRow
path the list table uses."""
return TableRow(session_row_data(session, device_list, csrf_token))
```
Add `TableRow` to the `from common.components import (...)` block (it currently imports `paginated_table_content` but not `TableRow`).
- [ ] **Step 4: Run test to verify it passes**
Run: `uv run --with pytest-django pytest tests/test_session_row.py -v`
Expected: PASS (3 tests).
- [ ] **Step 5: Refactor `list_sessions` to consume the builder**
Replace the inline `"rows": [ {...} for session in sessions]` in the `data` dict with the builder call. First compute the token once near the top of `list_sessions` (after `device_list`): add `csrf_token = get_token(request)`. Then:
```python
"rows": [
session_row_data(session, device_list, csrf_token)
for session in sessions
],
```
Delete the now-removed inline row dict (the whole `{ "row_id": ..., ... }` comprehension body, ~line 127-189). Leave `header_action`/`columns` untouched.
- [ ] **Step 6: Run the broader suite to confirm no regression**
Run: `uv run --with pytest-django pytest tests/test_session_row.py tests/test_paths_return_200.py tests/test_rendered_pages.py -v`
Expected: PASS.
- [ ] **Step 7: Commit**
```bash
git add games/views/session.py tests/test_session_row.py
git commit -m "refactor(session): extract canonical session_row_data builder
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>"
```
---
### Task 2: `NavbarPlaytime` component (OOB-swappable)
**Files:**
- Modify: `common/layout.py` (`Navbar()` at ~line 190-231)
- Test: `tests/test_navbar_playtime.py` (create)
**Interfaces:**
- Produces: `NavbarPlaytime(today_played: str, last_7_played: str, *, oob: bool = False) -> Node` — an `<li id="navbar-playtime">` with the "Today · Last 7 days" label and values; when `oob=True` it carries `hx-swap-oob="true"`. `Navbar()` embeds `NavbarPlaytime(today_played, last_7_played)` in place of the inline `<li>`.
- [ ] **Step 1: Write the failing test**
```python
# tests/test_navbar_playtime.py
from common.layout import NavbarPlaytime
def test_navbar_playtime_has_stable_id_and_values():
html = str(NavbarPlaytime("1 h 00 m", "7 h 00 m"))
assert 'id="navbar-playtime"' in html
assert "1 h 00 m" in html
assert "7 h 00 m" in html
assert "hx-swap-oob" not in html
def test_navbar_playtime_oob_flag():
html = str(NavbarPlaytime("1 h 00 m", "7 h 00 m", oob=True))
assert 'id="navbar-playtime"' in html
assert 'hx-swap-oob="true"' in html
```
- [ ] **Step 2: Run test to verify it fails**
Run: `uv run --with pytest-django pytest tests/test_navbar_playtime.py -v`
Expected: FAIL with `ImportError: cannot import name 'NavbarPlaytime'`.
- [ ] **Step 3: Write minimal implementation**
In `common/layout.py`, add above `Navbar()`:
```python
def NavbarPlaytime(
today_played: str, last_7_played: str, *, oob: bool = False
) -> "Node":
"""The navbar 'Today · Last 7 days' totals. Carries a stable id so
htmx endpoints can refresh it out-of-band after a session change."""
from common.components import Safe
oob_attr = ' hx-swap-oob="true"' if oob else ""
return Safe(
f'<li id="navbar-playtime"{oob_attr} '
'class="dark:text-white flex flex-col items-center text-xs">'
'<span class="flex uppercase gap-1">Today'
'<span class="dark:text-gray-400">·</span>Last 7 days</span>'
'<span class="flex items-center gap-1">'
f'{today_played}<span class="dark:text-gray-400">·</span>'
f"{last_7_played}</span></li>"
)
```
- [ ] **Step 4: Run test to verify it passes**
Run: `uv run --with pytest-django pytest tests/test_navbar_playtime.py -v`
Expected: PASS (2 tests).
- [ ] **Step 5: Embed it inside `Navbar()`**
In the `Navbar()` `Safe(f"""...""")` markup, replace the inline `<li>` block:
```html
<li class="dark:text-white flex flex-col items-center text-xs">
<span class="flex uppercase gap-1">Today<span class="dark:text-gray-400">·</span>Last 7 days</span>
<span class="flex items-center gap-1">{today_played}<span class="dark:text-gray-400">·</span>{last_7_played}</span>
</li>
```
with:
```python
{NavbarPlaytime(today_played, last_7_played)}
```
(The surrounding string is already an f-string, so the `{NavbarPlaytime(...)}` call interpolates its rendered HTML.)
- [ ] **Step 6: Run pages tests to confirm navbar still renders**
Run: `uv run --with pytest-django pytest tests/test_navbar_playtime.py tests/test_rendered_pages.py tests/test_paths_return_200.py -v`
Expected: PASS. The navbar still shows the totals (now via the component).
- [ ] **Step 7: Commit**
```bash
git add common/layout.py tests/test_navbar_playtime.py
git commit -m "feat(layout): extract NavbarPlaytime as OOB-swappable component
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>"
```
---
### Task 3: Rewire endpoints (in-place swap for end/reset, HX-Refresh for clone)
**Files:**
- Modify: `games/views/session.py` (`_session_row_fragment` delete; `end_session`, `reset_session_start`, `new_session_from_existing_session`)
- Test: `tests/test_session_endpoints.py` (create)
**Interfaces:**
- Consumes: `session_row` (Task 1), `NavbarPlaytime` (Task 2), `model_counts` (`games/views/general.py`).
- Produces: rewired views. `end_session`/`reset_session_start` htmx → `HttpResponse(str(Fragment(session_row(...), NavbarPlaytime(..., oob=True))))`; `new_session_from_existing_session` htmx → `HttpResponse(status=204)` with `HX-Refresh: true`.
- [ ] **Step 1: Write the failing test**
```python
# tests/test_session_endpoints.py
import pytest
from django.urls import reverse
from django.utils import timezone
from games.models import Device, Game, Platform, Session
@pytest.fixture
def auth_client(client, django_user_model):
user = django_user_model.objects.create_user(username="u", password="p")
client.force_login(user)
return client
@pytest.fixture
def running_session(db):
platform = Platform.objects.create(name="PC")
game = Game.objects.create(name="Hades", platform=platform)
device = Device.objects.create(name="Deck")
return Session.objects.create(
game=game, device=device, timestamp_start=timezone.now()
)
def test_end_session_htmx_returns_row_and_oob_navbar(auth_client, running_session):
url = reverse("games:list_sessions_end_session", args=[running_session.pk])
response = auth_client.get(url, HTTP_HX_REQUEST="true")
body = response.content.decode()
assert response.status_code == 200
assert f'id="session-row-{running_session.pk}"' in body
assert 'id="navbar-playtime"' in body
assert 'hx-swap-oob="true"' in body
running_session.refresh_from_db()
assert running_session.timestamp_end is not None
def test_reset_session_start_htmx_returns_row_no_refresh_header(
auth_client, running_session
):
original_start = running_session.timestamp_start
url = reverse(
"games:list_sessions_reset_session_start", args=[running_session.pk]
)
response = auth_client.get(url, HTTP_HX_REQUEST="true")
body = response.content.decode()
assert response.status_code == 200
assert f'id="session-row-{running_session.pk}"' in body
assert 'id="navbar-playtime"' in body
assert "HX-Refresh" not in response.headers
running_session.refresh_from_db()
assert running_session.timestamp_start > original_start
def test_clone_htmx_returns_hx_refresh(auth_client, running_session):
url = reverse(
"games:list_sessions_start_session_from_session",
args=[running_session.pk],
)
before = Session.objects.count()
response = auth_client.get(url, HTTP_HX_REQUEST="true")
assert response.status_code == 204
assert response.headers.get("HX-Refresh") == "true"
assert Session.objects.count() == before + 1
def test_end_session_non_htmx_redirects(auth_client, running_session):
url = reverse("games:list_sessions_end_session", args=[running_session.pk])
response = auth_client.get(url)
assert response.status_code == 302
assert response.url == reverse("games:list_sessions")
```
- [ ] **Step 2: Run test to verify it fails**
Run: `uv run --with pytest-django pytest tests/test_session_endpoints.py -v`
Expected: FAIL — `end`/`reset` currently return the old fragment / `204+HX-Refresh`; clone returns the old fragment (200, not 204).
- [ ] **Step 3: Delete `_session_row_fragment` and rewire the views**
In `games/views/session.py`:
1. Delete the entire `_session_row_fragment(session)` function (the hand-built 4-column `Tr`).
2. Add imports: at top, `from games.views.general import model_counts`. Ensure `Fragment` and `Node` are imported from `common.components` (they already are). Add `from common.layout import NavbarPlaytime` (the file already imports `render_page` from `common.layout`).
3. Add a small helper near the endpoints:
```python
def _row_with_navbar(request: HttpRequest, session: Session) -> HttpResponse:
device_list = Device.objects.order_by("name")
counts = model_counts(request)
fragment = Fragment(
session_row(session, device_list, get_token(request)),
NavbarPlaytime(
counts["today_played"], counts["last_7_played"], oob=True
),
)
return HttpResponse(str(fragment))
```
4. Rewrite the endpoints:
```python
@login_required
def new_session_from_existing_session(
request: HttpRequest, session_id: int
) -> HttpResponse:
clone_session_by_id(session_id)
if request.htmx:
# Clone adds a new row whose position depends on sort + pagination,
# which a single-row swap cannot place — refresh the list instead.
response = HttpResponse(status=204)
response["HX-Refresh"] = "true"
return response
return redirect("games:list_sessions")
@login_required
def end_session(request: HttpRequest, session_id: int) -> HttpResponse:
session = get_object_or_404(Session, id=session_id)
session.timestamp_end = timezone.now()
session.save()
if request.htmx:
return _row_with_navbar(request, session)
return redirect("games:list_sessions")
@login_required
def reset_session_start(request: HttpRequest, session_id: int) -> HttpResponse:
session = get_object_or_404(Session, id=session_id)
session.timestamp_start = timezone.now()
session.save()
if request.htmx:
return _row_with_navbar(request, session)
return redirect("games:list_sessions")
```
Note: `clone_session_by_id` already returns the clone; we drop the unused local. Check for an import cycle when adding `from games.views.general import model_counts` at module top — if `general.py` imports from `session.py` it will cycle; in that case import `model_counts` lazily inside `_row_with_navbar` instead.
- [ ] **Step 4: Run test to verify it passes**
Run: `uv run --with pytest-django pytest tests/test_session_endpoints.py -v`
Expected: PASS (4 tests).
- [ ] **Step 5: Switch the game-detail "Finish" button off the htmx path it never used**
Confirm `games/views/game.py` `_sessions_section` still uses plain `href` for its end button (it does, and it stays full-nav per spec / #55). No change needed — just verify by reading; if it has any `hx_get` to `view_game_end_session`, leave it, since `end_session` still redirects for non-list contexts. (The game-detail button is `href`-only, so it triggers the non-htmx redirect branch.)
- [ ] **Step 6: Run the full unit/view suite**
Run: `uv run --with pytest-django pytest tests/ -v`
Expected: PASS (no regressions; old fragment tests, if any, are gone with the function).
- [ ] **Step 7: Commit**
```bash
git add games/views/session.py tests/test_session_endpoints.py
git commit -m "feat(session): in-place row swap for finish/reset with OOB navbar
Delete stale _session_row_fragment; end_session and reset_session_start
return the canonical row plus an OOB navbar-playtime fragment. Clone keeps
HX-Refresh since it changes row count. Fixes #53.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>"
```
---
### Task 4: E2E — in-place finish swap + navbar update
**Files:**
- Test: `e2e/test_session_inplace_swap_e2e.py` (create)
**Interfaces:**
- Consumes: the rewired list UI (Tasks 1-3). No production code changes.
- [ ] **Step 1: Write the test**
Follow the existing `e2e/` patterns (`live_server`, login helper, Playwright `page`). Inspect `e2e/conftest.py` and an existing test (e.g. `e2e/test_widgets_e2e.py`) for the project's login fixture and `page.goto(live_server.url + ...)` style, and mirror them.
```python
# e2e/test_session_inplace_swap_e2e.py
from django.urls import reverse
from django.utils import timezone
from games.models import Device, Game, Platform, Session
def test_finish_session_swaps_row_in_place(live_server, page, logged_in):
platform = Platform.objects.create(name="PC")
game = Game.objects.create(name="Tunic", platform=platform)
device = Device.objects.create(name="Desktop")
session = Session.objects.create(
game=game, device=device, timestamp_start=timezone.now()
)
page.goto(live_server.url + reverse("games:list_sessions"))
row = page.locator(f"#session-row-{session.pk}")
row.get_by_title("Finish session now").click()
# Row updates in place (still present, now shows an end time → em dash).
page.wait_for_selector(f"#session-row-{session.pk}")
assert "—" in page.locator(f"#session-row-{session.pk}").inner_text()
session.refresh_from_db()
assert session.timestamp_end is not None
```
If the repo has no shared `logged_in` fixture, replicate the login step used by the other e2e tests inline (they all authenticate the same way — copy that fixture/usage).
- [ ] **Step 2: Build TS assets (custom elements served fresh) and run the test**
Run:
```bash
make ts
uv run --with pytest-django --with pytest-playwright pytest e2e/test_session_inplace_swap_e2e.py -v
```
Expected: PASS. (Requires a Chromium; `e2e/conftest.py` prefers a system Chrome, else run `uv run playwright install chromium` once.)
- [ ] **Step 3: Commit**
```bash
git add e2e/test_session_inplace_swap_e2e.py
git commit -m "test(e2e): in-place session-row finish swap
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>"
```
---
### Task 5: Full check + cleanup
**Files:** none (verification).
- [ ] **Step 1: Lint + format + tests aggregate**
Run: `make check`
Expected: PASS (ruff lint, format check, ts-check, tests). Fix any unused imports left in `session.py` — particularly `SafeText`, `mark_safe`, `date_filter`, `Span`, `Tr`, `Td` if the deleted `_session_row_fragment` was their only user. Verify with `make lint` and remove the dead imports.
- [ ] **Step 2: Manual smoke (optional but recommended)**
Run `make dev`, open the session list, finish a running session: the row should update in place (end time appears, duration fills) and the navbar "Today · Last 7 days" totals change, with no full-page reload. Reset start on a running session: start time jumps to now, duration resets, navbar updates. Clone ("play" button): list reloads.
- [ ] **Step 3: Commit any cleanup**
```bash
git add -A
git commit -m "chore(session): drop imports orphaned by fragment removal
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>"
```
---
## Self-Review
**Spec coverage:**
- Canonical builder (`session_row_data` + `session_row`, both Node) → Task 1. ✓
- `NavbarPlaytime` OOB component → Task 2. ✓
- end/reset in-place swap + OOB navbar; reset drops 204+HX-Refresh → Task 3. ✓
- clone stays HX-Refresh → Task 3 (with documented reason). ✓
- Return `Node`, stringify at HttpResponse boundary → Tasks 1/3 (`HttpResponse(str(Fragment(...)))`). ✓
- List buttons switch to htmx row swap → Task 1 (Finish/Reset in `session_row_data`). ✓
- Delete dead `_session_row_fragment` + old Tr → Task 3. ✓
- game-detail out of scope (#55) → Task 3 Step 5 (verify, no change). ✓
- Tests: unit (row, navbar), view (endpoints), e2e (in-place swap) → Tasks 1-4. ✓
**Placeholder scan:** No TBD/TODO; all steps carry concrete code or commands. The one judgement call (import-cycle on `model_counts`) is given an explicit fallback (lazy import). ✓
**Type consistency:** `session_row_data(session, device_list, csrf_token) -> SessionRowData` and `session_row(session, device_list, csrf_token) -> Node` used identically in Task 1, Task 3, and tests. `NavbarPlaytime(today_played, last_7_played, *, oob=False)` used consistently in Task 2 and Task 3. `_row_with_navbar(request, session) -> HttpResponse` used in both end/reset. ✓
@@ -1,780 +0,0 @@
# List-view `sort` query param Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Make `list_games`, `list_sessions`, `list_purchases` honor a signed comma-list `?sort=` query param (e.g. `?sort=-playtime,name`), with every visible column sortable plus stats-parity aggregates (playtime, finish date).
**Architecture:** A new `games/sorting.py` defines a per-model whitelist (`SortKey → SortSpec`), a pure parser (`parse_sort_terms`), and an applier (`apply_sort`) that annotates-then-orders and reports unknown keys. Each list view replaces its hardcoded `order_by(...)` with `apply_sort(...)`, eager-loads row relations, and turns unknown keys into warning toasts. Backend only — clickable-header UI is #73.
**Tech Stack:** Django 6, Python 3.13, pytest + pytest-django. Components/views per `CLAUDE.md`.
## Global Constraints
- **Never write to `GeneratedField`s** (`duration_calculated`, `duration_total`, `price_per_game`, `days_to_finish`) — they are read/order-only.
- **Complete-word identifiers** (Python + JS): `descending` not `desc_flag`, `queryset` not `qs` in real code.
- **Cross-relation sorts use annotated aggregates** (`Sum`/`Max`/`Min`) — never bare `order_by("relation__field")` for to-many relations (avoids row duplication). To-one relations (`game__sort_name`, `device__name`) may be ordered directly.
- **Name primitive roles** with PEP 695 transparent aliases (`type SortKey = str`), per the new `CLAUDE.md` convention.
- **`sorting.py` stays HTTP-free** — it reports unknown keys; the view emits `messages.warning`.
- Tests run with `uv run --with pytest-django pytest`.
- Spec: `docs/superpowers/specs/2026-06-21-list-view-sort-param-design.md`.
---
## File Structure
- **Create** `games/sorting.py` — all sorting logic (aliases, `SortSpec`, `SortTerm`, `ParsedSort`, `SortResult`, the three `*_SORTS` maps + `*_DEFAULT_SORT`, `parse_sort_terms`, `apply_sort`, `parse_find_filter`).
- **Create** `tests/test_sorting.py` — unit + integration tests.
- **Modify** `games/views/game.py` — wire sort into `list_games` + `select_related`.
- **Modify** `games/views/session.py` — wire sort into `list_sessions` + `select_related`.
- **Modify** `games/views/purchase.py` — wire sort into `list_purchases` + `prefetch_related`.
---
## Task 1: `sorting.py` core types + `parse_sort_terms`
**Files:**
- Create: `games/sorting.py`
- Test: `tests/test_sorting.py`
**Interfaces:**
- Consumes: nothing.
- Produces:
- `type SortKey = str`, `type SortString = str`, `type AnnotationName = str`, `type OrderField = str`, `type Annotations = dict[AnnotationName, Aggregate]`
- `SortSpec(expression: OrderField, annotate: Annotations | None = None)` (frozen dataclass)
- `SortTerm(NamedTuple)`: `key: SortKey`, `descending: bool`
- `type SortMap = dict[SortKey, SortSpec]`
- `ParsedSort(NamedTuple)`: `terms: list[SortTerm]`, `unknown: list[SortKey]`
- `parse_sort_terms(raw: SortString, sort_map: SortMap) -> ParsedSort`
- [ ] **Step 1: Write the failing test**
```python
# tests/test_sorting.py
"""Tests for the list-view sorting system (games/sorting.py)."""
from games.sorting import SortSpec, SortTerm, parse_sort_terms
# A minimal map; parse_sort_terms only checks key membership, not spec internals.
SAMPLE_MAP = {"name": SortSpec("name"), "date": SortSpec("created_at")}
class TestParseSortTerms:
def test_bare_key_is_ascending(self):
parsed = parse_sort_terms("name", SAMPLE_MAP)
assert parsed.terms == [SortTerm("name", False)]
assert parsed.unknown == []
def test_dash_prefix_is_descending(self):
parsed = parse_sort_terms("-date", SAMPLE_MAP)
assert parsed.terms == [SortTerm("date", True)]
def test_multi_column_preserves_order(self):
parsed = parse_sort_terms("date,-name", SAMPLE_MAP)
assert parsed.terms == [SortTerm("date", False), SortTerm("name", True)]
def test_unknown_key_is_reported_not_raised(self):
parsed = parse_sort_terms("bogus", SAMPLE_MAP)
assert parsed.terms == []
assert parsed.unknown == ["bogus"]
def test_mixed_valid_and_unknown(self):
parsed = parse_sort_terms("-name,bogus", SAMPLE_MAP)
assert parsed.terms == [SortTerm("name", True)]
assert parsed.unknown == ["bogus"]
def test_whitespace_and_empty_tokens_ignored(self):
parsed = parse_sort_terms(" name , , -date ", SAMPLE_MAP)
assert parsed.terms == [SortTerm("name", False), SortTerm("date", True)]
def test_empty_string_yields_nothing(self):
parsed = parse_sort_terms("", SAMPLE_MAP)
assert parsed.terms == []
assert parsed.unknown == []
```
- [ ] **Step 2: Run test to verify it fails**
Run: `uv run --with pytest-django pytest tests/test_sorting.py -v`
Expected: FAIL — `ModuleNotFoundError: No module named 'games.sorting'`.
- [ ] **Step 3: Write minimal implementation**
```python
# games/sorting.py
"""Structured sorting for list views (Stash-inspired, paired with games/filters.py).
A list view maps a public sort key to a SortSpec; the URL ?sort= param is a
signed comma-list of those keys (e.g. "-playtime,name"). See
docs/superpowers/specs/2026-06-21-list-view-sort-param-design.md.
"""
from dataclasses import dataclass
from typing import NamedTuple
from django.db.models import Aggregate
type SortKey = str # public column key in a *_SORTS map and in a URL term ("playtime", "name")
type SortString = str # comma-list of signed SortKeys: the URL ?sort= value and *_DEFAULT_SORT ("-date,created")
type AnnotationName = str # an alias added via .annotate(), then referenced by SortSpec.expression
type OrderField = str # SortSpec.expression: a real model field path OR an AnnotationName
# alias name -> the ORM aggregate that computes it, applied via queryset.annotate()
# e.g. {"total_playtime": Sum("sessions__duration_total")}
type Annotations = dict[AnnotationName, Aggregate]
@dataclass(frozen=True)
class SortSpec:
expression: OrderField # unsigned; a real column path or an AnnotationName
annotate: Annotations | None = None
class SortTerm(NamedTuple):
key: SortKey
descending: bool # True = "-key" (desc), False = bare key (asc)
type SortMap = dict[SortKey, SortSpec]
class ParsedSort(NamedTuple):
terms: list[SortTerm]
unknown: list[SortKey] # keys not in the map — the view turns these into warnings
def parse_sort_terms(raw: SortString, sort_map: SortMap) -> ParsedSort:
terms: list[SortTerm] = []
unknown: list[SortKey] = []
for token in raw.split(","):
token = token.strip()
if not token:
continue
descending = token.startswith("-")
key = token.lstrip("-")
if key in sort_map:
terms.append(SortTerm(key, descending))
else:
unknown.append(key)
return ParsedSort(terms, unknown)
```
- [ ] **Step 4: Run test to verify it passes**
Run: `uv run --with pytest-django pytest tests/test_sorting.py -v`
Expected: PASS (7 tests).
- [ ] **Step 5: Commit**
```bash
git add games/sorting.py tests/test_sorting.py
git commit -m "feat(sorting): SortSpec/SortTerm types + parse_sort_terms (#68)"
```
---
## Task 2: Per-model maps + `apply_sort` + `parse_find_filter`
**Files:**
- Modify: `games/sorting.py`
- Test: `tests/test_sorting.py`
**Interfaces:**
- Consumes: Task 1's `SortSpec`, `SortTerm`, `SortMap`, `parse_sort_terms`; `FindFilter` from `games.filters`.
- Produces:
- `GAME_SORTS: SortMap`, `GAME_DEFAULT_SORT = "-created"`
- `SESSION_SORTS: SortMap`, `SESSION_DEFAULT_SORT = "-date,created"`
- `PURCHASE_SORTS: SortMap`, `PURCHASE_DEFAULT_SORT = "-purchased,-created"`
- `SortResult(NamedTuple)`: `queryset: QuerySet`, `terms: list[SortTerm]`, `unknown: list[SortKey]`
- `apply_sort(queryset, find: FindFilter, sort_map: SortMap, default_sort: SortString) -> SortResult`
- `parse_find_filter(request: HttpRequest) -> FindFilter`
- [ ] **Step 1: Write the failing test**
Append to `tests/test_sorting.py`:
```python
from datetime import datetime, timedelta
from zoneinfo import ZoneInfo
import pytest
from django.conf import settings
from django.test import RequestFactory
from games.filters import FindFilter
from games.models import Game, Platform, Purchase, Session
from games.sorting import (
GAME_DEFAULT_SORT,
GAME_SORTS,
PURCHASE_DEFAULT_SORT,
PURCHASE_SORTS,
SESSION_DEFAULT_SORT,
SESSION_SORTS,
apply_sort,
parse_find_filter,
)
ZONEINFO = ZoneInfo(settings.TIME_ZONE)
def _find(sort=None):
return FindFilter(sort=sort)
@pytest.fixture
def two_games(db):
platform = Platform.objects.create(name="P", icon="p")
alpha = Game.objects.create(name="Alpha", sort_name="Alpha", platform=platform)
beta = Game.objects.create(name="Beta", sort_name="Beta", platform=platform)
return alpha, beta
class TestApplySortGames:
def test_name_ascending(self, two_games):
alpha, beta = two_games
result = apply_sort(Game.objects.all(), _find("name"), GAME_SORTS, GAME_DEFAULT_SORT)
assert list(result.queryset) == [alpha, beta]
assert result.terms[0].key == "name"
assert result.unknown == []
def test_name_descending(self, two_games):
alpha, beta = two_games
result = apply_sort(Game.objects.all(), _find("-name"), GAME_SORTS, GAME_DEFAULT_SORT)
assert list(result.queryset) == [beta, alpha]
def test_default_sort_when_absent_is_created_desc(self, two_games):
alpha, beta = two_games # beta created after alpha
result = apply_sort(Game.objects.all(), _find(None), GAME_SORTS, GAME_DEFAULT_SORT)
assert list(result.queryset) == [beta, alpha]
def test_unknown_key_reported_and_falls_back(self, two_games):
result = apply_sort(Game.objects.all(), _find("bogus"), GAME_SORTS, GAME_DEFAULT_SORT)
assert result.unknown == ["bogus"]
assert result.queryset.count() == 2 # still returns rows (default order)
def test_playtime_annotation_no_duplicate_rows(self, two_games):
alpha, _ = two_games
device = None
Session.objects.create(
game=alpha,
timestamp_start=datetime(2022, 1, 1, 10, tzinfo=ZONEINFO),
timestamp_end=datetime(2022, 1, 1, 12, tzinfo=ZONEINFO),
)
Session.objects.create(
game=alpha,
timestamp_start=datetime(2022, 1, 2, 10, tzinfo=ZONEINFO),
timestamp_end=datetime(2022, 1, 2, 11, tzinfo=ZONEINFO),
)
result = apply_sort(Game.objects.all(), _find("-playtime"), GAME_SORTS, GAME_DEFAULT_SORT)
# two sessions on alpha must not duplicate the alpha row
assert result.queryset.count() == 2
assert list(result.queryset)[0] == alpha # most playtime first
class TestParseFindFilter:
def test_reads_sort_param(self):
request = RequestFactory().get("/x", {"sort": "-playtime,name"})
assert parse_find_filter(request).sort == "-playtime,name"
def test_absent_sort_is_none(self):
request = RequestFactory().get("/x")
assert parse_find_filter(request).sort is None
class TestSortMapShapes:
def test_default_sort_keys_exist_in_maps(self):
# every key referenced by a default sort string must be defined in its map
for default, sort_map in [
(GAME_DEFAULT_SORT, GAME_SORTS),
(SESSION_DEFAULT_SORT, SESSION_SORTS),
(PURCHASE_DEFAULT_SORT, PURCHASE_SORTS),
]:
for token in default.split(","):
assert token.lstrip("-") in sort_map
```
- [ ] **Step 2: Run test to verify it fails**
Run: `uv run --with pytest-django pytest tests/test_sorting.py -v`
Expected: FAIL — `ImportError: cannot import name 'GAME_SORTS'` (and friends).
- [ ] **Step 3: Write minimal implementation**
Add imports at the top of `games/sorting.py` (merge with existing):
```python
from django.db.models import Aggregate, Max, Min, QuerySet, Sum
from django.http import HttpRequest
from games.filters import FindFilter
```
Append to `games/sorting.py`:
```python
# ── Per-model sort maps ─────────────────────────────────────────────────────
# Cross-relation sorts use annotated aggregates (group by PK → no row dup).
# To-one relations (game__sort_name, device__name) are ordered directly.
GAME_SORTS: SortMap = {
"name": SortSpec("name"),
"sort_name": SortSpec("sort_name"),
"year": SortSpec("year_released"),
"status": SortSpec("status"),
"wikidata": SortSpec("wikidata"),
"created": SortSpec("created_at"),
"playtime": SortSpec("total_playtime", {"total_playtime": Sum("sessions__duration_total")}),
"finished": SortSpec("last_finished", {"last_finished": Max("playevents__ended")}),
}
GAME_DEFAULT_SORT: SortString = "-created"
SESSION_SORTS: SortMap = {
"name": SortSpec("game__sort_name"),
"date": SortSpec("timestamp_start"),
"duration": SortSpec("duration_total"),
"device": SortSpec("device__name"),
"created": SortSpec("created_at"),
}
SESSION_DEFAULT_SORT: SortString = "-date,created"
PURCHASE_SORTS: SortMap = {
"name": SortSpec("first_game_name", {"first_game_name": Min("games__name")}),
"type": SortSpec("type"),
"price": SortSpec("converted_price"),
"infinite": SortSpec("infinite"),
"purchased": SortSpec("date_purchased"),
"refunded": SortSpec("date_refunded"),
"created": SortSpec("created_at"),
"finished": SortSpec("last_finished", {"last_finished": Max("games__playevents__ended")}),
}
PURCHASE_DEFAULT_SORT: SortString = "-purchased,-created"
# ── Apply ───────────────────────────────────────────────────────────────────
class SortResult(NamedTuple):
queryset: QuerySet
terms: list[SortTerm] # the order actually applied — #73's header UI consumes this
unknown: list[SortKey] # rejected keys — the view turns these into warning toasts
def apply_sort(
queryset: QuerySet, find: FindFilter, sort_map: SortMap, default_sort: SortString
) -> SortResult:
terms, unknown = parse_sort_terms(find.sort or "", sort_map)
if not terms:
# default_sort is trusted developer config — ignore any "unknown" from it
terms, _ = parse_sort_terms(default_sort, sort_map)
annotations: Annotations = {}
order_by: list[OrderField] = []
for term in terms:
spec = sort_map[term.key]
if spec.annotate:
annotations.update(spec.annotate)
order_by.append(("-" if term.descending else "") + spec.expression)
if annotations:
queryset = queryset.annotate(**annotations)
return SortResult(queryset.order_by(*order_by), terms, unknown)
def parse_find_filter(request: HttpRequest) -> FindFilter:
return FindFilter(sort=request.GET.get("sort") or None) # FindFilter.sort holds a SortString
```
- [ ] **Step 4: Run test to verify it passes**
Run: `uv run --with pytest-django pytest tests/test_sorting.py -v`
Expected: PASS (all Task 1 + Task 2 tests).
- [ ] **Step 5: Commit**
```bash
git add games/sorting.py tests/test_sorting.py
git commit -m "feat(sorting): per-model maps, apply_sort, parse_find_filter (#68)"
```
---
## Task 3: Wire `list_games` (sort + N+1 + warnings)
**Files:**
- Modify: `games/views/game.py` (`list_games`, starts line 57; base queryset line 59)
- Test: `tests/test_sorting.py`
**Interfaces:**
- Consumes: `apply_sort`, `parse_find_filter`, `GAME_SORTS`, `GAME_DEFAULT_SORT` from `games.sorting`.
- Produces: `GET /games/?sort=<...>` honored; unknown key → warning message.
- [ ] **Step 1: Write the failing test**
Append to `tests/test_sorting.py`:
```python
from django.contrib.messages import get_messages
from django.urls import reverse
@pytest.fixture
def logged_client(client, django_user_model):
user = django_user_model.objects.create_user(username="u", password="p")
client.force_login(user)
return client
class TestListGamesSort:
def test_sort_param_orders_rows(self, logged_client, two_games):
alpha, beta = two_games
response = logged_client.get(reverse("games:list_games"), {"sort": "-name"})
assert response.status_code == 200
body = response.content.decode()
assert body.index("Beta") < body.index("Alpha")
def test_unknown_sort_emits_warning_message(self, logged_client, two_games):
response = logged_client.get(reverse("games:list_games"), {"sort": "bogus"})
assert response.status_code == 200
warnings = [str(m) for m in get_messages(response.wsgi_request)]
assert any("bogus" in w for w in warnings)
def test_valid_sort_emits_no_warning(self, logged_client, two_games):
response = logged_client.get(reverse("games:list_games"), {"sort": "name"})
warnings = [str(m) for m in get_messages(response.wsgi_request)]
assert warnings == []
```
- [ ] **Step 2: Run test to verify it fails**
Run: `uv run --with pytest-django pytest tests/test_sorting.py::TestListGamesSort -v`
Expected: FAIL — `test_sort_param_orders_rows` fails (rows still ordered by `-created_at`, so `-name` ignored); `test_unknown_sort_emits_warning_message` fails (no message).
- [ ] **Step 3: Write minimal implementation**
In `games/views/game.py`, add to the imports from `django.contrib`:
```python
from django.contrib import messages
```
Add to the `games.sorting` import (new import line near the other `games.*` imports, e.g. after `from games.filters import parse_game_filter`):
```python
from games.sorting import GAME_DEFAULT_SORT, GAME_SORTS, apply_sort, parse_find_filter
```
Change the base queryset (line 59) from:
```python
games = Game.objects.order_by("-created_at")
```
to:
```python
games = Game.objects.select_related("platform")
```
Then, immediately before `games, page_obj, elided_page_range = paginate(request, games)` (line 89), insert:
```python
sort = apply_sort(games, parse_find_filter(request), GAME_SORTS, GAME_DEFAULT_SORT)
games = sort.queryset
for key in sort.unknown:
messages.warning(request, f"Unknown sort field '{key}' was ignored.")
```
- [ ] **Step 4: Run test to verify it passes**
Run: `uv run --with pytest-django pytest tests/test_sorting.py::TestListGamesSort -v`
Expected: PASS (3 tests).
- [ ] **Step 5: Commit**
```bash
git add games/views/game.py tests/test_sorting.py
git commit -m "feat(games): honor ?sort= on list_games + eager-load platform (#68)"
```
---
## Task 4: Wire `list_sessions` (sort + N+1 + warnings)
**Files:**
- Modify: `games/views/session.py` (`list_sessions`, starts line 120; base queryset line 122)
- Test: `tests/test_sorting.py`
**Interfaces:**
- Consumes: `apply_sort`, `parse_find_filter`, `SESSION_SORTS`, `SESSION_DEFAULT_SORT`.
- Produces: `GET /sessions/?sort=<...>` honored; unknown key → warning.
- [ ] **Step 1: Write the failing test**
Append to `tests/test_sorting.py`:
```python
class TestListSessionsSort:
def test_sort_by_duration_descending(self, logged_client, two_games):
alpha, beta = two_games
Session.objects.create(
game=alpha,
timestamp_start=datetime(2022, 1, 1, 10, tzinfo=ZONEINFO),
timestamp_end=datetime(2022, 1, 1, 10, 30, tzinfo=ZONEINFO), # 30 min
)
Session.objects.create(
game=beta,
timestamp_start=datetime(2022, 1, 2, 10, tzinfo=ZONEINFO),
timestamp_end=datetime(2022, 1, 2, 13, tzinfo=ZONEINFO), # 3 h
)
response = logged_client.get(reverse("games:list_sessions"), {"sort": "-duration"})
assert response.status_code == 200
body = response.content.decode()
assert body.index("Beta") < body.index("Alpha") # longer session first
def test_unknown_sort_emits_warning(self, logged_client, two_games):
response = logged_client.get(reverse("games:list_sessions"), {"sort": "nope"})
warnings = [str(m) for m in get_messages(response.wsgi_request)]
assert any("nope" in w for w in warnings)
```
- [ ] **Step 2: Run test to verify it fails**
Run: `uv run --with pytest-django pytest tests/test_sorting.py::TestListSessionsSort -v`
Expected: FAIL — sort ignored / no warning.
- [ ] **Step 3: Write minimal implementation**
In `games/views/session.py`, add the imports:
```python
from django.contrib import messages
from games.sorting import (
SESSION_DEFAULT_SORT,
SESSION_SORTS,
apply_sort,
parse_find_filter,
)
```
Change the base queryset (line 122) from:
```python
sessions = Session.objects.order_by("-timestamp_start", "created_at")
```
to:
```python
sessions = Session.objects.select_related("game", "game__platform", "device")
```
Then, immediately before `sessions, page_obj, elided_page_range = paginate(request, sessions)` (line 148), insert:
```python
sort = apply_sort(sessions, parse_find_filter(request), SESSION_SORTS, SESSION_DEFAULT_SORT)
sessions = sort.queryset
for key in sort.unknown:
messages.warning(request, f"Unknown sort field '{key}' was ignored.")
```
> Note: `last_session = sessions.latest()` (line 145) runs before pagination and is unaffected by `order_by` (`.latest()` uses the model's `get_latest_by`); leave it as-is. The `apply_sort` call goes after it, before `paginate`.
- [ ] **Step 4: Run test to verify it passes**
Run: `uv run --with pytest-django pytest tests/test_sorting.py::TestListSessionsSort -v`
Expected: PASS (2 tests).
- [ ] **Step 5: Commit**
```bash
git add games/views/session.py tests/test_sorting.py
git commit -m "feat(sessions): honor ?sort= on list_sessions + eager-load relations (#68)"
```
---
## Task 5: Wire `list_purchases` (sort + N+1 + warnings)
**Files:**
- Modify: `games/views/purchase.py` (`list_purchases`, starts line 121; base queryset line 122)
- Test: `tests/test_sorting.py`
**Interfaces:**
- Consumes: `apply_sort`, `parse_find_filter`, `PURCHASE_SORTS`, `PURCHASE_DEFAULT_SORT`.
- Produces: `GET /purchases/?sort=<...>` honored; unknown key → warning; `name`/`finished` aggregate sorts do not duplicate rows.
- [ ] **Step 1: Write the failing test**
Append to `tests/test_sorting.py`:
```python
class TestListPurchasesSort:
@pytest.fixture
def two_purchases(self, db, two_games):
alpha, beta = two_games
cheap = Purchase.objects.create(
date_purchased=datetime(2022, 1, 1, tzinfo=ZONEINFO),
price=10,
converted_price=10,
platform=alpha.platform,
)
cheap.games.add(alpha)
dear = Purchase.objects.create(
date_purchased=datetime(2022, 1, 2, tzinfo=ZONEINFO),
price=90,
converted_price=90,
platform=beta.platform,
)
dear.games.add(beta)
return cheap, dear
def test_sort_by_price_descending(self, logged_client, two_purchases):
response = logged_client.get(reverse("games:list_purchases"), {"sort": "-price"})
assert response.status_code == 200
body = response.content.decode()
assert body.index("Beta") < body.index("Alpha") # 90 before 10
def test_name_aggregate_sort_no_duplicate_rows(self, logged_client, two_purchases):
# a multi-game purchase must still render exactly one row
cheap, _ = two_purchases
from games.models import Game
extra = Game.objects.create(name="Aaa", sort_name="Aaa", platform=cheap.platform)
cheap.games.add(extra)
response = logged_client.get(reverse("games:list_purchases"), {"sort": "name"})
body = response.content.decode()
assert body.count("purchase-row-") == 2 # exactly two purchase rows
def test_unknown_sort_emits_warning(self, logged_client, two_purchases):
response = logged_client.get(reverse("games:list_purchases"), {"sort": "nope"})
warnings = [str(m) for m in get_messages(response.wsgi_request)]
assert any("nope" in w for w in warnings)
```
- [ ] **Step 2: Run test to verify it fails**
Run: `uv run --with pytest-django pytest tests/test_sorting.py::TestListPurchasesSort -v`
Expected: FAIL — sort ignored / no warning.
- [ ] **Step 3: Write minimal implementation**
In `games/views/purchase.py`, add the imports:
```python
from django.contrib import messages
from games.sorting import (
PURCHASE_DEFAULT_SORT,
PURCHASE_SORTS,
apply_sort,
parse_find_filter,
)
```
Change the base queryset (line 122) from:
```python
purchases = Purchase.objects.order_by("-date_purchased", "-created_at")
```
to:
```python
purchases = Purchase.objects.prefetch_related("games", "games__platform")
```
Then, immediately before `purchases, page_obj, elided_page_range = paginate(request, purchases)` (line 132), insert:
```python
sort = apply_sort(purchases, parse_find_filter(request), PURCHASE_SORTS, PURCHASE_DEFAULT_SORT)
purchases = sort.queryset
for key in sort.unknown:
messages.warning(request, f"Unknown sort field '{key}' was ignored.")
```
> If `apply_sort` ever yields duplicate purchase rows for an aggregate sort (it should not — `Min`/`Max` group by PK), add `.distinct()` after `order_by` in the view; the `test_name_aggregate_sort_no_duplicate_rows` test guards this.
- [ ] **Step 4: Run test to verify it passes**
Run: `uv run --with pytest-django pytest tests/test_sorting.py::TestListPurchasesSort -v`
Expected: PASS (3 tests).
- [ ] **Step 5: Run the full suite + lint**
Run: `uv run --with pytest-django pytest tests/test_sorting.py -v && make lint`
Expected: all sorting tests PASS; ruff clean.
- [ ] **Step 6: Commit**
```bash
git add games/views/purchase.py tests/test_sorting.py
git commit -m "feat(purchases): honor ?sort= on list_purchases + eager-load games (#68)"
```
---
## Task 6: Regression smoke + full suite
**Files:**
- Test: `tests/test_sorting.py`
**Interfaces:**
- Consumes: all prior tasks.
- Produces: confidence that default order is unchanged and every map key returns 200.
- [ ] **Step 1: Write the failing test**
Append to `tests/test_sorting.py`:
```python
class TestDefaultOrderUnchanged:
"""The default sort strings must reproduce the pre-#68 hardcoded order."""
def test_games_default_is_created_descending(self, logged_client, two_games):
alpha, beta = two_games # beta newer
response = logged_client.get(reverse("games:list_games"))
body = response.content.decode()
assert body.index("Beta") < body.index("Alpha")
class TestEverySortKeyReturns200:
def test_all_game_keys(self, logged_client, two_games):
for key in GAME_SORTS:
for raw in (key, f"-{key}"):
response = logged_client.get(reverse("games:list_games"), {"sort": raw})
assert response.status_code == 200, raw
def test_all_session_keys(self, logged_client, two_games):
for key in SESSION_SORTS:
response = logged_client.get(reverse("games:list_sessions"), {"sort": key})
assert response.status_code == 200, key
def test_all_purchase_keys(self, logged_client, two_games):
for key in PURCHASE_SORTS:
response = logged_client.get(reverse("games:list_purchases"), {"sort": key})
assert response.status_code == 200, key
```
- [ ] **Step 2: Run to verify it passes (these assert already-correct behavior)**
Run: `uv run --with pytest-django pytest tests/test_sorting.py::TestDefaultOrderUnchanged tests/test_sorting.py::TestEverySortKeyReturns200 -v`
Expected: PASS. If any `?sort=<key>` returns 500, that key's expression/annotation is wrong — fix the offending `SortSpec` in `games/sorting.py` and re-run.
- [ ] **Step 3: Run the entire project test suite**
Run: `make test`
Expected: PASS (no regressions; note `make test` also collects `e2e/` — a browser must be available, or run `uv run --with pytest-django pytest tests/` to scope to unit/integration tests).
- [ ] **Step 4: Lint + format check**
Run: `make check`
Expected: ruff + format + tests clean.
- [ ] **Step 5: Commit**
```bash
git add tests/test_sorting.py
git commit -m "test(sorting): default-order regression + all-keys smoke (#68)"
```
---
## Post-implementation (not tasks)
- **PR description** must call out the #65 coordination (per spec): each stats "view all" link's `sort=` must use a key in the target model's `*_SORTS` map. Verify when #65 lands.
- Follow-ups already filed: #73 (header UI), #74 (FindFilter unify + dead `direction`/`page`/`per_page`), #75 (purchase free-text search), #76 (shared `list_view` helper), #77 (presets persist/restore sort). Do not address them here.
@@ -1,197 +0,0 @@
# Design Spec: Boolean Filters Overhaul (Approach A with Reusable Primitives)
Expose a two-radio-button UI for all boolean filters to allow selecting "True" (Yes), "False" (No), or leaving the filter "Unset" (Not set).
## 1. Architectural Changes
### 1.1 Backend Primitives & Components
We will extract the `_filter_checkbox` rendering logic from `common/components/filters.py` and generalize it into a reusable, filter-agnostic `Checkbox` component in `common/components/primitives.py`. We will also add a corresponding `Radio` component.
#### In `common/components/primitives.py`:
```python
def Checkbox(
name: str,
label: str,
checked: bool = False,
value: str = "1",
attributes: list[HTMLAttribute] | None = None,
) -> SafeText:
"""A filter-agnostic Checkbox component."""
attributes = attributes or []
input_attrs = [
("name", name),
("value", value),
("class", "rounded border-default-medium bg-neutral-secondary-medium text-brand focus:ring-brand"),
] + attributes
if checked:
input_attrs.append(("checked", "true"))
return Label(
attributes=[("class", "flex items-center gap-2 text-sm text-heading cursor-pointer")],
children=[
Input(type="checkbox", attributes=input_attrs),
label,
],
)
def Radio(
name: str,
label: str,
checked: bool = False,
value: str = "",
attributes: list[HTMLAttribute] | None = None,
) -> SafeText:
"""A filter-agnostic Radio component."""
attributes = attributes or []
input_attrs = [
("name", name),
("value", value),
("class", "rounded-full border-default-medium bg-neutral-secondary-medium text-brand focus:ring-brand"),
] + attributes
if checked:
input_attrs.append(("checked", "true"))
return Label(
attributes=[("class", "flex items-center gap-1.5 text-sm text-heading cursor-pointer")],
children=[
Input(type="radio", attributes=input_attrs),
label,
],
)
```
#### In `common/components/filters.py`:
We will import `Checkbox` and `Radio` from `common.components.primitives`. We will redefine `_filter_checkbox` as a thin adapter pointing to our new generalized `Checkbox` component (preserving any backward compatibility), and we will create a new helper `_filter_boolean_radio` using `Radio`:
```python
_FILTER_RADIO_CLASS = (
"rounded-full border-default-medium bg-neutral-secondary-medium "
"text-brand focus:ring-brand"
)
def _filter_checkbox(name: str, label: str, checked: bool) -> SafeText:
"""Thin adapter mapping legacy checkbox filters to the generalized Checkbox primitive."""
return Checkbox(name=name, label=label, checked=checked)
def _filter_boolean_radio(name: str, label: str, value: bool | None) -> SafeText:
"""Renders a filter-specific boolean radio button group with 'True' and 'False' options."""
return Div(
attributes=[("class", "flex flex-col gap-1")],
children=[
Span(
attributes=[("class", _FILTER_LABEL_CLASS)],
children=[label],
),
Div(
attributes=[("class", "flex items-center gap-4 h-9")],
children=[
Radio(name=name, label="True", checked=value is True, value="true"),
Radio(name=name, label="False", checked=value is False, value="false"),
],
),
],
)
```
### 1.2 Parsing Filter JSON (Backend)
We will introduce a robust parsing function in `common/components/filters.py` to distinguish `True`, `False`, and `None` (unset):
```python
def _parse_bool_nullable(existing: dict, key: str) -> bool | None:
"""Extract a nullable boolean value from a filter criterion."""
if key not in existing:
return None
field = existing[key]
if not isinstance(field, dict):
return None
val = field.get("value")
if val is None:
return None
if isinstance(val, str):
if val.lower() in ("true", "1", "yes"):
return True
if val.lower() in ("false", "0", "no"):
return False
return bool(val)
```
### 1.3 UI Overhauls in Filter Bars
We will update the following filter bars to use `_parse_bool_nullable` and `_filter_boolean_radio`:
1. **GameFilterBar:** `mastered`, `purchase_refunded`, `purchase_infinite`, `session_emulated`.
2. **SessionFilterBar:** `emulated`, `is_active`.
3. **PurchaseFilterBar:** `is_refunded`, `infinite`, `needs_price_update`.
---
## 2. Frontend JS Changes (`games/static/js/filter_bar.js`)
### 2.1 Deselectable Radios Behavior
To support resetting filters back to "Unset" without resetting the whole form, we add click behavior that unchecks an already checked radio button when clicked.
```javascript
function setupDeselectableRadios() {
document.querySelectorAll('input[type="radio"]').forEach(function (radio) {
radio.addEventListener('click', function (e) {
if (this.wasChecked) {
this.checked = false;
this.wasChecked = false;
this.dispatchEvent(new Event('change', { bubbles: true }));
} else {
var name = this.getAttribute('name');
if (name) {
document.querySelectorAll('input[type="radio"][name="' + name + '"]').forEach(function (r) {
r.wasChecked = false;
});
}
this.wasChecked = true;
}
});
if (radio.checked) {
radio.wasChecked = true;
}
});
}
```
We will call `setupDeselectableRadios()` during `DOMContentLoaded`.
### 2.2 Serializing Radio States
Update `buildFilterJSON(form)` to collect checked radios from boolean field groups:
```javascript
// 2. Boolean Fields (Radio Button Groups)
var booleanFields = [
{ name: "filter-mastered", key: "mastered" },
{ name: "filter-emulated", key: "emulated" },
{ name: "filter-active", key: "is_active" },
{ name: "filter-refunded", key: "is_refunded" },
{ name: "filter-infinite", key: "infinite" },
{ name: "filter-needs-price-update", key: "needs_price_update" },
{ name: "filter-purchase-refunded", key: "purchase_refunded" },
{ name: "filter-purchase-infinite", key: "purchase_infinite" },
{ name: "filter-session-emulated", key: "session_emulated" }
];
booleanFields.forEach(function (bf) {
var el = form.querySelector('[name="' + bf.name + '"]:checked');
if (el) {
var val = el.value === "true";
filter[bf.key] = criterion(val, null, "EQUALS");
}
});
```
---
## 3. Testing Strategy
1. **Unit Tests (`tests/test_filter_helpers.py`):**
- Add test coverage for `_parse_bool_nullable` covering `None`, `True`, `False`, strings, missing keys, etc.
2. **Component Tests (`tests/test_filter_bars.py`):**
- Update tests where the filters render checkbox elements to assert that radio groups are rendered instead (with "True" and "False" radio buttons).
3. **Integration and End-to-End Tests:**
- Execute the test suite using `pytest` to ensure that all 355 tests continue to pass and reflect the updated UI structure perfectly.
@@ -1,157 +0,0 @@
# HTML + JS component authoring — design
**Date:** 2026-06-13
**Status:** Approved (design); pending implementation plan
**Branch context:** follows the lazy node-tree component system (`Element`/`Safe`/`Fragment`/`Media`) and the `Children`/`Attributes` typing work.
## Problem
Trusted HTML and JavaScript are authored as Python f-strings in several places. Two distinct pains:
- **HTML-as-string**`Navbar`, `_TOAST_CONTAINER`, the played-row markup skeleton, and the generally verbose `Element("div", attributes=[...], children=[...])` call shape.
- **JS-in-string** — the genuinely ugly ones: `GameStatusSelector` (~70 lines) and `SessionDeviceSelector` (~50 lines) inline an Alpine `x-data="{...}"` blob with `fetchWithHtmxTriggers`, server-value interpolation (`{game.status}`), **and** `{{ }}` brace-doubling throughout; `_PLAYED_ROW_TEMPLATE` dodges the brace collision entirely by switching to `@@TOKEN@@` placeholders + a `.replace()` loop.
You cannot node-tree JavaScript, so the JS pain needs a different answer than the HTML pain. The newer widgets (`search_select`, `range_slider`, `filter_bar`) already moved behavior into real `.js` files wired by `onSwap` + `data-*` attributes; the Alpine selectors are the holdouts that still inline their JS.
## Goal
Establish the *right* way to author interactive, server-rendered components in this codebase, and convert a few exemplars to prove it. North-star principle:
> The server never writes a line of JavaScript. The server↔client boundary is a typed, declarative contract. Behavior lives in real, tooled TypeScript files.
## Decisions (locked during brainstorming)
| Decision | Choice |
| --- | --- |
| HTML authoring | **htpy-*style* sugar on the existing `Element`** (not the htpy library) — keeps `Media`/`collect_media`, no build step |
| JS runtime model | **Custom Elements** (Web Components), light DOM |
| Server↔client contract | **Typed contract + codegen** (one Python `Props` type → generated TS interface + reader) |
| JS language | **TypeScript** (real `.ts`, compiled) |
| Build tool | **`tsc` per-module** (no bundler) — preserves per-component `Media` loading |
| Alpine, for converted components | **Retired** — behavior rewritten as vanilla TS in the element class |
| Exemplars | **`GameStatusSelector` + `SessionDeviceSelector` + played-row** |
| Compiled output | **Build-only, gitignored** (produced by `make` + Docker) |
| Existing hand-written `.js` | **Left as-is**, migrated to TS later |
## Architecture
Three independent layers composing through one typed seam:
```
Python (server) TypeScript (client)
───────────────── ───────────────────
htpy-style Element ──renders──► <game-status-selector ──connectedCallback──► game-status-selector.ts
+ Media (kept) game-id="3" status="f"> (vanilla DOM behavior)
│ ▲
└── GameStatusSelectorProps ─codegen─┘ generated props.ts (interface + typed reader)
(one Python type = the whole server↔client contract)
```
- **Layer 1 — htpy-style HTML** removes HTML-string / verbose-`Element` ugliness, pure Python, no build, `Media` untouched.
- **Layer 2 — Custom Elements (TS)** removes JS-string ugliness; behavior in real typed modules with a native lifecycle.
- **Layer 3 — Typed contract codegen** makes the seam type-safe in both languages from a single Python source.
### Layer 1 — htpy-style sugar on `Element`
Additive only. Existing `Element("div", attributes=[...], children=[...])` and `Div([("class","x")], "hi")` keep working.
- **Attributes as kwargs:** `Div(class_="card", hx_get="/x", disabled=True)`. Translation: trailing `_` stripped (`class_``class`); inner `_``-` (`hx_get``hx-get`, `data_id``data-id`); `True`→bare attribute, `False`/`None`→omitted.
- **Children via `[]`:** `Div(class_="card")[H1["Title"], body]`. `Element.__getitem__` normalizes through the existing `as_children` and returns an `Element` carrying the same attributes and media.
The result is still a walkable `Element` tree, so `collect_media` / `Media` are unaffected. This is the "htpy feel on our own node so the asset system survives" decision.
Example:
```python
Div(class_="flex gap-2 items-center")[
Icon("play"),
Span(class_="label")[name],
]
```
### Layer 2 — Custom Elements (TypeScript, light DOM)
- Python builder emits a **semantic tag**: `Element("game-status-selector", attrs).with_media(Media(js=("dist/elements/game-status-selector.js",)))`.
- **Light DOM** (no shadow root — Tailwind's global classes must apply). The server renders the inner markup (htpy-style); the element enhances it.
- **Native lifecycle replaces `onSwap`:** `connectedCallback()` fires when the browser parses or htmx-swaps the element in; `disconnectedCallback()` provides free teardown. No init registry, no guard flags.
- Behavior is **vanilla TS** — the element class owns its state (dropdown open/closed, PATCH-on-select via `fetchWithHtmxTriggers`). Alpine retired for these three.
- Source `ts/elements/<tag>.ts` → compiled `games/static/js/dist/elements/<tag>.js`, loaded only on pages that use it (via `Media`).
### Layer 3 — Typed contract (one Python type → the whole seam)
Each element declares its props once, in Python:
```python
class GameStatusSelectorProps(TypedDict):
game_id: int
status: str
csrf: str
```
- The **Python builder** takes these typed args and serializes them to kebab-case attributes (`game-id="3"`).
- **Codegen** reads the registered Props types and emits, per component, into `ts/generated/props.ts`:
- an **interface**`GameStatusSelectorProps { gameId: number; status: string; csrf: string }`, and
- a **typed reader**`readGameStatusSelectorProps(el): GameStatusSelectorProps` that pulls and parses attributes (`Number(el.getAttribute("game-id"))`, etc.).
- The element imports the generated reader. The entire server↔client boundary is generated from one Python type: rename `game_id` in Python, regenerate, and `tsc` fails until the element updates. Drift is caught at build time; no hand-written `getAttribute` soup, no silent attr-name drift.
Type map: `int`/`float``number`, `str``string`, `bool``boolean`. Field `game_id` → attr `game-id` → TS prop `gameId`. Reader parsing follows the type (number → `Number(...)`, bool → presence / `=== "true"`, string → `getAttribute(...) ?? ""`).
## Toolchain (`tsc` per-module, build-only)
Layout:
```
ts/
elements/game-status-selector.ts # hand-written element classes
generated/props.ts # codegen output (gitignored)
globals.d.ts # ambient: window.fetchWithHtmxTriggers, htmx
tsconfig.json # strict, ES2022, lib [ES2022, DOM, DOM.Iterable]
# rootDir: ts/ → outDir: games/static/js/dist/
```
- **`games/static/js/dist/` is the only compiled output**, trivially gitignored, never colliding with hand-written `.js`. `Media` references `dist/elements/...`.
- **package.json**: add `typescript` devDep; scripts `build:ts` (`tsc -p tsconfig.json`), `watch:ts` (`tsc -p tsconfig.json --watch`).
- **Makefile**: `make ts` = codegen → `tsc`; `make dev` also runs `tsc --watch` (beside Django runserver + Tailwind watch); `make check` gains `tsc --noEmit` as a drift gate.
- **.gitignore**: `games/static/js/dist/`, `ts/generated/`.
- **Docker**: add a `make ts` step in the image build (npm already present for Tailwind); compiled JS baked into the image. Runtime stays offline.
- **TS lint/format**: deferred — `tsc --strict` is the only gate for now.
### Codegen mechanics
- A registry maps `tag → Props type` (e.g. a decorator `@element("game-status-selector", GameStatusSelectorProps)` on the Python builder, collected into a module-level registry).
- A Django management command (or script) imports the registry and writes `ts/generated/props.ts` (interface + reader per component).
- **Ordering:** codegen runs before `tsc` (the generated file is a `tsc` input). CI runs codegen then `tsc --noEmit`, so Python/TS drift fails the build. No committed generated artifact to diff against — `tsc` failing on drift is the gate.
## Exemplar conversions
1. **`GameStatusSelector``<game-status-selector game-id status csrf>`** — Python builds the light-DOM htpy-style; `game-status-selector.ts` wires the dropdown toggle + click→PATCH `/api/games/{id}/status` via `fetchWithHtmxTriggers` with CSRF, and updates the displayed status. Deletes the ~70-line f-string + brace-doubling.
2. **`SessionDeviceSelector``<session-device-selector>`** — same shape; PATCH `/api/session/{id}/device`.
3. **played-row → `<play-event-row>`** (non-Alpine) — deletes `_PLAYED_ROW_TEMPLATE` and the `@@TOKEN@@` / `.replace()` hack; Python builds markup htpy-style; `play-event-row.ts` owns the dropdown + add-playthrough POST. URLs are server-reversed and passed as attributes. Proves the pattern is not Alpine-only.
## Testing
- **Python**: builders render the correct tag + attributes (extend `test_components` / `test_rendered_pages`); assert no f-string remnants remain.
- **Type-check**: `tsc --noEmit` in `make check` — type errors, including contract drift, fail CI.
- **e2e (Playwright)**: real Chromium upgrades the custom elements natively; port/extend the existing widget-e2e pattern for all three (open dropdown → select → PATCH → DOM updates).
## Risks and mitigations
1. **Element module must be loaded before its tag appears.** Full-page render loads the module via `Media`; htmx row-swaps reuse the already-defined element. Constraint to document: a fragment response that introduces a brand-new element type must include that element's `Media`. (Same limitation class as today's "`onSwap` needs the script present.")
2. **A build step is now required** for `make dev` and Docker. One-time wiring, mitigated by Make/Docker integration.
3. **First TypeScript in the repo** — adds `typescript`, `tsconfig.json`, a Docker build step. Scoped to `ts/`; existing `.js` untouched.
4. **CSRF/PATCH parity** — the vanilla TS must replicate the Alpine version's fetch/CSRF/`HX-Trigger` behavior; it reuses the existing `fetchWithHtmxTriggers`; e2e guards it.
5. **Codegen ↔ build ordering** — codegen must precede `tsc`; encoded in `make ts`.
## Out of scope (YAGNI)
- Migrating the existing hand-written `.js` to TypeScript (later, incrementally).
- Bundling / minification of app JS.
- Shadow DOM / scoped styles.
- A general island / props-blob hydration runtime (custom elements cover these three).
- TS lint/format tooling (prettier/eslint).
## Future on-ramps (not now)
- **More custom elements**: migrate the remaining `onSwap` widgets to custom elements once the pattern is proven.
- **Existing `.js` → TS**: incremental, file by file (`tsc` checks mixed projects).
- The typed contract already positions the boundary for full type-safety as more client code becomes TS.
@@ -1,138 +0,0 @@
# Reset running session start to now (issue #33)
## Problem
Sometimes a session is started but a sizeable amount of time passes before play
actually begins. The current UX to fix this is: edit the session, press "Set to
now", submit. This is three steps across two pages.
## Goal
Add a one-click button in the session list — next to the existing "Finish
session now", "Edit", and "Delete" buttons — that sets a running session's
`timestamp_start` to the current time. A confirmation dialog protects against
accidental clicks (the original start time is overwritten).
## Scope
- **Visibility:** the button shows only on running sessions (`timestamp_end is
None`), exactly like the green "Finish session now" button.
- **Appearance:** gray button, new "reset" icon.
- **Behavior:** confirm dialog before resetting; on confirm, sets
`timestamp_start = timezone.now()`, saves, and refreshes the list via htmx so
the new start time shows.
Out of scope: changing the existing Finish/Edit/Delete buttons; resetting end
time; bulk operations.
## Design
### 1. New icon — `games/templates/icons/reset.html`
A rotate/counterclockwise-arrow SVG signifying "reset". Styled like sibling
icons (`text-black dark:text-white w-4 h-4`). Icons are auto-loaded by file stem
(`common/icons.py`), so `Icon("reset")` resolves once the file exists — no
registration needed.
### 2. New view — `games/views/session.py`
Mirrors the existing `end_session` view, but the htmx path returns an empty
`204` with an `HX-Refresh: true` header instead of a row fragment:
```python
@login_required
def reset_session_start(request: HttpRequest, session_id: int) -> HttpResponse:
session = get_object_or_404(Session, id=session_id)
session.timestamp_start = timezone.now()
session.save()
if request.htmx:
response = HttpResponse(status=204)
response["HX-Refresh"] = "true"
return response
return redirect("games:list_sessions")
```
**Why `HX-Refresh` and not a row swap:** `_session_row_fragment` (used by
`end_session`) renders a legacy 4-column `<tr>` that no longer matches the live
session-list table (6 columns, built inline by `list_sessions`) and carries no
`id="session-row-{pk}"`. Swapping it into the current table would produce a
malformed row. The list table is rebuilt server-side on every request, so a full
htmx refresh is the simplest correct update — and consistent with the existing
Finish button, which also does a full-page navigation.
### 3. New URL — `games/urls.py`
```python
path(
"session/start/reset-to-now/from-list/<int:session_id>",
session.reset_session_start,
name="list_sessions_reset_session_start",
),
```
### 4. Extend `ButtonGroup``common/components/primitives.py`
The button-group button dict currently supports `href`, `slot`, `color`,
`title`, `hx_get`, `hx_target`. Add two optional keys threaded through both
`ButtonGroup()` and `_button_group_button()`:
- `hx_confirm` — emitted as `hx-confirm` on the `<a>`; htmx shows a native
`confirm()` dialog before issuing the request.
- `hx_swap` — emitted as `hx-swap` on the `<a>`; needed so the returned row
fragment replaces the row (`outerHTML`) rather than htmx's default.
Both are additive and optional; existing callers are unaffected. Update the
`ButtonGroup` docstring to list the new keys.
### 5. Button in the session list — `games/views/session.py`
Added to the `ButtonGroup` list in `list_sessions`, guarded the same way as the
Finish button:
```python
{
"href": reverse(
"games:list_sessions_reset_session_start", args=[session.pk]
),
"hx_get": reverse(
"games:list_sessions_reset_session_start", args=[session.pk]
),
"hx_confirm": "Reset this session's start time to now?",
"slot": Icon("reset"),
"title": "Reset start to now",
"color": "gray",
}
if session.timestamp_end is None
else {}
```
Placement: directly after the Finish button, before Edit. `href` is a graceful
fallback (the non-htmx view path redirects); `hx_get` + `hx_confirm` drive the
confirm dialog and htmx refresh when JS is active.
## Rationale: htmx confirm
The confirm dialog comes from htmx's built-in `hx-confirm`, which only fires on
htmx-driven requests — so the button must use `hx-get` (not just `href`). No
inline JS is needed, consistent with the project's conventions.
## Testing
### Unit (`tests/`)
- `reset_session_start` sets `timestamp_start` to ~now and saves.
- Returns the row fragment when called via htmx; redirects to `list_sessions`
otherwise.
- Session list renders the reset button only for running sessions
(`timestamp_end is None`), not for finished ones.
### E2E (`e2e/`)
- On the session list with a running session, click the reset button, accept the
confirm dialog (`page.on("dialog", lambda d: d.accept())`), and assert the
row's displayed start time updated to ~now.
## No TypeScript build
`hx-confirm` is built into htmx; no new custom element or `.ts` file, so `make
ts` is not required for this change.
@@ -1,223 +0,0 @@
# Design: Issue #53 — Rebuild `_session_row_fragment` via a shared row builder
**Date:** 2026-06-20
**Issue:** [#53](https://github.com/KucharczykL/timetracker/issues/53)
**Follow-on:** [#55](https://github.com/KucharczykL/timetracker/issues/55) (standardize all session tables on the canonical builder)
## Problem
`_session_row_fragment()` in `games/views/session.py` renders a **4-column** session
`<tr>` (Name, Start, End, Duration) with a hand-built `Tr`, no `id="session-row-{pk}"`.
The live `list_sessions` table is **6 columns** (Name, Date, Duration, Device, Created,
Actions) with a row id and htmx attributes. The fragment cannot be htmx-swapped into the
live table without producing a malformed, un-targetable row.
In practice the fragment is **dead**: every session action button in the UI is a plain
`href` (full-page navigation). The only htmx caller, `reset_session_start`, returns
`204 + HX-Refresh` (the #33 workaround) rather than the fragment. The fragment's htmx
paths in `end_session` and `new_session_from_existing_session` are never exercised, which
is why the drift went unnoticed.
Root cause: the fragment is an independent re-implementation of a session row. Fixed
properly, there must be exactly one source of truth for a session row, reused by both
the table and any htmx fragment.
## Goal
1. One canonical session-row builder shared by `list_sessions` and the htmx fragment — no
duplicated `<tr>` markup, so the two cannot drift.
2. Real in-place htmx row swap for **finish** and **reset-start** actions on the session
list, with the navbar playtime totals kept correct in the same request via an
out-of-band (OOB) swap.
Non-goals (tracked in #55): migrating the game-detail sessions table (4-column, different
shape) onto the canonical builder. It keeps its current full-navigation buttons for now.
## Architecture
### Single source of truth for a session row
`TableRow` (`common/components/primitives.py:894`) is the only place a `<tr>` is built.
The table reaches it through `list_sessions → row dict → paginated_table_content →
SimpleTable → TableRow(data=dict)`. The fix splits the row into two reused units:
- **`session_row_data(session, device_list, csrf_token) -> SessionRowData`** — owns cell
content, `row_id`, and the row's htmx attributes (the dict currently inlined in
`list_sessions`). New function in `games/views/session.py`.
- **`TableRow`** — owns the `<tr>` markup. Unchanged, already shared.
Both consumers go through the same dict builder and the same renderer:
```python
# list_sessions
rows = [session_row_data(s, device_list, csrf_token) for s in sessions]
# → paginated_table_content → SimpleTable → TableRow(data=dict)
# single-row htmx fragment — returns a Node, not a stringified SafeText
def session_row(session, device_list, csrf_token) -> Node:
return TableRow(session_row_data(session, device_list, csrf_token))
```
The fragment is therefore the *same* row the table renders, for a single session. Change
a column once in `session_row_data` and list + fragment move together. The old hand-built
`Tr` (4-column, the `#last-session-start` toggle, the yellow "Finish now?" link) — and the
`_session_row_fragment` helper returning `SafeText` — are deleted entirely.
**Return `Node`, not `SafeText`.** Per the component-system direction, builders return
`Node` objects and stringification happens only at the `HttpResponse` boundary (Django
str-encodes response content automatically — `HttpResponse(node)` already works across the
codebase, e.g. `purchase.py` `HttpResponse(_refund_confirmation_modal(...))`). `TableRow`
already returns an `Element` (a `Node`), so `session_row` returns it directly with no
`str()`/`mark_safe`. The endpoints combine the row and the OOB navbar with `Fragment`
(also a `Node`) and pass that straight to `HttpResponse`.
`session_row_data` reproduces today's `list_sessions` dict exactly:
- `row_id`: `f"session-row-{session.pk}"`
- `hx_trigger`: `"device-changed from:body"`, `hx_get`: `""`, `hx_select`:
`f"#session-row-{session.pk}"`, `hx_swap`: `"outerHTML"` (the existing self-refresh on
device change)
- `cell_data` (6): `NameWithIcon(session=session)`; startend string via `local_strftime`;
`session.duration_formatted_with_mark()`; `SessionDeviceSelector(session, device_list,
csrf_token)`; `session.created_at.strftime(dateformat)`; the `ButtonGroup` of actions.
The action `ButtonGroup` for a running session (`timestamp_end is None`) switches the
**Finish** and **Reset start** buttons from plain `href` to htmx (see below). `ButtonGroup`
already forwards `hx_get`/`hx_target`/`hx_swap`/`hx_confirm` (`primitives.py:367`).
### Named type
```python
class SessionRowData(TypedDict):
row_id: str
hx_trigger: str
hx_get: str
hx_select: str
hx_swap: str
cell_data: list[Node]
```
Defined in `games/views/session.py` (per the project convention to name compound types
passed between functions).
### Navbar playtime as an OOB-swappable component
The navbar's "Today · Last 7 days" totals live inline in the monolithic `Navbar()`
`Safe` f-string (`common/layout.py:228-231`). Finishing or resetting a session changes a
session's duration → game playtime → these totals, so an in-place row swap would leave
them stale.
Extract the `<li>` into a small component with a stable id:
```python
# common/layout.py (or common/components)
def NavbarPlaytime(today_played: str, last_7_played: str, *, oob: bool = False) -> Node:
# <li id="navbar-playtime" [hx-swap-oob="true"]> ...today · last_7... </li>
```
- `Navbar()` embeds `NavbarPlaytime(today_played, last_7_played)` in place of the inline
markup (no visual change).
- htmx endpoints render `NavbarPlaytime(..., oob=True)`, which adds `hx-swap-oob="true"`,
and append it to their response body. htmx applies it to the matching `#navbar-playtime`
regardless of the primary target.
Totals come from the existing `model_counts(request)` (`games/views/general.py:26`), which
already computes `today_played` / `last_7_played`. The endpoints call it after saving.
### Endpoint behavior
All three endpoints keep their non-htmx branch (`redirect("games:list_sessions")`).
| Endpoint | htmx response |
|---|---|
| `end_session` | `HttpResponse(Fragment(session_row(...), NavbarPlaytime(..., oob=True)))` |
| `reset_session_start` | `HttpResponse(Fragment(session_row(...), NavbarPlaytime(..., oob=True)))` |
| `new_session_from_existing_session` (clone) | `204 + HX-Refresh: true` |
- **end / reset** return a `Fragment` Node holding the fresh row plus the OOB navbar in one
response body, passed straight to `HttpResponse` (no manual stringification). The
triggering button targets `#session-row-{pk}` with `hx-swap="outerHTML"`; htmx extracts
the OOB `<li>` and swaps the remainder (the `<tr>`) into the row. `reset_session_start`
drops its current `204 + HX-Refresh` workaround.
- **clone stays on `HX-Refresh`**: it creates a *new* session whose correct position
depends on sort + pagination, which a single-row `outerHTML` swap cannot place. Its htmx
branch returns `204 + HX-Refresh: true` (replacing the dead fragment return). This is a
deliberate, documented exception.
Both `end_session` and `reset_session_start` need `device_list` and a CSRF token to build
the row (for the `SessionDeviceSelector` cell): `Device.objects.order_by("name")` and
`get_token(request)`, mirroring `list_sessions`.
### List buttons → htmx
In `session_row_data`, for a running session:
- **Finish session now**: add `hx_get` = `list_sessions_end_session` URL,
`hx_target` = `f"#session-row-{session.pk}"`, `hx_swap` = `"outerHTML"`. Keep `href` as
a no-JS fallback.
- **Reset start to now**: same `hx_target`/`hx_swap`; keep existing `hx_confirm` and
`href` fallback. (Previously its `hx_get` hit the 204+refresh path; now it swaps the
row.)
Edit, Delete, and the clone/"play" affordances are unchanged.
## Components / files touched
- `games/views/session.py` — add `SessionRowData`, `session_row_data() -> SessionRowData`,
`session_row() -> Node`; delete the old `_session_row_fragment() -> SafeText`; update
`list_sessions` to use the builder; rewire `end_session`, `reset_session_start`,
`new_session_from_existing_session`. Drop the now-unused `SafeText`/`Tr` imports if no
other references remain.
- `common/layout.py` — add `NavbarPlaytime`; use it inside `Navbar()`.
- (If `NavbarPlaytime` is placed in `common/components`, re-export via `__init__.py`.)
## Data flow (finish from the list)
```
click Finish → hx-get end_session (htmx)
→ session.timestamp_end = now; save()
→ model_counts(request) (fresh totals)
→ response body: <tr id=session-row-pk …>(6 cells)</tr>
+ <li id=navbar-playtime hx-swap-oob=true>…</li>
htmx: OOB <li> → #navbar-playtime ; <tr> → #session-row-pk (outerHTML)
→ row shows end time + duration; navbar totals update; no full reload
→ swapped row keeps device-change self-refresh + device selector custom element
```
## Error handling
- Missing session → `get_object_or_404` (unchanged).
- Non-htmx requests → full-page redirect (unchanged), so the feature degrades to the
current behavior without JS.
- `SessionDeviceSelector` custom element re-initializes on swap via its native
`connectedCallback`; its JS module is already loaded by the list page, so no extra
`scripts=` wiring is needed.
## Testing
Unit (`tests/`):
- `session_row_data` returns 6 `cell_data` entries and `row_id == "session-row-{pk}"`,
with the device/created/actions cells present.
- `session_row(...)` is a `Node`; `str(session_row(...))` contains `id="session-row-{pk}"`
and 6 `<td>/<th>` cells (regression against the 4-column drift).
- `NavbarPlaytime(oob=True)` emits `id="navbar-playtime"` and `hx-swap-oob="true"`;
`oob=False` omits the OOB attribute.
View (`tests/`, htmx requests via `HTTP_HX_REQUEST=true`):
- `end_session` (htmx) response body contains `#session-row-{pk}` and an OOB
`#navbar-playtime`; sets `timestamp_end`.
- `reset_session_start` (htmx) likewise; sets `timestamp_start` to ~now; **no**
`HX-Refresh` header.
- `new_session_from_existing_session` (htmx) returns status 204 with `HX-Refresh: true`
and creates a session.
- Non-htmx variants of all three still redirect to the session list.
E2E (`e2e/`):
- From the session list, finish a running session → its row updates in place (end time +
duration) and the navbar "Today · Last 7 days" totals change, with no full page reload.
## Out of scope (→ #55)
`games/views/game.py` `_sessions_section` (4-column game-detail table, different first
column, no Device/Created) keeps its full-navigation `href` buttons. Migrating it onto
`session_row_data` with configurable visible columns is tracked in #55.
@@ -1,150 +0,0 @@
# Convert Remaining onSwap Widgets to Custom Elements
**Date:** 2026-06-20
**Issue:** #18
**Relates to:** #17 (TS migration), spec `2026-06-13-html-js-authoring-design.md`
## Context
PR #16 established the custom-element pattern (TypeScript custom elements, `connectedCallback` lifecycle, codegen'd typed prop contracts) and converted three components. Four interactive widgets still use the old pattern: a hand-written `.ts` file registered with `onSwap(selector, fn)` + `data-*` attributes.
**Goal:** Migrate all four remaining widgets to the custom-element pattern so the whole interactive surface uses one model.
## Widgets and Dependency Order
Convert in this order (least-to-most dependent):
1. `range-slider` — no cross-widget deps
2. `date-range-picker` — no cross-widget deps
3. `search-select` — no deps; exports `readSearchSelect()` consumed by filter-bar
4. `filter-bar` — imports `readSearchSelect`; removes all `window.*` globals
`onSwap` is NOT retired by this issue — `year_picker.ts` and `add_purchase.ts` still use it (see #17).
## Per-Widget Conversion Pattern
Each widget follows the same steps:
### Python side
1. Add `XxxProps(TypedDict)` to `common/components/custom_elements.py`
2. Call `register_element("xxx", "Xxx", XxxProps)` immediately after
3. Create `_Xxx = custom_element_builder("xxx")`
4. Update the Python component (in `filters.py`, `search_select.py`, or `date_range_picker.py`) to use the builder; remove old `_XXX_MEDIA` and `.with_media(...)` calls
### TypeScript side
5. Create `ts/elements/xxx.ts` (move logic from `ts/xxx.ts`)
6. Replace IIFE + `onSwap(selector, fn)` with `class XxxElement extends HTMLElement { connectedCallback() { ... } }`
7. Read typed props via generated `readXxxProps(this)` instead of `el.getAttribute("data-xxx")`
8. Add `disconnectedCallback()` to remove any document-level event listeners
9. End with `customElements.define("xxx", XxxElement)`
### Build
10. `uv run manage.py gen_element_types` — regenerates `ts/generated/props.ts`
11. `make ts` — compiles all TypeScript
12. `make check` — linting + type-check + tests
### E2E
13. Update Playwright locators to match new element tags and attribute names
## Widget Specifics
### `range-slider`
**Props:**
```python
class RangeSliderProps(TypedDict):
min: int
max: int
step: int
mode: str # "range" | "point"
```
**Structural change:** `<range-slider>` replaces the outer `.range-slider-block` wrapper div AND the inner `.range-slider` div. The mode toggle button and the track/handles all become light-DOM children of `<range-slider>`. This eliminates `slider.closest(".range-slider-block")` — the TS can use `this.querySelector(".range-mode-toggle")` directly.
The `data-mode` attribute becomes the typed `mode` prop (attribute `mode` on the element). The JS updates this attribute on toggle: `this.setAttribute("mode", newMode)`.
E2E: `.range-slider-block``range-slider`; `slider[data-mode]``range-slider[mode]`.
### `date-range-picker`
**Props:**
```python
class DateRangePickerProps(TypedDict):
input_name_prefix: str
```
**Structural change:** `<date-range-picker>` replaces the outer `<div data-date-range-picker data-input-name-prefix="...">`. `DateRangeField` and `DateRangeCalendar` remain unchanged as light-DOM children.
The `data-input-name-prefix` attribute on `DateRangeCalendar` can be removed since the prefix is now a typed prop on the element itself, readable as `readDateRangePickerProps(this).inputNamePrefix`.
### `search-select`
**Props:**
```python
class SearchSelectProps(TypedDict):
name: str
search_url: str # empty string when no URL
multi: bool
filter_mode: bool # true for FilterSelect; replaces data-search-select-mode="filter"
free_text: bool
always_visible: bool
prefetch: int
sync_url: bool
```
**Structural change:** `<search-select>` replaces the outer `<div data-search-select ...>`. All internal child elements (`[data-search-select-search]`, `[data-search-select-options]`, etc.) remain unchanged.
**`readSearchSelect` export:** Remove `window.readSearchSelect = ...`. Export as a named module function:
```typescript
export function readSearchSelect(scope: HTMLElement): void { ... }
```
`filter_bar.ts` will import it. Update the function to query `search-select[filter-mode="true"]` instead of `[data-search-select][data-search-select-mode="filter"]`.
E2E: `[data-search-select][data-name="status"]``search-select[name="status"]`.
### `filter-bar`
**Props:**
```python
class FilterBarProps(TypedDict):
preset_list_url: str
preset_save_url: str
```
**Structural change:** `<filter-bar>` wraps the entire filter bar structure (collapse toggle + form + action row). The Python `_FilterBarBase.render()` wraps its output in the builder.
**Window globals removed:** `applyFilterBar`, `clearFilterBar`, `toggleStringFilterInput`, `showPresetNameInput`, `savePreset` are no longer assigned to `window`. `connectedCallback` wires all handlers:
- `this.querySelector("form")``submit` listener (replaces `onsubmit`)
- `this.querySelector("[data-filter-bar-clear]")``click` listener
- `this.querySelector("[data-filter-bar-save]")``click` listener
- `this.querySelector("[data-filter-bar-confirm-save]")``click` listener
- `this.querySelectorAll("[data-string-modifier-radio]")``change` listeners
**Python changes in `filters.py`:**
- Remove `onsubmit="return applyFilterBar(event)"` from form
- Replace `onclick="clearFilterBar(...)"``data-filter-bar-clear`
- Replace `onclick="showPresetNameInput()"``data-filter-bar-save`
- Replace `onclick="savePreset(...)"``data-filter-bar-confirm-save`
- Replace `onclick="toggleStringFilterInput(this)"``data-string-modifier-radio` (already present)
- Move `preset_list_url` from `data-preset-list-url` on `#preset-dropdown` to a typed prop on `<filter-bar>`
- Preset dropdown: `this.querySelector("[data-preset-dropdown]")` (add this attr)
**Import:** `filter-bar.ts` imports `{ readSearchSelect }` from `./search-select.js`.
**`globals.d.ts`:** Remove all entries except `fetchWithHtmxTriggers` and `toast` (which remain as globals).
## Verification
```bash
uv run manage.py gen_element_types # codegen passes
make ts # tsc --noEmit passes
make test # unit tests pass
make test-e2e # e2e tests pass (after locator updates)
make check # full CI gate
```
Manual visual check each widget after conversion (per issue requirement).
@@ -1,288 +0,0 @@
# Issue #56 — Programmatic way of defining filters (filter links)
**Date:** 2026-06-21
**Issue:** https://github.com/KucharczykL/timetracker/issues/56
## Problem
Filters can currently only be built through the UI. There is no Python-level way
to construct a link to a filtered list view, so places that *should* link to a
filtered list cannot. The issue cites three call sites:
1. Navbar playtime totals ("today" / "last 7 days") — should link to the matching
filtered session list.
2. Stats-page tables — rows should link to filtered results.
3. `view_game` tables — should link to filtered list views.
The acceptance criteria are:
- A programmatic way in Python to create a link to a combination of filters
(analogous to Django's `reverse()`).
- Clickable links for the navbar playtime statistics.
## Scope
**In scope (this work):**
- The core `filter_url()` helper.
- The `OperatorFilter.where()` ergonomic constructor.
- The date-range filtering capability the navbar links require.
- Wiring the navbar "today" / "last 7 days" totals as links.
**Out of scope — filed as a follow-up issue:**
- Stats-page table links.
- `view_game` table links.
These are deferred deliberately to keep this change small. They both build
directly on `filter_url()`, so they are pure consumers of this work. See
"Follow-up issue" below for the drafted text.
## Current state (as investigated)
- Filters are `@dataclass` subclasses of `OperatorFilter` in `games/filters.py`
(`GameFilter`, `SessionFilter`, `PurchaseFilter`, `PlayEventFilter`,
`DeviceFilter`, `PlatformFilter`). Each is built from typed criterion objects
defined in `common/criteria.py`.
- Serialization helpers in `common/criteria.py`: `filter_to_json(f)`
`json.dumps(f.to_json())`; `filter_from_json(cls, json_str)` → filter instance.
- List views read `request.GET.get("filter")` (a URL-encoded JSON string),
deserialize via `parse_*_filter()`, and apply `.to_q()` to the queryset.
- List view URL names: `games:list_games`, `games:list_sessions`,
`games:list_purchases`, `games:list_playevents`, `games:list_devices`,
`games:list_platforms`.
- `games/views/filter_presets.py` already hand-rolls the URL-building pattern:
`f"{reverse(f'games:list_{mode}')}?filter={quote(filter_json)}"`. There is **no
shared helper** — this work introduces one.
- The navbar playtime totals are produced by the `model_counts` context processor
(`games/views/general.py`) as formatted strings (`today_played`,
`last_7_played`) and rendered by `NavbarPlaytime()` (`common/layout.py`). The
component is also refreshed out-of-band after session changes
(`games/views/session.py:311`), so any new data must flow through both paths.
- `SessionFilter.timestamp_start` / `timestamp_end` are typed as
`StringCriterion`, which supports only EQUALS / NOT_EQUALS / INCLUDES /
EXCLUDES / regex / null — **no `GREATER_THAN` / `LESS_THAN` / `BETWEEN`**. So
date-range filtering on session timestamps is not currently expressible. These
fields are **not** exposed in the filter-bar UI
(`common/components/filters.py` has no reference to them), so their criterion
type can be changed safely.
## Design
### Component 1 — `filter_url()` (the "`reverse()` for filters")
A single helper in `games/filters.py`, symmetric with the existing
`parse_*_filter()` functions. It infers the target list view from the filter
object's *type*, so a filter can never be paired with a mismatched URL.
```python
_FILTER_LIST_URL = {
GameFilter: "games:list_games",
SessionFilter: "games:list_sessions",
PurchaseFilter: "games:list_purchases",
PlayEventFilter: "games:list_playevents",
DeviceFilter: "games:list_devices",
PlatformFilter: "games:list_platforms",
}
def filter_url(filter_obj: OperatorFilter, **extra_params: str) -> str:
"""Build a URL to the filtered list view for ``filter_obj``.
The target view is inferred from the filter's type. ``extra_params`` are
merged into the query string (e.g. ``sort``, ``page``)."""
url_name = _FILTER_LIST_URL[type(filter_obj)]
params = {"filter": filter_to_json(filter_obj), **extra_params}
return f"{reverse(url_name)}?{urlencode(params)}"
```
- Uses `django.utils.http.urlencode` (already imported in `common/utils.py`),
which URL-encodes the JSON value correctly.
- `**extra_params` leaves room for `sort` / `page` later without being required
now.
- `filter_presets.py` can adopt this helper later; not required for this change.
### Component 1b — `OperatorFilter.where()` (ergonomic construction)
Building filters via the explicit constructor is verbose, because each criterion
must be wrapped and a `Modifier` imported:
```python
GameFilter(
purchase_count=IntCriterion(value=1, modifier=Modifier.GREATER_THAN),
playtime_hours=IntCriterion(modifier=Modifier.IS_NULL),
)
```
Add a `where(**lookups)` classmethod on `OperatorFilter` (so every filter type
inherits it) accepting Django-`QuerySet.filter()`-style `field__modifier=value`
lookups:
```python
GameFilter.where(purchase_count__gt=1, playtime_hours__isnull=True)
# combined with filter_url():
filter_url(GameFilter.where(purchase_count__gt=1, playtime_hours__isnull=True))
# the navbar filters become:
filter_url(SessionFilter.where(timestamp_start=today_iso))
filter_url(SessionFilter.where(timestamp_start__between=(week_ago_iso, today_iso)))
```
How it works (no new architecture — it builds the same dataclass instances):
1. Split each kwarg into `(field_name, suffix)` on the last `__`.
2. Resolve the field's criterion class from its dataclass annotation, reusing the
logic `from_json` already has (`common/criteria.py:439-473`). Factor that
resolution into a shared helper (e.g. `_criterion_class_for(cls, field)`) so
`from_json` and `where()` cannot drift — a small de-duplication bonus.
3. Map the suffix to a `Modifier` (see table); no suffix → the criterion type's
natural default (`EQUALS` for scalar/string/bool, `INCLUDES` for the set
criteria `MultiCriterion` / `ChoiceCriterion`).
4. Build the concrete criterion: scalar → `value`; a 2-tuple → `value` / `value2`
(for `between` / `not_between`); a list → the set criterion's `value`.
5. Return a normal filter instance.
Suffix → `Modifier` map:
| suffix | Modifier |
|---------------|-----------------|
| *(none)* | `EQUALS` (scalar/string/bool) / `INCLUDES` (set) |
| `gt` | `GREATER_THAN` |
| `lt` | `LESS_THAN` |
| `ne` | `NOT_EQUALS` |
| `between` | `BETWEEN` (value is a 2-tuple) |
| `not_between` | `NOT_BETWEEN` (value is a 2-tuple) |
| `in` | `INCLUDES` (set) |
| `exclude` | `EXCLUDES` (set) |
| `all` | `INCLUDES_ALL` (set) |
| `contains` | `INCLUDES` (string `icontains`) |
| `regex` | `MATCHES_REGEX` |
| `isnull` | `IS_NULL` (value ignored) |
| `notnull` | `NOT_NULL` (value ignored) |
Design decisions:
- **Purely additive.** The explicit constructor, `to_q()`, and serialization are
unchanged. `where()` is chosen over a custom `__init__` precisely to keep the
explicit `GameFilter(name=StringCriterion(...))` form **fully statically typed**
(a `@dataclass(init=False)` + `**kwargs` constructor would have erased that).
- **Real field names, no aliasing.** Lookups use the actual dataclass field names
(e.g. `playtime_hours`, not a prettier `playtime`); no alias layer to maintain.
- **Fail loud.** An unknown field name or an unknown/!type-incompatible suffix
raises a clear `ValueError`/`TypeError` rather than silently producing an empty
filter. The lookup form is dynamic (like Django's `.filter()`), so this runtime
validation replaces static checking for that form only.
- **Scope.** `where()` covers the common flat-AND case (the verbose pain point).
`AND` / `OR` / `NOT` nesting continues to use the explicit constructor, which
reads fine and is rare.
### Component 2 — date-range filtering on session timestamps
**Decision: switch `SessionFilter.timestamp_start` / `timestamp_end` to
`DateCriterion` and apply them via Django's `__date` lookup.**
Rationale (the alternative was a new "relative date" criterion type):
- `DateCriterion` already exists and supports `GREATER_THAN` / `LESS_THAN` /
`BETWEEN` — no new criterion semantics to invent.
- The navbar link is server-rendered and regenerated on every request, so
encoding concrete dates is correct, reproducible, and shareable. A rolling
"relative date" concept is unnecessary machinery for this scope (YAGNI).
- The serialized JSON shape (`value`, `modifier`, optional `value2`) is
backward-compatible with any existing `StringCriterion`-shaped data for these
fields, and the fields are not in the UI, so the type change is low-risk.
Changes in `SessionFilter`:
- Field annotations: `timestamp_start: DateCriterion | None`,
`timestamp_end: DateCriterion | None`.
- In `to_q()`, target the date lookup so a date compares correctly against the
datetime column:
```python
if self.timestamp_start is not None:
q &= self.timestamp_start.to_q("timestamp_start__date")
if self.timestamp_end is not None:
q &= self.timestamp_end.to_q("timestamp_end__date")
```
`DateCriterion.to_q("timestamp_start__date")` produces
`timestamp_start__date__gte=…` etc., which is valid.
The two navbar filters expressed with this:
- **Today:** `SessionFilter(timestamp_start=DateCriterion(value=today_iso,
modifier=Modifier.EQUALS))` → `timestamp_start__date = today`.
- **Last 7 days:** `SessionFilter(timestamp_start=DateCriterion(
value=(today6)_iso, value2=today_iso, modifier=Modifier.BETWEEN))` →
7 calendar days inclusive (today and the previous six).
### Component 3 — navbar wiring (and a consistency fix)
- `model_counts` (`games/views/general.py`) computes `today_url` and
`last_7_url` with `filter_url(SessionFilter.where(...))` (see Component 1b) and
adds them to its returned dict alongside the existing formatted totals.
- `NavbarPlaytime()` (`common/layout.py`) gains `today_url` / `last_7_url`
parameters and wraps each total string in an `<a href>`. The out-of-band
refresh call in `games/views/session.py:311` passes the new URLs too.
**Deliberate behavior change — align the "last 7 days" total with its link.**
The displayed "last 7 days" total currently uses a *rolling 168-hour* window
(`timestamp_start__gte = now timedelta(days=7)`), which would not match a
calendar-day link. To keep the number and the list it links to consistent, the
total is changed to the same **calendar-day boundary** used by the link
(`timestamp_start__date >= today 6 days`, i.e. 7 calendar days inclusive). The
"today" total already matches (`[midnight, next midnight)``__date = today`),
so only the 7-day computation changes.
## Testing
- **`filter_url()`** (unit): returns the correct path for each filter type; the
`filter` query param is the URL-encoded `filter_to_json(filter_obj)`; extra
params are merged; the produced URL round-trips through `parse_session_filter`
to an equivalent filter.
- **`where()`** (unit): each suffix maps to the right `Modifier`; the resolved
criterion class matches the field annotation across criterion types
(`Int`/`String`/`Bool`/`Date`/`Multi`/`Choice`); `between` consumes a 2-tuple
into `value`/`value2`; no-suffix defaults to `EQUALS` for scalars and
`INCLUDES` for set criteria; `isnull`/`notnull` ignore the value;
`GameFilter.where(purchase_count__gt=1, playtime_hours__isnull=True)` produces a
filter equal to the explicit construction and yields the same `to_q()`; an
unknown field or suffix raises.
- **Date filtering** (unit/db): sessions started today / 3 days ago / 10 days ago
fall into the correct buckets for the "today" and "last 7 days" filters via
`SessionFilter.to_q()`.
- **Navbar** (render): `NavbarPlaytime` renders anchors with the expected
`href`s; a smoke test confirms the linked URLs return 200 and apply the filter.
## Follow-up issue (to be filed)
**Title:** Wire programmatic filter links into stats tables and the game-detail page
**Body:**
> Issue #56 introduced `filter_url()` (a `reverse()`-style helper that builds a
> URL to a filtered list view from a filter object) and used it for the navbar
> playtime links. Two of the call sites named in #56 were deferred and should now
> be wired up using that helper:
>
> - **Stats-page tables** (`games/views/stats_content.py`): make table rows link
> to the corresponding filtered list (e.g. a game's playtime row → sessions for
> that game; a finished-games row → that game).
> - **`view_game` tables** (`games/views/game.py`): the sessions / purchases /
> playevents sections should offer "view all … for this game" links to the
> filtered list views.
>
> All of these are pure consumers of `filter_url()`; no new filter machinery is
> required. Decide per table which filter each link should encode.
`gh` is not installed in the working environment, so this is provided as
ready-to-paste text; it can be filed manually or via `gh` once available.
## Notes / risks
- Changing the criterion type of `timestamp_start` / `timestamp_end` affects how
any persisted `FilterPreset` containing those fields deserializes (it will now
resolve to `DateCriterion`). The JSON shape is compatible and these fields are
not surfaced in the UI, so the risk is minimal, but it is worth a grep for any
saved presets referencing them before merge.
@@ -1,232 +0,0 @@
# Issue #65 — Stats-page filtered links
**Date:** 2026-06-21
**Issue:** https://github.com/KucharczykL/timetracker/issues/65 (sub-issue of #61, follow-up to #56)
**Prereq:** #67 — date-range filtering on `PlayEventFilter.ended`/`started`
(**merged**, PR #69). `ended`/`started` are now `DateCriterion`; because they are
`DateField`s (not `DateTimeField`s) the implementation uses a bare lookup, not
`__date`. Tier 2 is therefore unblocked — both tiers can ship together.
## Problem
The stats page (`games/views/stats_content.py`, data from `stats_data.py`) shows
aggregate playtime/purchase metrics and several lists. Rows and counts don't link
to the underlying records. #56 introduced `filter_url()` and
`OperatorFilter.where()`; this wires the stats page to those helpers so a row or
count drills into the filtered list it represents.
The page is scoped either to a single year (`compute_stats(year)`, `data["year"]`
is an int) or all-time (`compute_stats(None)`, `data["year"] == "Alltime"`).
## Scope
Two tiers, split by what the filter system can express **today**:
- **Tier 1 — implemented in this issue** (no new filter machinery).
- **Tier 2 — needs "finished in year" filtering** from #67 (now merged, PR #69),
so it can ship alongside Tier 1.
Also in scope (from design review): shorten long lists to 5 items with a "view
all" link, and remove the "All purchases" list.
## Year scoping
Every link encodes the page's scope:
- **Per-year page**: sessions filtered by `timestamp_start` BETWEEN `{year}-01-01`
and `{year}-12-31`; purchases by `date_purchased` BETWEEN the same bounds.
- **All-time page**: no date constraint.
A single helper computes the year bounds (or `None`) once and is reused by every
link builder so scoping is consistent.
## Design
### A. Per-row entity links
**Game rows** — superlative rows in `_playtime_table` (longest session, most
sessions, highest average, first/last play) and the "Games by playtime" list.
Keep the existing `GameLink` (→ game detail) and **add** a separate affordance (a
small icon link) to that game's filtered session list:
```python
filter_url(SessionFilter.where(game=[game.id], **session_year_bounds))
```
**Platform rows** — "Platforms by playtime". Link each platform to its sessions:
```python
filter_url(SessionFilter.where(
game_filter=GameFilter.where(platform=[platform_id]),
**session_year_bounds,
))
```
Requires a **data change**: `total_playtime_per_platform` rows currently carry
only `platform_name`. Add `platform_id` to the dict in `stats_data.py`.
**Month rows** — "Playtime per month" (per-year only). Link each month to its
sessions:
```python
filter_url(SessionFilter.where(
timestamp_start__between=(month_start_iso, month_end_iso)
))
```
### B. Aggregate count links
In `_playtime_table` (Tier 1 — added per design review item G):
- **Sessions** count → `SessionFilter.where(**session_year_bounds)`.
- **Games** count → games played in scope:
`GameFilter.where(session_filter=SessionFilter.where(**session_year_bounds))`.
In `_purchases_table`:
- **Total purchased** (Tier 1) → `PurchaseFilter.where(**purchase_year_bounds)`.
- **Refunded** (Tier 1) →
`PurchaseFilter.where(is_refunded=True, **purchase_year_bounds)`.
- **Dropped** (Tier 2) → purchases that are abandoned-or-refunded and not
finished; uses the `not_finished` composition (see Tier 2).
- **Unfinished** (Tier 2) → the `purchased_unfinished` set (see Tier 2).
- **Backlog decrease** (Tier 2) → per-year: purchases bought before the year whose
game is finished-in-year (see Tier 2). Expressible with prereq #67 — no extra
machinery.
### C. List capping + "view all"
Cap these lists to **5 rows** and append a **"View all (N) →"** link to the
filtered list (N = the full count):
| List | Cap from | "View all" target |
|------|----------|-------------------|
| Games by playtime | 10 | games played in scope (Tier 1) |
| Finished | all | finished purchases in scope (Tier 2) |
| Finished (YYYY) | all | finished-in-year, released-in-year (Tier 2) |
| Bought & Finished (YYYY) | all | purchased-in-year ∧ finished-in-year (Tier 2) |
| Unfinished purchases | all | `purchased_unfinished` set (Tier 2) |
Capping is done in `stats_content.py` (slice to 5 for display); the full count
for the link label comes from the existing `_count` keys in `StatsData` (or
`len()` where no count key exists). The "Games by playtime" cap also reduces
`top_10_games_by_playtime` usage to 5 (slice at render; the data key may keep its
name or be renamed to `top_games_by_playtime` — implementer's choice, update both
sites).
**Remove** the "All purchases" list (`all_purchased_this_year` rendering). Its
entry point is the "Total purchased" count link. The `StatsData` key may remain
(harmless) or be removed if no other consumer exists.
### D. Tier 2 — finished/dropped/unfinished/backlog (uses #67)
With #67 merged, `PlayEventFilter.ended` is a `DateCriterion` (bare `DateField`
lookup), so "finished in year" is expressible and the chain
`PurchaseFilter.game_filter → GameFilter.playevent_filter → PlayEventFilter`
composes the Tier-2 targets. Reference semantics (from `stats_data.py`):
- **finished** (`Purchase.objects.finished()`) = game `status == FINISHED` **or**
game has a playevent with `ended` set →
`GameFilter.where(OR=...)` of `status=[FINISHED]` and
`playevent_filter=PlayEventFilter.where(ended__notnull=True)`.
- **finished in year** = above **and** `ended` within the year →
add `playevent_filter=PlayEventFilter.where(ended__between=(jan1, dec31))`.
- **finished (YYYY) released-in-year** = finished-in-year **and**
`GameFilter year_released == year`.
- **bought & finished (YYYY)** = `is_refunded=False`, `date_purchased` in year,
game finished-in-year.
- **dropped** = `type in (game, dlc)`, `infinite=False`, **and**
(`game status=ABANDONED` **or** `is_refunded=True`), **and** not finished-in-year.
- **unfinished** = `is_refunded=False`, `infinite=False`, `type in (game, dlc)`,
game `status NOT IN (FINISHED, RETIRED, ABANDONED)`, **and** not finished-in-year.
- **backlog decrease** (per-year) = `date_purchased__lt = {year}-01-01`, game
`status=FINISHED`, **and** finished-in-year →
`PurchaseFilter.where(date_purchased__lt=jan1, game_filter=GameFilter.where(
status=[FINISHED], playevent_filter=PlayEventFilter.where(ended__between=(jan1, dec31))))`.
All-time backlog decrease equals the all-time finished count (matches current
`stats_data.py` behavior) → link to the all-time finished filter.
These are nested AND/OR/NOT compositions of existing fields plus the #67 date
range — no further machinery.
### E. Components / rendering
Reuse existing builders in `stats_content.py` (`_td`, `_tr`, `GameLink`, `A`).
Add small helpers:
- `_session_link_icon(game_id, year_bounds)` → an `A` wrapping an `Icon`, for the
per-row game session affordance.
- `_view_all(count, url)` → the "View all (N) →" row/footer link.
Year-bounds helper (e.g. `_year_bounds(year)`) returns the session/purchase
`where()` kwargs (or empty dict for all-time), so every builder scopes
identically.
## Sorting parity (#68 — merged)
The stats lists are sorted, so a "view all" link must reproduce both the set *and*
the order. #68 (PR #78) added `games/sorting.py` and a `?sort=` query param (a
signed comma-list of public sort keys) honored by the list views, with the keys
this feature needs:
- `GAME_SORTS`: `playtime` (`Sum(sessions__duration_total)`), `finished`
(`Max(playevents__ended)`).
- `PURCHASE_SORTS`: `finished` (`Max(games__playevents__ended)`), `purchased`,
`price`, `name`.
So each "view all" link passes the matching key via `filter_url(..., sort=...)`
**no TODOs**. The annotated keys (`playtime`, `finished`) mirror the aggregates
`stats_data.py` uses, so order matches exactly:
| View all | sort= | matches stats order |
|----------|-------|---------------------|
| Games by playtime | `-playtime` | `top_*_games_by_playtime` (playtime desc) |
| Finished | `finished` / `-finished` | the section's `order_by` in `stats_data.py` |
| Finished (YYYY) | `finished` | `games__playevents__ended` asc |
| Bought & Finished (YYYY) | `finished` | `games__playevents__ended` asc |
| Unfinished purchases | `-purchased` | purchase list default order |
Direction (asc vs desc) per finished section is chosen to match that section's
`order_by` in `stats_data.py`; the rendering test asserts the linked list's order
matches the preview's.
## Exact-match requirement
A count or "view all" link must land on a list whose total equals the displayed
number. The stats queries traverse M2M (`games__…`) joins; the filter layer
resolves cross-entity criteria via `Game.objects.filter(...).values_list("id")`
subqueries, so join/`distinct` semantics can differ. Each linked category gets a
test asserting the linked filter's queryset count equals the corresponding
`StatsData` count, on seeded data. Any category that can't be made to match
exactly is reported (not silently shipped with a wrong number).
## Testing
- **Link builders** (unit): for each linked row/count, `filter_url(...)` produces
the expected path and the `filter` JSON round-trips through the matching
`parse_*_filter`. Year-scoped vs all-time variants both covered.
- **Exact-match** (db): seed games/sessions/purchases/playevents spanning the year
boundary and other years; assert each linked filter's count equals the
`compute_stats(year)` / `compute_stats(None)` value for that category (both
tiers, since #67 is merged).
- **Rendering** (db): stats page renders; capped lists show ≤5 rows + a "View all"
link; the "All purchases" list is gone; smoke-test that the generated link URLs
return 200.
## Implementation order
1. **Tier 1 + capping + removal** (this issue, independent of #67): per-row game /
platform / month session links, sessions/games/total-purchased/refunded count
links, list capping with Tier-1 "view all" links, remove "All purchases",
`platform_id` data change.
2. **Tier 2** (unblocked — #67 is merged): finished/dropped/unfinished/
backlog-decrease count and "view all" links.
Both tiers can ship together now that #67 is merged; Tier 1 remains independently
shippable if a smaller first PR is preferred.
## Out of scope
- The `view_game` table links (#66, the other #61 sub-issue).
- List-view sort support itself (#68, merged) — #65 only *passes* the `sort` param
to the existing keys (see "Sorting parity").
@@ -1,310 +0,0 @@
# Honor `sort`/`direction` query params on list views (#68)
## Problem
The stats page (#65) adds "View all (N) →" links from its sorted lists to the
filtered list views. The list views (`list_games`, `list_sessions`,
`list_purchases`) hardcode `order_by(...)` and ignore any sort parameter, so a
"view all" link lands on the right *set* of rows but not in the same *order* the
stats page showed.
`FindFilter` (in `games/filters.py`) already models `sort` / `direction` but is
never parsed or applied anywhere.
Hardcoded orders today:
- `games/views/game.py:59``Game.objects.order_by("-created_at")`
- `games/views/session.py:122``Session.objects.order_by("-timestamp_start", "created_at")`
- `games/views/purchase.py:122``Purchase.objects.order_by("-date_purchased", "-created_at")`
## Goal
Make all three list views honor a `sort` query param (a signed comma-list of
column keys), with every visible column sortable plus the aggregate sorts the
stats page needs for "view all" parity (games-by-playtime, finish-date). Backend
only — no clickable header UI in this issue (tracked in #73).
## Scope decisions (from brainstorming)
- **Sortable set:** all visible list columns, plus stats-parity aggregates
(playtime, finish date) even where they are not visible columns.
- **UI:** backend only. Honor the query param; do not add clickable column
headers. File a follow-up issue for the header UI.
- **URL contract:** a single signed comma-list of **public keys**
`?sort=-playtime,name`. The `-` attaches to the public key and sets that
key's direction; the whitelist still maps the key to its internal
expression+annotation. Bare key = **ascending** (Django semantics, no hidden
per-key defaults); leading `-` = descending. Rationale: natural multi-column,
one param, each term self-describes direction, mirrors Django `order_by`, and
is **forward-compatible to multi-column with zero contract change**.
- **Multi-column:** the backend parses and applies the **full** term list now
(server-side multi-column works immediately). Only the UI that *generates*
multi-term URLs (clickable headers, shift-click to add a column) is deferred
to the follow-up issue.
- **Default ordering:** since bare keys are ascending and signs are explicit,
each view's default order is itself just a default signed sort string parsed
by the same machinery — no separate `default_direction` field, no per-key
tiebreak concept.
- **Module:** new `games/sorting.py` (keeps the already-large `filters.py`
focused; imports `FindFilter` from it).
- **Purchase name sort:** annotated `Min("games__name")` — one row per purchase,
no M2M duplication.
## Prerequisite: fix N+1 queries on list rows
The list querysets currently have **no** `select_related`/`prefetch_related`, so
each rendered row lazy-loads its relations. The sort work touches these exact
querysets (and adds aggregate annotations), so the eager-loading fix lands here:
- `list_games``Game.objects.select_related("platform")` (icon via
`NameWithIcon`).
- `list_sessions``Session.objects.select_related("game", "game__platform", "device")`.
- `list_purchases``Purchase.objects.prefetch_related("games", "games__platform")`
(M2M rendered by `LinkedPurchase`; confirm `games__platform` need during impl).
These are added to the **base** queryset (before filtering/annotating), so they
compose with `apply_sort`'s annotations.
## Design
### URL contract
`?sort=<signed-key>[,<signed-key>...]` on `list_games`, `list_sessions`,
`list_purchases`. Examples: `?sort=-playtime`, `?sort=status,name`,
`?sort=-date,created`.
- Each term is a public key, optionally prefixed `-`. Bare = ascending; `-` =
descending (Django `order_by` semantics).
- Terms whose key is not in the model's map are **ignored, and a user-facing
warning toast is shown** ("Unknown sort field '<key>' was ignored.") — never a
400. Any remaining valid terms still apply; the page renders normally.
- If `sort` is absent, empty, or has no valid terms → the view's default sort
string is used (parsed by the same machinery).
- Invalid values never raise.
The warning surfaces drift (e.g. a #65 "view all" link with a stale/typo'd key)
without breaking a user-facing, hand-editable URL. It rides the existing
messages→toast path: `render_page()` serializes `get_messages(request)` into the
`#django-messages` JSON block (`common/layout.py`) and `toast.js` renders it —
works on a full-page GET, which is what #65 links are. No new plumbing.
`sorting.py` itself stays HTTP-free: it *reports* unknown keys; the view emits
the `messages.warning`.
Pagination already preserves the param: `_page_url` (in
`common/components/primitives.py`) copies `request.GET` and only replaces `page`.
### `games/sorting.py`
Named string roles (PEP 695 transparent aliases — `requires-python >=3.13`).
They read like TS `type X = string`: no runtime cost, no wrapping ceremony, but
each `str` in a signature now says *which* string it is:
```python
from django.db.models import Aggregate
type SortKey = str # public column key in a *_SORTS map and in a URL term ("playtime", "name")
type SortString = str # comma-list of signed SortKeys: the URL ?sort= value and *_DEFAULT_SORT ("-date,created")
type AnnotationName = str # an alias added via .annotate(), then referenced by SortSpec.expression
type OrderField = str # SortSpec.expression: a real model field path OR an AnnotationName
# alias name -> the ORM aggregate that computes it, applied via queryset.annotate()
# e.g. {"total_playtime": Sum("sessions__duration_total")}
type Annotations = dict[AnnotationName, Aggregate]
@dataclass(frozen=True)
class SortSpec:
expression: OrderField # unsigned; a real column path or an AnnotationName
annotate: Annotations | None = None
```
All current sorts use `Aggregate` subclasses (`Sum`/`Max`/`Min`); if a
non-aggregate annotation (`F`, `ExpressionWrapper`) is ever needed, widen
`Annotations`' value to `Combinable` then.
Direction is never stored on the spec — it comes from the sign in the URL term.
Cross-relation sorts use **annotated aggregates** (`Sum`/`Max`/`Min`), which
group by the model PK and therefore produce no duplicate rows. Bare
`order_by("relation__field")` is never used for to-many relations.
#### Per-model maps + default sort strings
All three maps are typed `SortMap` (`dict[SortKey, SortSpec]`); each
`*_DEFAULT_SORT` is a `SortString`.
**`GAME_SORTS`** — `GAME_DEFAULT_SORT = "-created"`:
| key | expression | annotate |
|---|---|---|
| name | `name` | — |
| sort_name | `sort_name` | — |
| year | `year_released` | — |
| status | `status` | — |
| wikidata | `wikidata` | — |
| created | `created_at` | — |
| playtime | `total_playtime` | `Sum("sessions__duration_total")` |
| finished | `last_finished` | `Max("playevents__ended")` |
**`SESSION_SORTS`** — `SESSION_DEFAULT_SORT = "-date,created"`
(reproduces today's `order_by("-timestamp_start", "created_at")`):
| key | expression | annotate |
|---|---|---|
| name | `game__sort_name` | — (to-one; safe) |
| date | `timestamp_start` | — |
| duration | `duration_total` | — |
| device | `device__name` | — (to-one; safe) |
| created | `created_at` | — |
**`PURCHASE_SORTS`** — `PURCHASE_DEFAULT_SORT = "-purchased,-created"`
(reproduces today's `order_by("-date_purchased", "-created_at")`):
| key | expression | annotate |
|---|---|---|
| name | `first_game_name` | `Min("games__name")` |
| type | `type` | — |
| price | `converted_price` | — |
| infinite | `infinite` | — |
| purchased | `date_purchased` | — |
| refunded | `date_refunded` | — |
| created | `created_at` | — |
| finished | `last_finished` | `Max("games__playevents__ended")` |
> `game__sort_name` / `device__name` are to-one relations — no duplication, so
> no annotation needed.
> The `finished` purchase key gives the stats "view all" finish-date parity.
> Model field names confirmed against `games/models.py`: `infinite`,
> `converted_price`, `date_purchased`, `date_refunded`, `type`; session
> `duration_total` is a `GeneratedField` (orderable).
#### Term parsing
```python
class SortTerm(NamedTuple):
key: SortKey
descending: bool # True = "-key" (desc), False = bare key (asc)
type SortMap = dict[SortKey, SortSpec]
class ParsedSort(NamedTuple):
terms: list[SortTerm]
unknown: list[SortKey] # keys not in the map — the view turns these into warnings
def parse_sort_terms(raw: SortString, sort_map: SortMap) -> ParsedSort:
terms, unknown = [], []
for token in raw.split(","):
token = token.strip()
if not token:
continue
descending = token.startswith("-")
key = token.lstrip("-")
if key in sort_map:
terms.append(SortTerm(key, descending))
else:
unknown.append(key)
return ParsedSort(terms, unknown)
```
### Apply helper
```python
class SortResult(NamedTuple):
queryset: QuerySet
terms: list[SortTerm] # the order actually applied — #73's header UI consumes this
unknown: list[SortKey] # rejected keys — the view turns these into warning toasts
def apply_sort(
queryset: QuerySet, find: FindFilter, sort_map: SortMap, default_sort: SortString
) -> SortResult:
terms, unknown = parse_sort_terms(find.sort or "", sort_map)
if not terms:
# default_sort is trusted developer config — ignore any "unknown" from it
terms, _ = parse_sort_terms(default_sort, sort_map)
annotations: Annotations = {}
order_by: list[OrderField] = []
for term in terms:
spec = sort_map[term.key]
if spec.annotate:
annotations.update(spec.annotate)
order_by.append(("-" if term.descending else "") + spec.expression)
if annotations:
queryset = queryset.annotate(**annotations)
return SortResult(queryset.order_by(*order_by), terms, unknown)
```
The full term list is applied (server-side multi-column). `SortResult.terms` is
what the future header UI (#73) consumes; `SortResult.unknown` is what the view
turns into warning toasts.
### FindFilter parsing
```python
def parse_find_filter(request: HttpRequest) -> FindFilter:
return FindFilter(sort=request.GET.get("sort") or None) # FindFilter.sort holds a SortString
```
`FindFilter.direction` is **not used** by #68 — direction lives in the sign of
each `sort` term, not a separate field. Nothing serializes it today (the
`FilterPreset.find_filter` `JSONField` is currently unpopulated; `FindFilter`
has no JSON round-trip), so #68 leaves the field untouched rather than churn it.
Whether to remove it or formally wire it is decided in **#74**. Page / per_page
likewise stay with `paginate()`; not wired into `FindFilter` now (YAGNI, #74).
### View wiring (×3)
In each list view, remove the hardcoded `.order_by(...)` from the base queryset
and, after filtering and before `paginate()`:
```python
find = parse_find_filter(request)
sort = apply_sort(games, find, GAME_SORTS, GAME_DEFAULT_SORT) # sort: SortResult
games = sort.queryset
for key in sort.unknown:
messages.warning(request, f"Unknown sort field '{key}' was ignored.")
```
(`session.py` / `purchase.py` analogous with their maps + default sort strings.)
## Testing
`tests/test_sorting.py`:
- Default order unchanged for each model when no `sort` param is present
(regression guard against the removed hardcoded `order_by` — the default sort
string must reproduce the old order exactly).
- Each key in each map sorts ascending (bare) and descending (`-` prefix).
- Multi-column term list applies in order (e.g. `?sort=status,name`).
- Unknown keys are reported in `SortResult.unknown`; the view emits a
`messages.warning` per unknown key (assert on `get_messages`). A valid key
emits none.
- An all-invalid/empty `sort` falls back to the default sort string.
- A mixed `?sort=-playtime,bogus` both sorts by `playtime` *and* warns on `bogus`.
- Annotated sorts (game playtime, game/purchase finish date, purchase name)
return no duplicate rows (`count` equals unsorted `count`).
- `parse_sort_terms` unit tests: signs, whitespace, empty tokens, unknown keys.
- Smoke: `?sort=<key>` and `?sort=-key,key` URLs return 200 for each list view.
## Coordination with #65
#65 (stats "view all" links, still unmerged) generates URLs that pass `sort=`.
Those links **must use the same public sort keys** defined in this spec's maps
(`playtime`, `finished`, etc.). When #65 and #68 both land, verify each "view
all" link's `sort=` matches a key in the target model's `*_SORTS` map and
reproduces the stats list's order. Call this out in the #68 PR description.
## Related follow-ups (filed during design review)
- **#73** — clickable sortable column headers + multi-column UI (consumes
`SortResult.terms`).
- **#74** — make `FindFilter` the single request parser (sort + pagination +
free-text); fixes the `paginate()` 10-vs-25 / `limit`-vs-`per_page` mismatch.
- **#75** — purchase list free-text search parity.
- **#76** — extract a shared `list_view` helper across the three list views.
- **#77** — saved filter presets should persist/restore sort (`FilterPreset.find_filter`).
## Out of scope (follow-up issue)
Clickable sortable column headers (asc/desc indicator, toggle on click) and the
multi-column UI affordance (shift-click to add a column → multi-term `?sort=`
URL). The backend `apply_sort` already returns `SortResult.terms` and applies
the full term list, so this is UI-only work. Tracked in **#73**.
-1
View File
@@ -1 +0,0 @@
# e2e tests package
-22
View File
@@ -1,22 +0,0 @@
import os
import shutil
import pytest
# Playwright runs an async event loop in the background, which triggers
# Django's async safety checks when running synchronous tests. This allows
# synchronous operations inside the async context safely.
os.environ.setdefault("DJANGO_ALLOW_ASYNC_UNSAFE", "true")
@pytest.fixture(scope="session")
def browser_type_launch_args(browser_type_launch_args):
# Try to find a system-installed Google Chrome or Chromium to bypass Nix/NixOS shared library issues
for browser_name in ["google-chrome-stable", "google-chrome", "chromium", "chrome"]:
path = shutil.which(browser_name)
if path:
return {
**browser_type_launch_args,
"executable_path": path,
}
# Fallback to default Playwright behavior
return browser_type_launch_args
-111
View File
@@ -1,111 +0,0 @@
"""End-to-end Playwright test for boolean radio filter serialization and deselect behavior.
Covers:
1. Selecting True/False serializes the boolean field as True/False.
2. Unsetting/unchecking a radio button by clicking on it again, which deselects it, omitting the field from JSON.
"""
import json
import urllib.parse
import pytest
from django.http import HttpResponse
from django.test import override_settings
from django.urls import path
from common.components import FilterBar
def _bar_page(filter_json: str = "") -> str:
return f"""<!DOCTYPE html>
<html>
<head>
<title>Boolean filter E2E</title>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/dist/elements/search-select.js" type="module"></script>
<script src="/static/js/dist/elements/filter-bar.js" type="module"></script>
</head>
<body>
{FilterBar(filter_json=filter_json, preset_list_url="/p/l", preset_save_url="/p/s")}
</body>
</html>"""
def empty_bar_view(request):
return HttpResponse(_bar_page())
urlpatterns = [
path("test-boolean-filter/", empty_bar_view),
]
def _filter_from_url(url: str) -> dict:
"""Extract and parse the ?filter=... query param from a URL."""
query = urllib.parse.urlparse(url).query
params = urllib.parse.parse_qs(query)
raw = params.get("filter", [""])[0]
return json.loads(raw) if raw else {}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_boolean_filter_e2e")
def test_no_selection_omits_boolean_filters(live_server, page):
page.goto(live_server.url + "/test-boolean-filter/")
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert "mastered" not in parsed
assert "purchase_refunded" not in parsed
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_boolean_filter_e2e")
def test_select_true_and_false_serializes_correctly(live_server, page):
page.goto(live_server.url + "/test-boolean-filter/")
# Select "True" for Mastered
# Under PurchaseFilterBar: "filter-mastered" is the mastered radio name.
# The true radio has value="true", false radio has value="false"
true_radio = page.locator('input[name="filter-mastered"][value="true"]')
true_radio.click()
# Select "False" for Refunded (filter-purchase-refunded)
false_radio = page.locator('input[name="filter-purchase-refunded"][value="false"]')
false_radio.click()
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert parsed.get("mastered") == {"value": True, "modifier": "EQUALS"}
assert parsed.get("purchase_refunded") == {"value": False, "modifier": "EQUALS"}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_boolean_filter_e2e")
def test_click_to_deselect_radio_works(live_server, page):
page.goto(live_server.url + "/test-boolean-filter/")
true_radio = page.locator('input[name="filter-mastered"][value="true"]')
# First click checks it
true_radio.click()
assert true_radio.is_checked()
# Second click deselects it
true_radio.click()
assert not true_radio.is_checked()
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert "mastered" not in parsed
-84
View File
@@ -1,84 +0,0 @@
import pytest
from django.urls import reverse
from playwright.sync_api import Page, expect
@pytest.fixture
def authenticated_page(live_server, page: Page, django_user_model) -> Page:
django_user_model.objects.create_user(username="tester", password="secret123")
page.goto(f"{live_server.url}{reverse('login')}")
page.fill('input[name="username"]', "tester")
page.fill('input[name="password"]', "secret123")
page.click('button:has-text("Login")')
page.wait_for_url(f"{live_server.url}/tracker**")
return page
@pytest.mark.django_db
def test_game_status_selector_opens_and_patches(authenticated_page: Page, live_server):
from games.models import Game, Platform
platform = Platform.objects.create(name="PC", icon="pc")
game = Game.objects.create(name="Test Game", platform=platform, status="u")
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:list_games')}")
host = page.locator("game-status-selector").first
expect(host).to_be_attached()
host.locator("[data-toggle]").click()
expect(host.locator("[data-menu]")).to_be_visible()
with page.expect_response(
lambda r: "/status" in r.url and r.request.method == "PATCH"
):
host.locator('[data-option][data-value="f"]').click()
expect(host.locator("[data-menu]")).to_be_hidden()
game.refresh_from_db()
assert game.status == "f"
@pytest.mark.django_db
def test_session_device_selector_patches(authenticated_page: Page, live_server):
from games.models import Device, Game, Platform, Session
platform = Platform.objects.create(name="PC", icon="pc")
game = Game.objects.create(name="Test Game", platform=platform)
desktop = Device.objects.create(name="Desktop")
deck = Device.objects.create(name="Deck")
session = Session.objects.create(
game=game, device=desktop, timestamp_start="2025-01-01 00:00:00+00:00"
)
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:list_sessions')}")
host = page.locator("session-device-selector").first
expect(host).to_be_attached()
host.locator("[data-toggle]").click()
with page.expect_response(
lambda r: "/device" in r.url and r.request.method == "PATCH"
):
host.locator(f'[data-option][data-value="{deck.id}"]').click()
session.refresh_from_db()
assert session.device_id == deck.id
@pytest.mark.django_db
def test_play_event_row_increments(authenticated_page: Page, live_server):
from games.models import Game, Platform
platform = Platform.objects.create(name="PC", icon="pc")
game = Game.objects.create(name="Test Game", platform=platform)
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:view_game', args=[game.id])}")
host = page.locator("play-event-row").first
expect(host).to_be_attached()
host.locator("[data-toggle]").click()
with page.expect_response(
lambda r: "playevent" in r.url.lower() and r.request.method == "POST"
):
host.locator("[data-add-play]").click()
expect(host.locator("[data-count]")).to_have_text("1")
assert game.playevents.count() == 1
-166
View File
@@ -1,166 +0,0 @@
"""End-to-end Playwright test for the date-range filter widget's JS submit path.
Covers the one layer the Django-Client tests in ``test_rendered_pages.py``
cannot reach: ``filter_bar.js`` reading the two ``<input type="date">``
elements, building a ``DateCriterion`` JSON object, and navigating the
browser to ``?filter=<encoded>``.
The native ``<input type="date">`` path is exercised through the Refunded
field the Purchased field now uses the DateRangePicker component, covered
by ``test_date_range_picker_e2e.py``.
Renders the bar at its own custom URL so the test doesn't need to auth
against the real app the bar's JS doesn't care what route serves it.
"""
import json
import urllib.parse
import pytest
from django.http import HttpResponse
from django.test import override_settings
from django.urls import path
from common.components import PurchaseFilterBar
def _bar_page(filter_json: str = "") -> str:
return f"""<!DOCTYPE html>
<html>
<head>
<title>Date filter E2E</title>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/dist/elements/search-select.js" type="module"></script>
<script src="/static/js/dist/elements/filter-bar.js" type="module"></script>
</head>
<body>
{PurchaseFilterBar(filter_json=filter_json, preset_list_url="/p/l", preset_save_url="/p/s")}
</body>
</html>"""
def empty_bar_view(request):
return HttpResponse(_bar_page())
def prefilled_bar_view(request):
filter_json = json.dumps(
{
"date_refunded": {
"value": "2024-03-15",
"value2": "2024-09-20",
"modifier": "BETWEEN",
}
}
)
return HttpResponse(_bar_page(filter_json))
urlpatterns = [
path("test-date-filter/", empty_bar_view),
path("test-date-filter-prefilled/", prefilled_bar_view),
]
def _filter_from_url(url: str) -> dict:
"""Extract and parse the ?filter=... query param from a URL."""
query = urllib.parse.urlparse(url).query
params = urllib.parse.parse_qs(query)
raw = params.get("filter", [""])[0]
return json.loads(raw) if raw else {}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_filter_e2e")
def test_both_dates_serializes_as_between(live_server, page):
page.goto(live_server.url + "/test-date-filter/")
page.locator('input[name="filter-date-refunded-min"]').fill("2024-01-01")
page.locator('input[name="filter-date-refunded-max"]').fill("2024-12-31")
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert parsed == {
"date_refunded": {
"value": "2024-01-01",
"value2": "2024-12-31",
"modifier": "BETWEEN",
}
}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_filter_e2e")
def test_min_only_serializes_as_greater_than(live_server, page):
page.goto(live_server.url + "/test-date-filter/")
page.locator('input[name="filter-date-refunded-min"]').fill("2024-06-15")
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert parsed == {
"date_refunded": {"value": "2024-06-15", "modifier": "GREATER_THAN"}
}
# value2 must not be present when there's no upper bound.
assert "value2" not in parsed["date_refunded"]
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_filter_e2e")
def test_max_only_serializes_as_less_than(live_server, page):
page.goto(live_server.url + "/test-date-filter/")
page.locator('input[name="filter-date-refunded-max"]').fill("2025-06-30")
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert parsed == {"date_refunded": {"value": "2025-06-30", "modifier": "LESS_THAN"}}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_filter_e2e")
def test_empty_inputs_omit_date_criterion(live_server, page):
"""No date typed → the filter JSON simply has no date_purchased /
date_refunded keys (vs. an empty-string crash)."""
page.goto(live_server.url + "/test-date-filter/")
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert "date_purchased" not in parsed
assert "date_refunded" not in parsed
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_filter_e2e")
def test_prefilled_bar_reflects_existing_filter_in_inputs(live_server, page):
"""A bar rendered with a BETWEEN filter_json pre-fills the inputs and
re-submits the same bounds unchanged."""
page.goto(live_server.url + "/test-date-filter-prefilled/")
assert (
page.locator('input[name="filter-date-refunded-min"]').input_value()
== "2024-03-15"
)
assert (
page.locator('input[name="filter-date-refunded-max"]').input_value()
== "2024-09-20"
)
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert parsed["date_refunded"] == {
"value": "2024-03-15",
"value2": "2024-09-20",
"modifier": "BETWEEN",
}
-592
View File
@@ -1,592 +0,0 @@
"""End-to-end Playwright tests for the DateRangePicker component.
Exercises the behaviour layers the rendering tests cannot reach
(``date_range_picker.js``): segmented digit entry with right-to-left
placeholder fill and auto-advance, Backspace reverting a part, the calendar
popup's anchor-style range picking, presets, the Cancel / Clear / Select
footer, and the ``filter_bar.js`` serialization of the hidden ISO inputs
into a ``DateCriterion``.
Like the other filter-bar e2e modules, the bar is served from its own
minimal URLconf (no auth, no CSS) the JS only cares about the DOM.
"""
import datetime
import json
import urllib.parse
import pytest
from django.http import HttpResponse
from django.test import override_settings
from playwright.sync_api import expect
from common.components import PurchaseFilterBar
from django.urls import path
def _bar_page(filter_json: str = "") -> str:
return f"""<!DOCTYPE html>
<html>
<head>
<title>Date range picker E2E</title>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/dist/elements/search-select.js" type="module"></script>
<script src="/static/js/dist/elements/date-range-picker.js" type="module"></script>
<script src="/static/js/dist/elements/filter-bar.js" type="module"></script>
</head>
<body>
{PurchaseFilterBar(filter_json=filter_json, preset_list_url="/p/l", preset_save_url="/p/s")}
</body>
</html>"""
def empty_bar_view(request):
return HttpResponse(_bar_page())
def prefilled_bar_view(request):
filter_json = json.dumps(
{
"date_purchased": {
"value": "2024-03-15",
"value2": "2024-09-20",
"modifier": "BETWEEN",
}
}
)
return HttpResponse(_bar_page(filter_json))
urlpatterns = [
path("test-date-range-picker/", empty_bar_view),
path("test-date-range-picker-prefilled/", prefilled_bar_view),
]
PICKER = "date-range-picker"
POPUP = PICKER + " [data-date-range-calendar]"
HIDDEN_MIN = 'input[name="filter-date-purchased-min"]'
HIDDEN_MAX = 'input[name="filter-date-purchased-max"]'
def _segment(page, side: str, part: str):
return page.locator(
f'{PICKER} input[data-date-side="{side}"][data-date-part="{part}"]'
)
def _day_cell(page, iso_date: str):
return page.locator(
f'{PICKER} [data-date-range-grid] button[data-date="{iso_date}"]'
)
def _popup_is_open(page) -> bool:
return "hidden" not in (page.locator(POPUP).get_attribute("class") or "")
def _submit_filter_bar(page):
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
def _filter_from_url(url: str) -> dict:
query = urllib.parse.urlparse(url).query
params = urllib.parse.parse_qs(query)
raw = params.get("filter", [""])[0]
return json.loads(raw) if raw else {}
# ── Segmented manual entry ──────────────────────────────────────────────────
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_typing_fills_parts_and_serializes_between(live_server, page):
"""Digits flow through the parts (DD → MM → YYYY → DD …) with
auto-advance, ending in a BETWEEN criterion on submit."""
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "min", "day").click()
page.keyboard.type("1503202420092024")
assert page.locator(HIDDEN_MIN).input_value() == "2024-03-15"
assert page.locator(HIDDEN_MAX).input_value() == "2024-09-20"
_submit_filter_bar(page)
parsed = _filter_from_url(page.url)
assert parsed == {
"date_purchased": {
"value": "2024-03-15",
"value2": "2024-09-20",
"modifier": "BETWEEN",
}
}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_placeholder_fills_from_the_right(live_server, page):
"""Typing 19 into the YYYY part shows YYY1 then YY19."""
page.goto(live_server.url + "/test-date-range-picker/")
year_segment = _segment(page, "min", "year")
year_segment.click()
page.keyboard.press("1")
assert year_segment.input_value() == "YYY1"
page.keyboard.press("9")
assert year_segment.input_value() == "YY19"
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_min_side_only_serializes_greater_than(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "min", "day").click()
page.keyboard.type("15062024")
_submit_filter_bar(page)
parsed = _filter_from_url(page.url)
assert parsed == {
"date_purchased": {"value": "2024-06-15", "modifier": "GREATER_THAN"}
}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_backspace_reverts_part_to_placeholder(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "min", "day").click()
page.keyboard.type("15032024")
assert page.locator(HIDDEN_MIN).input_value() == "2024-03-15"
month_segment = _segment(page, "min", "month")
month_segment.click()
page.keyboard.press("Backspace")
assert month_segment.input_value() == ""
# An incomplete date no longer commits to the hidden input.
assert page.locator(HIDDEN_MIN).input_value() == ""
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_only_numbers_can_be_typed(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
day_segment = _segment(page, "min", "day")
day_segment.click()
page.keyboard.type("ab-/")
assert day_segment.input_value() == ""
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_invalid_calendar_date_does_not_commit(live_server, page):
"""31-02-2024 fills all parts but is not a real date — no hidden value."""
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "min", "day").click()
page.keyboard.type("31022024")
assert page.locator(HIDDEN_MIN).input_value() == ""
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_clicking_container_activates_first_part(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
page.locator(PICKER + " [data-date-range-field]").click(position={"x": 5, "y": 5})
focused = page.evaluate(
"document.activeElement.getAttribute('data-date-part') + ':' +"
"document.activeElement.getAttribute('data-date-side')"
)
assert focused == "day:min"
# ── Calendar popup ──────────────────────────────────────────────────────────
def _open_calendar(page):
page.locator(PICKER + " [data-date-range-calendar-toggle]").click()
def _current_month_iso(day_of_month: int) -> str:
today = datetime.date.today()
return today.replace(day=day_of_month).isoformat()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_calendar_pick_range_then_select(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
_open_calendar(page)
assert _popup_is_open(page)
first_pick = _current_month_iso(10)
second_pick = _current_month_iso(20)
_day_cell(page, first_pick).click()
assert page.locator(HIDDEN_MIN).input_value() == first_pick
assert page.locator(HIDDEN_MAX).input_value() == ""
_day_cell(page, second_pick).click()
assert page.locator(HIDDEN_MAX).input_value() == second_pick
page.locator(PICKER + " [data-date-range-select]").click()
assert not _popup_is_open(page)
_submit_filter_bar(page)
parsed = _filter_from_url(page.url)
assert parsed == {
"date_purchased": {
"value": first_pick,
"value2": second_pick,
"modifier": "BETWEEN",
}
}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_picking_before_start_restarts_the_range(live_server, page):
"""With the StartDate anchored, picking an earlier date clears the range
and the clicked date becomes the new StartDate."""
page.goto(live_server.url + "/test-date-range-picker/")
_open_calendar(page)
_day_cell(page, _current_month_iso(20)).click()
_day_cell(page, _current_month_iso(10)).click()
assert page.locator(HIDDEN_MIN).input_value() == _current_month_iso(10)
assert page.locator(HIDDEN_MAX).input_value() == ""
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_completed_range_anchor_moves_to_end(live_server, page):
"""After both dates are picked the EndDate becomes the anchor, so a
further pick inside the range moves the StartDate."""
page.goto(live_server.url + "/test-date-range-picker/")
_open_calendar(page)
_day_cell(page, _current_month_iso(10)).click()
_day_cell(page, _current_month_iso(20)).click()
_day_cell(page, _current_month_iso(15)).click()
assert page.locator(HIDDEN_MIN).input_value() == _current_month_iso(15)
assert page.locator(HIDDEN_MAX).input_value() == _current_month_iso(20)
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_preset_fills_both_dates(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
_open_calendar(page)
page.locator(PICKER + ' [data-date-range-preset="last_7_days"]').click()
today = datetime.date.today()
assert (
page.locator(HIDDEN_MIN).input_value()
== (today - datetime.timedelta(days=6)).isoformat()
)
assert page.locator(HIDDEN_MAX).input_value() == today.isoformat()
# Presets keep the popup open; Select commits and closes.
assert _popup_is_open(page)
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_clear_clears_dates_but_keeps_popup_open(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
_open_calendar(page)
_day_cell(page, _current_month_iso(10)).click()
_day_cell(page, _current_month_iso(20)).click()
page.locator(PICKER + " [data-date-range-clear]").click()
assert page.locator(HIDDEN_MIN).input_value() == ""
assert page.locator(HIDDEN_MAX).input_value() == ""
assert _popup_is_open(page)
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_cancel_clears_dates_and_closes_popup(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
_open_calendar(page)
_day_cell(page, _current_month_iso(10)).click()
_day_cell(page, _current_month_iso(20)).click()
page.locator(PICKER + " [data-date-range-cancel]").click()
assert page.locator(HIDDEN_MIN).input_value() == ""
assert page.locator(HIDDEN_MAX).input_value() == ""
assert not _popup_is_open(page)
# ── Prefill round-trip ──────────────────────────────────────────────────────
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_prefilled_picker_round_trips_unchanged(live_server, page):
page.goto(live_server.url + "/test-date-range-picker-prefilled/")
assert _segment(page, "min", "day").input_value() == "15"
assert _segment(page, "min", "month").input_value() == "03"
assert _segment(page, "min", "year").input_value() == "2024"
assert _segment(page, "max", "day").input_value() == "20"
assert page.locator(HIDDEN_MIN).input_value() == "2024-03-15"
assert page.locator(HIDDEN_MAX).input_value() == "2024-09-20"
_submit_filter_bar(page)
parsed = _filter_from_url(page.url)
assert parsed["date_purchased"] == {
"value": "2024-03-15",
"value2": "2024-09-20",
"modifier": "BETWEEN",
}
# ── Keyboard navigation ─────────────────────────────────────────────────────
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_arrow_right_moves_focus_across_segments(live_server, page):
"""ArrowRight walks DD → MM → YYYY and crosses the min→max separator."""
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "min", "day").click()
page.keyboard.press("ArrowRight")
expect(_segment(page, "min", "month")).to_be_focused()
page.keyboard.press("ArrowRight")
expect(_segment(page, "min", "year")).to_be_focused()
page.keyboard.press("ArrowRight")
expect(_segment(page, "max", "day")).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_arrow_left_moves_focus_backwards(live_server, page):
"""ArrowLeft from the max side's first part lands on the min side's last."""
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "max", "day").click()
page.keyboard.press("ArrowLeft")
expect(_segment(page, "min", "year")).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_arrow_left_clamps_at_first_segment(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "min", "day").click()
page.keyboard.press("ArrowLeft")
expect(_segment(page, "min", "day")).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_arrow_right_clamps_at_last_segment(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "max", "year").click()
page.keyboard.press("ArrowRight")
expect(_segment(page, "max", "year")).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_arrow_up_on_empty_day_seeds_value(live_server, page):
"""First ArrowUp on an empty part lands on its seed (day → 01)."""
page.goto(live_server.url + "/test-date-range-picker/")
day_segment = _segment(page, "min", "day")
day_segment.click()
page.keyboard.press("ArrowUp")
assert day_segment.input_value() == "01"
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_arrow_up_on_empty_year_uses_current_year(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
year_segment = _segment(page, "min", "year")
year_segment.click()
page.keyboard.press("ArrowUp")
assert year_segment.input_value() == str(datetime.date.today().year)
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_arrow_up_down_increments_and_clamps_day(live_server, page):
"""Up increments and clamps at 31; Down clamps at 01 (no wrap)."""
page.goto(live_server.url + "/test-date-range-picker/")
day_segment = _segment(page, "min", "day")
# Typing a full 2-digit part auto-advances, so re-focus before arrowing.
day_segment.click()
page.keyboard.type("28")
day_segment.click()
for _ in range(4):
page.keyboard.press("ArrowUp")
assert day_segment.input_value() == "31"
page.keyboard.press("ArrowDown")
assert day_segment.input_value() == "30"
day_segment.click()
page.keyboard.type("01")
day_segment.click()
page.keyboard.press("ArrowDown")
assert day_segment.input_value() == "01"
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_arrow_up_down_clamps_month(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
month_segment = _segment(page, "min", "month")
month_segment.click()
page.keyboard.type("12")
month_segment.click()
page.keyboard.press("ArrowUp")
assert month_segment.input_value() == "12"
month_segment.click()
page.keyboard.type("01")
month_segment.click()
page.keyboard.press("ArrowDown")
assert month_segment.input_value() == "01"
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_arrow_value_change_commits_complete_date(live_server, page):
"""Stepping the last empty part to a valid value commits the hidden ISO."""
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "min", "month").click()
page.keyboard.type("032024") # month=03 → year=2024, day left empty
day_segment = _segment(page, "min", "day")
day_segment.click()
page.keyboard.press("ArrowUp") # day → 01
assert page.locator(HIDDEN_MIN).input_value() == "2024-03-01"
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_ctrl_arrow_does_not_change_value(live_server, page):
"""Ctrl+Arrow falls through to native — the segment value is untouched."""
page.goto(live_server.url + "/test-date-range-picker/")
day_segment = _segment(page, "min", "day")
day_segment.click()
page.keyboard.type("15")
day_segment.click()
page.keyboard.down("Control")
page.keyboard.press("ArrowUp")
page.keyboard.up("Control")
assert day_segment.input_value() == "15"
# ── Digit clamping & auto-advance ───────────────────────────────────────────
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_month_high_digit_autoadvances_zero_padded(live_server, page):
"""A digit that cannot lead a valid month commits zero-padded and advances."""
page.goto(live_server.url + "/test-date-range-picker/")
month_segment = _segment(page, "min", "month")
month_segment.click()
page.keyboard.press("9")
assert month_segment.input_value() == "09"
expect(_segment(page, "min", "year")).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_month_one_stays_then_two_completes(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
month_segment = _segment(page, "min", "month")
month_segment.click()
page.keyboard.press("1")
assert month_segment.input_value() == "01"
expect(month_segment).to_be_focused() # ambiguous: could become 10/11/12
page.keyboard.press("2")
assert month_segment.input_value() == "12"
expect(_segment(page, "min", "year")).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_month_one_then_nine_drops_overflow(live_server, page):
"""1 then 9 (19 > 12) drops the leading 1 and commits 09."""
page.goto(live_server.url + "/test-date-range-picker/")
month_segment = _segment(page, "min", "month")
month_segment.click()
page.keyboard.press("1")
page.keyboard.press("9")
assert month_segment.input_value() == "09"
expect(_segment(page, "min", "year")).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_day_high_digit_autoadvances(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
day_segment = _segment(page, "min", "day")
day_segment.click()
page.keyboard.press("6")
assert day_segment.input_value() == "06"
expect(_segment(page, "min", "month")).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_day_three_then_two_overflows_to_pending_two(live_server, page):
"""3 stays (30/31 possible); 2 (32 > 31) drops to a pending 02, still day."""
page.goto(live_server.url + "/test-date-range-picker/")
day_segment = _segment(page, "min", "day")
day_segment.click()
page.keyboard.press("3")
assert day_segment.input_value() == "03"
expect(day_segment).to_be_focused()
page.keyboard.press("2")
assert day_segment.input_value() == "02"
expect(day_segment).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_leading_zero_then_digit_on_day(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
day_segment = _segment(page, "min", "day")
day_segment.click()
page.keyboard.press("0")
assert day_segment.input_value() == "00"
expect(day_segment).to_be_focused()
page.keyboard.press("9")
assert day_segment.input_value() == "09"
expect(_segment(page, "min", "month")).to_be_focused()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_double_zero_day_does_not_commit(live_server, page):
"""Day 00 is a complete-but-invalid part, so the side stays uncommitted."""
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "min", "day").click()
page.keyboard.type("00032024") # day=00, month=03, year=2024
assert _segment(page, "min", "day").input_value() == "00"
assert page.locator(HIDDEN_MIN).input_value() == ""
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_year_pending_still_right_fills(live_server, page):
"""Year keeps the right-fill placeholder display under the new logic."""
page.goto(live_server.url + "/test-date-range-picker/")
year_segment = _segment(page, "min", "year")
year_segment.click()
page.keyboard.press("1")
assert year_segment.input_value() == "YYY1"
page.keyboard.press("9")
assert year_segment.input_value() == "YY19"
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_single_high_digit_commits_when_other_parts_present(live_server, page):
"""An auto-advanced single digit is a complete part, so it commits the ISO."""
page.goto(live_server.url + "/test-date-range-picker/")
_segment(page, "min", "day").click()
page.keyboard.type("15") # day=15 → advances to month
_segment(page, "min", "year").click()
page.keyboard.type("2024") # year=2024
_segment(page, "min", "month").click()
page.keyboard.press("9") # month=09 (auto-advance)
assert page.locator(HIDDEN_MIN).input_value() == "2024-09-15"
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e")
def test_retype_full_part_restarts(live_server, page):
page.goto(live_server.url + "/test-date-range-picker/")
day_segment = _segment(page, "min", "day")
day_segment.click()
page.keyboard.type("15") # advances to month
day_segment.click()
page.keyboard.press("3")
assert day_segment.input_value() == "03"
expect(day_segment).to_be_focused()
-123
View File
@@ -1,123 +0,0 @@
"""Browser test: the device dropdown is not clipped by the table wrapper (#39).
The session list lives inside an ``overflow-x-auto`` wrapper, which forces
``overflow-y: auto`` and used to clip an absolutely-positioned dropdown menu
that extended past a short table. The menu now opens with ``position: fixed``
so it escapes the clipping ancestor and stays within the viewport.
"""
import pytest
from django.urls import reverse
from django.utils import timezone
from playwright.sync_api import Page
from games.models import Device, Game, Platform, Session
@pytest.fixture
def authenticated_page(live_server, page: Page, django_user_model) -> Page:
django_user_model.objects.create_user(username="tester", password="secret123")
page.goto(f"{live_server.url}{reverse('login')}")
page.fill('input[name="username"]', "tester")
page.fill('input[name="password"]', "secret123")
page.click('button:has-text("Login")')
page.wait_for_url(f"{live_server.url}/tracker**")
return page
def test_device_dropdown_not_clipped_on_short_table(
authenticated_page: Page, live_server
):
page = authenticated_page
page.set_viewport_size({"width": 1280, "height": 800})
platform = Platform.objects.create(name="PC", icon="pc", group="PC")
game = Game.objects.create(name="Tunic")
game.platform = platform
game.save()
# Many devices → a tall menu; a single row → a short table that would clip
# an absolutely-positioned menu.
devices = [Device.objects.create(name=f"Device {i:02d}") for i in range(15)]
session = Session.objects.create(
game=game, device=devices[0], timestamp_start=timezone.now()
)
page.goto(f"{live_server.url}{reverse('games:list_sessions')}")
page.locator(f"#session-row-{session.pk} [data-toggle]").click()
menu = page.locator("[data-menu]:not([hidden])")
menu.wait_for(state="visible")
geometry = page.evaluate(
"""() => {
const menu = document.querySelector('[data-menu]:not([hidden])');
const rect = menu.getBoundingClientRect();
return {
position: getComputedStyle(menu).position,
bottom: rect.bottom,
viewportHeight: window.innerHeight,
};
}"""
)
# Fixed positioning escapes the overflow-x-auto clip...
assert geometry["position"] == "fixed"
# ...and the menu stays inside the viewport (not clipped/cut off).
assert geometry["bottom"] <= geometry["viewportHeight"] + 1, geometry
# A device far down the (previously clipped) list is selectable.
page.locator("[data-option]", has_text="Device 14").click()
page.wait_for_timeout(200)
session.refresh_from_db()
assert session.device == devices[14]
def test_device_dropdown_flips_up_near_viewport_bottom(
authenticated_page: Page, live_server
):
"""A dropdown whose toggle sits near the viewport bottom must open upward
and stay fully visible not collapse off-screen.
Regression: the menu keeps a ``top-[105%]`` utility class; clearing inline
``top`` to "" in the flip-up branch let that class reassert ``top: 105%``
on the now-``fixed`` menu, collapsing it to a 2px sliver below the viewport.
"""
page = authenticated_page
page.set_viewport_size({"width": 1280, "height": 760})
platform = Platform.objects.create(name="PC", icon="pc", group="PC")
game = Game.objects.create(name="Tunic")
game.platform = platform
game.save()
devices = [Device.objects.create(name=f"Device {i:02d}") for i in range(15)]
sessions = [
Session.objects.create(
game=game, device=devices[0], timestamp_start=timezone.now()
)
for _ in range(10)
]
page.goto(f"{live_server.url}{reverse('games:list_sessions')}")
# Scroll the table so the lower rows sit near the viewport bottom, where the
# menu cannot fit below and must flip up.
page.evaluate("window.scrollTo(0, document.body.scrollHeight)")
page.wait_for_timeout(200)
bottom_row = sessions[-3]
page.locator(f"#session-row-{bottom_row.pk} [data-toggle]").click()
menu = page.locator("[data-menu]:not([hidden])")
menu.wait_for(state="visible")
geometry = page.evaluate(
"""() => {
const menu = document.querySelector('[data-menu]:not([hidden])');
const rect = menu.getBoundingClientRect();
return {
top: rect.top,
bottom: rect.bottom,
height: rect.height,
viewportHeight: window.innerHeight,
};
}"""
)
# The flipped-up menu is a real, fully on-screen box (not a 2px sliver).
assert geometry["height"] > 50, geometry
assert geometry["top"] >= -1, geometry
assert geometry["bottom"] <= geometry["viewportHeight"] + 1, geometry
-159
View File
@@ -1,159 +0,0 @@
"""End-to-end Playwright test for the Stash-style NumberFilter: modifier
serialization, the between second-input reveal, null-state toggling, and prefill.
"""
import json
import urllib.parse
import pytest
from django.http import HttpResponse
from django.test import override_settings
from django.urls import path
from common.components import FilterBar
def _bar_page(filter_json: str = "") -> str:
return f"""<!DOCTYPE html>
<html>
<head>
<title>Number filter E2E</title>
<link rel="stylesheet" href="/static/base.css">
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/dist/elements/search-select.js" type="module"></script>
<script src="/static/js/dist/elements/filter-bar.js" type="module"></script>
</head>
<body>
{FilterBar(filter_json=filter_json, preset_list_url="/p/l", preset_save_url="/p/s")}
</body>
</html>"""
def empty_bar_view(request):
return HttpResponse(_bar_page())
def prefilled_bar_view(request):
filter_json = json.dumps(
{
"year_released": {"value": 2000, "value2": 2010, "modifier": "BETWEEN"},
"session_count": {"modifier": "IS_NULL"},
}
)
return HttpResponse(_bar_page(filter_json=filter_json))
urlpatterns = [
path("test-number-filter-empty/", empty_bar_view),
path("test-number-filter-prefilled/", prefilled_bar_view),
]
def _filter_from_url(url: str) -> dict:
query = urllib.parse.urlparse(url).query
params = urllib.parse.parse_qs(query)
raw = params.get("filter", [""])[0]
return json.loads(raw) if raw else {}
def _open(page, url):
"""Navigate to the bar page and expand the collapsed filter body.
base.css is loaded so the `hidden` Tailwind class actually hides elements
(needed to assert the value2 reveal) which means the bar starts collapsed
and must be opened before its inputs are interactable."""
page.goto(url)
page.locator("[data-filter-bar-toggle]").click()
def _submit(page):
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_number_filter_e2e")
def test_number_filter_defaults_and_greater_than(live_server, page):
_open(page, live_server.url + "/test-number-filter-empty/")
value_input = page.locator('input[name="filter-year"]')
value2_input = page.locator('input[name="filter-year-value2"]')
assert value_input.is_enabled()
# EQUALS is the default; the second input is hidden.
assert page.locator(
'input[name="filter-year-modifier"][value="EQUALS"]'
).is_checked()
assert value2_input.is_hidden()
value_input.fill("2015")
page.locator('input[name="filter-year-modifier"][value="GREATER_THAN"]').click()
_submit(page)
parsed = _filter_from_url(page.url)
assert parsed["year_released"] == {"value": 2015, "modifier": "GREATER_THAN"}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_number_filter_e2e")
def test_number_filter_between_reveals_and_serializes(live_server, page):
_open(page, live_server.url + "/test-number-filter-empty/")
value2_input = page.locator('input[name="filter-year-value2"]')
assert value2_input.is_hidden()
page.locator('input[name="filter-year-modifier"][value="BETWEEN"]').click()
assert value2_input.is_visible()
page.locator('input[name="filter-year"]').fill("2000")
value2_input.fill("2010")
_submit(page)
parsed = _filter_from_url(page.url)
assert parsed["year_released"] == {
"value": 2000,
"value2": 2010,
"modifier": "BETWEEN",
}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_number_filter_e2e")
def test_number_filter_null_states(live_server, page):
_open(page, live_server.url + "/test-number-filter-empty/")
value_input = page.locator('input[name="filter-year"]')
value_input.fill("1999")
page.locator('input[name="filter-year-modifier"][value="IS_NULL"]').click()
# Both inputs disable and clear under a presence modifier.
assert not value_input.is_enabled()
assert value_input.input_value() == ""
_submit(page)
parsed = _filter_from_url(page.url)
assert parsed["year_released"] == {"modifier": "IS_NULL"}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_number_filter_e2e")
def test_number_filter_prefilled_states(live_server, page):
_open(page, live_server.url + "/test-number-filter-prefilled/")
# year_released: BETWEEN with both bounds, second input visible.
assert page.locator('input[name="filter-year"]').input_value() == "2000"
assert page.locator('input[name="filter-year-value2"]').input_value() == "2010"
assert page.locator('input[name="filter-year-value2"]').is_visible()
assert page.locator(
'input[name="filter-year-modifier"][value="BETWEEN"]'
).is_checked()
# session_count: IS_NULL — value input disabled, modifier checked.
session_input = page.locator('input[name="filter-session-count"]')
assert not session_input.is_enabled()
assert page.locator(
'input[name="filter-session-count-modifier"][value="IS_NULL"]'
).is_checked()
-178
View File
@@ -1,178 +0,0 @@
"""Browser regression tests for the "Played N times" dropdown on the game
view page (issue #70).
When the played-row control was migrated from Alpine to a custom element
(commit 1258c52), the hover highlight, the row-filling click target and a
consistent pointer cursor were lost: the interactive ``<a>``/``<button>``
shrank to its text and the ``<li>`` rows stopped carrying ``hover:bg-*``.
The visible result was: no hover highlight, a "hiccuping" hover between the
two items, a missing hand cursor on part of a row, and "+1" failing to fire
when the user clicked the row's padding rather than the text itself.
These tests assert the user-perceived behaviour at every horizontal point of
a menu row, regardless of which element ends up carrying the styling.
"""
import pytest
from django.urls import reverse
from playwright.sync_api import Page, expect
from games.models import Game
# Sample points spanning the row, including the former dead zones at the edges.
ROW_FRACTIONS = [0.02, 0.1, 0.3, 0.5, 0.7, 0.9, 0.98]
@pytest.fixture
def authenticated_page(live_server, page: Page, django_user_model) -> Page:
django_user_model.objects.create_user(username="tester", password="secret123")
page.goto(f"{live_server.url}{reverse('login')}")
page.fill('input[name="username"]', "tester")
page.fill('input[name="password"]', "secret123")
page.click('button:has-text("Login")')
page.wait_for_url(f"{live_server.url}/tracker**")
return page
@pytest.fixture
def game(db) -> Game:
return Game.objects.create(name="Test Game", sort_name="test game")
def open_played_menu(page: Page, live_server, game: Game) -> None:
page.goto(f"{live_server.url}{reverse('games:view_game', args=[game.id])}")
page.locator("play-event-row [data-toggle]").click()
expect(page.locator("play-event-row [data-menu]")).to_be_visible()
def add_play_row(page: Page):
"""The '<li>' wrapping the 'Played times +1' control."""
return page.locator("play-event-row [data-menu] li").filter(has_text="+1")
def test_played_menu_row_highlights_on_hover(authenticated_page, live_server, game):
"""Hovering the '+1' row paints a (non-transparent) background.
Reads the background of whichever element sits under the row's centre, so
it does not care whether the highlight lives on the <li> or the control.
"""
page = authenticated_page
open_played_menu(page, live_server, game)
row = add_play_row(page)
def center_bg() -> str:
return row.evaluate(
"""el => {
const r = el.getBoundingClientRect();
const node = document.elementFromPoint(
r.left + r.width / 2, r.top + r.height / 2);
return getComputedStyle(node).backgroundColor;
}"""
)
idle = center_bg()
row.hover()
page.wait_for_timeout(150)
hovered = center_bg()
transparent = ("rgba(0, 0, 0, 0)", "transparent")
assert hovered not in transparent and hovered != idle, (
f"row background did not change on hover (idle={idle!r}, hovered={hovered!r})"
)
def test_played_menu_row_has_pointer_cursor_across_full_row(
authenticated_page, live_server, game
):
"""Every horizontal point of the '+1' row shows a hand cursor.
The former dead zones (row padding resolving to a handler-less <li> with
cursor:auto) are what made the cursor flicker and disappear.
"""
page = authenticated_page
open_played_menu(page, live_server, game)
row = add_play_row(page)
cursors = row.evaluate(
"""(el, fracs) => {
const r = el.getBoundingClientRect();
const y = r.top + r.height / 2;
return fracs.map(f => {
const node = document.elementFromPoint(r.left + r.width * f, y);
return getComputedStyle(node).cursor;
});
}""",
ROW_FRACTIONS,
)
not_pointer = [f for f, c in zip(ROW_FRACTIONS, cursors) if c != "pointer"]
assert not_pointer == [], (
f"row fractions without a pointer cursor: {not_pointer} (cursors={cursors})"
)
def test_played_plus_one_target_fills_the_row(authenticated_page, live_server, game):
"""The '+1' click target spans the whole row.
Regression: the click handler moved onto an inner <button> that no longer
fills the row (16px dead zone left, 30px right), so clicks on the row's
padding land on the <li>, which has no handler, and are silently swallowed.
"""
page = authenticated_page
open_played_menu(page, live_server, game)
row = add_play_row(page)
misses = row.evaluate(
"""(el, fracs) => {
const r = el.getBoundingClientRect();
const y = r.top + r.height / 2;
return fracs.filter(f => {
const node = document.elementFromPoint(r.left + r.width * f, y);
return !(node && (node.hasAttribute('data-add-play')
|| node.closest('[data-add-play]')));
});
}""",
ROW_FRACTIONS,
)
assert misses == [], f"row fractions with no '+1' click target: {misses}"
def test_played_plus_one_fires_when_clicking_row_edge(
authenticated_page, live_server, game
):
"""Clicking the row's right edge (its padding) still records a play."""
page = authenticated_page
count = page.locator("play-event-row [data-count]")
open_played_menu(page, live_server, game)
expect(count).to_have_text("0")
row = add_play_row(page)
box = row.bounding_box()
# Click well inside the right padding — a dead zone before the fix.
page.mouse.click(box["x"] + box["width"] - 4, box["y"] + box["height"] / 2)
expect(count).to_have_text("1")
assert game.playevents.count() == 1
def test_played_plus_one_refreshes_play_events_table(
authenticated_page, live_server, game
):
"""Recording a play via '+1' updates the Play Events section in place.
Regression: the play-event-row dispatched no event after creating the
play, so the Play Events table and its count badge stayed stale until a
full reload. It now dispatches 'play-added' and #playevents-container
re-fetches itself (mirroring the history section's status-changed refresh).
"""
page = authenticated_page
section = page.locator("#playevents-container")
open_played_menu(page, live_server, game)
expect(section).to_contain_text("No play events yet.")
page.locator("play-event-row [data-add-play]").click()
# The section swaps itself in via htmx — no manual reload.
expect(section).not_to_contain_text("No play events yet.")
expect(section.locator("table tbody tr")).to_have_count(1)
-178
View File
@@ -1,178 +0,0 @@
"""Browser tests for the purchase pricing UX and the split action.
- A synthetic page isolates the general ``selection-fields`` element (no API,
deterministic option values), mirroring ``test_search_select_e2e.py``.
- The real-app tests drive the actual add-purchase form and the split modal
against pytest-django's ``live_server``.
"""
from datetime import date
import pytest
from django.http import HttpResponse
from django.test import override_settings
from django.urls import path, reverse
from playwright.sync_api import Page, expect
from common.components import SearchSelect, SelectionFields
from games.models import Game, Platform, Purchase
def selection_fields_view(request):
html = f"""
<!DOCTYPE html>
<html>
<head>
<script src="/static/js/htmx.min.js"></script>
<script type="module" src="/static/js/dist/elements/search-select.js"></script>
<script type="module" src="/static/js/dist/elements/selection-fields.js"></script>
</head>
<body>
<div style="padding: 50px;">
{
SearchSelect(
name="games",
selected=[],
options=[
{"value": "7", "label": "Game A", "data": {}},
{"value": "8", "label": "Game B", "data": {}},
],
multi_select=True,
)
}
{
SelectionFields(
source="games",
name_prefix="price_for_game_",
field_type="number",
min_items=2,
active=True,
)
}
</div>
</body>
</html>
"""
return HttpResponse(html)
urlpatterns = [
path("sf-test/", selection_fields_view),
]
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_purchase_e2e")
def test_selection_fields_syncs_with_source(live_server, page: Page):
page.goto(live_server.url + "/sf-test/")
games = page.locator('search-select[name="games"]')
rows = page.locator("selection-fields [data-selection-fields-rows] input")
# Below min_items (2): nothing rendered.
expect(rows).to_have_count(0)
games.locator("[data-search-select-search]").click()
games.locator('[data-search-select-option][data-value="7"]').click()
expect(rows).to_have_count(0) # only one selected, still below min_items
games.locator("[data-search-select-search]").click()
games.locator('[data-search-select-option][data-value="8"]').click()
expect(rows).to_have_count(2)
# One input per item, named by the prefix + item id.
expect(
page.locator('selection-fields input[name="price_for_game_7"]')
).to_have_count(1)
expect(
page.locator('selection-fields input[name="price_for_game_8"]')
).to_have_count(1)
# Typed values survive removing and re-adding another item.
page.locator('selection-fields input[name="price_for_game_7"]').fill("12")
games.locator('[data-pill][data-value="8"] [data-pill-remove]').click()
expect(rows).to_have_count(0)
games.locator("[data-search-select-search]").click()
games.locator('[data-search-select-option][data-value="8"]').click()
expect(rows).to_have_count(2)
expect(
page.locator('selection-fields input[name="price_for_game_7"]')
).to_have_value("12")
@pytest.fixture
def authenticated_page(live_server, page: Page, django_user_model) -> Page:
django_user_model.objects.create_user(username="tester", password="secret123")
page.goto(f"{live_server.url}{reverse('login')}")
page.fill('input[name="username"]', "tester")
page.fill('input[name="password"]', "secret123")
page.click('button:has-text("Login")')
page.wait_for_url(f"{live_server.url}/tracker**")
return page
def _select_two_games(page: Page) -> None:
games = page.locator('search-select[name="games"]')
games.locator("[data-search-select-search]").click()
options = games.locator("[data-search-select-option]")
expect(options).to_have_count(2) # prefetched on focus
options.nth(0).click()
options.nth(1).click()
def test_add_purchase_per_game_toggle_reveals_inputs(
authenticated_page: Page, live_server
):
"""The combined/per-game toggle appears only at 2+ games; turning it on
hides the bundle Price and shows one price input per selected game.
(Server-side creation of N purchases is covered by the unit tests.)"""
page = authenticated_page
platform = Platform.objects.create(name="PC", icon="pc", group="PC")
Game.objects.create(name="Alpha Game", platform=platform)
Game.objects.create(name="Beta Game", platform=platform)
page.goto(f"{live_server.url}{reverse('games:add_purchase')}")
checkbox_row = page.locator("#separate-prices-row")
expect(checkbox_row).to_be_hidden()
_select_two_games(page)
expect(checkbox_row).to_be_visible()
page.locator("#id_separate_prices").check()
expect(page.locator("#id_price")).to_be_hidden()
per_game_inputs = page.locator(
"selection-fields [data-selection-fields-rows] input"
)
expect(per_game_inputs).to_have_count(2)
def test_split_purchase_action(authenticated_page: Page, live_server):
page = authenticated_page
platform = Platform.objects.create(name="PC", icon="pc", group="PC")
game_a = Game.objects.create(name="Alpha Game", platform=platform)
game_b = Game.objects.create(name="Beta Game", platform=platform)
bundle = Purchase.objects.create(
price=30.0,
price_currency="USD",
date_purchased=date(2025, 1, 1),
platform=platform,
ownership_type=Purchase.DIGITAL,
type=Purchase.GAME,
)
bundle.games.set([game_a, game_b])
page.goto(f"{live_server.url}{reverse('games:list_purchases')}")
# Before: one bundle row.
expect(page.locator('[id^="purchase-row-"]')).to_have_count(1)
page.locator('[title="Split into per-game purchases"]').click()
modal = page.locator("#split-confirmation-modal")
expect(modal).to_be_visible()
modal.locator('button[type="submit"]', has_text="Split").click()
page.wait_for_url(f"{live_server.url}{reverse('games:list_purchases')}**")
# After: the bundle row is gone, replaced by two per-game rows. Asserted via
# the UI (not the ORM) to avoid live_server/SQLite write-read contention.
expect(page.locator(f"#purchase-row-{bundle.id}")).to_have_count(0)
expect(page.locator('[id^="purchase-row-"]')).to_have_count(2)
-108
View File
@@ -1,108 +0,0 @@
import pytest
from django.urls import path
from django.http import HttpResponse
from django.test import override_settings
from common.components import SearchSelect
def e2e_test_view(request):
html = f"""
<!DOCTYPE html>
<html>
<head>
<title>SearchSelect E2E Test</title>
<!-- search-select is a custom element; htmx must be present for filter_bar. -->
<script src="/static/js/htmx.min.js"></script>
<script type="module" src="/static/js/dist/elements/search-select.js"></script>
</head>
<body>
<div style="padding: 50px;">
{
SearchSelect(
name="games",
selected=[{"value": "7", "label": "Game A", "data": {}}],
options=[
{"value": "7", "label": "Game A", "data": {}},
{"value": "8", "label": "Game B", "data": {}},
],
multi_select=False,
)
}
</div>
</body>
</html>
"""
return HttpResponse(html)
urlpatterns = [
path("test-search-select/", e2e_test_view),
]
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_search_select_e2e")
def test_search_select_backspace_clears_single_select(live_server, page):
# Enable console log forwarding
page.on("console", lambda msg: print(f"BROWSER CONSOLE: {msg.text}"))
page.goto(live_server.url + "/test-search-select/")
# Inject our event logger
page.evaluate("""() => {
const s = document.querySelector('input[data-search-select-search]');
const c = document.querySelector('search-select');
s.addEventListener('focus', () => console.log('JS-EVENT: focus, dirty=' + c._searchSelectDirty + ', value="' + s.value + '"'));
s.addEventListener('blur', () => console.log('JS-EVENT: blur, dirty=' + c._searchSelectDirty + ', value="' + s.value + '"'));
s.addEventListener('input', () => console.log('JS-EVENT: input, dirty=' + c._searchSelectDirty + ', value="' + s.value + '"'));
s.addEventListener('keydown', (e) => console.log('JS-EVENT: keydown ' + e.key + ', dirty=' + c._searchSelectDirty + ', value="' + s.value + '"'));
}""")
search_input = page.locator("input[data-search-select-search]")
assert search_input.input_value() == "Game A"
hidden_input = page.locator('input[name="games"]')
assert hidden_input.first.get_attribute("value") == "7"
# Focus the input
print("\n--- FOCUSING INPUT ---")
search_input.focus()
assert search_input.input_value() == ""
# Press Backspace using the raw keyboard API to avoid any high-level Playwright input simulation
print("\n--- PRESSING BACKSPACE ---")
page.keyboard.press("Backspace")
# Explicitly blur the input
print("\n--- BLURRING INPUT ---")
search_input.blur()
# Wait for blur microtasks/setTimeout to settle (120ms timeout in JS)
page.wait_for_timeout(200)
# After Backspace and blur, the input should remain empty (the selection is cleared)
assert search_input.input_value() == ""
assert hidden_input.count() == 0
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_search_select_e2e")
def test_search_select_typing_replaces_single_select(live_server, page):
page.goto(live_server.url + "/test-search-select/")
search_input = page.locator("input[data-search-select-search]")
search_input.focus()
assert search_input.input_value() == ""
search_input.type("X")
assert search_input.input_value() == "X"
search_input.blur()
page.wait_for_timeout(200)
assert search_input.input_value() == "Game A"
hidden_input = page.locator('input[name="games"]')
assert hidden_input.first.get_attribute("value") == "7"
-103
View File
@@ -1,103 +0,0 @@
"""Browser test for the session-list "Finish session now" in-place row swap (issue #53).
Drives the real session list against pytest-django's ``live_server``: clicks the
finish button on a running session and asserts the row is updated in place via
htmx (the row still exists and now shows an end-time em dash separator).
"""
import pytest
from django.urls import reverse
from django.utils import timezone
from playwright.sync_api import Page, expect
from games.models import Device, Game, Platform, Session
@pytest.fixture
def authenticated_page(live_server, page: Page, django_user_model) -> Page:
django_user_model.objects.create_user(username="tester", password="secret123")
page.goto(f"{live_server.url}{reverse('login')}")
page.fill('input[name="username"]', "tester")
page.fill('input[name="password"]', "secret123")
page.click('button:has-text("Login")')
page.wait_for_url(f"{live_server.url}/tracker**")
return page
def test_finish_session_swaps_row_in_place(authenticated_page: Page, live_server):
page = authenticated_page
platform = Platform.objects.create(name="PC", icon="pc", group="PC")
game = Game.objects.create(name="Tunic", platform=platform)
device = Device.objects.create(name="Desktop")
session = Session.objects.create(
game=game, device=device, timestamp_start=timezone.now()
)
page.goto(f"{live_server.url}{reverse('games:list_sessions')}")
row = page.locator(f"#session-row-{session.pk}")
expect(row).to_be_visible()
row.locator('button[title="Finish session now"]').click()
# htmx swaps the row in place; the row still exists and now shows an end
# time separated by an em dash.
expect(row).to_contain_text("")
session.refresh_from_db()
assert session.timestamp_end is not None
def test_finish_session_swap_does_not_add_scrollbar(
authenticated_page: Page, live_server
):
"""Regression for the phantom horizontal scrollbar (issues #53 / #40).
Flowbite re-initialises popovers on every htmx swap; a popover hidden via
Tailwind ``invisible`` (visibility:hidden) still occupies layout, so once
Popper parks it with a transform it expands the table's overflow-x-auto
wrapper and a spurious scrollbar appears. The popover must be removed from
layout while hidden.
"""
page = authenticated_page
page.set_viewport_size({"width": 1280, "height": 800})
platform = Platform.objects.create(name="PC", icon="pc", group="PC")
# A long name guarantees a truncated NameWithIcon popover in the row.
game = Game.objects.create(name="A Very Long Game Title That Truncates")
game.platform = platform
game.save()
device = Device.objects.create(name="Desktop")
session = Session.objects.create(
game=game, device=device, timestamp_start=timezone.now()
)
page.goto(f"{live_server.url}{reverse('games:list_sessions')}")
# The fix only removes the popover from layout while it is hidden; it must
# still display on hover. Verify on the freshly-loaded page.
trigger = page.locator(f"#session-row-{session.pk} [data-popover-target]").first
popover_id = trigger.get_attribute("data-popover-target")
trigger.hover()
page.wait_for_timeout(400)
shown_display = page.evaluate(
"""(id) => getComputedStyle(document.querySelector(`[id="${id}"]`)).display""",
popover_id,
)
assert shown_display != "none", "popover stayed display:none on hover"
page.mouse.move(0, 0)
page.locator(f"#session-row-{session.pk}").locator(
'button[title="Finish session now"]'
).click()
expect(page.locator(f"#session-row-{session.pk}")).to_contain_text("")
page.wait_for_timeout(500) # allow Flowbite afterSettle re-init + Popper
# After the swap re-inits popovers, the table wrapper must not become
# horizontally scrollable (the phantom-scrollbar regression).
overflow = page.evaluate(
"""() => {
const w = document.querySelector('.overflow-x-auto');
return w.scrollWidth - w.clientWidth;
}"""
)
assert overflow <= 0, f"table wrapper overflows by {overflow}px after swap"
-46
View File
@@ -1,46 +0,0 @@
"""Browser test for the session-list "Reset start to now" button (issue #33).
Drives the real session list against pytest-django's ``live_server``: clicks the
reset button on a running session, accepts the confirm dialog, and asserts the
row's start time is updated in place via htmx.
"""
import datetime as dt
import pytest
from django.urls import reverse
from playwright.sync_api import Page, expect
from games.models import Game, Platform, Session
@pytest.fixture
def authenticated_page(live_server, page: Page, django_user_model) -> Page:
django_user_model.objects.create_user(username="tester", password="secret123")
page.goto(f"{live_server.url}{reverse('login')}")
page.fill('input[name="username"]', "tester")
page.fill('input[name="password"]', "secret123")
page.click('button:has-text("Login")')
page.wait_for_url(f"{live_server.url}/tracker**")
return page
def test_reset_session_start_to_now(authenticated_page: Page, live_server):
page = authenticated_page
platform = Platform.objects.create(name="PC", icon="pc", group="PC")
game = Game.objects.create(name="Reset Game", platform=platform)
session = Session.objects.create(
game=game,
timestamp_start=dt.datetime(2020, 1, 1, 10, 0, tzinfo=dt.timezone.utc),
)
page.goto(f"{live_server.url}{reverse('games:list_sessions')}")
row = page.locator(f"#session-row-{session.id}")
expect(row).to_contain_text("2020")
page.on("dialog", lambda dialog: dialog.accept())
row.locator('button[title="Reset start to now"]').click()
# htmx swaps the row in place; the old 2020 start time is gone.
expect(row).not_to_contain_text("2020")
-149
View File
@@ -1,149 +0,0 @@
"""End-to-end Playwright test for String multi-mode filter serialization, null-state toggling, and prefill behaviors."""
import json
import urllib.parse
import pytest
from django.http import HttpResponse
from django.test import override_settings
from django.urls import path
from common.components import PlatformFilterBar
def _bar_page(filter_json: str = "") -> str:
return f"""<!DOCTYPE html>
<html>
<head>
<title>String filter E2E</title>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/dist/elements/search-select.js" type="module"></script>
<script src="/static/js/dist/elements/filter-bar.js" type="module"></script>
</head>
<body>
{PlatformFilterBar(filter_json=filter_json, preset_list_url="/p/l", preset_save_url="/p/s")}
</body>
</html>"""
def empty_bar_view(request):
return HttpResponse(_bar_page())
def prefilled_bar_view(request):
filter_json = json.dumps(
{
"name": {
"value": "Switch",
"modifier": "INCLUDES",
},
"group": {"modifier": "IS_NULL"},
}
)
return HttpResponse(_bar_page(filter_json=filter_json))
urlpatterns = [
path("test-string-filter-empty/", empty_bar_view),
path("test-string-filter-prefilled/", prefilled_bar_view),
]
def _filter_from_url(url: str) -> dict:
query = urllib.parse.urlparse(url).query
params = urllib.parse.parse_qs(query)
raw = params.get("filter", [""])[0]
return json.loads(raw) if raw else {}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_string_filter_e2e")
def test_string_filter_defaults_and_toggles(live_server, page):
page.goto(live_server.url + "/test-string-filter-empty/")
# 1. Verify text inputs are active by default and modifier "is" (EQUALS) is checked
name_input = page.locator('input[name="filter-name"]')
assert name_input.is_enabled()
is_radio = page.locator('input[name="filter-name-modifier"][value="EQUALS"]')
assert is_radio.is_checked()
# 2. Enter values, click "includes" (INCLUDES), and submit
name_input.fill("PlayStation")
includes_radio = page.locator(
'input[name="filter-name-modifier"][value="INCLUDES"]'
)
includes_radio.click()
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert parsed["name"] == {"value": "PlayStation", "modifier": "INCLUDES"}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_string_filter_e2e")
def test_string_filter_null_states(live_server, page):
page.goto(live_server.url + "/test-string-filter-empty/")
name_input = page.locator('input[name="filter-name"]')
name_input.fill("Xbox")
# Click "is null"
is_null_radio = page.locator('input[name="filter-name-modifier"][value="IS_NULL"]')
is_null_radio.click()
# Verification of interactive disabling
assert not name_input.is_enabled()
assert name_input.input_value() == ""
with page.expect_navigation():
page.evaluate(
"document.getElementById('filter-bar-form')"
".dispatchEvent(new Event('submit', {cancelable: true}))"
)
parsed = _filter_from_url(page.url)
assert parsed["name"] == {"modifier": "IS_NULL"}
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_string_filter_e2e")
def test_string_filter_prefilled_states(live_server, page):
page.goto(live_server.url + "/test-string-filter-prefilled/")
name_input = page.locator('input[name="filter-name"]')
group_input = page.locator('input[name="filter-group"]')
# Verifies name matches "Switch" and "includes" is checked
assert name_input.input_value() == "Switch"
assert name_input.is_enabled()
assert page.locator(
'input[name="filter-name-modifier"][value="INCLUDES"]'
).is_checked()
# Verifies group is empty, disabled, and "is null" is checked
assert group_input.input_value() == ""
assert not group_input.is_enabled()
assert page.locator(
'input[name="filter-group-modifier"][value="IS_NULL"]'
).is_checked()
@pytest.mark.django_db
@override_settings(ROOT_URLCONF="e2e.test_string_filter_e2e")
def test_string_filter_deselect_re_enables(live_server, page):
page.goto(live_server.url + "/test-string-filter-empty/")
name_input = page.locator('input[name="filter-name"]')
is_null_radio = page.locator('input[name="filter-name-modifier"][value="IS_NULL"]')
# 1. Click "is null" -> disables input
is_null_radio.click()
assert not name_input.is_enabled()
# 2. Click "is null" again to deselect/uncheck -> should re-enable the text input
is_null_radio.click()
assert name_input.is_enabled()
-275
View File
@@ -1,275 +0,0 @@
"""Browser tests for widget JavaScript (search_select.js, filter-bar.js,
add_purchase.js) and their onSwap() initialization lifecycle.
These run a real Chromium via pytest-playwright against pytest-django's
``live_server``. All JavaScript under test is served locally from
``games/static/js/`` (htmx, Alpine, Flowbite and the widget files are
vendored), so no network access is needed beyond the live server itself.
Browser binaries must be installed once: ``uv run playwright install chromium``.
"""
import re
import pytest
from django.urls import reverse
from playwright.sync_api import Page, expect
@pytest.fixture
def authenticated_page(live_server, page: Page, django_user_model) -> Page:
django_user_model.objects.create_user(username="tester", password="secret123")
page.goto(f"{live_server.url}{reverse('login')}")
page.fill('input[name="username"]', "tester")
page.fill('input[name="password"]', "secret123")
page.click('button:has-text("Login")')
page.wait_for_url(f"{live_server.url}/tracker**")
return page
def open_filter_bar(page: Page) -> None:
page.click("#filter-bar button:has-text('Filters')")
expect(page.locator("#filter-bar-body")).to_be_visible()
def status_filter_widget(page: Page):
return page.locator('search-select[name="status"]')
def test_search_select_initializes_on_page_load(authenticated_page: Page, live_server):
"""Clicking into a FilterSelect search box opens its options panel —
proof that onSwap ran the widget initializer on the initial page load."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:list_games')}")
open_filter_bar(page)
widget = status_filter_widget(page)
widget.locator("[data-search-select-search]").click()
options_panel = widget.locator("[data-search-select-options]")
expect(options_panel).to_be_visible()
# The pinned "(Any)" modifier pseudo-option is rendered server-side and
# only becomes interactable through the initialized panel.
expect(
options_panel.locator("[data-search-select-modifier-option]").first
).to_have_text("(Any)")
def test_search_select_adds_include_pill(authenticated_page: Page, live_server):
"""Clicking an enum option row adds an include pill (full widget wiring)."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:list_games')}")
open_filter_bar(page)
widget = status_filter_widget(page)
widget.locator("[data-search-select-search]").click()
widget.locator('[data-search-select-option][data-label="Finished"]').click()
pill = widget.locator("[data-search-select-pills] [data-pill]")
expect(pill).to_have_count(1)
expect(pill).to_contain_text("Finished")
def test_number_filter_between_reveals_second_input(
authenticated_page: Page, live_server
):
"""Selecting the BETWEEN modifier on a NumberFilter reveals its second
(value2) input proof that setupNumberFilters wired the modifier radios on
the initial page load."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:list_games')}")
open_filter_bar(page)
value2 = page.locator('input[name="filter-year-value2"]')
expect(value2).to_be_hidden()
page.locator('input[name="filter-year-modifier"][value="BETWEEN"]').check()
expect(value2).to_be_visible()
def test_widgets_initialize_inside_htmx_swapped_content(
authenticated_page: Page, live_server
):
"""Widgets arriving via an htmx swap initialize without a page load.
The filter bar is re-fetched and swapped in with htmx.ajax fresh,
uninitialized DOM. The swapped-in FilterSelect must open its panel and the
swapped-in NumberFilter must reveal its second input on BETWEEN, proving the
htmx:load half of onSwap and the once-per-element guard."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:list_games')}")
page.evaluate(
"htmx.ajax('GET', window.location.pathname, "
"{target: '#filter-bar', select: '#filter-bar', swap: 'outerHTML'})"
)
# The swapped-in bar arrives collapsed again; opening it proves the swap
# happened and the fresh DOM is in place.
open_filter_bar(page)
widget = status_filter_widget(page)
widget.locator("[data-search-select-search]").click()
expect(widget.locator("[data-search-select-options]")).to_be_visible()
value2 = page.locator('input[name="filter-year-value2"]')
expect(value2).to_be_hidden()
page.locator('input[name="filter-year-modifier"][value="BETWEEN"]').check()
expect(value2).to_be_visible()
def test_add_purchase_type_toggles_disabled_fields(
authenticated_page: Page, live_server
):
"""add_purchase.js disables name/related-game while type is "game"
and re-enables them for other types."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:add_purchase')}")
name_input = page.locator("#id_name")
expect(name_input).to_be_disabled()
# The Name field (a plain input) self-styles its disabled state via the
# INPUT_CLASS disabled: variants — not a global rule. not-allowed is
# mode-independent, so it holds in light and dark.
assert name_input.evaluate("el => getComputedStyle(el).cursor") == "not-allowed"
page.select_option("#id_type", "dlc")
expect(name_input).to_be_enabled()
assert name_input.evaluate("el => getComputedStyle(el).cursor") != "not-allowed"
page.select_option("#id_type", "game")
expect(name_input).to_be_disabled()
def test_add_purchase_related_game_is_flat_game_search(
authenticated_page: Page, live_server
):
"""The DLC/Season-Pass anchor is now a flat game search (related_game),
wired to the games search API and present regardless of which games are
selected not the old parent-purchase dropdown filtered by chosen games."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:add_purchase')}")
related = page.locator('search-select[name="related_game"]')
expect(related).to_have_count(1)
expect(related).to_have_attribute("search-url", "/api/games/search")
def test_searchselect_border_matches_native_input(
authenticated_page: Page, live_server
):
"""A SearchSelect's wrapper has the same border as a native input, and turns
brand on focus (via focus-within on the wrapper, since the inner search box
is what's focused)."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:add_purchase')}")
price = page.locator("#id_price") # always-enabled native input
wrapper = page.locator("search-select[name='platform']")
search_input = page.locator("#id_platform")
border = "el => getComputedStyle(el).borderColor"
rest = price.evaluate(border)
assert wrapper.evaluate(border) == rest # same border at rest
search_input.focus()
focused_wrapper = wrapper.evaluate(border)
price.focus()
focused_input = price.evaluate(border)
assert focused_wrapper == focused_input # same brand border on focus
assert focused_wrapper != rest # focus actually changes it
def test_add_game_syncs_sort_name_from_name(authenticated_page: Page, live_server):
"""Typing into Name live-fills Sort name (sync bound to the add form, not
the navbar logout form which is the first <form> on the page)."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:add_game')}")
page.locator("#id_name").click()
page.locator("#id_name").type("Halo")
expect(page.locator("#id_sort_name")).to_have_value("Halo")
def test_add_purchase_type_game_disables_related_game_search(
authenticated_page: Page, live_server
):
"""When Type is 'game', the related-game SearchSelect is disabled.
#id_related_game is the inner search <input> (the real labelable control),
and the <search-select> wrapper fades via has-[:disabled]:opacity-50."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:add_purchase')}")
# #id_related_game is now on the inner <input data-search-select-search>
search_input = page.locator("#id_related_game")
# The wrapper has no id; find it by the stable `name` attribute.
wrapper = page.locator("search-select[name='related_game']")
name = page.locator("#id_name")
opacity = "el => getComputedStyle(el).opacity"
bg = "el => getComputedStyle(el).backgroundColor"
page.select_option("#id_type", "game")
expect(search_input).to_be_disabled()
# A disabled SearchSelect must look identical to a disabled native input:
# both fade (opacity-50) over the same surface.
assert wrapper.evaluate(opacity) == "0.5"
assert name.evaluate(opacity) == "0.5"
assert wrapper.evaluate(bg) == name.evaluate(bg)
# The inner input stays transparent (no nested box) with the same not-allowed
# cursor (no flicker across the widget).
assert search_input.evaluate(bg) == "rgba(0, 0, 0, 0)"
assert search_input.evaluate("el => getComputedStyle(el).cursor") == "not-allowed"
page.select_option("#id_type", "dlc")
expect(search_input).to_be_enabled()
# Enabled, both return to full opacity.
assert wrapper.evaluate(opacity) == "1"
assert name.evaluate(opacity) == "1"
def test_label_click_focuses_search_select(authenticated_page: Page, live_server):
"""Clicking a <label for="id_X"> on a SearchSelect field must focus the
search input confirmed now that id is on the real <input> control."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:add_purchase')}")
# related_game is disabled when type is "game" (the default); switch so it
# is enabled, otherwise clicking the label for a disabled control fails.
page.select_option("#id_type", "dlc")
label = page.locator("label[for='id_related_game']")
search_input = page.locator("#id_related_game")
label.click()
expect(search_input).to_be_focused()
def test_add_game_sync_stops_once_sort_name_edited(
authenticated_page: Page, live_server
):
"""Name → Sort name mirrors live, but stops the moment the user edits Sort
name directly (the 'UntilChanged' contract). Editing Name afterwards must
not clobber the user's manual Sort name."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:add_game')}")
name = page.locator("#id_name")
sort = page.locator("#id_sort_name")
name.click()
name.type("Halo")
expect(sort).to_have_value("Halo") # live mirror before any manual edit
sort.fill("Custom Sort") # user takes over the target → sync drops
expect(sort).to_have_value("Custom Sort")
name.click()
name.press("End")
name.type(" 2")
expect(name).to_have_value("Halo 2")
expect(sort).to_have_value("Custom Sort") # not clobbered
def test_add_game_submit_and_create_session_redirects(
authenticated_page: Page, live_server
):
"""Submit & Create Session saves the game and redirects to add-session with
the new game pre-selected in the game SearchSelect."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:add_game')}")
page.fill("#id_name", "E2E Session Game")
page.click('button[name="submit_and_create_session"]')
page.wait_for_url(f"{live_server.url}/tracker/session/add/for-game/**")
expect(page.locator("#id_game")).to_have_value(re.compile(r"^E2E Session Game"))
+16 -55
View File
@@ -1,62 +1,23 @@
#!/bin/bash #!/bin/bash
# Apply database migrations
set -euo pipefail set -euo pipefail
echo "Apply database migrations"
poetry run python manage.py migrate
# Container-bootstrap configuration. These variables are consumed only by this echo "Collect static files"
# entrypoint, NOT by Django (see timetracker/config.py for the app settings): poetry run python manage.py collectstatic --clear --no-input
# PUID/PGID — uid/gid the container process runs as
# DATA_DIR — writable dir for the SQLite database (kept in
# sync with Django via the same env var + default)
# CREATE_DEFAULT_SUPERUSER — create an admin/admin user on first start
# STAGING / LOAD_SAMPLE_DATA — staging-only data bootstrap (see below)
PUID=${PUID:-1000}
PGID=${PGID:-100}
DATA_DIR=${DATA_DIR:-/home/timetracker/app/data}
USERHOME=$(grep timetracker /etc/passwd | cut -d ":" -f6) _term() {
usermod -d "/root" timetracker echo "Caught SIGTERM signal!"
groupmod -o -g "$PGID" timetracker kill -SIGTERM "$gunicorn_pid"
usermod -o -u "$PUID" timetracker kill -SIGTERM "$django_q_pid"
usermod -d "${USERHOME}" timetracker }
trap _term SIGTERM
mkdir -p "$DATA_DIR" /var/log/supervisor echo "Starting Django-Q cluster"
chmod 755 /home/timetracker/app poetry run python manage.py qcluster & django_q_pid=$!
chmod 755 /home/timetracker/app/.venv
chown "$PUID:$PGID" "$DATA_DIR" echo "Starting app"
chown "$PUID:$PGID" /var/log/supervisor poetry run python -m gunicorn --bind 0.0.0.0:8001 timetracker.asgi:application -k uvicorn.workers.UvicornWorker --access-logfile - --error-logfile - & gunicorn_pid=$!
python manage.py migrate wait "$gunicorn_pid" "$django_q_pid"
python manage.py collectstatic --clear --no-input
# Staging seeded from a production snapshot: remove copied sessions and the
# inherited django-q schedule/queue so staging neither shares prod's session
# cookies nor independently runs scheduled tasks (see issue #20).
if [ "${STAGING:-false}" = "true" ]; then
python manage.py scrub_staging
fi
# Public staging with a fresh database (e.g. Fly.io): load demo data instead
# of any production snapshot. Runs once while the games table is empty.
if [ "${LOAD_SAMPLE_DATA:-false}" = "true" ]; then
python manage.py shell -c "
from games.models import Game
from django.core.management import call_command
if not Game.objects.exists():
call_command('loaddata', 'sample.yaml')
print('Loaded sample data.')
"
fi
if [ "${CREATE_DEFAULT_SUPERUSER:-false}" = "true" ]; then
python manage.py shell -c "
from django.contrib.auth import get_user_model
User = get_user_model()
if not User.objects.filter(username='admin').exists():
User.objects.create_superuser('admin', '', 'admin')
print('Created default superuser: admin / admin')
"
fi
chown -R "$PUID:$PGID" "$DATA_DIR"
exec /usr/bin/supervisord -c /etc/supervisor/conf.d/supervisor.conf
-29
View File
@@ -1,29 +0,0 @@
# Shared Fly.io configuration for ephemeral, per-branch GitHub staging deploys.
#
# The app name is NOT set here on purpose; each branch supplies its own via
# `flyctl deploy --app timetracker-staging-<slug>`. These instances run with a
# fresh database seeded from sample fixtures (never production data) and their
# own SECRET_KEY, so they are safe to expose on a public *.fly.dev hostname.
primary_region = "ams"
[build]
dockerfile = "Dockerfile"
[env]
DEBUG = "false"
TZ = "Europe/Prague"
DATA_DIR = "/home/timetracker/app/data"
LOAD_SAMPLE_DATA = "true"
CREATE_DEFAULT_SUPERUSER = "true"
[http_service]
internal_port = 8000
force_https = true
auto_stop_machines = "stop"
auto_start_machines = true
min_machines_running = 0
[[vm]]
size = "shared-cpu-1x"
memory = "512mb"
-174
View File
@@ -1,174 +0,0 @@
from datetime import date, datetime
from typing import List
from django.contrib import messages
from django.db.models import Q
from django.shortcuts import get_object_or_404
from django.utils.timezone import now as django_timezone_now
from ninja import Field, ModelSchema, NinjaAPI, Router, Schema, Status
from games.models import Device, Game, Platform, PlayEvent, Session
api = NinjaAPI()
playevent_router = Router()
game_router = Router()
device_router = Router()
platform_router = Router()
NOW_FACTORY = django_timezone_now
class GameStatusUpdate(Schema):
status: str
class PlayEventIn(Schema):
game_id: int
started: date | None = None
ended: date | None = None
note: str = ""
days_to_finish: int | None = None
class AutoPlayEventIn(ModelSchema):
class Meta:
model = PlayEvent
fields = ["game", "started", "ended", "note"]
class UpdatePlayEventIn(Schema):
started: date | None = None
ended: date | None = None
note: str = ""
class PlayEventOut(Schema):
id: int
game: str = Field(..., alias="game.name")
started: date | None = None
ended: date | None = None
days_to_finish: int | None = None
note: str = ""
updated_at: datetime
created_at: datetime
class GameOption(Schema): # mirrors SearchSelectOption
value: int
label: str
data: dict
class StringOption(Schema): # SearchSelectOption with a string value (e.g. group names)
value: str
label: str
data: dict
@game_router.get("/search", response=list[GameOption])
def search_games(request, q: str = "", limit: int = 10):
qs = Game.objects.select_related("platform").order_by("sort_name")
if q:
qs = qs.filter(Q(name__icontains=q) | Q(sort_name__icontains=q))
return [
{
"value": g.id,
"label": g.search_label,
"data": {"platform": g.platform_id or ""},
}
for g in qs[:limit]
]
@game_router.patch("/{game_id}/status", response={204: None})
def partial_update_game(request, game_id: int, payload: GameStatusUpdate):
game = get_object_or_404(Game, id=game_id)
setattr(game, "status", payload.status)
game.save()
messages.success(request, "Status updated")
return Status(204, None)
@playevent_router.get("/", response=List[PlayEventOut])
def list_playevents(request):
return PlayEvent.objects.all()
@playevent_router.post("/", response={201: PlayEventOut})
def create_playevent(request, payload: PlayEventIn):
playevent = PlayEvent.objects.create(**payload.dict())
messages.success(request, "Game played!")
return playevent
@playevent_router.get("/{playevent_id}", response=PlayEventOut)
def get_playevent(request, playevent_id: int):
playevent = get_object_or_404(PlayEvent, id=playevent_id)
return playevent
@playevent_router.patch("/{playevent_id}", response=PlayEventOut)
def partial_update_playevent(request, playevent_id: int, payload: UpdatePlayEventIn):
playevent = get_object_or_404(PlayEvent, id=playevent_id)
for attr, value in payload.dict(exclude_unset=True).items():
setattr(playevent, attr, value)
playevent.save()
return playevent
@playevent_router.delete("/{playevent_id}", response={204: None})
def delete_playevent(request, playevent_id: int):
playevent = get_object_or_404(PlayEvent, id=playevent_id)
playevent.delete()
return Status(204, None)
@device_router.get("/search", response=list[GameOption])
def search_devices(request, q: str = "", limit: int = 10):
qs = Device.objects.order_by("name")
if q:
qs = qs.filter(name__icontains=q)
return [{"value": d.id, "label": d.name, "data": {}} for d in qs[:limit]]
@platform_router.get("/search", response=list[GameOption])
def search_platforms(request, q: str = "", limit: int = 10):
qs = Platform.objects.order_by("name")
if q:
qs = qs.filter(name__icontains=q)
return [{"value": p.id, "label": p.name, "data": {}} for p in qs[:limit]]
@platform_router.get("/groups", response=list[StringOption])
def search_platform_groups(request, q: str = "", limit: int = 10):
qs = Platform.objects.exclude(group="")
if q:
qs = qs.filter(group__icontains=q)
groups = qs.values_list("group", flat=True).distinct().order_by("group")
return [{"value": group, "label": group, "data": {}} for group in groups[:limit]]
api.add_router("/playevent", playevent_router)
api.add_router("/games", game_router)
api.add_router("/devices", device_router)
api.add_router("/platforms", platform_router)
session_router = Router()
class SessionDeviceUpdate(Schema):
device_id: int
@session_router.patch("/{session_id}/device", response={204: None})
def partial_update_session_device(
request, session_id: int, payload: SessionDeviceUpdate
):
session = get_object_or_404(Session, id=session_id)
session.device_id = payload.device_id
session.save()
messages.success(request, "Device updated")
return Status(204, None)
api.add_router("/session", session_router)
+20 -21
View File
@@ -1,10 +1,9 @@
# from datetime import timedelta from datetime import timedelta
from django.apps import AppConfig from django.apps import AppConfig
from django.core.management import call_command from django.core.management import call_command
from django.db.models.signals import post_migrate from django.db.models.signals import post_migrate
from django.utils.timezone import now
# from django.utils.timezone import now
class GamesConfig(AppConfig): class GamesConfig(AppConfig):
@@ -18,26 +17,26 @@ class GamesConfig(AppConfig):
def schedule_tasks(sender, **kwargs): def schedule_tasks(sender, **kwargs):
# from django_q.models import Schedule from django_q.models import Schedule
# from django_q.tasks import schedule from django_q.tasks import schedule
# if not Schedule.objects.filter(name="Update converted prices").exists(): if not Schedule.objects.filter(name="Update converted prices").exists():
# schedule( schedule(
# "games.tasks.convert_prices", "games.tasks.convert_prices",
# name="Update converted prices", name="Update converted prices",
# schedule_type=Schedule.MINUTES, schedule_type=Schedule.MINUTES,
# next_run=now() + timedelta(seconds=30), next_run=now() + timedelta(seconds=30),
# catchup=False, catchup=False,
# ) )
# if not Schedule.objects.filter(name="Update price per game").exists(): if not Schedule.objects.filter(name="Update price per game").exists():
# schedule( schedule(
# "games.tasks.calculate_price_per_game", "games.tasks.calculate_price_per_game",
# name="Update price per game", name="Update price per game",
# schedule_type=Schedule.MINUTES, schedule_type=Schedule.MINUTES,
# next_run=now() + timedelta(seconds=30), next_run=now() + timedelta(seconds=30),
# catchup=False, catchup=False,
# ) )
from games.models import ExchangeRate from games.models import ExchangeRate
-1016
View File
File diff suppressed because it is too large Load Diff
-392
View File
@@ -110,395 +110,3 @@
currency_to: CZK currency_to: CZK
year: 2018 year: 2018
rate: 3.268 rate: 3.268
- model: games.exchangerate
pk: 17
fields:
currency_from: CNY
currency_to: CZK
year: 2023
rate: 3.281
- model: games.exchangerate
pk: 18
fields:
currency_from: EUR
currency_to: CZK
year: 2009
rate: 26.445
- model: games.exchangerate
pk: 19
fields:
currency_from: CNY
currency_to: CZK
year: 2025
rate: 3.35
- model: games.exchangerate
pk: 20
fields:
currency_from: EUR
currency_to: CZK
year: 2016
rate: 27.033
- model: games.exchangerate
pk: 21
fields:
currency_from: EUR
currency_to: CZK
year: 2025
rate: 25.2021966
- model: games.exchangerate
pk: 22
fields:
currency_from: EUR
currency_to: CZK
year: 2017
rate: 26.33
- model: games.exchangerate
pk: 23
fields:
currency_from: EUR
currency_to: CZK
year: 2000
rate: 36.13
- model: games.exchangerate
pk: 24
fields:
currency_from: USD
currency_to: CZK
year: 2000
rate: 35.979
- model: games.exchangerate
pk: 25
fields:
currency_from: EUR
currency_to: CZK
year: 2001
rate: 35.09
- model: games.exchangerate
pk: 26
fields:
currency_from: USD
currency_to: CZK
year: 2001
rate: 37.813
- model: games.exchangerate
pk: 27
fields:
currency_from: EUR
currency_to: CZK
year: 2002
rate: 31.98
- model: games.exchangerate
pk: 28
fields:
currency_from: USD
currency_to: CZK
year: 2002
rate: 36.259
- model: games.exchangerate
pk: 29
fields:
currency_from: EUR
currency_to: CZK
year: 2003
rate: 31.6
- model: games.exchangerate
pk: 30
fields:
currency_from: USD
currency_to: CZK
year: 2003
rate: 30.141
- model: games.exchangerate
pk: 31
fields:
currency_from: EUR
currency_to: CZK
year: 2004
rate: 32.405
- model: games.exchangerate
pk: 32
fields:
currency_from: USD
currency_to: CZK
year: 2004
rate: 25.654
- model: games.exchangerate
pk: 33
fields:
currency_from: EUR
currency_to: CZK
year: 2005
rate: 30.465
- model: games.exchangerate
pk: 34
fields:
currency_from: USD
currency_to: CZK
year: 2005
rate: 22.365
- model: games.exchangerate
pk: 35
fields:
currency_from: EUR
currency_to: CZK
year: 2006
rate: 29.005
- model: games.exchangerate
pk: 36
fields:
currency_from: USD
currency_to: CZK
year: 2006
rate: 24.588
- model: games.exchangerate
pk: 37
fields:
currency_from: CNY
currency_to: CZK
year: 2006
rate: 3.047
- model: games.exchangerate
pk: 38
fields:
currency_from: EUR
currency_to: CZK
year: 2007
rate: 27.495
- model: games.exchangerate
pk: 39
fields:
currency_from: USD
currency_to: CZK
year: 2007
rate: 20.876
- model: games.exchangerate
pk: 40
fields:
currency_from: CNY
currency_to: CZK
year: 2007
rate: 2.674
- model: games.exchangerate
pk: 41
fields:
currency_from: EUR
currency_to: CZK
year: 2008
rate: 26.62
- model: games.exchangerate
pk: 42
fields:
currency_from: USD
currency_to: CZK
year: 2008
rate: 18.078
- model: games.exchangerate
pk: 43
fields:
currency_from: CNY
currency_to: CZK
year: 2008
rate: 2.475
- model: games.exchangerate
pk: 44
fields:
currency_from: USD
currency_to: CZK
year: 2009
rate: 19.346
- model: games.exchangerate
pk: 45
fields:
currency_from: CNY
currency_to: CZK
year: 2009
rate: 2.836
- model: games.exchangerate
pk: 46
fields:
currency_from: USD
currency_to: CZK
year: 2010
rate: 18.368
- model: games.exchangerate
pk: 47
fields:
currency_from: CNY
currency_to: CZK
year: 2010
rate: 2.691
- model: games.exchangerate
pk: 48
fields:
currency_from: EUR
currency_to: CZK
year: 2011
rate: 25.06
- model: games.exchangerate
pk: 49
fields:
currency_from: USD
currency_to: CZK
year: 2011
rate: 18.751
- model: games.exchangerate
pk: 50
fields:
currency_from: CNY
currency_to: CZK
year: 2011
rate: 2.845
- model: games.exchangerate
pk: 51
fields:
currency_from: USD
currency_to: CZK
year: 2012
rate: 19.94
- model: games.exchangerate
pk: 52
fields:
currency_from: CNY
currency_to: CZK
year: 2012
rate: 3.168
- model: games.exchangerate
pk: 53
fields:
currency_from: EUR
currency_to: CZK
year: 2013
rate: 25.14
- model: games.exchangerate
pk: 54
fields:
currency_from: CNY
currency_to: CZK
year: 2013
rate: 3.059
- model: games.exchangerate
pk: 55
fields:
currency_from: USD
currency_to: CZK
year: 2014
rate: 19.894
- model: games.exchangerate
pk: 56
fields:
currency_from: CNY
currency_to: CZK
year: 2014
rate: 3.286
- model: games.exchangerate
pk: 57
fields:
currency_from: EUR
currency_to: CZK
year: 2015
rate: 27.725
- model: games.exchangerate
pk: 58
fields:
currency_from: USD
currency_to: CZK
year: 2015
rate: 22.834
- model: games.exchangerate
pk: 59
fields:
currency_from: USD
currency_to: CZK
year: 2016
rate: 24.824
- model: games.exchangerate
pk: 60
fields:
currency_from: CNY
currency_to: CZK
year: 2017
rate: 3.693
- model: games.exchangerate
pk: 61
fields:
currency_from: EUR
currency_to: CZK
year: 2018
rate: 25.54
- model: games.exchangerate
pk: 62
fields:
currency_from: USD
currency_to: CZK
year: 2018
rate: 21.291
- model: games.exchangerate
pk: 63
fields:
currency_from: EUR
currency_to: CZK
year: 2019
rate: 25.725
- model: games.exchangerate
pk: 64
fields:
currency_from: EUR
currency_to: CZK
year: 2020
rate: 25.41
- model: games.exchangerate
pk: 65
fields:
currency_from: USD
currency_to: CZK
year: 2020
rate: 22.621
- model: games.exchangerate
pk: 66
fields:
currency_from: EUR
currency_to: CZK
year: 2021
rate: 26.245
- model: games.exchangerate
pk: 67
fields:
currency_from: USD
currency_to: CZK
year: 2021
rate: 21.387
- model: games.exchangerate
pk: 68
fields:
currency_from: CNY
currency_to: CZK
year: 2021
rate: 3.273
- model: games.exchangerate
pk: 69
fields:
currency_from: USD
currency_to: CZK
year: 2022
rate: 21.951
- model: games.exchangerate
pk: 70
fields:
currency_from: CNY
currency_to: CZK
year: 2022
rate: 3.458
- model: games.exchangerate
pk: 71
fields:
currency_from: EUR
currency_to: CZK
year: 2023
rate: 24.115
- model: games.exchangerate
pk: 72
fields:
currency_from: USD
currency_to: CZK
year: 2025
rate: 24.237
+1 -8
View File
@@ -2,34 +2,27 @@
fields: fields:
name: Steam name: Steam
group: PC group: PC
created_at: 2024-01-01T00:00:00Z
- model: games.Platform - model: games.Platform
fields: fields:
name: Xbox Gamepass name: Xbox Gamepass
group: PC group: PC
created_at: 2024-01-01T00:00:00Z
- model: games.Platform - model: games.Platform
fields: fields:
name: Epic Games Store name: Epic Games Store
group: PC group: PC
created_at: 2024-01-01T00:00:00Z
- model: games.Platform - model: games.Platform
fields: fields:
name: Playstation 5 name: Playstation 5
group: Playstation group: Playstation
created_at: 2024-01-01T00:00:00Z
- model: games.Platform - model: games.Platform
fields: fields:
name: Playstation 4 name: Playstation 4
group: Playstation group: Playstation
created_at: 2024-01-01T00:00:00Z
- model: games.Platform - model: games.Platform
fields: fields:
name: Nintendo Switch name: Nintendo Switch
group: Nintendo group: Nintendo
created_at: 2024-01-01T00:00:00Z
- model: games.Platform - model: games.Platform
fields: fields:
name: Nintendo 3DS name: Nintendo 3DS
group: Nintendo group: Nintendo
created_at: 2024-01-01T00:00:00Z
+38 -57
View File
@@ -1,90 +1,71 @@
- model: games.platform
pk: 1
fields:
name: Steam
group: PC
created_at: "2020-01-01T00:00:00Z"
- model: games.platform
pk: 3
fields:
name: Xbox Gamepass
group: PC
created_at: "2020-01-01T00:00:00Z"
- model: games.platform
pk: 4
fields:
name: Epic Games Store
group: PC
created_at: "2020-01-01T00:00:00Z"
- model: games.platform
pk: 5
fields:
name: Playstation 5
group: Playstation
created_at: "2020-01-01T00:00:00Z"
- model: games.platform
pk: 6
fields:
name: Playstation 4
group: Playstation
created_at: "2020-01-01T00:00:00Z"
- model: games.platform
pk: 7
fields:
name: Nintendo Switch
group: Nintendo
created_at: "2020-01-01T00:00:00Z"
- model: games.platform
pk: 8
fields:
name: Nintendo 3DS
group: Nintendo
created_at: "2020-01-01T00:00:00Z"
- model: games.game - model: games.game
pk: 1 pk: 1
fields: fields:
name: Nioh 2 name: Nioh 2
wikidata: Q67482292 wikidata: Q67482292
created_at: "2021-02-13T00:00:00Z"
updated_at: "2021-02-13T00:00:00Z"
- model: games.game - model: games.game
pk: 2 pk: 2
fields: fields:
name: Elden Ring name: Elden Ring
wikidata: Q64826862 wikidata: Q64826862
created_at: "2022-02-24T00:00:00Z"
updated_at: "2022-02-24T00:00:00Z"
- model: games.game - model: games.game
pk: 3 pk: 3
fields: fields:
name: Cyberpunk 2077 name: Cyberpunk 2077
wikidata: Q3182559 wikidata: Q3182559
created_at: "2020-12-07T00:00:00Z"
updated_at: "2020-12-07T00:00:00Z"
- model: games.purchase - model: games.purchase
pk: 1 pk: 1
fields: fields:
games: [1] game: 1
platform: 1 platform: 1
date_purchased: 2021-02-13 date_purchased: 2021-02-13
date_refunded: null date_refunded: null
created_at: "2021-02-13T00:00:00Z"
updated_at: "2021-02-13T00:00:00Z"
- model: games.purchase - model: games.purchase
pk: 2 pk: 2
fields: fields:
games: [2] game: 2
platform: 1 platform: 1
date_purchased: 2022-02-24 date_purchased: 2022-02-24
date_refunded: null date_refunded: null
created_at: "2022-02-24T00:00:00Z"
updated_at: "2022-02-24T00:00:00Z"
- model: games.purchase - model: games.purchase
pk: 3 pk: 3
fields: fields:
games: [3] game: 3
platform: 1 platform: 1
date_purchased: 2020-12-07 date_purchased: 2020-12-07
date_refunded: null date_refunded: null
created_at: "2020-12-07T00:00:00Z" - model: games.platform
updated_at: "2020-12-07T00:00:00Z" pk: 1
fields:
name: Steam
group: PC
- model: games.platform
pk: 3
fields:
name: Xbox Gamepass
group: PC
- model: games.platform
pk: 4
fields:
name: Epic Games Store
group: PC
- model: games.platform
pk: 5
fields:
name: Playstation 5
group: Playstation
- model: games.platform
pk: 6
fields:
name: Playstation 4
group: Playstation
- model: games.platform
pk: 7
fields:
name: Nintendo Switch
group: Nintendo
- model: games.platform
pk: 8
fields:
name: Nintendo 3DS
group: Nintendo
+46 -313
View File
@@ -1,25 +1,8 @@
from django import forms from django import forms
from django.contrib.auth.forms import AuthenticationForm from django.urls import reverse
from django.db import transaction
from common.components import ( from common.utils import safe_getattr
DEFAULT_PREFETCH, from games.models import Device, Game, Platform, Purchase, Session
DISABLED_CONTROL_CLASS,
SearchSelect,
SearchSelectOption,
render,
searchselect_selected,
)
from common.components.primitives import Checkbox
from games.models import (
Device,
Game,
GameStatusChange,
Platform,
PlayEvent,
Purchase,
Session,
)
custom_date_widget = forms.DateInput(attrs={"type": "date"}) custom_date_widget = forms.DateInput(attrs={"type": "date"})
custom_datetime_widget = forms.DateTimeInput( custom_datetime_widget = forms.DateTimeInput(
@@ -27,206 +10,24 @@ custom_datetime_widget = forms.DateTimeInput(
) )
autofocus_input_widget = forms.TextInput(attrs={"autofocus": "autofocus"}) autofocus_input_widget = forms.TextInput(attrs={"autofocus": "autofocus"})
# Form controls self-style: these utility strings live on the elements (applied
# by PrimitiveWidgetsMixin), so there is no form styling in input.css and no
# selector reaching in to style them. The disabled appearance is the shared
# DISABLED_CONTROL_CLASS so every form element looks the same disabled.
_DISABLED_CONTROL = DISABLED_CONTROL_CLASS
INPUT_CLASS = (
"mb-3 bg-neutral-secondary-medium border border-default-medium text-heading "
"text-sm rounded-base focus:ring-brand focus:border-brand block w-full "
f"px-3 py-2.5 shadow-xs placeholder:text-body {_DISABLED_CONTROL}"
)
SELECT_CLASS = (
"w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium "
"text-heading text-sm rounded-base focus:ring-brand focus:border-brand "
f"shadow-xs placeholder:text-body {_DISABLED_CONTROL}"
)
TEXTAREA_CLASS = (
"bg-neutral-secondary-medium border border-default-medium text-heading "
"text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 "
f"shadow-xs placeholder:text-body {_DISABLED_CONTROL}"
)
class PrimitiveCheckboxWidget(forms.CheckboxInput):
"""Adapts Django's CheckboxInput to use our Checkbox component."""
def render(self, name, value, attrs=None, renderer=None):
final_attrs = self.build_attrs(self.attrs, attrs)
checked = self.check_test(value)
attributes = [
(k, str(v))
for k, v in final_attrs.items()
if k not in ("type", "name", "value", "checked")
]
# Django uses boolean values differently for checkboxes, we omit value if empty
# render() returns a safe string (Django widgets must not be autoescaped).
return render(
Checkbox(
name=name,
label=None,
checked=checked,
value=str(value) if value else "1",
attributes=attributes,
)
)
class PrimitiveWidgetsMixin:
"""Automatically applies primitive custom widgets to native Django form fields."""
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for field_name, field in self.fields.items():
if isinstance(field, forms.BooleanField):
field.widget = PrimitiveCheckboxWidget()
# Maintain the field's explicit required status (usually False for booleans)
continue
widget = field.widget
# SearchSelect is a self-styled composite component; never stamp the
# native-control classes onto it.
if isinstance(widget, SearchSelectWidget):
continue
if isinstance(widget, forms.Select):
control_class = SELECT_CLASS
elif isinstance(widget, forms.Textarea):
control_class = TEXTAREA_CLASS
else:
control_class = INPUT_CLASS
existing = widget.attrs.get("class", "")
widget.attrs["class"] = f"{existing} {control_class}".strip()
class MultipleGameChoiceField(forms.ModelMultipleChoiceField): class MultipleGameChoiceField(forms.ModelMultipleChoiceField):
def label_from_instance(self, obj) -> str: def label_from_instance(self, obj) -> str:
return obj.search_label return f"{obj.sort_name} ({obj.platform}, {obj.year_released})"
class SingleGameChoiceField(forms.ModelChoiceField): class SingleGameChoiceField(forms.ModelChoiceField):
def label_from_instance(self, obj) -> str: def label_from_instance(self, obj) -> str:
return obj.search_label return f"{obj.sort_name} ({obj.platform}, {obj.year_released})"
def _game_options(values) -> list[SearchSelectOption]: class SessionForm(forms.ModelForm):
"""Resolve game ids (or instances) to SearchSelectOptions via one pk__in query."""
return [
{
"value": g.id,
"label": g.search_label,
"data": {"platform": g.platform_id or ""},
}
for g in Game.objects.filter(pk__in=values).select_related("platform")
]
def _device_options(values) -> list[SearchSelectOption]:
return [
{"value": d.id, "label": d.name, "data": {}}
for d in Device.objects.filter(pk__in=values)
]
def _platform_options(values) -> list[SearchSelectOption]:
return [
{"value": p.id, "label": p.name, "data": {}}
for p in Platform.objects.filter(pk__in=values)
]
class SearchSelectWidget(forms.Widget):
"""Thin Django adapter that renders a `SearchSelect()` component.
The only place that knows about Django/forms the component itself stays
reusable outside forms.
"""
def __init__(
self,
*,
search_url,
options_resolver,
multi_select=False,
items_visible=5,
items_scroll=10,
prefetch=DEFAULT_PREFETCH,
always_visible=False,
placeholder="Search…",
attrs=None,
):
super().__init__(attrs)
self.search_url = search_url
self.options_resolver = options_resolver
self.multi_select = multi_select
self.items_visible = items_visible
self.items_scroll = items_scroll
self.prefetch = prefetch
self.always_visible = always_visible
self.placeholder = placeholder
@staticmethod
def _values(value) -> list:
if value is None:
return []
if isinstance(value, (list, tuple)):
return [v for v in value if v not in (None, "")]
return [value] if value not in (None, "") else []
def render(self, name, value, attrs=None, renderer=None):
selected = searchselect_selected(self._values(value), self.options_resolver)
autofocus = bool((attrs or {}).get("autofocus"))
# Django widgets must return a safe string; the component is a node.
return render(
SearchSelect(
name=name,
selected=selected,
options=None,
search_url=self.search_url,
multi_select=self.multi_select,
items_visible=self.items_visible,
items_scroll=self.items_scroll,
prefetch=self.prefetch,
always_visible=self.always_visible,
placeholder=self.placeholder,
id=(attrs or {}).get("id", ""),
autofocus=autofocus,
)
)
def value_from_datadict(self, data, files, name):
return data.get(name)
class SearchSelectMultiple(SearchSelectWidget):
def value_from_datadict(self, data, files, name):
if hasattr(data, "getlist"):
return data.getlist(name)
return data.get(name)
class SessionForm(PrimitiveWidgetsMixin, forms.ModelForm):
game = SingleGameChoiceField( game = SingleGameChoiceField(
queryset=Game.objects.order_by("sort_name"), queryset=Game.objects.order_by("sort_name"),
widget=SearchSelectWidget( widget=forms.Select(attrs={"autofocus": "autofocus"}),
search_url="/api/games/search", options_resolver=_game_options
),
) )
duration_manual = forms.DurationField( device = forms.ModelChoiceField(queryset=Device.objects.order_by("name"))
required=False,
widget=forms.TextInput(
attrs={"x-mask": "99:99:99", "placeholder": "HH:MM:SS", "x-data": ""}
),
label="Manual duration",
)
device = forms.ModelChoiceField(
queryset=Device.objects.order_by("name"),
required=False,
widget=SearchSelectWidget(
search_url="/api/devices/search", options_resolver=_device_options
),
)
mark_as_played = forms.BooleanField( mark_as_played = forms.BooleanField(
required=False, required=False,
@@ -264,52 +65,46 @@ class SessionForm(PrimitiveWidgetsMixin, forms.ModelForm):
return session return session
class PurchaseForm(PrimitiveWidgetsMixin, forms.ModelForm): class IncludePlatformSelect(forms.SelectMultiple):
def create_option(self, name, value, *args, **kwargs):
option = super().create_option(name, value, *args, **kwargs)
if platform_id := safe_getattr(value, "instance.platform.id"):
option["attrs"]["data-platform"] = platform_id
return option
class PurchaseForm(forms.ModelForm):
def __init__(self, *args, **kwargs): def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs) super().__init__(*args, **kwargs)
self.fields["platform"].queryset = Platform.objects.order_by("name")
# The bundle Price is optional: in price-per-game mode it is hidden and # Automatically update related_purchase <select/>
# the per-game inputs carry the prices instead. Empty falls back to 0. # to only include purchases of the selected game.
self.fields["price"].required = False related_purchase_by_game_url = reverse("related_purchase_by_game")
self.fields["games"].widget.attrs.update(
{
"hx-trigger": "load, click",
"hx-get": related_purchase_by_game_url,
"hx-target": "#id_related_purchase",
"hx-swap": "outerHTML",
}
)
games = MultipleGameChoiceField( games = MultipleGameChoiceField(
queryset=Game.objects.order_by("sort_name"), queryset=Game.objects.order_by("sort_name"),
widget=SearchSelectMultiple( widget=IncludePlatformSelect(attrs={"autoselect": "autoselect"}),
search_url="/api/games/search",
options_resolver=_game_options,
multi_select=True,
),
) )
platform = forms.ModelChoiceField( platform = forms.ModelChoiceField(queryset=Platform.objects.order_by("name"))
queryset=Platform.objects.order_by("name"), related_purchase = forms.ModelChoiceField(
widget=SearchSelectWidget( queryset=Purchase.objects.filter(type=Purchase.GAME),
search_url="/api/platforms/search", options_resolver=_platform_options
),
)
related_game = forms.ModelChoiceField(
queryset=Game.objects.order_by("sort_name"),
required=False, required=False,
widget=SearchSelectWidget(
search_url="/api/games/search", options_resolver=_game_options
),
)
price_currency = forms.CharField(
widget=forms.TextInput(
attrs={
"x-mask": "aaa",
"placeholder": "CZK",
"x-data": "",
"class": "uppercase",
}
),
label="Currency",
) )
class Meta: class Meta:
widgets = { widgets = {
"date_purchased": custom_date_widget, "date_purchased": custom_date_widget,
"date_refunded": custom_date_widget, "date_refunded": custom_date_widget,
"date_finished": custom_date_widget,
"date_dropped": custom_date_widget,
} }
model = Purchase model = Purchase
fields = [ fields = [
@@ -317,19 +112,21 @@ class PurchaseForm(PrimitiveWidgetsMixin, forms.ModelForm):
"platform", "platform",
"date_purchased", "date_purchased",
"date_refunded", "date_refunded",
"date_finished",
"date_dropped",
"infinite", "infinite",
"price", "price",
"price_currency", "price_currency",
"ownership_type", "ownership_type",
"type", "type",
"related_game", "related_purchase",
"name", "name",
] ]
def clean(self): def clean(self):
cleaned_data = super().clean() cleaned_data = super().clean()
purchase_type = cleaned_data.get("type") purchase_type = cleaned_data.get("type")
related_game = cleaned_data.get("related_game") related_purchase = cleaned_data.get("related_purchase")
name = cleaned_data.get("name") name = cleaned_data.get("name")
# Set the type on the instance to use get_type_display() # Set the type on the instance to use get_type_display()
@@ -338,18 +135,13 @@ class PurchaseForm(PrimitiveWidgetsMixin, forms.ModelForm):
if purchase_type != Purchase.GAME: if purchase_type != Purchase.GAME:
type_display = self.instance.get_type_display() type_display = self.instance.get_type_display()
if not related_game: if not related_purchase:
self.add_error( self.add_error(
"related_game", "related_purchase",
f"{type_display} must have a related game.", f"{type_display} must have a related purchase.",
) )
if not name: if not name:
self.add_error("name", f"{type_display} must have a name.") self.add_error("name", f"{type_display} must have a name.")
# An empty bundle Price (price-per-game mode) saves as 0, not NULL.
if cleaned_data.get("price") is None:
cleaned_data["price"] = 0
return cleaned_data return cleaned_data
@@ -368,13 +160,9 @@ class GameModelChoiceField(forms.ModelChoiceField):
return obj.sort_name return obj.sort_name
class GameForm(PrimitiveWidgetsMixin, forms.ModelForm): class GameForm(forms.ModelForm):
platform = forms.ModelChoiceField( platform = forms.ModelChoiceField(
queryset=Platform.objects.order_by("name"), queryset=Platform.objects.order_by("name"), required=False
required=False,
widget=SearchSelectWidget(
search_url="/api/platforms/search", options_resolver=_platform_options
),
) )
class Meta: class Meta:
@@ -384,7 +172,6 @@ class GameForm(PrimitiveWidgetsMixin, forms.ModelForm):
"sort_name", "sort_name",
"platform", "platform",
"year_released", "year_released",
"original_year_released",
"status", "status",
"mastered", "mastered",
"wikidata", "wikidata",
@@ -392,7 +179,7 @@ class GameForm(PrimitiveWidgetsMixin, forms.ModelForm):
widgets = {"name": autofocus_input_widget} widgets = {"name": autofocus_input_widget}
class PlatformForm(PrimitiveWidgetsMixin, forms.ModelForm): class PlatformForm(forms.ModelForm):
class Meta: class Meta:
model = Platform model = Platform
fields = [ fields = [
@@ -403,62 +190,8 @@ class PlatformForm(PrimitiveWidgetsMixin, forms.ModelForm):
widgets = {"name": autofocus_input_widget} widgets = {"name": autofocus_input_widget}
class DeviceForm(PrimitiveWidgetsMixin, forms.ModelForm): class DeviceForm(forms.ModelForm):
class Meta: class Meta:
model = Device model = Device
fields = ["name", "type"] fields = ["name", "type"]
widgets = {"name": autofocus_input_widget} widgets = {"name": autofocus_input_widget}
class PlayEventForm(PrimitiveWidgetsMixin, forms.ModelForm):
game = SingleGameChoiceField(
queryset=Game.objects.order_by("sort_name"),
widget=SearchSelectWidget(
search_url="/api/games/search",
options_resolver=_game_options,
attrs={"autofocus": "autofocus"},
),
)
mark_as_finished = forms.BooleanField(
required=False,
initial={"mark_as_finished": True},
label="Set game status to Finished",
)
class Meta:
model = PlayEvent
fields = ["game", "started", "ended", "note", "mark_as_finished"]
widgets = {
"started": custom_date_widget,
"ended": custom_date_widget,
}
def save(self, commit=True):
with transaction.atomic():
session = super().save(commit=False)
if self.cleaned_data.get("mark_as_finished"):
game_instance = session.game
game_instance.status = "f"
game_instance.save()
session.save()
return session
class GameStatusChangeForm(PrimitiveWidgetsMixin, forms.ModelForm):
class Meta:
model = GameStatusChange
fields = [
"game",
"old_status",
"new_status",
"timestamp",
]
widgets = {
"timestamp": custom_datetime_widget,
}
class LoginForm(PrimitiveWidgetsMixin, AuthenticationForm):
"""Django's auth form with our primitive widget styling so login inputs
self-style like every other form (no styling-at-a-distance)."""
+1
View File
@@ -0,0 +1 @@
from .game import Mutation as GameMutation
+29
View File
@@ -0,0 +1,29 @@
import graphene
from games.graphql.types import Game
from games.models import Game as GameModel
class UpdateGameMutation(graphene.Mutation):
class Arguments:
id = graphene.ID(required=True)
name = graphene.String()
year_released = graphene.Int()
wikidata = graphene.String()
game = graphene.Field(Game)
def mutate(self, info, id, name=None, year_released=None, wikidata=None):
game_instance = GameModel.objects.get(pk=id)
if name is not None:
game_instance.name = name
if year_released is not None:
game_instance.year_released = year_released
if wikidata is not None:
game_instance.wikidata = wikidata
game_instance.save()
return UpdateGameMutation(game=game_instance)
class Mutation(graphene.ObjectType):
update_game = UpdateGameMutation.Field()
+5
View File
@@ -0,0 +1,5 @@
from .device import Query as DeviceQuery
from .game import Query as GameQuery
from .platform import Query as PlatformQuery
from .purchase import Query as PurchaseQuery
from .session import Query as SessionQuery
+11
View File
@@ -0,0 +1,11 @@
import graphene
from games.graphql.types import Device
from games.models import Device as DeviceModel
class Query(graphene.ObjectType):
devices = graphene.List(Device)
def resolve_devices(self, info, **kwargs):
return DeviceModel.objects.all()
+18
View File
@@ -0,0 +1,18 @@
import graphene
from games.graphql.types import Game
from games.models import Game as GameModel
class Query(graphene.ObjectType):
games = graphene.List(Game)
game_by_name = graphene.Field(Game, name=graphene.String(required=True))
def resolve_games(self, info, **kwargs):
return GameModel.objects.all()
def resolve_game_by_name(self, info, name):
try:
return GameModel.objects.get(name=name)
except GameModel.DoesNotExist:
return None
+11
View File
@@ -0,0 +1,11 @@
import graphene
from games.graphql.types import Platform
from games.models import Platform as PlatformModel
class Query(graphene.ObjectType):
platforms = graphene.List(Platform)
def resolve_platforms(self, info, **kwargs):
return PlatformModel.objects.all()
+11
View File
@@ -0,0 +1,11 @@
import graphene
from games.graphql.types import Purchase
from games.models import Purchase as PurchaseModel
class Query(graphene.ObjectType):
purchases = graphene.List(Purchase)
def resolve_purchases(self, info, **kwargs):
return PurchaseModel.objects.all()
+11
View File
@@ -0,0 +1,11 @@
import graphene
from games.graphql.types import Session
from games.models import Session as SessionModel
class Query(graphene.ObjectType):
sessions = graphene.List(Session)
def resolve_sessions(self, info, **kwargs):
return SessionModel.objects.all()
+44
View File
@@ -0,0 +1,44 @@
from graphene_django import DjangoObjectType
from games.models import Device as DeviceModel
from games.models import Edition as EditionModel
from games.models import Game as GameModel
from games.models import Platform as PlatformModel
from games.models import Purchase as PurchaseModel
from games.models import Session as SessionModel
class Game(DjangoObjectType):
class Meta:
model = GameModel
fields = "__all__"
class Edition(DjangoObjectType):
class Meta:
model = EditionModel
fields = "__all__"
class Purchase(DjangoObjectType):
class Meta:
model = PurchaseModel
fields = "__all__"
class Session(DjangoObjectType):
class Meta:
model = SessionModel
fields = "__all__"
class Platform(DjangoObjectType):
class Meta:
model = PlatformModel
fields = "__all__"
class Device(DjangoObjectType):
class Meta:
model = DeviceModel
fields = "__all__"
-66
View File
@@ -1,66 +0,0 @@
import json
from django.conf import settings
from django.contrib import messages as django_messages
from django.contrib.messages import constants as message_constants
MESSAGE_LEVEL_MAP = {
message_constants.DEBUG: "debug",
message_constants.INFO: "info",
message_constants.SUCCESS: "success",
message_constants.WARNING: "warning",
message_constants.ERROR: "error",
}
class HTMXMessagesMiddleware:
"""
Converts Django messages into HX-Trigger headers so toasts display
automatically without changes to views.
Works for HTMX requests (processed natively by HTMX client),
vanilla fetch() calls using fetchWithHtmxTriggers(), and is harmless
for full-page loads (browsers ignore HX-Trigger).
"""
def __init__(self, get_response):
self.get_response = get_response
def __call__(self, request):
response = self.get_response(request)
# Skip HX-Trigger and don't consume messages if there's an HX-Redirect
# so the message persists in the session for the redirect target page
if "HX-Redirect" in response:
return response
min_level = (
message_constants.DEBUG if settings.DEBUG else message_constants.INFO
)
backend = django_messages.get_messages(request)
if hasattr(backend, "_set_level") and backend._get_level() > min_level:
backend._set_level(min_level)
messages = list(backend)
if not messages:
return response
triggers = []
for msg in messages:
toast_type = MESSAGE_LEVEL_MAP.get(msg.level, "info")
triggers.append(
{
"message": msg.message,
"type": toast_type,
}
)
if triggers:
# Use last message (most recent) as the primary toast
trigger = triggers[-1]
response["HX-Trigger"] = json.dumps(
{
"show-toast": trigger,
}
)
return response
@@ -1,21 +0,0 @@
"""Write ts/generated/props.ts from the registered custom-element specs."""
from pathlib import Path
from django.conf import settings
from django.core.management.base import BaseCommand
# Importing the components package triggers element registration at import time.
import common.components # noqa: F401
from common.components.custom_elements import render_props_module
class Command(BaseCommand):
help = "Generate ts/generated/props.ts from registered custom elements."
def handle(self, *args, **options) -> None:
output_dir = Path(settings.BASE_DIR) / "ts" / "generated"
output_dir.mkdir(parents=True, exist_ok=True)
target = output_dir / "props.ts"
target.write_text(render_props_module(), encoding="utf-8")
self.stdout.write(self.style.SUCCESS(f"Wrote {target}"))
@@ -1,28 +0,0 @@
from django.contrib.sessions.models import Session
from django.core.management.base import BaseCommand
from django_q.models import OrmQ, Schedule, Task
class Command(BaseCommand):
help = (
"Remove copied production artifacts from a staging database seeded "
"from a production snapshot: clears authenticated sessions and the "
"django-q schedule/queue/results so staging does not share prod's "
"session cookies or independently run scheduled tasks."
)
def handle(self, *args, **kwargs):
sessions_deleted, _ = Session.objects.all().delete()
schedules_deleted, _ = Schedule.objects.all().delete()
tasks_deleted, _ = Task.objects.all().delete()
queued_deleted, _ = OrmQ.objects.all().delete()
self.stdout.write(
self.style.SUCCESS(
"Scrubbed staging database: "
f"{sessions_deleted} session(s), "
f"{schedules_deleted} schedule(s), "
f"{tasks_deleted} task result(s), "
f"{queued_deleted} queued task(s) removed."
)
)
+61 -227
View File
@@ -6,265 +6,99 @@ from django.db import migrations, models
class Migration(migrations.Migration): class Migration(migrations.Migration):
initial = True initial = True
dependencies = [] dependencies = [
]
operations = [ operations = [
migrations.CreateModel( migrations.CreateModel(
name="Device", name='Device',
fields=[ fields=[
( ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
"id", ('name', models.CharField(max_length=255)),
models.BigAutoField( ('type', models.CharField(choices=[('PC', 'PC'), ('Console', 'Console'), ('Handheld', 'Handheld'), ('Mobile', 'Mobile'), ('Single-board computer', 'Single-board computer'), ('Unknown', 'Unknown')], default='Unknown', max_length=255)),
auto_created=True, ('created_at', models.DateTimeField(auto_now_add=True)),
primary_key=True,
serialize=False,
verbose_name="ID",
),
),
("name", models.CharField(max_length=255)),
(
"type",
models.CharField(
choices=[
("PC", "PC"),
("Console", "Console"),
("Handheld", "Handheld"),
("Mobile", "Mobile"),
("Single-board computer", "Single-board computer"),
("Unknown", "Unknown"),
],
default="Unknown",
max_length=255,
),
),
("created_at", models.DateTimeField(auto_now_add=True)),
], ],
), ),
migrations.CreateModel( migrations.CreateModel(
name="Platform", name='Platform',
fields=[ fields=[
( ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
"id", ('name', models.CharField(max_length=255)),
models.BigAutoField( ('group', models.CharField(blank=True, default=None, max_length=255, null=True)),
auto_created=True, ('icon', models.SlugField(blank=True)),
primary_key=True, ('created_at', models.DateTimeField(auto_now_add=True)),
serialize=False,
verbose_name="ID",
),
),
("name", models.CharField(max_length=255)),
(
"group",
models.CharField(
blank=True, default=None, max_length=255, null=True
),
),
("icon", models.SlugField(blank=True)),
("created_at", models.DateTimeField(auto_now_add=True)),
], ],
), ),
migrations.CreateModel( migrations.CreateModel(
name="ExchangeRate", name='ExchangeRate',
fields=[ fields=[
( ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
"id", ('currency_from', models.CharField(max_length=255)),
models.BigAutoField( ('currency_to', models.CharField(max_length=255)),
auto_created=True, ('year', models.PositiveIntegerField()),
primary_key=True, ('rate', models.FloatField()),
serialize=False,
verbose_name="ID",
),
),
("currency_from", models.CharField(max_length=255)),
("currency_to", models.CharField(max_length=255)),
("year", models.PositiveIntegerField()),
("rate", models.FloatField()),
], ],
options={ options={
"unique_together": {("currency_from", "currency_to", "year")}, 'unique_together': {('currency_from', 'currency_to', 'year')},
}, },
), ),
migrations.CreateModel( migrations.CreateModel(
name="Game", name='Game',
fields=[ fields=[
( ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
"id", ('name', models.CharField(max_length=255)),
models.BigAutoField( ('sort_name', models.CharField(blank=True, default=None, max_length=255, null=True)),
auto_created=True, ('year_released', models.IntegerField(blank=True, default=None, null=True)),
primary_key=True, ('wikidata', models.CharField(blank=True, default=None, max_length=50, null=True)),
serialize=False, ('created_at', models.DateTimeField(auto_now_add=True)),
verbose_name="ID", ('platform', models.ForeignKey(blank=True, default=None, null=True, on_delete=django.db.models.deletion.SET_DEFAULT, to='games.platform')),
),
),
("name", models.CharField(max_length=255)),
(
"sort_name",
models.CharField(
blank=True, default=None, max_length=255, null=True
),
),
(
"year_released",
models.IntegerField(blank=True, default=None, null=True),
),
(
"wikidata",
models.CharField(
blank=True, default=None, max_length=50, null=True
),
),
("created_at", models.DateTimeField(auto_now_add=True)),
(
"platform",
models.ForeignKey(
blank=True,
default=None,
null=True,
on_delete=django.db.models.deletion.SET_DEFAULT,
to="games.platform",
),
),
], ],
options={ options={
"unique_together": {("name", "platform", "year_released")}, 'unique_together': {('name', 'platform', 'year_released')},
}, },
), ),
migrations.CreateModel( migrations.CreateModel(
name="Purchase", name='Purchase',
fields=[ fields=[
( ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
"id", ('date_purchased', models.DateField()),
models.BigAutoField( ('date_refunded', models.DateField(blank=True, null=True)),
auto_created=True, ('date_finished', models.DateField(blank=True, null=True)),
primary_key=True, ('date_dropped', models.DateField(blank=True, null=True)),
serialize=False, ('infinite', models.BooleanField(default=False)),
verbose_name="ID", ('price', models.FloatField(default=0)),
), ('price_currency', models.CharField(default='USD', max_length=3)),
), ('converted_price', models.FloatField(null=True)),
("date_purchased", models.DateField()), ('converted_currency', models.CharField(max_length=3, null=True)),
("date_refunded", models.DateField(blank=True, null=True)), ('ownership_type', models.CharField(choices=[('ph', 'Physical'), ('di', 'Digital'), ('du', 'Digital Upgrade'), ('re', 'Rented'), ('bo', 'Borrowed'), ('tr', 'Trial'), ('de', 'Demo'), ('pi', 'Pirated')], default='di', max_length=2)),
("date_finished", models.DateField(blank=True, null=True)), ('type', models.CharField(choices=[('game', 'Game'), ('dlc', 'DLC'), ('season_pass', 'Season Pass'), ('battle_pass', 'Battle Pass')], default='game', max_length=255)),
("date_dropped", models.DateField(blank=True, null=True)), ('name', models.CharField(blank=True, default='', max_length=255, null=True)),
("infinite", models.BooleanField(default=False)), ('created_at', models.DateTimeField(auto_now_add=True)),
("price", models.FloatField(default=0)), ('games', models.ManyToManyField(blank=True, related_name='purchases', to='games.game')),
("price_currency", models.CharField(default="USD", max_length=3)), ('platform', models.ForeignKey(blank=True, default=None, null=True, on_delete=django.db.models.deletion.CASCADE, to='games.platform')),
("converted_price", models.FloatField(null=True)), ('related_purchase', models.ForeignKey(blank=True, default=None, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='related_purchases', to='games.purchase')),
("converted_currency", models.CharField(max_length=3, null=True)),
(
"ownership_type",
models.CharField(
choices=[
("ph", "Physical"),
("di", "Digital"),
("du", "Digital Upgrade"),
("re", "Rented"),
("bo", "Borrowed"),
("tr", "Trial"),
("de", "Demo"),
("pi", "Pirated"),
],
default="di",
max_length=2,
),
),
(
"type",
models.CharField(
choices=[
("game", "Game"),
("dlc", "DLC"),
("season_pass", "Season Pass"),
("battle_pass", "Battle Pass"),
],
default="game",
max_length=255,
),
),
(
"name",
models.CharField(blank=True, default="", max_length=255, null=True),
),
("created_at", models.DateTimeField(auto_now_add=True)),
(
"games",
models.ManyToManyField(
blank=True, related_name="purchases", to="games.game"
),
),
(
"platform",
models.ForeignKey(
blank=True,
default=None,
null=True,
on_delete=django.db.models.deletion.CASCADE,
to="games.platform",
),
),
(
"related_purchase",
models.ForeignKey(
blank=True,
default=None,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="related_purchases",
to="games.purchase",
),
),
], ],
), ),
migrations.CreateModel( migrations.CreateModel(
name="Session", name='Session',
fields=[ fields=[
( ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
"id", ('timestamp_start', models.DateTimeField()),
models.BigAutoField( ('timestamp_end', models.DateTimeField(blank=True, null=True)),
auto_created=True, ('duration_manual', models.DurationField(blank=True, default=datetime.timedelta(0), null=True)),
primary_key=True, ('duration_calculated', models.DurationField(blank=True, null=True)),
serialize=False, ('note', models.TextField(blank=True, null=True)),
verbose_name="ID", ('emulated', models.BooleanField(default=False)),
), ('created_at', models.DateTimeField(auto_now_add=True)),
), ('modified_at', models.DateTimeField(auto_now=True)),
("timestamp_start", models.DateTimeField()), ('device', models.ForeignKey(blank=True, default=None, null=True, on_delete=django.db.models.deletion.SET_DEFAULT, to='games.device')),
("timestamp_end", models.DateTimeField(blank=True, null=True)), ('game', models.ForeignKey(blank=True, default=None, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='sessions', to='games.game')),
(
"duration_manual",
models.DurationField(
blank=True, default=datetime.timedelta(0), null=True
),
),
("duration_calculated", models.DurationField(blank=True, null=True)),
("note", models.TextField(blank=True, null=True)),
("emulated", models.BooleanField(default=False)),
("created_at", models.DateTimeField(auto_now_add=True)),
("modified_at", models.DateTimeField(auto_now=True)),
(
"device",
models.ForeignKey(
blank=True,
default=None,
null=True,
on_delete=django.db.models.deletion.SET_DEFAULT,
to="games.device",
),
),
(
"game",
models.ForeignKey(
blank=True,
default=None,
null=True,
on_delete=django.db.models.deletion.CASCADE,
related_name="sessions",
to="games.game",
),
),
], ],
options={ options={
"get_latest_by": "timestamp_start", 'get_latest_by': 'timestamp_start',
}, },
), ),
] ]
@@ -4,14 +4,15 @@ from django.db import migrations, models
class Migration(migrations.Migration): class Migration(migrations.Migration):
dependencies = [ dependencies = [
("games", "0001_initial"), ('games', '0001_initial'),
] ]
operations = [ operations = [
migrations.AddField( migrations.AddField(
model_name="purchase", model_name='purchase',
name="price_per_game", name='price_per_game',
field=models.FloatField(null=True), field=models.FloatField(null=True),
), ),
] ]
+4 -3
View File
@@ -4,14 +4,15 @@ from django.db import migrations, models
class Migration(migrations.Migration): class Migration(migrations.Migration):
dependencies = [ dependencies = [
("games", "0002_purchase_price_per_game"), ('games', '0002_purchase_price_per_game'),
] ]
operations = [ operations = [
migrations.AddField( migrations.AddField(
model_name="purchase", model_name='purchase',
name="updated_at", name='updated_at',
field=models.DateTimeField(auto_now=True), field=models.DateTimeField(auto_now=True),
), ),
] ]
@@ -5,66 +5,55 @@ from django.db import migrations, models
class Migration(migrations.Migration): class Migration(migrations.Migration):
dependencies = [ dependencies = [
("games", "0005_game_mastered_game_status"), ('games', '0005_game_mastered_game_status'),
] ]
operations = [ operations = [
migrations.AlterField( migrations.AlterField(
model_name="game", model_name='game',
name="sort_name", name='sort_name',
field=models.CharField(blank=True, default="", max_length=255), field=models.CharField(blank=True, default='', max_length=255),
), ),
migrations.AlterField( migrations.AlterField(
model_name="game", model_name='game',
name="wikidata", name='wikidata',
field=models.CharField(blank=True, default="", max_length=50), field=models.CharField(blank=True, default='', max_length=50),
), ),
migrations.AlterField( migrations.AlterField(
model_name="platform", model_name='platform',
name="group", name='group',
field=models.CharField(blank=True, default="", max_length=255), field=models.CharField(blank=True, default='', max_length=255),
), ),
migrations.AlterField( migrations.AlterField(
model_name="purchase", model_name='purchase',
name="converted_currency", name='converted_currency',
field=models.CharField(blank=True, default="", max_length=3), field=models.CharField(blank=True, default='', max_length=3),
), ),
migrations.AlterField( migrations.AlterField(
model_name="purchase", model_name='purchase',
name="games", name='games',
field=models.ManyToManyField(related_name="purchases", to="games.game"), field=models.ManyToManyField(related_name='purchases', to='games.game'),
), ),
migrations.AlterField( migrations.AlterField(
model_name="purchase", model_name='purchase',
name="name", name='name',
field=models.CharField(blank=True, default="", max_length=255), field=models.CharField(blank=True, default='', max_length=255),
), ),
migrations.AlterField( migrations.AlterField(
model_name="purchase", model_name='purchase',
name="related_purchase", name='related_purchase',
field=models.ForeignKey( field=models.ForeignKey(default=None, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='related_purchases', to='games.purchase'),
default=None,
null=True,
on_delete=django.db.models.deletion.SET_NULL,
related_name="related_purchases",
to="games.purchase",
),
), ),
migrations.AlterField( migrations.AlterField(
model_name="session", model_name='session',
name="game", name='game',
field=models.ForeignKey( field=models.ForeignKey(default=None, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='sessions', to='games.game'),
default=None,
null=True,
on_delete=django.db.models.deletion.CASCADE,
related_name="sessions",
to="games.game",
),
), ),
migrations.AlterField( migrations.AlterField(
model_name="session", model_name='session',
name="note", name='note',
field=models.TextField(blank=True, default=""), field=models.TextField(blank=True, default=''),
), ),
] ]
+4 -3
View File
@@ -4,14 +4,15 @@ from django.db import migrations, models
class Migration(migrations.Migration): class Migration(migrations.Migration):
dependencies = [ dependencies = [
("games", "0006_alter_game_sort_name_alter_game_wikidata_and_more"), ('games', '0006_alter_game_sort_name_alter_game_wikidata_and_more'),
] ]
operations = [ operations = [
migrations.AddField( migrations.AddField(
model_name="game", model_name='game',
name="updated_at", name='updated_at',
field=models.DateTimeField(auto_now=True), field=models.DateTimeField(auto_now=True),
), ),
] ]
@@ -1,190 +0,0 @@
# Generated by Django 5.1.7 on 2025-03-19 13:11
import django.db.models.deletion
import django.db.models.expressions
from django.db import migrations, models
from django.db.models import F, Min
def copy_year_released(apps, schema_editor):
Game = apps.get_model("games", "Game")
Game.objects.update(original_year_released=F("year_released"))
def set_abandoned_status(apps, schema_editor):
Game = apps.get_model("games", "Game")
Game = apps.get_model("games", "Game")
PlayEvent = apps.get_model("games", "PlayEvent")
Game.objects.filter(purchases__date_refunded__isnull=False).update(status="a")
Game.objects.filter(purchases__date_dropped__isnull=False).update(status="a")
finished = Game.objects.filter(purchases__date_finished__isnull=False)
for game in finished:
for purchase in game.purchases.all():
first_session = game.sessions.filter(
timestamp_start__gte=purchase.date_purchased
).aggregate(Min("timestamp_start"))["timestamp_start__min"]
first_session_date = first_session.date() if first_session else None
if purchase.date_finished:
play_event = PlayEvent(
game=game,
started=first_session_date
if first_session_date
else purchase.date_purchased,
ended=purchase.date_finished,
)
play_event.save()
def create_game_status_changes(apps, schema_editor):
Game = apps.get_model("games", "Game")
GameStatusChange = apps.get_model("games", "GameStatusChange")
# if game has any sessions, find the earliest session and create a status change from unplayed to played with that sessions's timestamp_start
for game in Game.objects.filter(sessions__isnull=False).distinct():
if game.sessions.exists():
earliest_session = game.sessions.earliest()
GameStatusChange.objects.create(
game=game,
old_status="u",
new_status="p",
timestamp=earliest_session.timestamp_start,
)
for game in Game.objects.filter(purchases__date_dropped__isnull=False):
GameStatusChange.objects.create(
game=game,
old_status="p",
new_status="a",
timestamp=game.purchases.first().date_dropped,
)
for game in Game.objects.filter(purchases__date_refunded__isnull=False):
GameStatusChange.objects.create(
game=game,
old_status="p",
new_status="a",
timestamp=game.purchases.first().date_refunded,
)
# check if game has any playevents, if so create a status change from current status to finished based on playevent's ended date
# consider only the first playevent
for game in Game.objects.filter(playevents__isnull=False):
first_playevent = game.playevents.first()
GameStatusChange.objects.create(
game=game,
old_status="p",
new_status="f",
timestamp=first_playevent.ended,
)
class Migration(migrations.Migration):
dependencies = [
("games", "0007_game_updated_at"),
]
operations = [
migrations.AddField(
model_name="game",
name="original_year_released",
field=models.IntegerField(blank=True, default=None, null=True),
),
migrations.RunPython(copy_year_released),
migrations.CreateModel(
name="GameStatusChange",
fields=[
(
"id",
models.BigAutoField(
auto_created=True,
primary_key=True,
serialize=False,
verbose_name="ID",
),
),
(
"old_status",
models.CharField(
blank=True,
choices=[
("u", "Unplayed"),
("p", "Played"),
("f", "Finished"),
("r", "Retired"),
("a", "Abandoned"),
],
max_length=1,
null=True,
),
),
(
"new_status",
models.CharField(
choices=[
("u", "Unplayed"),
("p", "Played"),
("f", "Finished"),
("r", "Retired"),
("a", "Abandoned"),
],
max_length=1,
),
),
("timestamp", models.DateTimeField(null=True)),
(
"game",
models.ForeignKey(
on_delete=django.db.models.deletion.CASCADE,
related_name="status_changes",
to="games.game",
),
),
],
options={
"ordering": ["-timestamp"],
},
),
migrations.CreateModel(
name="PlayEvent",
fields=[
(
"id",
models.BigAutoField(
auto_created=True,
primary_key=True,
serialize=False,
verbose_name="ID",
),
),
("started", models.DateField(blank=True, null=True)),
("ended", models.DateField(blank=True, null=True)),
(
"days_to_finish",
models.GeneratedField(
db_persist=True,
expression=django.db.models.expressions.RawSQL(
"\n COALESCE(\n CASE \n WHEN date(ended) = date(started) THEN 1\n ELSE julianday(ended) - julianday(started)\n END, 0\n )\n ",
[],
),
output_field=models.IntegerField(),
),
),
("note", models.CharField(blank=True, default="", max_length=255)),
("created_at", models.DateTimeField(auto_now_add=True)),
("updated_at", models.DateTimeField(auto_now=True)),
(
"game",
models.ForeignKey(
on_delete=django.db.models.deletion.CASCADE,
related_name="playevents",
to="games.game",
),
),
],
),
migrations.RunPython(set_abandoned_status),
migrations.RunPython(create_game_status_changes),
]
@@ -1,20 +0,0 @@
# Generated by Django 5.1.7 on 2025-03-20 11:35
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
("games", "0008_game_original_year_released_gamestatuschange_and_more"),
]
operations = [
migrations.RemoveField(
model_name="purchase",
name="date_dropped",
),
migrations.RemoveField(
model_name="purchase",
name="date_finished",
),
]
@@ -1,16 +0,0 @@
# Generated by Django 5.1.7 on 2025-03-22 17:46
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
("games", "0009_remove_purchase_date_dropped_and_more"),
]
operations = [
migrations.RemoveField(
model_name="purchase",
name="price_per_game",
),
]
@@ -1,29 +0,0 @@
# Generated by Django 5.1.7 on 2025-03-22 17:46
import django.db.models.expressions
import django.db.models.functions.comparison
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
("games", "0010_remove_purchase_price_per_game"),
]
operations = [
migrations.AddField(
model_name="purchase",
name="price_per_game",
field=models.GeneratedField(
db_persist=True,
expression=django.db.models.expressions.CombinedExpression(
django.db.models.functions.comparison.Coalesce(
models.F("converted_price"), models.F("price"), 0
),
"/",
models.F("num_purchases"),
),
output_field=models.FloatField(),
),
),
]
@@ -1,32 +0,0 @@
# Generated by Django 5.1.7 on 2025-03-25 20:30
import django.db.models.expressions
import django.db.models.functions.comparison
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
("games", "0011_purchase_price_per_game"),
]
operations = [
migrations.RemoveField(
model_name="session",
name="duration_calculated",
),
migrations.AddField(
model_name="session",
name="duration_calculated",
field=models.GeneratedField(
db_persist=True,
expression=django.db.models.functions.comparison.Coalesce(
django.db.models.expressions.CombinedExpression(
models.F("timestamp_end"), "-", models.F("timestamp_start")
),
0,
),
output_field=models.DurationField(),
),
),
]

Some files were not shown because too many files have changed in this diff Show More