Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat: Add SSR for conflicts and queue pages

Browse Source 
- Update conflicts.templ to accept pre-rendered data
- Update queue.templ to accept pre-rendered data
- Update /conflicts and /queue routes in main.go for SSR
- Update stats rendering to use server-side values
- Add server-side conflict list rendering
- Add server-side queue list rendering
- Update conflicts.js to use location.reload() after operations
- Update queue.js to use location.reload() after operations
- Remove initial load calls from JavaScript files

Preserves all API endpoints and backward compatibility
This commit is contained in:
john-okeefe
2026-01-31 23:14:08 -05:00
parent b3c0c0c225
commit 6266a06abb
9 changed files with 766 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/queue.templ
+44 -7
View File
@@ -1,6 +1,8 @@
package templates
templ Queue(user User) {
import "bookmann/internal/handlers"
templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.QueueStatsResponse) {
<!DOCTYPE html>
<html lang="en">
<head>
@@ -65,19 +67,19 @@ templ Queue(user User) {
<div id="stats-bar" class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="card p-4 rounded-lg border text-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
<div class="text-3xl font-bold" id="stat-pending" style="color: #f59e0b;">0</div>
<div class="text-3xl font-bold" style="color: #f59e0b;">{ stats.PendingCount }</div>
<div class="text-sm" style="color: var(--text-secondary);">Pending</div>
</div>
<div class="card p-4 rounded-lg border text-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
<div class="text-3xl font-bold" id="stat-processing" style="color: #3b82f6;">0</div>
<div class="text-3xl font-bold" style="color: #3b82f6;">{ stats.ProcessingCount }</div>
<div class="text-sm" style="color: var(--text-secondary);">Processing</div>
</div>
<div class="card p-4 rounded-lg border text-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
<div class="text-3xl font-bold" id="stat-completed" style="color: #10b981;">0</div>
<div class="text-3xl font-bold" style="color: #10b981;">{ stats.CompletedCount }</div>
<div class="text-sm" style="color: var(--text-secondary);">Completed</div>
</div>
<div class="card p-4 rounded-lg border text-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
<div class="text-3xl font-bold" id="stat-failed" style="color: #ef4444;">0</div>
<div class="text-3xl font-bold" style="color: #ef4444;">{ stats.FailedCount }</div>
<div class="text-sm" style="color: var(--text-secondary);">Failed</div>
</div>
</div>
@@ -124,7 +126,7 @@ templ Queue(user User) {
</div>
</div>
<div id="loading" class="text-center py-16" style="color: var(--text-secondary)">
<div id="loading" class="hidden text-center py-16" style="color: var(--text-secondary)">
<div class="loading-spinner mx-auto mb-4"></div>
<p>Loading queue...</p>
</div>
@@ -135,7 +137,42 @@ templ Queue(user User) {
<p>No items in the sync queue</p>
</div>
<div id="queue-list" class="space-y-3 hidden"></div>
<div id="queue-list" class="space-y-3">
if len(queueItems) == 0 {
<div class="text-center py-16" style="color: var(--text-secondary)">
<div class="text-6xl mb-4">📭</div>
<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">Queue Empty</h3>
<p>No items in the sync queue</p>
</div>
}
for _, item := range queueItems {
<div class="card p-4 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
<div class="flex justify-between items-start mb-2">
<div class="flex items-center space-x-3">
<span class="status-badge status-{ item.Status }">{ item.Status }</span>
<span class="text-sm" style="color: var(--text-secondary)">{ item.SyncType }</span>
</div>
<span class="priority-badge priority-{ item.Priority }">P{ item.Priority }</span>
</div>
<div class="text-sm mb-2" style="color: var(--text-secondary)">
Device ID: { item.DeviceID }
if item.MediaTitle != nil {
| Book: { *item.MediaTitle }
}
</div>
<div class="flex justify-between items-center text-sm" style="color: var(--text-secondary)">
<span>Attempts: { item.Attempts }/{ item.MaxAttempts }</span>
<span>{ item.CreatedAt }</span>
</div>
if item.ErrorMessage != nil {
<div class="mt-2 text-sm" style="color: #ef4444;">
Error: { *item.ErrorMessage }
</div>
}
</div>
}
</div>
<div id="queue-item-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto" style="background-color: rgba(0, 0, 0, 0.7);">
<div class="card rounded-lg p-6 w-full max-w-2xl mx-4 my-8" style="background-color: var(--bg-secondary); border-color: var(--border);">