john-okeefe
2b2791d44e
Update 'Manage Folders' button text to 'Manage Libraries and Folders' to better reflect the full functionality of managing both libraries and scan directories in one place.
119 lines
5.2 KiB
Templ
119 lines
5.2 KiB
Templ
package templates
|
|
|
|
templ Admin(user User) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>Admin Dashboard - Bookhoard</title>
|
|
<script src="/static/htmx.min.js"></script>
|
|
<link href="/static/style.css" rel="stylesheet"/>
|
|
</head>
|
|
<body x-data="admin" x-init="loadWatchStatus(); initializeScanWebSocket()" class="theme-tokyo-night">
|
|
@Header(user, "/admin")
|
|
<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
|
|
@AdminSidebar(user, "/admin")
|
|
<main class="flex-1 p-8">
|
|
<div class="max-w-4xl">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Dashboard</h1>
|
|
<p style="color: var(--text-secondary)">Overview of your Bookhoard library and settings</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
|
<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="text-3xl">📖</div>
|
|
<div>
|
|
<h3 class="font-semibold" style="color: var(--text-primary)">Library</h3>
|
|
<p style="color: var(--text-secondary)" class="text-sm">Manage your ebook collection</p>
|
|
</div>
|
|
</div>
|
|
<a href="/" class="mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded">View Library</a>
|
|
</div>
|
|
<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="text-3xl">👁️</div>
|
|
<div>
|
|
<h3 class="font-semibold" style="color: var(--text-primary)">Scan Watch Status</h3>
|
|
<p style="color: var(--text-secondary)" class="text-sm">Auto-detecting new files</p>
|
|
</div>
|
|
</div>
|
|
<div id="watch-status" class="mt-4 text-sm" style="color: var(--text-secondary)">
|
|
<span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span>
|
|
Watching <span id="watch-count">0</span> libraries
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
|
<h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Quick Actions</h3>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<button @click="scanAllLibraries()" class="btn-primary p-4 rounded-lg text-left">
|
|
<div class="font-medium">Rescan Library</div>
|
|
<div style="color: var(--text-secondary)" class="text-sm">Re-scan existing files and fix metadata</div>
|
|
</button>
|
|
<a href="/admin/library" class="btn-secondary p-4 rounded-lg text-left block">
|
|
<div class="font-medium">Manage Libraries and Folders</div>
|
|
<div style="color: var(--text-secondary)" class="text-sm">Add or remove libraries and scan directories</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Scan Progress Section -->
|
|
<div id="scan-progress-container" class="hidden mt-6 p-6 rounded-lg border opacity-0 -translate-y-2.5 transition-all duration-300 ease-out" style="background-color: var(--bg-secondary); border-color: var(--border);">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold" style="color: var(--text-primary)">
|
|
📚 Scanning Libraries
|
|
</h3>
|
|
<button @click="hideScanProgress()" class="p-2 hover:bg-gray-700 rounded">
|
|
✕
|
|
</button>
|
|
</div>
|
|
<!-- Overall Progress -->
|
|
<div class="mb-4">
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span style="color: var(--text-secondary)">Overall Progress</span>
|
|
<span id="scan-progress-text" style="color: var(--text-primary)">0%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-700 rounded-full h-3">
|
|
<div
|
|
id="scan-progress-bar"
|
|
class="h-3 rounded-full transition-all duration-500"
|
|
style="width: 0%; background-color: var(--accent);"
|
|
></div>
|
|
</div>
|
|
<div id="scan-status" class="text-sm mt-2" style="color: var(--text-secondary)">
|
|
Starting scan...
|
|
</div>
|
|
</div>
|
|
<!-- Per-Library Progress -->
|
|
<div id="library-progress-list" class="space-y-3">
|
|
<!-- Dynamically populated -->
|
|
</div>
|
|
<!-- Results Summary -->
|
|
<div id="scan-results" class="hidden mt-6 p-4 rounded-lg border" style="background-color: var(--bg-primary); border-color: var(--border);">
|
|
<h4 class="font-semibold mb-2" style="color: var(--text-primary)">✅ Scan Complete!</h4>
|
|
<div id="scan-results-content" style="color: var(--text-secondary)">
|
|
<!-- Results populated by JS -->
|
|
</div>
|
|
<div class="mt-4 flex gap-2">
|
|
<button
|
|
@click="window.location.reload()"
|
|
class="btn-primary px-4 py-2 rounded-lg"
|
|
>
|
|
Refresh to View Books
|
|
</button>
|
|
<button
|
|
@click="hideScanProgress()"
|
|
class="btn-secondary px-4 py-2 rounded-lg"
|
|
>
|
|
Dismiss
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
}
|