refactor: Convert template event handlers to Alpine.js
Converted all inline onclick/onsubmit handlers to Alpine.js @click/@submit directives and added x-data attributes to template body tags. Templates updated: - admin.templ: Added x-data="admin", converted scan/hide buttons - analytics.templ: Added x-data, converted loadAnalytics button - api_explorer.templ: Added x-data for API explorer page - bookshelf.templ: Added x-data, converted library/pagination handlers - collection_modal.templ: Added x-data for modal components - collection_rules.templ: Added x-data, converted all rule handlers - collections.templ: Added x-data, converted navigation/book handlers - conflicts.templ: Added x-data, converted resolve/dismiss handlers - header.templ: Converted theme dropdown and user menu handlers - index.templ: Added x-data for theme/auth - login.templ: Added x-data for theme switching - profile.templ: Added x-data, converted delete account - profile_form.templ: Converted modal close handler - profile_modal.templ: Added x-data for modal - progress.templ: Removed script (uses header.logout) - queue.templ: Added x-data, converted queue handlers - register.templ: Added x-data for theme - restore_system_collection_modal.templ: Added x-data - toast.templ: Converted to x-init with Alpine - unlinked_books.templ: Added x-data for bulk operations Dynamic content in devices.templ uses event delegation via data attributes.
This commit is contained in:
+18
-19
@@ -10,11 +10,10 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Sync Queue - Bookhoard</title>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script src="/static/toast.js"></script>
|
||||
<script src="/static/main.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet"/>
|
||||
<script src="/static/theme.js"></script>
|
||||
</head>
|
||||
<body class="theme-{ user.Theme }">
|
||||
<body x-data="queue" class="theme-{ user.Theme }">
|
||||
@Header(user, "/queue")
|
||||
<div class="w-full px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="mb-8">
|
||||
@@ -24,13 +23,13 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
|
||||
<p style="color: var(--text-secondary)">Monitor and manage offline sync queue</p>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button onclick="processPendingItems()" class="btn-primary px-4 py-2 rounded-lg">
|
||||
<button @click="processPendingItems()" class="btn-primary px-4 py-2 rounded-lg">
|
||||
Process Queue
|
||||
</button>
|
||||
<button onclick="clearFailedItems()" class="btn-secondary px-4 py-2 rounded-lg">
|
||||
<button @click="clearFailedItems()" class="btn-secondary px-4 py-2 rounded-lg">
|
||||
Clear Failed
|
||||
</button>
|
||||
<button onclick="clearAllItems()" class="btn-danger px-4 py-2 rounded-lg">
|
||||
<button @click="clearAllItems()" class="btn-danger px-4 py-2 rounded-lg">
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
@@ -98,7 +97,7 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<button onclick="refreshQueue()" class="btn-secondary px-4 py-2 rounded-lg">
|
||||
<button @click="refreshQueue()" class="btn-secondary px-4 py-2 rounded-lg">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
@@ -120,15 +119,15 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
|
||||
<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="inline-block px-2 py-0.5 rounded text-[11px] font-semibold uppercase status-{ item.Status }">{ item.Status }</span>
|
||||
<span class="text-sm" style="color: var(--text-secondary)">{ item.SyncType }</span>
|
||||
</div>
|
||||
<span class="inline-block px-2 py-0.5 rounded text-[10px] font-semibold priority-{ item.Priority }">P{ item.Priority }</span>
|
||||
</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="inline-block px-2 py-0.5 rounded text-[11px] font-semibold uppercase status-{ item.Status }">{ item.Status }</span>
|
||||
<span class="text-sm" style="color: var(--text-secondary)">{ item.SyncType }</span>
|
||||
</div>
|
||||
<span class="inline-block px-2 py-0.5 rounded text-[10px] font-semibold 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 {
|
||||
@@ -151,14 +150,14 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
|
||||
<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);">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Queue Item Details</h2>
|
||||
<button onclick="hideQueueItemModal()" class="p-2 hover:opacity-80 rounded-lg" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
||||
<button @click="hideQueueItemModal()" class="p-2 hover:opacity-80 rounded-lg" style="color: var(--text-primary); background-color: var(--bg-primary);">
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
<div id="queue-item-details"></div>
|
||||
<div class="flex justify-end space-x-3 mt-6">
|
||||
<button onclick="hideQueueItemModal()" class="btn-secondary px-4 py-2 rounded-lg">Close</button>
|
||||
<button onclick="retryQueueItem()" class="btn-primary px-4 py-2 rounded-lg">Retry</button>
|
||||
<button @click="hideQueueItemModal()" class="btn-secondary px-4 py-2 rounded-lg">Close</button>
|
||||
<button @click="retryQueueItem()" class="btn-primary px-4 py-2 rounded-lg">Retry</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user