John O'Keefe
88adf30aa9
Every fix is a minimal class-level change; desktop layouts are untouched because each fixed row already fit on one line there. - progress: CFI string is one unbreakable token — it inflated the page layout width to 398-501px (whole-page zoom-out on phones) and rendered debug-looking text edge to edge. min-w-0 + break-all lets it wrap. - audio reader: settings strip min-content (~470px) exceeded the 390px viewport, clipping Skip/Sleep and — because the page ICB inflated — pushing the chapters drawer (w-full of the viewport) past the screen edge so its timestamps clipped too. flex-wrap fixes both symptoms. - book detail edit-metadata modal footer: Rescan/Reset/Write-to-file row overflowed the modal; clipped buttons were unreachable. flex-wrap. - bookshelf save-filter modal footer: three buttons overflowed both screen edges. flex-wrap. - admin libraries: rows overprinted (badge chips shrink-0 vs actions shrink-0, no wrap) — 'manga⟳Scan▸1 folders⌄Manage'. flex-wrap stacks actions under the name on phones. - admin podcasts: maintenance table forced a 892px page (44% zoom). overflow-x-auto on the card scrolls the table inside it instead. - stats: 4-pill range row forced 421px; page permanently ~7% zoomed out. flex-wrap. - podcast feed detail: label+select pairs now travel in their own flex pairs so flex-wrap can never split 'Order' from its select; ids and htmx change-triggers preserved. - cosmetics: conflicts stat labels tracking-wide→normal (UNRESOLVED clipped), archived file path line-clamp-3, rules-page Smart badge wraps cleanly, dashboard View All shrink-0 nowrap (was wrapping to two lines).
177 lines
10 KiB
Templ
177 lines
10 KiB
Templ
package templates
|
||
|
||
templ Stats(user User) {
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Reading Stats - Bookhoard</title>
|
||
<link href="/static/style.css" rel="stylesheet"/>
|
||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||
</head>
|
||
<body x-data="stats" x-init="initStatsPage()" class={ "theme-" + user.Theme }>
|
||
@Header(user, "/stats")
|
||
<div class="mx-auto container px-4 sm:px-6 lg:px-8 py-8">
|
||
<div class="mb-8">
|
||
<div class="flex items-center gap-3 mb-1">
|
||
<span class="grid place-items-center h-10 w-10 rounded-xl" style="background-color: var(--accent-muted); color: var(--accent);">
|
||
@Icon("chart", "h-5 w-5")
|
||
</span>
|
||
<h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary)">Reading Stats</h1>
|
||
</div>
|
||
<p class="text-sm" style="color: var(--text-secondary)">Days are bucketed in your timezone ({ user.Timezone }) · totals derive from your devices' sync pushes, not a stopwatch.</p>
|
||
<div class="flex gap-2 mt-4" id="stats-tab-row">
|
||
<button data-tab="reading" @click="selectTab('reading')" class="stats-tab-btn btn btn-secondary text-sm">Reading</button>
|
||
<button data-tab="library" @click="selectTab('library')" class="stats-tab-btn btn btn-secondary text-sm">Library</button>
|
||
</div>
|
||
</div>
|
||
<!-- READING tab — behavior stats from sync pushes (all libraries) -->
|
||
<div id="stats-reading-section">
|
||
<div class="card p-4 mb-6 flex flex-wrap items-center justify-between gap-3">
|
||
<div class="flex flex-wrap gap-2" id="stats-range-selector">
|
||
<button data-range="7" @click="selectRange('7')" class="stats-range-btn btn btn-secondary text-sm">Last 7 days</button>
|
||
<button data-range="30" @click="selectRange('30')" class="stats-range-btn btn btn-secondary text-sm">30 days</button>
|
||
<button data-range="90" @click="selectRange('90')" class="stats-range-btn btn btn-secondary text-sm">90 days</button>
|
||
<button data-range="year" @click="selectRange('year')" class="stats-range-btn btn btn-secondary text-sm">This year</button>
|
||
</div>
|
||
<p class="text-xs" style="color: var(--text-secondary)" id="stats-window-label"></p>
|
||
</div>
|
||
<div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Reading Time</h3>
|
||
<p id="stats-total-minutes" class="text-3xl font-bold" style="color: var(--accent)">–</p>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)" id="stats-pages-card-label">Pages</h3>
|
||
<p id="stats-total-pages" class="text-3xl font-bold" style="color: var(--accent)">–</p>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Streaks</h3>
|
||
<p id="stats-streaks" class="text-lg font-bold leading-tight mt-1" style="color: var(--text-primary)">–</p>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Books Finished</h3>
|
||
<p id="stats-books-finished" class="text-3xl font-bold" style="color: var(--accent)">–</p>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Most Active</h3>
|
||
<p id="stats-most-active" class="text-sm font-bold leading-snug mt-2" style="color: var(--text-primary)">–</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||
<div class="card p-6">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)">Daily Reading Minutes</h3>
|
||
<div class="h-64">
|
||
<canvas id="stats-daily-minutes-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="card p-6" id="stats-pages-chart-panel">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)" id="stats-pages-chart-label">Pages per Day</h3>
|
||
<div class="h-64">
|
||
<canvas id="stats-daily-pages-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="card p-6 hidden" id="stats-listening-chart-panel">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)">Listening per Day (hrs)</h3>
|
||
<div class="h-64">
|
||
<canvas id="stats-daily-listening-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||
<div class="card p-6">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)">By Library</h3>
|
||
<div id="stats-library-breakdown" class="space-y-3">
|
||
<div class="text-center py-6 text-sm" style="color: var(--text-secondary)">Loading…</div>
|
||
</div>
|
||
</div>
|
||
<div class="card p-6">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)">By Device</h3>
|
||
<p class="text-xs mb-3" style="color: var(--text-secondary)">Where the sync pushes came from — registered device names, plus a Web bucket for pushes that carry no device credential (the web reader).</p>
|
||
<div id="stats-device-breakdown" class="space-y-3">
|
||
<div class="text-center py-6 text-sm" style="color: var(--text-secondary)">Loading…</div>
|
||
</div>
|
||
</div>
|
||
<div class="card p-6">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)">Most Read</h3>
|
||
<div id="stats-top-books" class="space-y-3">
|
||
<div class="text-center py-6 text-sm" style="color: var(--text-secondary)">Loading…</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="stats-empty" class="card p-8 text-center hidden">
|
||
<p class="text-sm mb-2" style="color: var(--text-primary)">No reading sessions recorded in this range yet.</p>
|
||
<p class="text-xs" style="color: var(--text-secondary)">Sessions are captured every time a device syncs reading progress (KOReader, the app, the web reader).</p>
|
||
</div>
|
||
</div>
|
||
<!-- LIBRARY tab — media_items inventory stats (what's IN the
|
||
scoped pool), no time dimension; ABS-style general book
|
||
stats. Data arrives client-side; see stats.ts -->
|
||
<div id="stats-library-section" class="hidden">
|
||
<div class="card p-4 mb-6 flex flex-wrap items-center justify-between gap-3">
|
||
<div class="flex items-center gap-2">
|
||
<label class="text-sm" for="stats-library-select" style="color: var(--text-secondary)">Library</label>
|
||
<select id="stats-library-select" @change="selectLibrary($event.target.value)" class="btn btn-secondary text-sm bg-transparent">
|
||
<option value="">All libraries</option>
|
||
</select>
|
||
</div>
|
||
<p class="text-xs" style="color: var(--text-secondary)" id="stats-library-scope-label">Inventory statistics — what's in the library, not when it was read.</p>
|
||
</div>
|
||
<div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Items</h3>
|
||
<p id="lib-stat-items" class="text-3xl font-bold" style="color: var(--accent)">–</p>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)" id="lib-stat-time-label">Hours</h3>
|
||
<p id="lib-stat-time" class="text-3xl font-bold" style="color: var(--accent)">–</p>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Authors</h3>
|
||
<p id="lib-stat-authors" class="text-3xl font-bold" style="color: var(--accent)">–</p>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Size (GB)</h3>
|
||
<p id="lib-stat-size" class="text-3xl font-bold" style="color: var(--accent)">–</p>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3 class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Narrators</h3>
|
||
<p id="lib-stat-narrators" class="text-3xl font-bold" style="color: var(--accent)">–</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||
<div class="card p-6">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)">Top Genres</h3>
|
||
<div id="stats-lib-genres" class="space-y-3">
|
||
<div class="text-center py-6 text-sm" style="color: var(--text-secondary)">Loading…</div>
|
||
</div>
|
||
</div>
|
||
<div class="card p-6">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)">Top Authors</h3>
|
||
<div id="stats-lib-authors" class="space-y-3">
|
||
<div class="text-center py-6 text-sm" style="color: var(--text-secondary)">Loading…</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||
<div class="card p-6">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)" id="stats-lib-longest-label">Longest Items (hrs)</h3>
|
||
<div id="stats-lib-longest" class="space-y-3">
|
||
<div class="text-center py-6 text-sm" style="color: var(--text-secondary)">Loading…</div>
|
||
</div>
|
||
</div>
|
||
<div class="card p-6">
|
||
<h3 class="text-sm font-semibold uppercase tracking-wide mb-4" style="color: var(--text-secondary)">Largest Items</h3>
|
||
<div id="stats-lib-largest" class="space-y-3">
|
||
<div class="text-center py-6 text-sm" style="color: var(--text-secondary)">Loading…</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@ErrorToast("")
|
||
</body>
|
||
</html>
|
||
}
|