feat: update frontend for library system
- Redesign dashboard to show library selection first - Add media browsing within selected library - Implement library management interface - Add user visibility controls for libraries - Support library type icons and metadata - Add create library modal with type selection - Include folder management for each library - Implement user-specific library access controls Replaces single ebook library with flexible multi-library system
This commit is contained in:
+175
-55
@@ -95,52 +95,60 @@ templ Dashboard(user User) {
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold" style="color: var(--text-primary)">Your Ebook Library</h2>
|
||||
<p style="color: var(--text-secondary)">Manage your ebook collection and reading progress</p>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold" style="color: var(--text-primary)">Your Media Library</h2>
|
||||
<p style="color: var(--text-secondary)">Browse and manage your media collections</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Libraries Section -->
|
||||
<div id="libraries-container" class="mb-8">
|
||||
<!-- Libraries will be loaded here -->
|
||||
</div>
|
||||
|
||||
<!-- Media Items Section -->
|
||||
<div id="media-section" class="hidden">
|
||||
<!-- Search and Filter -->
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<button onclick="backToLibraries()" class="btn-secondary px-4 py-2 rounded-lg">
|
||||
← Back to Libraries
|
||||
</button>
|
||||
<input type="text" id="search-input" placeholder="Search media..." class="flex-1 px-4 py-2 border rounded-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onkeyup="filterMedia()">
|
||||
<select id="sort-select" class="px-4 py-2 border rounded-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onchange="loadMediaItems()">
|
||||
<option value="created_at DESC">Newest First</option>
|
||||
<option value="title ASC">Title A-Z</option>
|
||||
<option value="author ASC">Author A-Z</option>
|
||||
<option value="created_at ASC">Oldest First</option>
|
||||
</select>
|
||||
</div>
|
||||
<button onclick="showCreateForm()" class="btn-primary px-6 py-3 rounded-lg font-medium">
|
||||
+ Add New Ebook
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filter -->
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input type="text" id="search-input" placeholder="Search ebooks..." class="flex-1 px-4 py-2 border rounded-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onkeyup="filterEbooks()">
|
||||
<select id="sort-select" class="px-4 py-2 border rounded-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onchange="loadEbooks()">
|
||||
<option value="created_at DESC">Newest First</option>
|
||||
<option value="title ASC">Title A-Z</option>
|
||||
<option value="author ASC">Author A-Z</option>
|
||||
<option value="created_at ASC">Oldest First</option>
|
||||
</select>
|
||||
<!-- Media Grid -->
|
||||
<div id="media-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Media items will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ebooks Grid -->
|
||||
<div id="ebooks-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Ebooks will be loaded here -->
|
||||
</div>
|
||||
|
||||
<!-- Loading indicator -->
|
||||
<div id="loading" class="text-center py-8" style="color: var(--text-secondary)">
|
||||
Loading your ebooks...
|
||||
Loading your media libraries...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function loadEbooks() {
|
||||
let libraries = [];
|
||||
let currentLibrary = null;
|
||||
let mediaItems = [];
|
||||
|
||||
function loadLibraries() {
|
||||
const loading = document.getElementById('loading');
|
||||
const container = document.getElementById('ebooks-container');
|
||||
|
||||
const librariesContainer = document.getElementById('libraries-container');
|
||||
|
||||
loading.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
librariesContainer.innerHTML = '';
|
||||
|
||||
const sort = document.getElementById('sort-select').value;
|
||||
|
||||
fetch(`/api/ebooks?limit=12&offset=0&sort=${sort}`, {
|
||||
fetch('/api/libraries/visible', {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('token'),
|
||||
'Content-Type': 'application/json'
|
||||
@@ -149,39 +157,132 @@ templ Dashboard(user User) {
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
loading.style.display = 'none';
|
||||
renderEbooks(data);
|
||||
libraries = data;
|
||||
renderLibraries();
|
||||
})
|
||||
.catch(error => {
|
||||
loading.style.display = 'none';
|
||||
console.error('Error loading ebooks:', error);
|
||||
container.innerHTML = '<div class="col-span-full text-center py-8" style="color: var(--text-secondary)">Error loading ebooks. Please try again.</div>';
|
||||
console.error('Error loading libraries:', error);
|
||||
librariesContainer.innerHTML = '<div class="text-center py-8" style="color: var(--text-secondary)">Error loading libraries. Please try again.</div>';
|
||||
});
|
||||
}
|
||||
|
||||
async function renderEbooks(ebooks) {
|
||||
const container = document.getElementById('ebooks-container');
|
||||
function renderLibraries() {
|
||||
const container = document.getElementById('libraries-container');
|
||||
|
||||
if (libraries.length === 0) {
|
||||
container.innerHTML = '<div class="text-center py-8" style="color: var(--text-secondary)">No libraries available. Please contact an administrator.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">' +
|
||||
libraries.map(library => {
|
||||
const icon = getLibraryIcon(library.type_name);
|
||||
return `<div class="card p-6 rounded-lg border hover:shadow-lg transition-shadow cursor-pointer" onclick="selectLibrary('${library.id}')" style="background-color: var(--bg-secondary); border-color: var(--border);">
|
||||
<div class="text-center">
|
||||
<div class="text-4xl mb-3">${icon}</div>
|
||||
<h3 class="font-semibold text-lg mb-2" style="color: var(--text-primary)">${library.name}</h3>
|
||||
<p class="text-sm mb-3" style="color: var(--text-secondary)">${library.description || ''}</p>
|
||||
<span class="inline-block px-3 py-1 text-sm rounded" style="background-color: var(--accent); color: var(--bg-primary)">${library.type_name}</span>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('') +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
function getLibraryIcon(typeName) {
|
||||
switch (typeName) {
|
||||
case 'ebooks': return '📚';
|
||||
case 'comics': return '📖';
|
||||
case 'manga': return '🗾';
|
||||
default: return '📁';
|
||||
}
|
||||
}
|
||||
|
||||
function selectLibrary(libraryId) {
|
||||
currentLibrary = libraries.find(l => l.id === libraryId);
|
||||
if (!currentLibrary) return;
|
||||
|
||||
const librariesContainer = document.getElementById('libraries-container');
|
||||
const mediaSection = document.getElementById('media-section');
|
||||
const loading = document.getElementById('loading');
|
||||
|
||||
// Hide libraries, show media section
|
||||
librariesContainer.classList.add('hidden');
|
||||
mediaSection.classList.remove('hidden');
|
||||
loading.style.display = 'block';
|
||||
|
||||
loadMediaItems();
|
||||
}
|
||||
|
||||
function backToLibraries() {
|
||||
const librariesContainer = document.getElementById('libraries-container');
|
||||
const mediaSection = document.getElementById('media-section');
|
||||
|
||||
librariesContainer.classList.remove('hidden');
|
||||
mediaSection.classList.add('hidden');
|
||||
currentLibrary = null;
|
||||
}
|
||||
|
||||
function loadMediaItems() {
|
||||
if (!currentLibrary) return;
|
||||
|
||||
const loading = document.getElementById('loading');
|
||||
const container = document.getElementById('media-container');
|
||||
|
||||
loading.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
|
||||
for (const ebook of ebooks) {
|
||||
const sort = document.getElementById('sort-select').value;
|
||||
|
||||
fetch(`/api/media-items?library_id=${currentLibrary.id}&limit=12&offset=0&sort=${sort}`, {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('token'),
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
loading.style.display = 'none';
|
||||
mediaItems = data;
|
||||
renderMediaItems();
|
||||
})
|
||||
.catch(error => {
|
||||
loading.style.display = 'none';
|
||||
console.error('Error loading media items:', error);
|
||||
container.innerHTML = '<div class="col-span-full text-center py-8" style="color: var(--text-secondary)">Error loading media items. Please try again.</div>';
|
||||
});
|
||||
}
|
||||
|
||||
async function renderMediaItems() {
|
||||
const container = document.getElementById('media-container');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (mediaItems.length === 0) {
|
||||
container.innerHTML = '<div class="col-span-full text-center py-8" style="color: var(--text-secondary)">No media items found in this library.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
for (const item of mediaItems) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card p-4 rounded-lg border hover:shadow-lg transition-shadow';
|
||||
card.style.cssText = 'background-color: var(--bg-secondary); border-color: var(--border);';
|
||||
|
||||
const coverUrl = ebook.cover_image_path ? ebook.cover_image_path : '/static/placeholder-book.svg';
|
||||
const coverUrl = item.cover_image_path ? item.cover_image_path : '/static/placeholder-book.svg';
|
||||
|
||||
// Get user's rating for this ebook
|
||||
const rating = await getEbookRating(ebook.id);
|
||||
const ratingStars = renderRatingStars(ebook.id, rating);
|
||||
// Get user's rating for this media item
|
||||
const rating = await getMediaRating(item.id);
|
||||
const ratingStars = renderRatingStars(item.id, rating);
|
||||
|
||||
card.innerHTML = '<div class="flex flex-col h-full"><div class="flex-1"><div class="aspect-w-3 aspect-h-4 mb-3 overflow-hidden rounded"><img src="' + coverUrl + '" alt="Cover" class="w-full h-48 object-cover rounded" onerror="this.src=\'/static/placeholder-book.svg\'"></div><h3 class="font-semibold text-lg mb-1 line-clamp-2" style="color: var(--text-primary)">' + ebook.title + '</h3>' + (ebook.author ? '<p class="text-sm mb-2" style="color: var(--text-secondary)">by ' + ebook.author + '</p>' : '') + '<div class="mb-2" id="rating-' + ebook.id + '">' + ratingStars + '</div><div class="flex justify-between items-center mt-4"><div class="flex space-x-2"><button onclick="viewEbook(\'' + ebook.id + '\')" class="px-3 py-1 text-sm border rounded hover:opacity-80" style="border-color: var(--border); color: var(--text-secondary)">View</button></div></div></div>';
|
||||
card.innerHTML = '<div class="flex flex-col h-full"><div class="flex-1"><div class="aspect-w-3 aspect-h-4 mb-3 overflow-hidden rounded"><img src="' + coverUrl + '" alt="Cover" class="w-full h-48 object-cover rounded" onerror="this.src=\'/static/placeholder-book.svg\'"></div><h3 class="font-semibold text-lg mb-1 line-clamp-2" style="color: var(--text-primary)">' + item.title + '</h3>' + (item.author ? '<p class="text-sm mb-2" style="color: var(--text-secondary)">by ' + item.author + '</p>' : '') + '<div class="mb-2" id="rating-' + item.id + '">' + ratingStars + '</div><div class="flex justify-between items-center mt-4"><div class="flex space-x-2"><button onclick="viewMediaItem(\'' + item.id + '\')" class="px-3 py-1 text-sm border rounded hover:opacity-80" style="border-color: var(--border); color: var(--text-secondary)">View</button></div></div></div>';
|
||||
|
||||
container.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
async function getEbookRating(ebookId) {
|
||||
async function getMediaRating(mediaId) {
|
||||
try {
|
||||
const response = await fetch(`/api/ebooks/${ebookId}/rating`, {
|
||||
const response = await fetch(`/api/media-items/${mediaId}/rating`, {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('token'),
|
||||
'Content-Type': 'application/json'
|
||||
@@ -209,7 +310,7 @@ templ Dashboard(user User) {
|
||||
return Math.round(fivePointRating * 2);
|
||||
}
|
||||
|
||||
function renderRatingStars(ebookId, currentRating) {
|
||||
function renderRatingStars(mediaId, currentRating) {
|
||||
const fivePointRating = convertToFivePoint(currentRating);
|
||||
let stars = '';
|
||||
|
||||
@@ -229,7 +330,7 @@ templ Dashboard(user User) {
|
||||
const starClass = filled ? 'text-yellow-400' :
|
||||
halfFilled ? 'text-yellow-200' : 'text-gray-400';
|
||||
|
||||
stars += `<span onclick="openRatingDialog('${ebookId}', ${currentRating})" class="cursor-pointer text-xl ${starClass} hover:text-yellow-300 transition-colors" title="Click to rate (supports half-stars)">${starHtml}</span>`;
|
||||
stars += `<span onclick="openRatingDialog('${mediaId}', ${currentRating})" class="cursor-pointer text-xl ${starClass} hover:text-yellow-300 transition-colors" title="Click to rate (supports half-stars)">${starHtml}</span>`;
|
||||
}
|
||||
|
||||
// Add rating text
|
||||
@@ -238,9 +339,9 @@ templ Dashboard(user User) {
|
||||
return stars;
|
||||
}
|
||||
|
||||
function openRatingDialog(ebookId, currentRating) {
|
||||
function openRatingDialog(mediaId, currentRating) {
|
||||
const fivePointRating = convertToFivePoint(currentRating);
|
||||
const newRating = prompt(`Rate this ebook (1-5, supports 0.5 increments):`, currentRating > 0 ? fivePointRating.toFixed(1) : '');
|
||||
const newRating = prompt(`Rate this media (1-5, supports 0.5 increments):`, currentRating > 0 ? fivePointRating.toFixed(1) : '');
|
||||
|
||||
if (newRating === null) return; // User cancelled
|
||||
|
||||
@@ -252,12 +353,12 @@ templ Dashboard(user User) {
|
||||
|
||||
// Round to nearest 0.5
|
||||
const roundedRating = Math.round(rating * 2) / 2;
|
||||
setRating(ebookId, convertToTenPoint(roundedRating));
|
||||
setRating(mediaId, convertToTenPoint(roundedRating));
|
||||
}
|
||||
|
||||
async function setRating(ebookId, rating) {
|
||||
async function setRating(mediaId, rating) {
|
||||
try {
|
||||
const response = await fetch(`/api/ebooks/${ebookId}/rating`, {
|
||||
const response = await fetch(`/api/media-items/${mediaId}/rating`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('token'),
|
||||
@@ -268,9 +369,9 @@ templ Dashboard(user User) {
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const ratingContainer = document.getElementById(`rating-${ebookId}`);
|
||||
const ratingContainer = document.getElementById(`rating-${mediaId}`);
|
||||
if (ratingContainer) {
|
||||
ratingContainer.innerHTML = renderRatingStars(ebookId, data.rating);
|
||||
ratingContainer.innerHTML = renderRatingStars(mediaId, data.rating);
|
||||
}
|
||||
} else {
|
||||
const errorText = await response.text();
|
||||
@@ -283,16 +384,35 @@ templ Dashboard(user User) {
|
||||
}
|
||||
}
|
||||
|
||||
function filterMedia() {
|
||||
const searchTerm = document.getElementById('search-input').value.toLowerCase();
|
||||
const filteredItems = mediaItems.filter(item =>
|
||||
item.title.toLowerCase().includes(searchTerm) ||
|
||||
(item.author && item.author.toLowerCase().includes(searchTerm))
|
||||
);
|
||||
|
||||
// Temporarily replace mediaItems and re-render
|
||||
const tempItems = mediaItems;
|
||||
mediaItems = filteredItems;
|
||||
renderMediaItems();
|
||||
mediaItems = tempItems;
|
||||
}
|
||||
|
||||
function viewMediaItem(mediaId) {
|
||||
// TODO: Implement detailed media view
|
||||
alert('Media viewer coming soon!');
|
||||
}
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
// Load ebooks on page load
|
||||
// Load libraries on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadTheme();
|
||||
loadEbooks();
|
||||
loadLibraries();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user