style: normalize code formatting in bookshelf.ts
- Convert indentation from 4 spaces to 2 spaces (matching project style) - Standardize quotes to double quotes for consistency - Reformat template literals for improved readability This file contains the core bookshelf functionality including: - Library selection and persistence - Book rendering with cover images - Pagination for large book collections
This commit is contained in:
+79
-67
@@ -1,113 +1,125 @@
|
||||
function selectLibrary(libraryId: string): void {
|
||||
localStorage.setItem('selectedLibrary', libraryId);
|
||||
localStorage.setItem("selectedLibrary", libraryId);
|
||||
|
||||
document.querySelectorAll('.library-item').forEach(el => {
|
||||
el.classList.remove('ring-2');
|
||||
el.classList.remove('ring-accent');
|
||||
});
|
||||
document.querySelectorAll(".library-item").forEach((el) => {
|
||||
el.classList.remove("ring-2");
|
||||
el.classList.remove("ring-accent");
|
||||
});
|
||||
|
||||
const selected = document.querySelector(`[data-library-id="${libraryId}"]`);
|
||||
if (selected) {
|
||||
selected.classList.add('ring-2');
|
||||
selected.classList.add('ring-accent');
|
||||
}
|
||||
const selected = document.querySelector(`[data-library-id="${libraryId}"]`);
|
||||
if (selected) {
|
||||
selected.classList.add("ring-2");
|
||||
selected.classList.add("ring-accent");
|
||||
}
|
||||
|
||||
loadBookshelf(libraryId);
|
||||
loadBookshelf(libraryId);
|
||||
}
|
||||
|
||||
async function loadBookshelf(libraryId: string): Promise<void> {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) return;
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/libraries/${libraryId}/books`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
try {
|
||||
const response = await fetch(`/api/libraries/${libraryId}/books`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
renderBooks(data.books || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load bookshelf:', error);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
renderBooks(data.books || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load bookshelf:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function renderBooks(books: unknown[]): void {
|
||||
const container = document.getElementById('books-grid');
|
||||
if (!container) return;
|
||||
const container = document.getElementById("books-grid");
|
||||
if (!container) return;
|
||||
|
||||
if (books.length === 0) {
|
||||
container.innerHTML = '<p class="text-center p-8" style="color: var(--text-secondary)">No books in this library</p>';
|
||||
return;
|
||||
}
|
||||
if (books.length === 0) {
|
||||
container.innerHTML =
|
||||
'<p class="text-center p-8" style="color: var(--text-secondary)">No books in this library</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = books.map((book: any) => `
|
||||
container.innerHTML = books
|
||||
.map(
|
||||
(book: any) => `
|
||||
<div class="book-card p-3 rounded-lg border transition-transform hover:scale-105 cursor-pointer"
|
||||
style="background-color: var(--bg-secondary); border-color: var(--border)"
|
||||
onclick="window.selectBook('${book.id}')">
|
||||
${book.cover_image_path ?
|
||||
`<img src="/covers/${book.cover_image_path}" alt="${book.title}" class="w-full h-48 object-cover rounded mb-2">` :
|
||||
`<div class="w-full h-48 rounded mb-2 flex items-center justify-center" style="background-color: var(--bg-primary)">
|
||||
${
|
||||
book.cover_image_path
|
||||
? `<img src="${book.cover_image_path}" alt="${book.title}" class="w-full h-48 object-cover rounded mb-2">`
|
||||
: `<div class="w-full h-48 rounded mb-2 flex items-center justify-center" style="background-color: var(--bg-primary)">
|
||||
<span class="text-4xl">📖</span>
|
||||
</div>`
|
||||
}
|
||||
<h3 class="font-medium text-sm truncate" style="color: var(--text-primary)">${book.title}</h3>
|
||||
<p class="text-xs truncate" style="color: var(--text-secondary)">${book.author || 'Unknown Author'}</p>
|
||||
<p class="text-xs truncate" style="color: var(--text-secondary)">${book.author || "Unknown Author"}</p>
|
||||
</div>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function selectBook(bookId: string): void {
|
||||
localStorage.setItem('selectedBook', bookId);
|
||||
window.location.href = `/books/${bookId}`;
|
||||
localStorage.setItem("selectedBook", bookId);
|
||||
window.location.href = `/books/${bookId}`;
|
||||
}
|
||||
|
||||
function changePage(page: number): void {
|
||||
const libraryId = localStorage.getItem('selectedLibrary');
|
||||
if (!libraryId) return;
|
||||
const libraryId = localStorage.getItem("selectedLibrary");
|
||||
if (!libraryId) return;
|
||||
|
||||
const offset = (page - 1) * 50;
|
||||
loadBookshelfPaginated(libraryId, offset);
|
||||
const offset = (page - 1) * 50;
|
||||
loadBookshelfPaginated(libraryId, offset);
|
||||
}
|
||||
|
||||
async function loadBookshelfPaginated(libraryId: string, offset: number): Promise<void> {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) return;
|
||||
async function loadBookshelfPaginated(
|
||||
libraryId: string,
|
||||
offset: number,
|
||||
): Promise<void> {
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/libraries/${libraryId}/books?offset=${offset}&limit=50`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/libraries/${libraryId}/books?offset=${offset}&limit=50`,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
},
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
renderBooks(data.books || []);
|
||||
updatePagination(data.total, offset);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load bookshelf:', error);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
renderBooks(data.books || []);
|
||||
updatePagination(data.total, offset);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load bookshelf:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePagination(total: number, offset: number): void {
|
||||
const container = document.getElementById('pagination');
|
||||
if (!container) return;
|
||||
const container = document.getElementById("pagination");
|
||||
if (!container) return;
|
||||
|
||||
const limit = 50;
|
||||
const currentPage = Math.floor(offset / limit) + 1;
|
||||
const totalPages = Math.ceil(total / limit);
|
||||
const limit = 50;
|
||||
const currentPage = Math.floor(offset / limit) + 1;
|
||||
const totalPages = Math.ceil(total / limit);
|
||||
|
||||
if (totalPages <= 1) {
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
if (totalPages <= 1) {
|
||||
container.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
container.innerHTML = `
|
||||
<div class="flex justify-center space-x-2">
|
||||
${currentPage > 1 ? `<button onclick="window.changePage(${currentPage - 1})" class="btn-secondary px-3 py-1 rounded">Previous</button>` : ''}
|
||||
${currentPage > 1 ? `<button onclick="window.changePage(${currentPage - 1})" class="btn-secondary px-3 py-1 rounded">Previous</button>` : ""}
|
||||
<span class="px-3 py-1" style="color: var(--text-secondary)">Page ${currentPage} of ${totalPages}</span>
|
||||
${currentPage < totalPages ? `<button onclick="window.changePage(${currentPage + 1})" class="btn-secondary px-3 py-1 rounded">Next</button>` : ''}
|
||||
${currentPage < totalPages ? `<button onclick="window.changePage(${currentPage + 1})" class="btn-secondary px-3 py-1 rounded">Next</button>` : ""}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user