frontend: add force rescan to button and watch status display

- Send force: true in scan API request body
- Rename 'Scan Library' button to 'Rescan Library'
- Replace Settings card with Watch Status display
- Add loadWatchStatus() to fetch and display watch mode status
- Remove inline script from admin.templ (moved to admin.ts)
This commit is contained in:
2026-02-26 10:11:52 -05:00
parent a97220e654
commit abcc468024
2 changed files with 39 additions and 19 deletions
+9 -18
View File
@@ -37,13 +37,16 @@ templ Admin(user User) {
<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 class="text-3xl">👁</div>
<div>
<h3 class="font-semibold" style="color: var(--text-primary)">Settings</h3>
<p style="color: var(--text-secondary)" class="text-sm">Configure your preferences</p>
<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>
<a href="/profile" class="mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded">Manage Settings</a>
<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>
@@ -53,8 +56,8 @@ templ Admin(user User) {
<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 onclick="scanAllLibraries()" class="btn-primary p-4 rounded-lg text-left">
<div class="font-medium">Scan Library</div>
<div style="color: var(--text-secondary)" class="text-sm">Find new ebooks in your folders</div>
<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 Folders</div>
@@ -117,18 +120,6 @@ templ Admin(user User) {
</div>
</main>
</div>
<script>
function logout() {
localStorage.removeItem('token');
localStorage.removeItem('user');
window.location.href = '/';
}
document.addEventListener('DOMContentLoaded', function() {
loadTheme();
});
</script>
</body>
</html>
}
+30 -1
View File
@@ -128,7 +128,11 @@ async function scanAllLibraries(): Promise<void> {
for (const lib of libraries) {
const scanResp = await fetch(`/api/libraries/${lib.id}/scan`, {
method: 'POST',
headers: { 'Authorization': `Bearer ${token}` }
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ force: true })
});
if (scanResp.ok) {
@@ -289,8 +293,33 @@ function hideScanProgress(): void {
if (container) container.classList.add('hidden');
}
async function loadWatchStatus(): Promise<void> {
const token = localStorage.getItem('token');
if (!token) return;
try {
const response = await fetch('/api/scanner/watch/status', {
headers: { 'Authorization': `Bearer ${token}` }
});
if (response.ok) {
const data = await response.json();
const countEl = document.getElementById('watch-count');
if (countEl) {
countEl.textContent = data.total_watching?.toString() || '0';
}
}
} catch (error) {
console.error('Failed to load watch status:', error);
}
}
document.addEventListener('DOMContentLoaded', function() {
loadWatchStatus();
});
(window as any).triggerLibraryScan = triggerLibraryScan;
(window as any).triggerQuickScan = triggerQuickScan;
(window as any).loadSystemStats = loadSystemStats;
(window as any).scanAllLibraries = scanAllLibraries;
(window as any).loadWatchStatus = loadWatchStatus;
(window as any).hideScanProgress = hideScanProgress;