diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-12 03:15:17 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-12 03:15:17 -0700 |
| commit | 4279408876268f4960c98492d3814f5475e36e38 (patch) | |
| tree | 9fc4828768534368a575c2e60d39d02de0973b79 /templates/stats.html | |
| parent | 61d68b339fee628c258e15c8664b6bcad2e70ab1 (diff) | |
Add stats totals, runtime summary, and duplicate detection on add form
- Stats page now shows total films watched and total runtime (formatted
as Xd Yh) in an overview panel above the world map
- /stats/data endpoint includes total_runtime_minutes in payload
- New GET /films/find endpoint returns all shelf matches for a tmdb_id
- Add film form shows an inline notice when the selected TMDB film is
already logged, with shelf name, date, and a link to the entry
- Update CLAUDE.md and README to reflect current auth, OMDb, and
router/service structure
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'templates/stats.html')
| -rw-r--r-- | templates/stats.html | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/templates/stats.html b/templates/stats.html index 797054a..6e3a987 100644 --- a/templates/stats.html +++ b/templates/stats.html @@ -15,6 +15,19 @@ <section class="stats-layout"> <section class="stats-panel stats-panel-wide"> + <div class="stats-overview-row"> + <div class="stats-metric"> + <span class="eyebrow">Films watched</span> + <strong id="stats-total-films">—</strong> + </div> + <div class="stats-metric"> + <span class="eyebrow">Total runtime</span> + <strong id="stats-total-runtime">—</strong> + </div> + </div> + </section> + + <section class="stats-panel stats-panel-wide"> <div class="stats-panel-header"> <div> <p class="eyebrow">World Map</p> @@ -124,7 +137,25 @@ return String(value).padStart(3, "0"); } + function formatRuntime(minutes) { + if (!minutes) return "0h"; + const totalHours = Math.floor(minutes / 60); + if (totalHours >= 24) { + const days = Math.floor(totalHours / 24); + const hours = totalHours % 24; + return hours > 0 ? `${days}d ${hours}h` : `${days}d`; + } + const mins = minutes % 60; + return mins > 0 ? `${totalHours}h ${mins}m` : `${totalHours}h`; + } + function renderLists(data) { + const totalFilms = document.getElementById("stats-total-films"); + if (totalFilms) totalFilms.textContent = data.total_watched; + + const totalRuntime = document.getElementById("stats-total-runtime"); + if (totalRuntime) totalRuntime.textContent = formatRuntime(data.total_runtime_minutes); + const topDirectors = document.getElementById("top-directors"); topDirectors.innerHTML = data.most_watched_directors.slice(0, 8).map((item) => ` <li><span>${item.director}</span><strong>${item.count}</strong></li> |
