diff options
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> |