john-okeefe
f8eaca1b08
- Update User type to include role field - Modify dashboard template to conditionally show admin links - Add protected dashboard route with user context - Update main.go to serve dashboard with proper authentication
300 lines
14 KiB
Templ
300 lines
14 KiB
Templ
package templates
|
|
|
|
templ Dashboard(user User) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - Bookmann</title>
|
|
<script src="/static/htmx.min.js"></script>
|
|
<link href="/static/style.css" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-primary: #1a1b26;
|
|
--bg-secondary: #16161e;
|
|
--text-primary: #a9b1d6;
|
|
--text-secondary: #565f89;
|
|
--accent: #7aa2f7;
|
|
--border: #414868;
|
|
}
|
|
.theme-tokyo-night {
|
|
--bg-primary: #1a1b26;
|
|
--bg-secondary: #16161e;
|
|
--text-primary: #a9b1d6;
|
|
--text-secondary: #565f89;
|
|
--accent: #7aa2f7;
|
|
--border: #414868;
|
|
}
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
.card {
|
|
background-color: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
.btn-primary {
|
|
background-color: var(--accent);
|
|
color: var(--bg-primary);
|
|
}
|
|
.btn-primary:hover {
|
|
opacity: 0.8;
|
|
}
|
|
.rating-star {
|
|
display: inline-block;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.rating-star:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
.half-star {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.half-star::before {
|
|
content: '★';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 50%;
|
|
overflow: hidden;
|
|
color: #facc15; /* yellow-400 */
|
|
}
|
|
.rating-text {
|
|
font-size: 0.875rem;
|
|
margin-left: 0.5rem;
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="theme-tokyo-night">
|
|
<!-- Navigation Header -->
|
|
<nav class="border-b" style="border-color: var(--border); background-color: var(--bg-secondary)">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<h1 class="text-xl font-bold" style="color: var(--text-primary)">📚 Bookmann</h1>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<a href="/" class="px-3 py-2 text-sm hover:opacity-80" style="color: var(--text-secondary)">Dashboard</a>
|
|
if user.Role == "admin" {
|
|
<a href="/admin" class="px-3 py-2 text-sm hover:opacity-80" style="color: var(--text-secondary)">Admin</a>
|
|
}
|
|
<span style="color: var(--text-secondary)">Welcome, { user.Username }!</span>
|
|
<button onclick="logout()" class="btn-primary px-4 py-2 rounded text-sm">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<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>
|
|
<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>
|
|
</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...
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function loadEbooks() {
|
|
const loading = document.getElementById('loading');
|
|
const container = document.getElementById('ebooks-container');
|
|
|
|
loading.style.display = 'block';
|
|
container.innerHTML = '';
|
|
|
|
const sort = document.getElementById('sort-select').value;
|
|
|
|
fetch(`/api/ebooks?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';
|
|
renderEbooks(data);
|
|
})
|
|
.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>';
|
|
});
|
|
}
|
|
|
|
async function renderEbooks(ebooks) {
|
|
const container = document.getElementById('ebooks-container');
|
|
container.innerHTML = '';
|
|
|
|
for (const ebook of ebooks) {
|
|
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';
|
|
|
|
// Get user's rating for this ebook
|
|
const rating = await getEbookRating(ebook.id);
|
|
const ratingStars = renderRatingStars(ebook.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>';
|
|
|
|
container.appendChild(card);
|
|
}
|
|
}
|
|
|
|
async function getEbookRating(ebookId) {
|
|
try {
|
|
const response = await fetch(`/api/ebooks/${ebookId}/rating`, {
|
|
headers: {
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token'),
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
return data.rating || 0;
|
|
}
|
|
return 0;
|
|
} catch (error) {
|
|
console.error('Error fetching rating:', error);
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
// Convert 10-point rating to 5-point with half-star precision
|
|
function convertToFivePoint(rating) {
|
|
return rating / 2;
|
|
}
|
|
|
|
// Convert 5-point with half-stars back to 10-point
|
|
function convertToTenPoint(fivePointRating) {
|
|
return Math.round(fivePointRating * 2);
|
|
}
|
|
|
|
function renderRatingStars(ebookId, currentRating) {
|
|
const fivePointRating = convertToFivePoint(currentRating);
|
|
let stars = '';
|
|
|
|
for (let i = 1; i <= 5; i++) {
|
|
const filled = i <= Math.floor(fivePointRating);
|
|
const halfFilled = !filled && (i - 0.5) <= fivePointRating;
|
|
let starHtml = '';
|
|
|
|
if (filled) {
|
|
starHtml = '★';
|
|
} else if (halfFilled) {
|
|
starHtml = '⭐'; // Using different symbol for half-star
|
|
} else {
|
|
starHtml = '☆';
|
|
}
|
|
|
|
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>`;
|
|
}
|
|
|
|
// Add rating text
|
|
stars += `<span class="text-sm ml-2" style="color: var(--text-secondary)">${currentRating > 0 ? fivePointRating.toFixed(1) + '/5' : 'Not rated'}</span>`;
|
|
|
|
return stars;
|
|
}
|
|
|
|
function openRatingDialog(ebookId, currentRating) {
|
|
const fivePointRating = convertToFivePoint(currentRating);
|
|
const newRating = prompt(`Rate this ebook (1-5, supports 0.5 increments):`, currentRating > 0 ? fivePointRating.toFixed(1) : '');
|
|
|
|
if (newRating === null) return; // User cancelled
|
|
|
|
const rating = parseFloat(newRating);
|
|
if (isNaN(rating) || rating < 0.5 || rating > 5) {
|
|
alert('Please enter a valid rating between 0.5 and 5');
|
|
return;
|
|
}
|
|
|
|
// Round to nearest 0.5
|
|
const roundedRating = Math.round(rating * 2) / 2;
|
|
setRating(ebookId, convertToTenPoint(roundedRating));
|
|
}
|
|
|
|
async function setRating(ebookId, rating) {
|
|
try {
|
|
const response = await fetch(`/api/ebooks/${ebookId}/rating`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': 'Bearer ' + localStorage.getItem('token'),
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ rating: rating })
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
const ratingContainer = document.getElementById(`rating-${ebookId}`);
|
|
if (ratingContainer) {
|
|
ratingContainer.innerHTML = renderRatingStars(ebookId, data.rating);
|
|
}
|
|
} else {
|
|
const errorText = await response.text();
|
|
console.error('Error setting rating:', errorText);
|
|
alert('Failed to set rating: ' + errorText);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error setting rating:', error);
|
|
alert('Failed to set rating due to network error');
|
|
}
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
window.location.href = '/';
|
|
}
|
|
|
|
// Load ebooks on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadTheme();
|
|
loadEbooks();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
} |