summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorTyler Hoang <tyler@tylerhoang.xyz>2026-05-06 18:05:07 -0700
committerTyler Hoang <tyler@tylerhoang.xyz>2026-05-06 18:05:07 -0700
commitead38fdb13abb406065cef0743d7e411cb27eaf3 (patch)
tree56f5bc31be37833505726ac61cec0cfd19a7be92 /templates
parent2d298f982408f222ad344b2aa9c18bbe7dc70f12 (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.html5
-rw-r--r--templates/detail.html1
-rw-r--r--templates/form.html5
-rw-r--r--templates/stats.html30
-rw-r--r--templates/year_review.html18
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">