wowlikon/LibraryAPI
1
0
Fork 0
mirror of https://github.com/wowlikon/LiB.git synced 2026-02-04 04:31:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Доабвлеие страниц на фронтэнде

Browse Source
This commit is contained in:
wowlikon
2025-12-20 09:25:00 +03:00
parent 961bf95af7
commit a3203d713d
18 changed files with 1435 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
library_service/static/author.js
+305
View File
@@ -0,0 +1,305 @@
$(document).ready(() => {
const pathParts = window.location.pathname.split("/");
const authorId = pathParts[pathParts.length - 1];
if (!authorId || isNaN(authorId)) {
showErrorState("Некорректный ID автора");
return;
}
loadAuthor(authorId);
function loadAuthor(id) {
showLoadingState();
fetch(`/api/authors/${id}`)
.then((response) => {
if (!response.ok) {
if (response.status === 404) {
throw new Error("Автор не найден");
}
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then((author) => {
renderAuthor(author);
renderBooks(author.books);
document.title = `LiB - ${author.name}`;
})
.catch((error) => {
console.error("Error loading author:", error);
showErrorState(error.message);
});
}
function renderAuthor(author) {
const $card = $("#author-card");
const firstLetter = author.name.charAt(0).toUpperCase();
const booksCount = author.books ? author.books.length : 0;
const booksWord = getWordForm(booksCount, ["книга", "книги", "книг"]);
$card.html(`
<div class="flex items-start">
<!-- Аватар -->
<div class="w-24 h-24 bg-gray-500 text-white rounded-full flex items-center justify-center text-4xl font-bold mr-6 flex-shrink-0">
${firstLetter}
</div>
<!-- Информация -->
<div class="flex-1">
<div class="flex items-center justify-between mb-2">
<h1 class="text-3xl font-bold text-gray-900">${escapeHtml(author.name)}</h1>
<span class="text-sm text-gray-500">ID: ${author.id}</span>
</div>
<div class="flex items-center text-gray-600 mb-4">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
<span>${booksCount} ${booksWord} в библиотеке</span>
</div>
<!-- Кнопка назад -->
<a href="/authors" class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
Вернуться к списку авторов
</a>
</div>
</div>
`);
}
function renderBooks(books) {
const $container = $("#books-container");
$container.empty();
if (!books || books.length === 0) {
$container.html(`
<div class="text-center py-8">
<svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
<p class="text-gray-500">У этого автора пока нет книг в библиотеке</p>
</div>
`);
return;
}
const $grid = $('<div class="space-y-4"></div>');
books.forEach((book) => {
const $bookCard = $(`
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-200 cursor-pointer book-card" data-id="${book.id}">
<div class="flex justify-between items-start">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors mb-2">
${escapeHtml(book.title)}
</h3>
<p class="text-gray-600 text-sm line-clamp-3">
${escapeHtml(book.description || "Описание отсутствует")}
</p>
</div>
<svg class="w-5 h-5 text-gray-400 ml-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</div>
</div>
`);
$grid.append($bookCard);
});
$container.append($grid);
$container.off("click", ".book-card").on("click", ".book-card", function () {
const bookId = $(this).data("id");
window.location.href = `/book/${bookId}`;
});
}
function showLoadingState() {
const $authorCard = $("#author-card");
const $booksContainer = $("#books-container");
$authorCard.html(`
<div class="flex items-start animate-pulse">
<div class="w-24 h-24 bg-gray-200 rounded-full mr-6"></div>
<div class="flex-1">
<div class="h-8 bg-gray-200 rounded w-1/3 mb-4"></div>
<div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
<div class="h-4 bg-gray-200 rounded w-1/5"></div>
</div>
</div>
`);
$booksContainer.html(`
<div class="space-y-4">
${Array(3)
.fill()
.map(
() => `
<div class="border border-gray-200 rounded-lg p-4 animate-pulse">
<div class="h-5 bg-gray-200 rounded w-1/2 mb-2"></div>
<div class="h-4 bg-gray-200 rounded w-full mb-1"></div>
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
</div>
`
)
.join("")}
</div>
`);
}
function showErrorState(message) {
const $authorCard = $("#author-card");
const $booksSection = $("#books-section");
$booksSection.hide();
$authorCard.html(`
<div class="text-center py-8">
<svg class="mx-auto h-16 w-16 text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<h3 class="text-xl font-medium text-gray-900 mb-2">${escapeHtml(message)}</h3>
<p class="text-gray-500 mb-6">Не удалось загрузить информацию об авторе</p>
<div class="flex justify-center gap-4">
<button id="retry-btn" class="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors">
Попробовать снова
</button>
<a href="/authors" class="bg-white text-gray-700 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
К списку авторов
</a>
</div>
</div>
`);
$("#retry-btn").on("click", function () {
$booksSection.show();
loadAuthor(authorId);
});
}
function getWordForm(number, forms) {
const cases = [2, 0, 1, 1, 1, 2];
const index =
number % 100 > 4 && number % 100 < 20
? 2
: cases[Math.min(number % 10, 5)];
return forms[index];
}
function escapeHtml(text) {
if (!text) return "";
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
const $guestLink = $("#guest-link");
const $userBtn = $("#user-btn");
const $userDropdown = $("#user-dropdown");
const $userArrow = $("#user-arrow");
const $userAvatar = $("#user-avatar");
const $dropdownName = $("#dropdown-name");
const $dropdownUsername = $("#dropdown-username");
const $dropdownEmail = $("#dropdown-email");
const $logoutBtn = $("#logout-btn");
let isDropdownOpen = false;
function openDropdown() {
isDropdownOpen = true;
$userDropdown.removeClass("hidden");
$userArrow.addClass("rotate-180");
}
function closeDropdown() {
isDropdownOpen = false;
$userDropdown.addClass("hidden");
$userArrow.removeClass("rotate-180");
}
$userBtn.on("click", function (e) {
e.stopPropagation();
isDropdownOpen ? closeDropdown() : openDropdown();
});
$(document).on("click", function (e) {
if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
closeDropdown();
}
});
$(document).on("keydown", function (e) {
if (e.key === "Escape" && isDropdownOpen) {
closeDropdown();
}
});
$logoutBtn.on("click", function () {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
window.location.reload();
});
function showGuest() {
$guestLink.removeClass("hidden");
$userBtn.addClass("hidden").removeClass("flex");
closeDropdown();
}
function showUser(user) {
$guestLink.addClass("hidden");
$userBtn.removeClass("hidden").addClass("flex");
const displayName = user.full_name || user.username;
const firstLetter = displayName.charAt(0).toUpperCase();
$userAvatar.text(firstLetter);
$dropdownName.text(displayName);
$dropdownUsername.text("@" + user.username);
$dropdownEmail.text(user.email);
}
function updateUserAvatar(email) {
if (!email) return;
const cleanEmail = email.trim().toLowerCase();
const emailHash = sha256(cleanEmail);
const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
const avatarImg = document.getElementById("user-avatar");
if (avatarImg) {
avatarImg.src = avatarUrl;
}
}
const token = localStorage.getItem("access_token");
if (!token) {
showGuest();
} else {
fetch("/api/auth/me", {
headers: { Authorization: "Bearer " + token },
})
.then((response) => {
if (response.ok) return response.json();
throw new Error("Unauthorized");
})
.then((user) => {
showUser(user);
updateUserAvatar(user.email);
document.getElementById("user-btn").classList.remove("hidden");
document.getElementById("guest-link").classList.add("hidden");
})
.catch(() => {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
showGuest();
});
}
});
library_service/static/authors.js
+417
View File
@@ -0,0 +1,417 @@
$(document).ready(() => {
let allAuthors = [];
let filteredAuthors = [];
let currentPage = 1;
let pageSize = 12;
let currentSort = "name_asc";
loadAuthors();
function loadAuthors() {
showLoadingState();
fetch("/api/authors")
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then((data) => {
allAuthors = data.authors;
applyFiltersAndSort();
})
.catch((error) => {
console.error("Error loading authors:", error);
showErrorState();
});
}
function applyFiltersAndSort() {
const searchQuery = $("#author-search-input").val().trim().toLowerCase();
filteredAuthors = allAuthors.filter((author) =>
author.name.toLowerCase().includes(searchQuery)
);
filteredAuthors.sort((a, b) => {
const nameA = a.name.toLowerCase();
const nameB = b.name.toLowerCase();
if (currentSort === "name_asc") {
return nameA.localeCompare(nameB, "ru");
} else {
return nameB.localeCompare(nameA, "ru");
}
});
updateResultsCounter();
renderAuthors();
renderPagination();
}
function updateResultsCounter() {
const $counter = $("#results-counter");
const total = filteredAuthors.length;
if (total === 0) {
$counter.text("Авторы не найдены");
} else {
const wordForm = getWordForm(total, ["автор", "автора", "авторов"]);
$counter.text(`Найдено: ${total} ${wordForm}`);
}
}
function getWordForm(number, forms) {
const cases = [2, 0, 1, 1, 1, 2];
const index =
number % 100 > 4 && number % 100 < 20
? 2
: cases[Math.min(number % 10, 5)];
return forms[index];
}
function renderAuthors() {
const $container = $("#authors-container");
$container.empty();
if (filteredAuthors.length === 0) {
$container.html(`
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<h3 class="text-lg font-medium text-gray-900 mb-2">Авторы не найдены</h3>
<p class="text-gray-500">Попробуйте изменить параметры поиска</p>
</div>
`);
return;
}
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
const pageAuthors = filteredAuthors.slice(startIndex, endIndex);
const $grid = $('<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>');
pageAuthors.forEach((author) => {
const firstLetter = author.name.charAt(0).toUpperCase();
const $authorCard = $(`
<div class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer author-card" data-id="${author.id}">
<div class="flex items-center">
<div class="w-12 h-12 bg-gray-500 text-white rounded-full flex items-center justify-center text-xl font-bold mr-4">
${firstLetter}
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors">
${escapeHtml(author.name)}
</h3>
<p class="text-sm text-gray-500">ID: ${author.id}</p>
</div>
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</div>
</div>
`);
$grid.append($authorCard);
});
$container.append($grid);
$container.off("click", ".author-card").on("click", ".author-card", function () {
const authorId = $(this).data("id");
window.location.href = `/author/${authorId}`;
});
}
function renderPagination() {
const $paginationContainer = $("#pagination-container");
$paginationContainer.empty();
const totalPages = Math.ceil(filteredAuthors.length / pageSize);
if (totalPages <= 1) return;
const $pagination = $(`
<div class="flex justify-center items-center gap-2 mt-6 mb-4">
<button id="prev-page" class="px-3 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" ${currentPage === 1 ? "disabled" : ""}>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
</button>
<div id="page-numbers" class="flex gap-1"></div>
<button id="next-page" class="px-3 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" ${currentPage === totalPages ? "disabled" : ""}>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</button>
</div>
`);
const $pageNumbers = $pagination.find("#page-numbers");
const pages = generatePageNumbers(currentPage, totalPages);
pages.forEach((page) => {
if (page === "...") {
$pageNumbers.append(`<span class="px-3 py-2">...</span>`);
} else {
const isActive = page === currentPage;
$pageNumbers.append(`
<button class="page-btn px-3 py-2 rounded-lg ${isActive ? "bg-gray-500 text-white" : "bg-white border border-gray-300 hover:bg-gray-50"}" data-page="${page}">
${page}
</button>
`);
}
});
$paginationContainer.append($pagination);
$paginationContainer.find("#prev-page").on("click", function () {
if (currentPage > 1) {
currentPage--;
renderAuthors();
renderPagination();
scrollToTop();
}
});
$paginationContainer.find("#next-page").on("click", function () {
if (currentPage < totalPages) {
currentPage++;
renderAuthors();
renderPagination();
scrollToTop();
}
});
$paginationContainer.find(".page-btn").on("click", function () {
const page = parseInt($(this).data("page"));
if (page !== currentPage) {
currentPage = page;
renderAuthors();
renderPagination();
scrollToTop();
}
});
}
function generatePageNumbers(current, total) {
const pages = [];
const delta = 2;
for (let i = 1; i <= total; i++) {
if (
i === 1 ||
i === total ||
(i >= current - delta && i <= current + delta)
) {
pages.push(i);
} else if (pages[pages.length - 1] !== "...") {
pages.push("...");
}
}
return pages;
}
function scrollToTop() {
$("html, body").animate({ scrollTop: 0 }, 300);
}
function showLoadingState() {
const $container = $("#authors-container");
$container.html(`
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
${Array(6)
.fill()
.map(
() => `
<div class="bg-white p-4 rounded-lg shadow-md animate-pulse">
<div class="flex items-center">
<div class="w-12 h-12 bg-gray-200 rounded-full mr-4"></div>
<div class="flex-1">
<div class="h-5 bg-gray-200 rounded w-3/4 mb-2"></div>
<div class="h-4 bg-gray-200 rounded w-1/4"></div>
</div>
</div>
</div>
`
)
.join("")}
</div>
`);
}
function showErrorState() {
const $container = $("#authors-container");
$container.html(`
<div class="bg-red-50 p-8 rounded-lg shadow-md text-center">
<svg class="mx-auto h-12 w-12 text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<h3 class="text-lg font-medium text-red-900 mb-2">Ошибка загрузки</h3>
<p class="text-red-700 mb-4">Не удалось загрузить список авторов</p>
<button id="retry-btn" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700">
Попробовать снова
</button>
</div>
`);
$("#retry-btn").on("click", loadAuthors);
}
function escapeHtml(text) {
if (!text) return "";
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
function initializeFilters() {
const $authorSearch = $("#author-search-input");
const $resetBtn = $("#reset-filters-btn");
const $sortRadios = $('input[name="sort"]');
let searchTimeout;
$authorSearch.on("input", function () {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
currentPage = 1;
applyFiltersAndSort();
}, 300);
});
$authorSearch.on("keypress", function (e) {
if (e.which === 13) {
clearTimeout(searchTimeout);
currentPage = 1;
applyFiltersAndSort();
}
});
$sortRadios.on("change", function () {
currentSort = $(this).val();
currentPage = 1;
applyFiltersAndSort();
});
$resetBtn.on("click", function () {
$authorSearch.val("");
$('input[name="sort"][value="name_asc"]').prop("checked", true);
currentSort = "name_asc";
currentPage = 1;
applyFiltersAndSort();
});
}
initializeFilters();
const $guestLink = $("#guest-link");
const $userBtn = $("#user-btn");
const $userDropdown = $("#user-dropdown");
const $userArrow = $("#user-arrow");
const $userAvatar = $("#user-avatar");
const $dropdownName = $("#dropdown-name");
const $dropdownUsername = $("#dropdown-username");
const $dropdownEmail = $("#dropdown-email");
const $logoutBtn = $("#logout-btn");
let isDropdownOpen = false;
function openDropdown() {
isDropdownOpen = true;
$userDropdown.removeClass("hidden");
$userArrow.addClass("rotate-180");
}
function closeDropdown() {
isDropdownOpen = false;
$userDropdown.addClass("hidden");
$userArrow.removeClass("rotate-180");
}
$userBtn.on("click", function (e) {
e.stopPropagation();
isDropdownOpen ? closeDropdown() : openDropdown();
});
$(document).on("click", function (e) {
if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
closeDropdown();
}
});
$(document).on("keydown", function (e) {
if (e.key === "Escape" && isDropdownOpen) {
closeDropdown();
}
});
$logoutBtn.on("click", function () {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
window.location.reload();
});
function showGuest() {
$guestLink.removeClass("hidden");
$userBtn.addClass("hidden").removeClass("flex");
closeDropdown();
}
function showUser(user) {
$guestLink.addClass("hidden");
$userBtn.removeClass("hidden").addClass("flex");
const displayName = user.full_name || user.username;
const firstLetter = displayName.charAt(0).toUpperCase();
$userAvatar.text(firstLetter);
$dropdownName.text(displayName);
$dropdownUsername.text("@" + user.username);
$dropdownEmail.text(user.email);
}
function updateUserAvatar(email) {
if (!email) return;
const cleanEmail = email.trim().toLowerCase();
const emailHash = sha256(cleanEmail);
const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
const avatarImg = document.getElementById("user-avatar");
if (avatarImg) {
avatarImg.src = avatarUrl;
}
}
const token = localStorage.getItem("access_token");
if (!token) {
showGuest();
} else {
fetch("/api/auth/me", {
headers: { Authorization: "Bearer " + token },
})
.then((response) => {
if (response.ok) return response.json();
throw new Error("Unauthorized");
})
.then((user) => {
showUser(user);
updateUserAvatar(user.email);
document.getElementById("user-btn").classList.remove("hidden");
document.getElementById("guest-link").classList.add("hidden");
})
.catch(() => {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
showGuest();
});
}
});
library_service/static/book.js
+321
View File
@@ -0,0 +1,321 @@
$(document).ready(() => {
const pathParts = window.location.pathname.split("/");
const bookId = pathParts[pathParts.length - 1];
if (!bookId || isNaN(bookId)) {
showErrorState("Некорректный ID книги");
return;
}
loadBook(bookId);
function loadBook(id) {
showLoadingState();
fetch(`/api/books/${id}`)
.then((response) => {
if (!response.ok) {
if (response.status === 404) {
throw new Error("Книга не найдена");
}
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then((book) => {
renderBook(book);
renderAuthors(book.authors);
renderGenres(book.genres);
document.title = `LiB - ${book.title}`;
})
.catch((error) => {
console.error("Error loading book:", error);
showErrorState(error.message);
});
}
function renderBook(book) {
const $card = $("#book-card");
const authorsText = book.authors.map((a) => a.name).join(", ") || "Автор неизвестен";
$card.html(`
<div class="flex flex-col md:flex-row items-start">
<!-- Иконка книги -->
<div class="w-32 h-40 bg-gradient-to-br from-gray-400 to-gray-600 rounded-lg flex items-center justify-center mb-4 md:mb-0 md:mr-6 flex-shrink-0 shadow-md">
<svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
</div>
<!-- Информация о книге -->
<div class="flex-1">
<div class="flex items-start justify-between mb-2">
<h1 class="text-3xl font-bold text-gray-900">${escapeHtml(book.title)}</h1>
<span class="text-sm text-gray-500 ml-4">ID: ${book.id}</span>
</div>
<p class="text-lg text-gray-600 mb-4">
${escapeHtml(authorsText)}
</p>
<div class="prose prose-gray max-w-none mb-6">
<p class="text-gray-700 leading-relaxed">
${escapeHtml(book.description || "Описание отсутствует")}
</p>
</div>
<!-- Кнопка назад -->
<a href="/books" class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
Вернуться к списку книг
</a>
</div>
</div>
`);
}
function renderAuthors(authors) {
const $container = $("#authors-container");
const $section = $("#authors-section");
$container.empty();
if (!authors || authors.length === 0) {
$section.hide();
return;
}
const $grid = $('<div class="flex flex-wrap gap-3"></div>');
authors.forEach((author) => {
const firstLetter = author.name.charAt(0).toUpperCase();
const $authorCard = $(`
<a href="/author/${author.id}" class="flex items-center bg-gray-50 hover:bg-gray-100 rounded-lg p-3 transition-colors duration-200 border border-gray-200">
<div class="w-10 h-10 bg-gray-500 text-white rounded-full flex items-center justify-center text-lg font-bold mr-3">
${firstLetter}
</div>
<span class="text-gray-900 font-medium">${escapeHtml(author.name)}</span>
<svg class="w-4 h-4 text-gray-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</a>
`);
$grid.append($authorCard);
});
$container.append($grid);
}
function renderGenres(genres) {
const $container = $("#genres-container");
const $section = $("#genres-section");
$container.empty();
if (!genres || genres.length === 0) {
$section.hide();
return;
}
const $grid = $('<div class="flex flex-wrap gap-2"></div>');
genres.forEach((genre) => {
const $genreTag = $(`
<a href="/books?genre_id=${genre.id}" class="inline-flex items-center bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full transition-colors duration-200">
<svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
</svg>
${escapeHtml(genre.name)}
</a>
`);
$grid.append($genreTag);
});
$container.append($grid);
}
function showLoadingState() {
const $bookCard = $("#book-card");
const $authorsContainer = $("#authors-container");
const $genresContainer = $("#genres-container");
$bookCard.html(`
<div class="flex flex-col md:flex-row items-start animate-pulse">
<div class="w-32 h-40 bg-gray-200 rounded-lg mb-4 md:mb-0 md:mr-6"></div>
<div class="flex-1">
<div class="h-8 bg-gray-200 rounded w-2/3 mb-4"></div>
<div class="h-5 bg-gray-200 rounded w-1/3 mb-4"></div>
<div class="space-y-2 mb-6">
<div class="h-4 bg-gray-200 rounded w-full"></div>
<div class="h-4 bg-gray-200 rounded w-full"></div>
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
</div>
<div class="h-4 bg-gray-200 rounded w-1/4"></div>
</div>
</div>
`);
$authorsContainer.html(`
<div class="flex gap-3 animate-pulse">
<div class="flex items-center bg-gray-100 rounded-lg p-3">
<div class="w-10 h-10 bg-gray-200 rounded-full mr-3"></div>
<div class="h-5 bg-gray-200 rounded w-24"></div>
</div>
</div>
`);
$genresContainer.html(`
<div class="flex gap-2 animate-pulse">
<div class="h-10 bg-gray-200 rounded-full w-24"></div>
<div class="h-10 bg-gray-200 rounded-full w-32"></div>
</div>
`);
}
function showErrorState(message) {
const $bookCard = $("#book-card");
const $authorsSection = $("#authors-section");
const $genresSection = $("#genres-section");
$authorsSection.hide();
$genresSection.hide();
$bookCard.html(`
<div class="text-center py-8">
<svg class="mx-auto h-16 w-16 text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<h3 class="text-xl font-medium text-gray-900 mb-2">${escapeHtml(message)}</h3>
<p class="text-gray-500 mb-6">Не удалось загрузить информацию о книге</p>
<div class="flex justify-center gap-4">
<button id="retry-btn" class="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors">
Попробовать снова
</button>
<a href="/books" class="bg-white text-gray-700 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
К списку книг
</a>
</div>
</div>
`);
$("#retry-btn").on("click", function () {
$authorsSection.show();
$genresSection.show();
loadBook(bookId);
});
}
function escapeHtml(text) {
if (!text) return "";
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
const $guestLink = $("#guest-link");
const $userBtn = $("#user-btn");
const $userDropdown = $("#user-dropdown");
const $userArrow = $("#user-arrow");
const $userAvatar = $("#user-avatar");
const $dropdownName = $("#dropdown-name");
const $dropdownUsername = $("#dropdown-username");
const $dropdownEmail = $("#dropdown-email");
const $logoutBtn = $("#logout-btn");
let isDropdownOpen = false;
function openDropdown() {
isDropdownOpen = true;
$userDropdown.removeClass("hidden");
$userArrow.addClass("rotate-180");
}
function closeDropdown() {
isDropdownOpen = false;
$userDropdown.addClass("hidden");
$userArrow.removeClass("rotate-180");
}
$userBtn.on("click", function (e) {
e.stopPropagation();
isDropdownOpen ? closeDropdown() : openDropdown();
});
$(document).on("click", function (e) {
if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
closeDropdown();
}
});
$(document).on("keydown", function (e) {
if (e.key === "Escape" && isDropdownOpen) {
closeDropdown();
}
});
$logoutBtn.on("click", function () {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
window.location.reload();
});
function showGuest() {
$guestLink.removeClass("hidden");
$userBtn.addClass("hidden").removeClass("flex");
closeDropdown();
}
function showUser(user) {
$guestLink.addClass("hidden");
$userBtn.removeClass("hidden").addClass("flex");
const displayName = user.full_name || user.username;
const firstLetter = displayName.charAt(0).toUpperCase();
$userAvatar.text(firstLetter);
$dropdownName.text(displayName);
$dropdownUsername.text("@" + user.username);
$dropdownEmail.text(user.email);
}
function updateUserAvatar(email) {
if (!email) return;
const cleanEmail = email.trim().toLowerCase();
const emailHash = sha256(cleanEmail);
const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
const avatarImg = document.getElementById("user-avatar");
if (avatarImg) {
avatarImg.src = avatarUrl;
}
}
const token = localStorage.getItem("access_token");
if (!token) {
showGuest();
} else {
fetch("/api/auth/me", {
headers: { Authorization: "Bearer " + token },
})
.then((response) => {
if (response.ok) return response.json();
throw new Error("Unauthorized");
})
.then((user) => {
showUser(user);
updateUserAvatar(user.email);
document.getElementById("user-btn").classList.remove("hidden");
document.getElementById("guest-link").classList.add("hidden");
})
.catch(() => {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
showGuest();
});
}
});
library_service/static/books.js
+7 -33
View File
@@ -1,6 +1,6 @@
$(document).ready(function () {
let selectedAuthors = new Map(); // Map<id, name>
let selectedGenres = new Map(); // Map<id, name>
$(document).ready(() => {
let selectedAuthors = new Map();
let selectedGenres = new Map();
let currentPage = 1;
let pageSize = 20;
let totalBooks = 0;
@@ -36,41 +36,32 @@ $(document).ready(function () {
initializeAuthorDropdown();
initializeFilters();
// Загружаем книги при старте
loadBooks();
})
.catch((error) => console.error("Error loading data:", error));
// === Функция загрузки книг ===
function loadBooks() {
const searchQuery = $("#book-search-input").val().trim();
// Формируем URL с параметрами
const params = new URLSearchParams();
// Добавляем поиск (минимум 3 символа)
if (searchQuery.length >= 3) {
params.append("q", searchQuery);
}
// Добавляем авторов
selectedAuthors.forEach((name, id) => {
params.append("author_ids", id);
});
// Добавляем жанры
selectedGenres.forEach((name, id) => {
params.append("genre_ids", id);
});
// Пагинация
params.append("page", currentPage);
params.append("size", pageSize);
const url = `/api/books/filter?${params.toString()}`;
// Показываем индикатор загрузки
showLoadingState();
fetch(url)
@@ -91,7 +82,6 @@ $(document).ready(function () {
});
}
// === Отображение книг ===
function renderBooks(books) {
const $container = $("#books-container");
$container.empty();
@@ -146,17 +136,14 @@ $(document).ready(function () {
$container.append($bookCard);
});
// Обработчик клика на карточку книги
$container.on("click", ".book-card", function () {
const bookId = $(this).data("id");
window.location.href = `/books/${bookId}`;
window.location.href = `/book/${bookId}`;
});
}
// === Пагинация ===
function renderPagination() {
// Удаляем старую пагинацию
$("#pagination-container").remove();
const totalPages = Math.ceil(totalBooks / pageSize);
@@ -181,7 +168,6 @@ $(document).ready(function () {
const $pageNumbers = $pagination.find("#page-numbers");
// Генерируем номера страниц
const pages = generatePageNumbers(currentPage, totalPages);
pages.forEach((page) => {
@@ -199,7 +185,6 @@ $(document).ready(function () {
$("#books-container").after($pagination);
// Обработчики пагинации
$("#prev-page").on("click", function () {
if (currentPage > 1) {
currentPage--;
@@ -249,7 +234,6 @@ $(document).ready(function () {
$("html, body").animate({ scrollTop: 0 }, 300);
}
// === Состояния загрузки ===
function showLoadingState() {
const $container = $("#books-container");
$container.html(`
@@ -292,7 +276,6 @@ $(document).ready(function () {
$("#retry-btn").on("click", loadBooks);
}
// === Экранирование HTML ===
function escapeHtml(text) {
if (!text) return "";
const div = document.createElement("div");
@@ -300,7 +283,6 @@ $(document).ready(function () {
return div.innerHTML;
}
// === Dropdown авторов ===
function initializeAuthorDropdown() {
const $input = $("#author-search-input");
const $dropdown = $("#author-dropdown");
@@ -390,13 +372,11 @@ $(document).ready(function () {
window.updateAuthorHighlights = updateHighlights;
}
// === Инициализация фильтров ===
function initializeFilters() {
const $bookSearch = $("#book-search-input");
const $applyBtn = $("#apply-filters-btn");
const $resetBtn = $("#reset-filters-btn");
// Обработка жанров
$("#genres-list").on("change", "input[type='checkbox']", function () {
const id = parseInt($(this).attr("data-id"));
const name = $(this).attr("data-name");
@@ -407,13 +387,11 @@ $(document).ready(function () {
}
});
// Применить фильтры
$applyBtn.on("click", function () {
currentPage = 1; // Сбрасываем на первую страницу
currentPage = 1;
loadBooks();
});
// Сбросить фильтры
$resetBtn.on("click", function () {
$bookSearch.val("");
@@ -428,13 +406,11 @@ $(document).ready(function () {
loadBooks();
});
// Поиск с дебаунсом
let searchTimeout;
$bookSearch.on("input", function () {
clearTimeout(searchTimeout);
const query = $(this).val().trim();
// Автопоиск только если >= 3 символов или пусто
if (query.length >= 3 || query.length === 0) {
searchTimeout = setTimeout(() => {
currentPage = 1;
@@ -443,7 +419,6 @@ $(document).ready(function () {
}
});
// Поиск по Enter
$bookSearch.on("keypress", function (e) {
if (e.which === 13) {
clearTimeout(searchTimeout);
@@ -453,7 +428,6 @@ $(document).ready(function () {
});
}
// === Остальной код (пользователь/авторизация) ===
const $guestLink = $("#guest-link");
const $userBtn = $("#user-btn");
const $userDropdown = $("#user-dropdown");
library_service/static/index.js
+156 -46
View File
@@ -1,4 +1,4 @@
const svg = document.getElementById("bookSvg");
const $svg = $("#bookSvg");
const NS = "http://www.w3.org/2000/svg";
const svgWidth = 200;
@@ -48,27 +48,27 @@ const disappearDuration =
const pauseDuration = 30;
const book = document.createElementNS(NS, "rect");
book.setAttribute("x", bookX);
book.setAttribute("y", bookY);
book.setAttribute("width", bookWidth);
book.setAttribute("height", bookHeight);
book.setAttribute("fill", "#374151");
book.setAttribute("rx", "4");
svg.appendChild(book);
$(book)
.attr("x", bookX)
.attr("y", bookY)
.attr("width", bookWidth)
.attr("height", bookHeight)
.attr("fill", "#374151")
.attr("rx", "4");
$svg.append(book);
const lines = [];
for (let i = 0; i < lineCount; i++) {
const line = document.createElementNS(NS, "rect");
line.setAttribute("fill", "#ffffff");
line.setAttribute("rx", "1");
svg.appendChild(line);
$(line).attr("fill", "#ffffff").attr("rx", "1");
$svg.append(line);
const baseX = lineStartX + i * lineSpacing;
const targetX = leftLimit + i * lineSpacing;
const moveDistance = baseX - targetX;
lines.push({
el: line,
el: $(line),
baseX,
targetX,
moveDistance,
@@ -91,13 +91,14 @@ function easeInQuad(t) {
}
function updateLine(line) {
const el = line.el;
const $el = line.el;
const centerY = bookY + bookHeight / 2;
el.setAttribute("x", line.currentX);
el.setAttribute("y", centerY - line.height / 2);
el.setAttribute("width", line.width);
el.setAttribute("height", Math.max(0, line.height));
$el
.attr("x", line.currentX)
.attr("y", centerY - line.height / 2)
.attr("width", line.width)
.attr("height", Math.max(0, line.height));
}
function animateBook() {
@@ -171,7 +172,7 @@ function animateBook() {
animateBook();
function animateCounter(element, target, duration = 2000) {
function animateCounter($element, target, duration = 2000) {
const start = 0;
const startTime = performance.now();
@@ -182,12 +183,12 @@ function animateCounter(element, target, duration = 2000) {
const easedProgress = 1 - Math.pow(1 - progress, 3);
const current = Math.floor(start + (target - start) * easedProgress);
element.textContent = current.toLocaleString("ru-RU");
$element.text(current.toLocaleString("ru-RU"));
if (progress < 1) {
requestAnimationFrame(update);
} else {
element.textContent = target.toLocaleString("ru-RU");
$element.text(target.toLocaleString("ru-RU"));
}
}
@@ -204,71 +205,180 @@ async function loadStats() {
const stats = await response.json();
setTimeout(() => {
const booksEl = document.getElementById("stat-books");
const authorsEl = document.getElementById("stat-authors");
const genresEl = document.getElementById("stat-genres");
const usersEl = document.getElementById("stat-users");
const $booksEl = $("#stat-books");
const $authorsEl = $("#stat-authors");
const $genresEl = $("#stat-genres");
const $usersEl = $("#stat-users");
if (booksEl) {
animateCounter(booksEl, stats.books, 1500);
if ($booksEl.length) {
animateCounter($booksEl, stats.books, 1500);
}
setTimeout(() => {
if (authorsEl) {
animateCounter(authorsEl, stats.authors, 1500);
if ($authorsEl.length) {
animateCounter($authorsEl, stats.authors, 1500);
}
}, 150);
setTimeout(() => {
if (genresEl) {
animateCounter(genresEl, stats.genres, 1500);
if ($genresEl.length) {
animateCounter($genresEl, stats.genres, 1500);
}
}, 300);
setTimeout(() => {
if (usersEl) {
animateCounter(usersEl, stats.users, 1500);
if ($usersEl.length) {
animateCounter($usersEl, stats.users, 1500);
}
}, 450);
}, 500);
} catch (error) {
console.error("Ошибка загрузки статистики:", error);
document.getElementById("stat-books").textContent = "—";
document.getElementById("stat-authors").textContent = "—";
document.getElementById("stat-genres").textContent = "—";
document.getElementById("stat-users").textContent = "—";
$("#stat-books").text("—");
$("#stat-authors").text("—");
$("#stat-genres").text("—");
$("#stat-users").text("—");
}
}
function observeStatCards() {
const cards = document.querySelectorAll(".stat-card");
const $cards = $(".stat-card");
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.add("animate-fade-in");
entry.target.style.opacity = "1";
entry.target.style.transform = "translateY(0)";
$(entry.target)
.addClass("animate-fade-in")
.css({
opacity: "1",
transform: "translateY(0)",
});
}, index * 100);
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1 },
{ threshold: 0.1 }
);
cards.forEach((card) => {
card.style.opacity = "0";
card.style.transform = "translateY(20px)";
card.style.transition = "opacity 0.5s ease, transform 0.5s ease";
$cards.each((index, card) => {
$(card).css({
opacity: "0",
transform: "translateY(20px)",
transition: "opacity 0.5s ease, transform 0.5s ease",
});
observer.observe(card);
});
}
document.addEventListener("DOMContentLoaded", () => {
$(document).ready(() => {
loadStats();
observeStatCards();
const $guestLink = $("#guest-link");
const $userBtn = $("#user-btn");
const $userDropdown = $("#user-dropdown");
const $userArrow = $("#user-arrow");
const $userAvatar = $("#user-avatar");
const $dropdownName = $("#dropdown-name");
const $dropdownUsername = $("#dropdown-username");
const $dropdownEmail = $("#dropdown-email");
const $logoutBtn = $("#logout-btn");
let isDropdownOpen = false;
function openDropdown() {
isDropdownOpen = true;
$userDropdown.removeClass("hidden");
$userArrow.addClass("rotate-180");
}
function closeDropdown() {
isDropdownOpen = false;
$userDropdown.addClass("hidden");
$userArrow.removeClass("rotate-180");
}
$userBtn.on("click", function (e) {
e.stopPropagation();
isDropdownOpen ? closeDropdown() : openDropdown();
});
$(document).on("click", function (e) {
if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
closeDropdown();
}
});
$(document).on("keydown", function (e) {
if (e.key === "Escape" && isDropdownOpen) {
closeDropdown();
}
});
$logoutBtn.on("click", function () {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
window.location.reload();
});
function showGuest() {
$guestLink.removeClass("hidden");
$userBtn.addClass("hidden").removeClass("flex");
closeDropdown();
}
function showUser(user) {
$guestLink.addClass("hidden");
$userBtn.removeClass("hidden").addClass("flex");
const displayName = user.full_name || user.username;
const firstLetter = displayName.charAt(0).toUpperCase();
$userAvatar.text(firstLetter);
$dropdownName.text(displayName);
$dropdownUsername.text("@" + user.username);
$dropdownEmail.text(user.email);
}
function updateUserAvatar(email) {
if (!email) return;
const cleanEmail = email.trim().toLowerCase();
const emailHash = sha256(cleanEmail);
const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
const avatarImg = document.getElementById("user-avatar");
if (avatarImg) {
avatarImg.src = avatarUrl;
}
}
const token = localStorage.getItem("access_token");
if (!token) {
showGuest();
} else {
fetch("/api/auth/me", {
headers: { Authorization: "Bearer " + token },
})
.then((response) => {
if (response.ok) return response.json();
throw new Error("Unauthorized");
})
.then((user) => {
showUser(user);
updateUserAvatar(user.email);
document.getElementById("user-btn").classList.remove("hidden");
document.getElementById("guest-link").classList.add("hidden");
})
.catch(() => {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
showGuest();
});
}
});
library_service/static/styles.css
+7
View File
@@ -243,3 +243,10 @@ button:disabled {
-webkit-text-fill-color: transparent;
background-clip: text;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}