john-okeefe
0b666f3fdd
Add comprehensive collection detail page that works for both system collections
(continue-reading, recently-added, not-started) and user collections.
Backend changes:
- Add new /collections/:id route in internal/router/frontend.go
- Fetches collection using GetCollection with UUID parameter
- Determines collection type from QueryType field
- Resolves library_id for system collections
- Converts database.MediaItems to handlers.BookInfo for display
- Renders CollectionDetail template with collection and books data
- Update SectionData struct in internal/handlers/collections.go
- Add CollectionID string field for view all links
- Update BuildSections() in internal/handlers/dashboard.go
- Pass CollectionID to SectionData for proper link generation
- Simplify getViewAllURL() in internal/handlers/dashboard.go
- Return /collections/{collectionID} instead of /section/{type}
- Works uniformly for both system and user collections
Frontend changes:
- Fix CollectionDetail template in templates/collections.templ
- Fix broken div nesting causing compilation error
- Add null check for CoverImagePath to prevent broken images
- Update aspect ratio to modern aspect-[3/4] syntax
- Use responsive widths (w-16 sm:w-20) for mobile/desktop
- Improve card layout with horizontal flex structure
- Add placeholder image fallback for books without covers
- Remove erroneous renderBooks() function call
This change aligns with the backend update where system collections are
now pre-made user collections in the database with query_type fields.
All collections can now use the same CollectionDetail template for a
consistent viewing experience.
639 lines
26 KiB
Templ
639 lines
26 KiB
Templ
package templates
|
||
|
||
import "bookhoard/internal/handlers"
|
||
|
||
templ Collection(user User, collections []CollectionData, errorMessage string) {
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Collections - Bookhoard</title>
|
||
<script src="/static/htmx.min.js"></script>
|
||
<script src="/static/toast.js"></script>
|
||
<link href="/static/style.css" rel="stylesheet"/>
|
||
</head>
|
||
<body class="theme-{ user.Theme }">
|
||
@Header(user, "/collections")
|
||
<div class="w-full px-4 sm:px-6 lg:px-8 py-8">
|
||
<div class="mb-8 flex justify-between items-center">
|
||
<div>
|
||
<h1 class="text-3xl font-bold" style="color: var(--text-primary)">My Collections</h1>
|
||
<p style="color: var(--text-secondary)">Organize your books into custom collections</p>
|
||
</div>
|
||
<button onclick="showCreateModal()" class="btn-primary px-4 py-2 rounded-lg">
|
||
➕ New Collection
|
||
</button>
|
||
</div>
|
||
<div id="collections-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
if len(collections) == 0 {
|
||
<div class="text-center py-16 col-span-full" 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)">No Collections Yet</h3>
|
||
<p class="mb-4">Create collections to organize your books</p>
|
||
<button onclick="showCreateModal()" class="btn-primary px-4 py-2 rounded-lg">
|
||
Create Your First Collection
|
||
</button>
|
||
</div>
|
||
}
|
||
for _, col := range collections {
|
||
<div
|
||
class="card p-6 rounded-lg border cursor-pointer hover:shadow-lg transition-shadow"
|
||
style="background-color: var(--bg-secondary); border-color: { col.Color }; border-left-width: 4px; border-left-style: solid;"
|
||
onclick="viewCollection('{ col.ID }')"
|
||
>
|
||
<div class="flex justify-between items-start mb-4">
|
||
<div class="text-3xl">{ col.Icon }</div>
|
||
<div class="flex space-x-2">
|
||
<button
|
||
onclick="event.stopPropagation(); editCollection('{ col.ID }')"
|
||
class="p-2 hover:opacity-80 rounded"
|
||
style="color: var(--text-secondary); background-color: var(--bg-primary);"
|
||
>
|
||
✏️
|
||
</button>
|
||
<button
|
||
onclick="event.stopPropagation(); deleteCollection('{ col.ID }')"
|
||
class="p-2 hover:opacity-80 rounded"
|
||
style="color: var(--text-secondary); background-color: var(--bg-primary);"
|
||
>
|
||
🗑️
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">{ col.Name }</h3>
|
||
<p class="text-sm mb-4" style="color: var(--text-secondary)">{ col.Description }</p>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
<div id="create-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
|
||
<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h2 class="text-xl font-bold" style="color: var(--text-primary)">Create Collection</h2>
|
||
<button onclick="hideCreateModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
|
||
</div>
|
||
<form id="create-form" onsubmit="handleCreate(event)">
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name</label>
|
||
<input
|
||
type="text"
|
||
id="collection-name"
|
||
required
|
||
class="w-full px-4 py-2 border rounded-lg"
|
||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||
placeholder="My Reading List"
|
||
/>
|
||
</div>
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
|
||
<textarea
|
||
id="collection-description"
|
||
class="w-full px-4 py-2 border rounded-lg"
|
||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||
placeholder="Optional description"
|
||
rows="3"
|
||
></textarea>
|
||
</div>
|
||
<div class="mb-6">
|
||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
|
||
<div class="flex gap-2">
|
||
<button type="button" onclick="selectColor('#7aa2f7')" class="w-8 h-8 rounded-full color-option" style="background-color: #7aa2f7;"></button>
|
||
<button type="button" onclick="selectColor('#f7768e')" class="w-8 h-8 rounded-full color-option" style="background-color: #f7768e;"></button>
|
||
<button type="button" onclick="selectColor('#e0af68')" class="w-8 h-8 rounded-full color-option" style="background-color: #e0af68;"></button>
|
||
<button type="button" onclick="selectColor('#9ece6a')" class="w-8 h-8 rounded-full color-option" style="background-color: #9ece6a;"></button>
|
||
<button type="button" onclick="selectColor('#7dcfff')" class="w-8 h-8 rounded-full color-option" style="background-color: #7dcfff;"></button>
|
||
<button type="button" onclick="selectColor('#bb9af7')" class="w-8 h-8 rounded-full color-option" style="background-color: #bb9af7;"></button>
|
||
</div>
|
||
<input type="hidden" id="collection-color" value="#7aa2f7"/>
|
||
</div>
|
||
<div class="flex justify-end space-x-3">
|
||
<button type="button" onclick="hideCreateModal()" class="btn-secondary px-4 py-2 rounded-lg">
|
||
Cancel
|
||
</button>
|
||
<button type="submit" class="btn-primary px-4 py-2 rounded-lg">
|
||
Create Collection
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
let selectedColor = '#7aa2f7';
|
||
|
||
function showCreateModal() {
|
||
document.getElementById('create-modal').classList.remove('hidden');
|
||
}
|
||
|
||
function hideCreateModal() {
|
||
document.getElementById('create-modal').classList.add('hidden');
|
||
document.getElementById('create-form').reset();
|
||
selectedColor = '#7aa2f7';
|
||
updateColorSelection();
|
||
}
|
||
|
||
function selectColor(color) {
|
||
selectedColor = color;
|
||
document.getElementById('collection-color').value = color;
|
||
updateColorSelection();
|
||
}
|
||
|
||
function updateColorSelection() {
|
||
document.querySelectorAll('.color-option').forEach(btn => {
|
||
btn.style.outline = 'none';
|
||
btn.style.outlineOffset = '0';
|
||
});
|
||
const selectedBtn = document.querySelector(`.color-option[onclick="selectColor('${selectedColor}')"]`);
|
||
if (selectedBtn) {
|
||
selectedBtn.style.outline = '3px solid var(--text-primary)';
|
||
selectedBtn.style.outlineOffset = '3px';
|
||
}
|
||
}
|
||
|
||
function handleCreate(event) {
|
||
event.preventDefault();
|
||
|
||
const data = {
|
||
name: document.getElementById('collection-name').value,
|
||
description: document.getElementById('collection-description').value,
|
||
color: selectedColor,
|
||
icon: '📚'
|
||
};
|
||
|
||
fetch('/api/collections', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||
},
|
||
body: JSON.stringify(data)
|
||
})
|
||
.then(response => response.json())
|
||
.then(result => {
|
||
showToast('Collection created successfully', 'success');
|
||
hideCreateModal();
|
||
location.reload();
|
||
})
|
||
.catch(error => {
|
||
showToast('Failed to create collection', 'error');
|
||
});
|
||
}
|
||
|
||
function viewCollection(id) {
|
||
window.location.href = `/collections/${id}`;
|
||
}
|
||
|
||
function editCollection(id) {
|
||
showToast('Edit feature coming soon!', 'info');
|
||
}
|
||
|
||
function deleteCollection(id) {
|
||
if (!confirm('Are you sure you want to delete this collection?')) return;
|
||
|
||
fetch(`/api/collections/${id}`, {
|
||
method: 'DELETE',
|
||
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
showToast('Collection deleted successfully', 'success');
|
||
location.reload();
|
||
} else {
|
||
showToast('Failed to delete collection', 'error');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showToast('Failed to delete collection', 'error');
|
||
});
|
||
}
|
||
|
||
function logout() {
|
||
localStorage.removeItem('token');
|
||
window.location.href = '/login';
|
||
}
|
||
</script>
|
||
@ErrorToast(errorMessage)
|
||
</body>
|
||
</html>
|
||
}
|
||
|
||
templ CollectionDetail(user User, collection CollectionData, books []handlers.BookInfo) {
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>{ collection.Name } - Bookhoard</title>
|
||
<script src="/static/htmx.min.js"></script>
|
||
<script src="/static/toast.js"></script>
|
||
<link href="/static/style.css" rel="stylesheet"/>
|
||
</head>
|
||
<body class="theme-{ user.Theme }">
|
||
@Header(user, "/collections")
|
||
<div class="w-full px-4 sm:px-6 lg:px-8 py-8">
|
||
<div class="mb-6">
|
||
<button onclick="backToCollections()" class="btn-secondary px-4 py-2 rounded-lg mb-4">
|
||
← Back to Collections
|
||
</button>
|
||
<div class="flex items-center gap-4">
|
||
<div class="text-4xl" style="color: { collection.Color }">{ collection.Icon }</div>
|
||
<div>
|
||
<h1 class="text-3xl font-bold" style="color: var(--text-primary)">{ collection.Name }</h1>
|
||
<p style="color: var(--text-secondary)">{ collection.Description }</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-6 flex justify-between items-center">
|
||
<div class="flex items-center gap-4">
|
||
<h2 class="text-xl font-semibold" style="color: var(--text-primary)">Books in this Collection</h2>
|
||
<span id="selected-count" class="hidden px-3 py-1 text-sm rounded" style="background-color: var(--accent); color: var(--bg-primary);">
|
||
0 selected
|
||
</span>
|
||
</div>
|
||
<div class="flex gap-3">
|
||
<div class="flex-1 max-w-md">
|
||
<input
|
||
type="text"
|
||
id="collection-search"
|
||
placeholder="Search within collection..."
|
||
onkeyup="filterCollectionBooks()"
|
||
class="w-full px-4 py-2 border rounded-lg"
|
||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||
/>
|
||
</div>
|
||
<button
|
||
id="bulk-remove-btn"
|
||
onclick="removeSelectedBooks()"
|
||
disabled
|
||
class="btn-danger px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
🗑️ Remove Selected
|
||
</button>
|
||
<button onclick="showAddBooksModal()" class="btn-primary px-4 py-2 rounded-lg">
|
||
➕ Add Books
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="books-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
if len(books) == 0 {
|
||
<div id="empty-state" class="col-span-full text-center py-16" style="color: var(--text-secondary)">No books in this collection yet.</div>
|
||
}
|
||
for _, book := range books {
|
||
<div
|
||
class="card p-4 rounded-lg border hover:shadow-lg transition-shadow"
|
||
style="background-color: var(--bg-secondary); border-color: var(--border);"
|
||
>
|
||
<div class="flex gap-4">
|
||
<!-- Checkbox and Book Info -->
|
||
<div class="flex-shrink-0 pt-1">
|
||
<input
|
||
type="checkbox"
|
||
onchange="toggleBookForRemoval('{ book.MediaItemID }')"
|
||
class="w-5 h-5"
|
||
/>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3
|
||
class="font-semibold text-lg mb-1 line-clamp-2"
|
||
style="color: var(--text-primary)"
|
||
>
|
||
{ book.Title }
|
||
</h3>
|
||
if book.Author != "" {
|
||
<p
|
||
class="text-sm line-clamp-1"
|
||
style="color: var(--text-secondary)"
|
||
>
|
||
by { book.Author }
|
||
</p>
|
||
}
|
||
</div>
|
||
<!-- Book Cover -->
|
||
<div class="flex-shrink-0 w-16 sm:w-20">
|
||
if book.CoverImagePath != "" {
|
||
<img
|
||
src={ book.CoverImagePath }
|
||
alt="Cover"
|
||
class="w-full aspect-[3/4] object-cover rounded shadow-md"
|
||
onerror="this.src='/static/placeholder-book.svg'"
|
||
/>
|
||
} else {
|
||
<img
|
||
src="/static/placeholder-book.svg"
|
||
alt="Cover"
|
||
class="w-full aspect-[3/4] object-cover rounded shadow-md"
|
||
/>
|
||
}
|
||
</div>
|
||
</div>
|
||
<!-- Remove Button -->
|
||
<div class="mt-3 pt-3 border-t" style="border-color: var(--border);">
|
||
<button
|
||
onclick="removeBook('{ book.MediaItemID }')"
|
||
class="px-3 py-1 text-sm border rounded hover:opacity-80"
|
||
style="border-color: var(--border); color: var(--text-secondary);"
|
||
>
|
||
🗑️ Remove from Collection
|
||
</button>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
<div id="add-books-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
|
||
<div class="card rounded-lg p-6 w-full max-w-2xl mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h2 class="text-xl font-bold" style="color: var(--text-primary)">Add Books to Collection</h2>
|
||
<button onclick="hideAddBooksModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
|
||
</div>
|
||
<p class="mb-4" style="color: var(--text-secondary)">Search and select books to add to this collection.</p>
|
||
<div class="mb-4">
|
||
<input
|
||
type="text"
|
||
id="book-search"
|
||
placeholder="Search books..."
|
||
class="w-full px-4 py-2 border rounded-lg"
|
||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||
/>
|
||
</div>
|
||
<div id="book-results" class="max-h-64 overflow-y-auto mb-4"></div>
|
||
<div class="flex justify-end space-x-3">
|
||
<button type="button" onclick="hideAddBooksModal()" class="btn-secondary px-4 py-2 rounded-lg">
|
||
Cancel
|
||
</button>
|
||
<button type="button" onclick="addSelectedBooks()" class="btn-primary px-4 py-2 rounded-lg">
|
||
Add Selected Books
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
let collectionId = '{ collection.ID }';
|
||
let selectedBooks = new Set();
|
||
let booksToRemove = new Set();
|
||
let allBooks = [
|
||
{ range books }{
|
||
{
|
||
id: '{ book.MediaItemID }',
|
||
title: '{ book.Title }',
|
||
author: '{ book.Author }',
|
||
cover: '{ book.CoverImagePath }'
|
||
},
|
||
}{ end }
|
||
];
|
||
let ws = null;
|
||
|
||
function backToCollections() {
|
||
window.location.href = '/collections';
|
||
}
|
||
|
||
function connectWebSocket() {
|
||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
const wsUrl = `${protocol}//${window.location.host}/ws/sync`;
|
||
|
||
ws = new WebSocket(wsUrl);
|
||
|
||
ws.onopen = function() {
|
||
console.log('WebSocket connected');
|
||
};
|
||
|
||
ws.onmessage = function(event) {
|
||
const message = JSON.parse(event.data);
|
||
|
||
if (message.type === 'collection_updated' && message.data.collection_id === collectionId) {
|
||
showToast(`Collection updated: ${message.data.action} (${message.data.count} books)`, 'info');
|
||
|
||
setTimeout(() => {
|
||
location.reload();
|
||
}, 1000);
|
||
}
|
||
};
|
||
|
||
ws.onclose = function() {
|
||
console.log('WebSocket disconnected, reconnecting in 5s...');
|
||
setTimeout(connectWebSocket, 5000);
|
||
};
|
||
|
||
ws.onerror = function(error) {
|
||
console.error('WebSocket error:', error);
|
||
};
|
||
}
|
||
|
||
connectWebSocket();
|
||
|
||
function filterCollectionBooks() {
|
||
const searchTerm = document.getElementById('collection-search').value.toLowerCase();
|
||
const booksContainer = document.getElementById('books-container');
|
||
const bookCards = booksContainer.children;
|
||
|
||
let visibleCount = 0;
|
||
for (let i = 0; i < bookCards.length; i++) {
|
||
const card = bookCards[i];
|
||
if (card.id === 'empty-state') continue;
|
||
|
||
const title = card.querySelector('.font-semibold')?.textContent.toLowerCase() || '';
|
||
const author = card.querySelector('.text-sm')?.textContent.toLowerCase() || '';
|
||
|
||
const matches = title.includes(searchTerm) || author.includes(searchTerm);
|
||
|
||
if (matches || searchTerm === '') {
|
||
card.style.display = '';
|
||
visibleCount++;
|
||
} else {
|
||
card.style.display = 'none';
|
||
}
|
||
}
|
||
}
|
||
|
||
function showAddBooksModal() {
|
||
document.getElementById('add-books-modal').classList.remove('hidden');
|
||
selectedBooks.clear();
|
||
document.getElementById('book-results').innerHTML = '<p class="text-sm" style="color: var(--text-secondary)">Enter at least 2 characters to search.</p>';
|
||
}
|
||
|
||
function hideAddBooksModal() {
|
||
document.getElementById('add-books-modal').classList.add('hidden');
|
||
document.getElementById('book-search').value = '';
|
||
document.getElementById('book-results').innerHTML = '';
|
||
selectedBooks.clear();
|
||
}
|
||
|
||
function searchBooks() {
|
||
const searchTerm = document.getElementById('book-search').value;
|
||
const container = document.getElementById('book-results');
|
||
|
||
if (searchTerm.length < 2) {
|
||
container.innerHTML = '<p class="text-sm" style="color: var(--text-secondary)">Enter at least 2 characters to search.</p>';
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = '<p class="text-sm" style="color: var(--text-secondary)">Searching...</p>';
|
||
|
||
fetch(`/api/media-items/search?q=${encodeURIComponent(searchTerm)}`, {
|
||
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
|
||
})
|
||
.then(response => response.json())
|
||
.then(result => {
|
||
if (result.data && result.data.length > 0) {
|
||
let html = '<div class="space-y-2">';
|
||
result.data.slice(0, 50).forEach(book => {
|
||
const isSelected = selectedBooks.has(book.media_item_id);
|
||
const checkedAttr = isSelected ? 'checked' : '';
|
||
const authorHtml = book.author ? `<div class="text-xs" style="color: var(--text-secondary)">${book.author}</div>` : '';
|
||
html += `
|
||
<div class="flex items-center gap-3 p-2 rounded cursor-pointer hover:opacity-80"
|
||
style="background-color: var(--bg-primary);"
|
||
onclick="toggleBookSelection('${book.media_item_id}')">
|
||
<input type="checkbox" ${checkedAttr} class="w-4 h-4">
|
||
<img src="${book.cover_image_path || '/static/placeholder-book.svg'}"
|
||
alt="Cover" class="w-10 h-14 object-cover rounded">
|
||
<div class="flex-1">
|
||
<div class="text-sm font-medium" style="color: var(--text-primary)">${book.title}</div>
|
||
${authorHtml}
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
html += '</div>';
|
||
if (result.data.length > 50) {
|
||
html += '<p class="text-sm mt-2" style="color: var(--text-secondary)">Showing first 50 of ' + result.data.length + ' results</p>';
|
||
}
|
||
container.innerHTML = html;
|
||
} else {
|
||
container.innerHTML = '<p class="text-sm" style="color: var(--text-secondary)">No books found</p>';
|
||
}
|
||
})
|
||
.catch(error => {
|
||
container.innerHTML = '<p class="text-sm" style="color: var(--error)">Failed to search books</p>';
|
||
});
|
||
}
|
||
|
||
function toggleBookSelection(bookId) {
|
||
if (selectedBooks.has(bookId)) {
|
||
selectedBooks.delete(bookId);
|
||
} else {
|
||
selectedBooks.add(bookId);
|
||
}
|
||
searchBooks();
|
||
}
|
||
|
||
function addSelectedBooks() {
|
||
if (selectedBooks.size === 0) {
|
||
showToast('Please select at least one book', 'error');
|
||
return;
|
||
}
|
||
|
||
const bookIds = Array.from(selectedBooks);
|
||
|
||
fetch(`/api/collections/${collectionId}/books`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||
},
|
||
body: JSON.stringify({ book_ids: bookIds })
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
showToast(`Added ${bookIds.length} book(s) to collection`, 'success');
|
||
hideAddBooksModal();
|
||
location.reload();
|
||
} else {
|
||
showToast('Failed to add books', 'error');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showToast('Failed to add books', 'error');
|
||
});
|
||
}
|
||
|
||
function removeBook(bookId) {
|
||
if (!confirm('Remove this book from the collection?')) return;
|
||
|
||
fetch(`/api/collections/${collectionId}/books/${bookId}`, {
|
||
method: 'DELETE',
|
||
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
showToast('Book removed from collection', 'success');
|
||
location.reload();
|
||
} else {
|
||
showToast('Failed to remove book', 'error');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showToast('Failed to remove book', 'error');
|
||
});
|
||
}
|
||
|
||
function toggleBookForRemoval(bookId) {
|
||
if (booksToRemove.has(bookId)) {
|
||
booksToRemove.delete(bookId);
|
||
} else {
|
||
booksToRemove.add(bookId);
|
||
}
|
||
updateSelectedCount();
|
||
}
|
||
|
||
function updateSelectedCount() {
|
||
const count = booksToRemove.size;
|
||
const countSpan = document.getElementById('selected-count');
|
||
const removeBtn = document.getElementById('bulk-remove-btn');
|
||
|
||
if (count > 0) {
|
||
countSpan.textContent = count + ' selected';
|
||
countSpan.classList.remove('hidden');
|
||
removeBtn.disabled = false;
|
||
} else {
|
||
countSpan.classList.add('hidden');
|
||
removeBtn.disabled = true;
|
||
}
|
||
}
|
||
|
||
function removeSelectedBooks() {
|
||
if (booksToRemove.size === 0) {
|
||
showToast('No books selected', 'error');
|
||
return;
|
||
}
|
||
|
||
if (!confirm(`Remove ${booksToRemove.size} book(s) from the collection?`)) return;
|
||
|
||
const bookIds = Array.from(booksToRemove);
|
||
|
||
fetch(`/api/collections/${collectionId}/books/bulk-remove`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||
},
|
||
body: JSON.stringify({ book_ids: bookIds })
|
||
})
|
||
.then(response => response.json())
|
||
.then(result => {
|
||
if (result.removed > 0) {
|
||
showToast(`Removed ${result.removed} book(s) from collection`, 'success');
|
||
location.reload();
|
||
} else {
|
||
showToast('Failed to remove books', 'error');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showToast('Failed to remove books', 'error');
|
||
});
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showToast('Failed to remove book', 'error');
|
||
});
|
||
}
|
||
|
||
function logout() {
|
||
localStorage.removeItem('token');
|
||
window.location.href = '/login';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
}
|