diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-06 18:05:07 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-06 18:05:07 -0700 |
| commit | ead38fdb13abb406065cef0743d7e411cb27eaf3 (patch) | |
| tree | 56f5bc31be37833505726ac61cec0cfd19a7be92 /templates | |
| parent | 2d298f982408f222ad344b2aa9c18bbe7dc70f12 (diff) | |
Add genre tracking and year-in-review improvements
Adds genre field to Film model with TMDB enrichment. Genres populate from
TMDB detail fetch during add/edit and bulk enrichment. Genre metadata displays
on film cards, detail page (Production section), stats page (top genres panel),
and year-in-review (by decade and genre breakdowns).
Auto-detects rewatches when adding films via TMDB autocomplete - if a film with
the same TMDB ID already exists in diary, pre-fills rewatch checkbox and count.
Rewatch count now displays on film cards as "Rewatch #N".
Stats page now shows:
- Top genres (most watched)
- Film decades (sorted chronologically)
- Already shows: directors, companions, star distribution, rewatch rate
Year-in-review shows decades and genres alongside monthly activity and companions.
Bulk enrichment endpoint (/data/enrich-posters) now fetches missing genre
metadata along with posters and TMDB IDs.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/_film_card.html | 5 | ||||
| -rw-r--r-- | templates/detail.html | 1 | ||||
| -rw-r--r-- | templates/form.html | 5 | ||||
| -rw-r--r-- | templates/stats.html | 30 | ||||
| -rw-r--r-- | templates/year_review.html | 18 |
5 files changed, 57 insertions, 2 deletions
diff --git a/templates/_film_card.html b/templates/_film_card.html index 5e8e6e4..a4e206f 100644 --- a/templates/_film_card.html +++ b/templates/_film_card.html @@ -43,11 +43,12 @@ {% if film.date_watched %}<span>{{ film.date_watched }}</span>{% endif %} {% if film.runtime %}<span>{{ film.runtime }} min</span>{% endif %} {% if film.language %}<span>{{ film.language }}</span>{% endif %} - {% if film.rewatch %}<span>Rewatch</span>{% endif %} + {% if film.rewatch %}<span>Rewatch{% if film.rewatch_count %} #{{ film.rewatch_count }}{% endif %}</span>{% endif %} </div> - {% if film.context or film.how_found or film.watched_with %} + {% if film.genre or film.context or film.how_found or film.watched_with %} <div class="tag-row"> + {% if film.genre %}<span>{{ film.genre }}</span>{% endif %} {% if film.context %}<span>{{ film.context }}</span>{% endif %} {% if film.how_found %}<span>{{ film.how_found }}</span>{% endif %} {% if film.watched_with %}<span>With {{ film.watched_with }}</span>{% endif %} diff --git a/templates/detail.html b/templates/detail.html index 20897b0..156dec2 100644 --- a/templates/detail.html +++ b/templates/detail.html @@ -78,6 +78,7 @@ <article class="detail-panel"> <p class="eyebrow">Production</p> <div class="detail-meta"> + {% if film.genre %}<span>{{ film.genre }}</span>{% endif %} {% if film.country %}<span>{{ film.country }}</span>{% endif %} {% if film.language %}<span>{{ film.language }}</span>{% endif %} {% if film.year %}<span>{{ film.year }}</span>{% endif %} diff --git a/templates/form.html b/templates/form.html index 4009e87..489d9c6 100644 --- a/templates/form.html +++ b/templates/form.html @@ -52,6 +52,11 @@ </div> <div class="field"> + <label for="genre">Genre</label> + <input id="genre" name="genre" value="{{ film.genre if film and film.genre else '' }}"> + </div> + + <div class="field"> <label for="language">Language</label> <input id="language" name="language" value="{{ film.language if film and film.language else '' }}"> </div> diff --git a/templates/stats.html b/templates/stats.html index e0a6a91..9b71679 100644 --- a/templates/stats.html +++ b/templates/stats.html @@ -78,6 +78,26 @@ </div> <ol id="watched-with" class="stats-list"></ol> </section> + + <section class="stats-panel"> + <div class="stats-panel-header"> + <div> + <p class="eyebrow">Genres</p> + <h2>Most watched</h2> + </div> + </div> + <ol id="top-genres" class="stats-list"></ol> + </section> + + <section class="stats-panel"> + <div class="stats-panel-header"> + <div> + <p class="eyebrow">Decades</p> + <h2>By era</h2> + </div> + </div> + <ol id="film-decades" class="stats-list"></ol> + </section> </section> {% endblock %} @@ -118,6 +138,16 @@ <li><span>${item.watched_with}</span><strong>${item.count}</strong></li> `).join(""); + const topGenres = document.getElementById("top-genres"); + topGenres.innerHTML = data.films_per_genre.slice(0, 8).map((item) => ` + <li><span>${item.genre}</span><strong>${item.count}</strong></li> + `).join(""); + + const filmDecades = document.getElementById("film-decades"); + filmDecades.innerHTML = data.films_per_decade.map((item) => ` + <li><span>${item.decade}</span><strong>${item.count}</strong></li> + `).join(""); + const starDistribution = document.getElementById("star-distribution"); const maxStars = Math.max(1, ...data.star_distribution.map((item) => item.count)); starDistribution.innerHTML = data.star_distribution.map((item) => ` diff --git a/templates/year_review.html b/templates/year_review.html index 1234e80..3d03cc0 100644 --- a/templates/year_review.html +++ b/templates/year_review.html @@ -89,6 +89,24 @@ {% endfor %} </ol> </article> + + <article class="review-panel"> + <p class="eyebrow">Decades</p> + <ol class="stats-list"> + {% for item in films_per_decade %} + <li><span>{{ item.decade }}</span><strong>{{ item.count }}</strong></li> + {% endfor %} + </ol> + </article> + + <article class="review-panel"> + <p class="eyebrow">Genres</p> + <ol class="stats-list"> + {% for item in films_per_genre %} + <li><span>{{ item.genre }}</span><strong>{{ item.count }}</strong></li> + {% endfor %} + </ol> + </article> </section> <section class="review-panel"> |
