-
- `);
- }
-
- function showErrorState() {
- const $container = $("#authors-container");
- $container.html(`
-
-
-
- `
- )
- .join("")}
-
-
-
+ });
+ $("#next-page").on("click", () => {
+ if (currentPage < totalPages) {
+ currentPage++;
+ renderAuthors();
+ renderPagination();
+ scrollToTop();
+ }
+ });
+ $(".page-btn").on("click", function () {
+ currentPage = parseInt($(this).data("page"));
+ renderAuthors();
+ renderPagination();
+ scrollToTop();
+ });
+ }
+
+ function showLoadingState() {
+ $("#authors-container").html(`
+ ${Array(6)
+ .fill()
+ .map(
+ () => `
+
-
+
+
-
+
+
+
-
-
- `);
-
- $("#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();
- });
- }
- });
\ No newline at end of file
+ `,
+ )
+ .join("")}
+ `);
+ }
+
+ function scrollToTop() {
+ $("html, body").animate({ scrollTop: 0 }, 300);
+ }
+
+ $("#author-search-input").on("input", function () {
+ currentPage = 1;
+ applyFiltersAndSort();
+ });
+
+ $('input[name="sort"]').on("change", function () {
+ currentSort = $(this).val();
+ currentPage = 1;
+ applyFiltersAndSort();
+ });
+
+ $("#authors-container").on("click", ".author-card", function () {
+ window.location.href = `/author/${$(this).data("id")}`;
+ });
+});
diff --git a/library_service/static/avatar.svg b/library_service/static/avatar.svg
deleted file mode 100644
index ef1bcfa..0000000
--- a/library_service/static/avatar.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
diff --git a/library_service/static/base.js b/library_service/static/base.js
new file mode 100644
index 0000000..c2c28d7
--- /dev/null
+++ b/library_service/static/base.js
@@ -0,0 +1,116 @@
+$(function () {
+ 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");
+ const $menuContainer = $("#user-menu-area");
+
+ 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-area").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;
+ if (typeof sha256 === "undefined") {
+ console.warn("sha256 library not loaded yet");
+ 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");
+
+ if (window.location.pathname === "/auth") {
+ window.location.href = "/";
+ }
+ })
+ .catch(() => {
+ localStorage.removeItem("access_token");
+ localStorage.removeItem("refresh_token");
+ showGuest();
+ });
+ }
+});
diff --git a/library_service/static/book.js b/library_service/static/book.js
index ca50a45..fe36a01 100644
--- a/library_service/static/book.js
+++ b/library_service/static/book.js
@@ -1,321 +1,123 @@
$(document).ready(() => {
- const pathParts = window.location.pathname.split("/");
- const bookId = pathParts[pathParts.length - 1];
+ const STATUS_CONFIG = {
+ active: {
+ label: "Доступна",
+ bgClass: "bg-green-100",
+ textClass: "text-green-800",
+ icon: ``,
+ },
+ borrowed: {
+ label: "Выдана",
+ bgClass: "bg-yellow-100",
+ textClass: "text-yellow-800",
+ icon: ``,
+ },
+ reserved: {
+ label: "Забронирована",
+ bgClass: "bg-blue-100",
+ textClass: "text-blue-800",
+ icon: ``,
+ },
+ restoration: {
+ label: "На реставрации",
+ bgClass: "bg-orange-100",
+ textClass: "text-orange-800",
+ icon: ``,
+ },
+ written_off: {
+ label: "Списана",
+ bgClass: "bg-red-100",
+ textClass: "text-red-800",
+ icon: ``,
+ },
+ };
- if (!bookId || isNaN(bookId)) {
- showErrorState("Некорректный ID книги");
- return;
- }
+ function getStatusConfig(status) {
+ return (
+ STATUS_CONFIG[status] || {
+ label: status || "Неизвестно",
+ bgClass: "bg-gray-100",
+ textClass: "text-gray-800",
+ icon: "",
+ }
+ );
+ }
- loadBook(bookId);
+ const pathParts = window.location.pathname.split("/");
+ const bookId = pathParts[pathParts.length - 1];
- function loadBook(id) {
- showLoadingState();
+ if (!bookId || isNaN(bookId)) {
+ Utils.showToast("Некорректный ID книги", "error");
+ return;
+ }
- 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(`
- Ошибка загрузки
-Не удалось загрузить список авторов
- -
-
-
- `);
- }
-
- function renderAuthors(authors) {
- const $container = $("#authors-container");
- const $section = $("#authors-section");
- $container.empty();
-
- if (!authors || authors.length === 0) {
- $section.hide();
- return;
- }
-
- const $grid = $('');
-
- authors.forEach((author) => {
- const firstLetter = author.name.charAt(0).toUpperCase();
-
- const $authorCard = $(`
-
-
-
-
-
-
-
-
-
-
-
- ${escapeHtml(book.title)}
- ID: ${book.id} -- ${escapeHtml(authorsText)} -
- -
-
-
-
-
-
- Вернуться к списку книг
-
- - ${escapeHtml(book.description || "Описание отсутствует")} -
-
- ${firstLetter}
-
- ${escapeHtml(author.name)}
-
-
- `);
-
- $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 = $('');
-
- genres.forEach((genre) => {
- const $genreTag = $(`
-
-
- ${escapeHtml(genre.name)}
-
- `);
-
- $grid.append($genreTag);
- });
-
- $container.append($grid);
- }
-
- function showLoadingState() {
- const $bookCard = $("#book-card");
- const $authorsContainer = $("#authors-container");
- const $genresContainer = $("#genres-container");
-
- $bookCard.html(`
-
-
-
- `);
-
- $authorsContainer.html(`
-
-
-
-
-
-
-
-
-
-
-
-
- `);
-
- $genresContainer.html(`
-
-
-
-
-
-
-
-
- `);
- }
-
- function showErrorState(message) {
- const $bookCard = $("#book-card");
- const $authorsSection = $("#authors-section");
- const $genresSection = $("#genres-section");
-
- $authorsSection.hide();
- $genresSection.hide();
-
- $bookCard.html(`
-
- `);
-
- $("#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();
+ Api.get(`/api/books/${bookId}`)
+ .then((book) => {
+ document.title = `LiB - ${book.title}`;
+ renderBook(book);
+ })
+ .catch((error) => {
+ console.error(error);
+ Utils.showToast("Книга не найдена", "error");
+ $("#book-loader").html(
+ 'Ошибка загрузки
', + ); }); - $(document).on("click", function (e) { - if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) { - closeDropdown(); - } - }); + function renderBook(book) { + $("#book-title").text(book.title); + $("#book-id").text(`ID: ${book.id}`); + $("#book-authors-text").text( + book.authors.map((a) => a.name).join(", ") || "Автор неизвестен", + ); + $("#book-description").text(book.description || "Описание отсутствует"); - $(document).on("keydown", function (e) { - if (e.key === "Escape" && isDropdownOpen) { - closeDropdown(); - } - }); + const statusConfig = getStatusConfig(book.status); + $("#book-status") + .html(statusConfig.icon + statusConfig.label) + .removeClass() + .addClass( + `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${statusConfig.bgClass} ${statusConfig.textClass}`, + ); - $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(); + if (book.genres && book.genres.length > 0) { + $("#genres-section").removeClass("hidden"); + const $genres = $("#genres-container"); + book.genres.forEach((g) => { + $genres.append(` + + ${Utils.escapeHtml(g.name)} + + `); + }); } - 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); + if (book.authors && book.authors.length > 0) { + $("#authors-section").removeClass("hidden"); + const $authors = $("#authors-container"); + book.authors.forEach((a) => { + $authors.append(` + +
+ ${a.name.charAt(0).toUpperCase()}
+
+ ${Utils.escapeHtml(a.name)}
+
+ `);
+ });
}
- 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();
- });
- }
- });
\ No newline at end of file
+ $("#book-loader").addClass("hidden");
+ $("#book-content").removeClass("hidden");
+ }
+});
diff --git a/library_service/static/books.js b/library_service/static/books.js
index bf33c32..d36fc1a 100644
--- a/library_service/static/books.js
+++ b/library_service/static/books.js
@@ -1,4 +1,42 @@
$(document).ready(() => {
+ const STATUS_CONFIG = {
+ active: {
+ label: "Доступна",
+ bgClass: "bg-green-100",
+ textClass: "text-green-800",
+ },
+ borrowed: {
+ label: "Выдана",
+ bgClass: "bg-yellow-100",
+ textClass: "text-yellow-800",
+ },
+ reserved: {
+ label: "Забронирована",
+ bgClass: "bg-blue-100",
+ textClass: "text-blue-800",
+ },
+ restoration: {
+ label: "На реставрации",
+ bgClass: "bg-orange-100",
+ textClass: "text-orange-800",
+ },
+ written_off: {
+ label: "Списана",
+ bgClass: "bg-red-100",
+ textClass: "text-red-800",
+ },
+ };
+
+ function getStatusConfig(status) {
+ return (
+ STATUS_CONFIG[status] || {
+ label: status || "Неизвестно",
+ bgClass: "bg-gray-100",
+ textClass: "text-gray-800",
+ }
+ );
+ }
+
let selectedAuthors = new Map();
let selectedGenres = new Map();
let currentPage = 1;
@@ -10,237 +48,183 @@ $(document).ready(() => {
const authorIdsFromUrl = urlParams.getAll("author_id");
const searchFromUrl = urlParams.get("q");
- Promise.all([
- fetch("/api/authors").then((response) => response.json()),
- fetch("/api/genres").then((response) => response.json()),
- ])
+ if (searchFromUrl) $("#book-search-input").val(searchFromUrl);
+
+ Promise.all([Api.get("/api/authors"), Api.get("/api/genres")])
.then(([authorsData, genresData]) => {
- const $dropdown = $("#author-dropdown");
- authorsData.authors.forEach((author) => {
- $("")
- .addClass("p-2 hover:bg-gray-100 cursor-pointer author-item")
- .attr("data-id", author.id)
- .attr("data-name", author.name)
- .text(author.name)
- .appendTo($dropdown);
-
- if (authorIdsFromUrl.includes(String(author.id))) {
- selectedAuthors.set(author.id, author.name);
- }
- });
-
- const $list = $("#genres-list");
- genresData.genres.forEach((genre) => {
- const isChecked = genreIdsFromUrl.includes(String(genre.id));
-
- if (isChecked) {
- selectedGenres.set(genre.id, genre.name);
- }
-
- $("")
- .addClass("mb-1")
- .html(
- ``,
- )
- .appendTo($list);
- });
-
- initializeAuthorDropdown();
- initializeFilters();
-
+ initAuthors(authorsData.authors);
+ initGenres(genresData.genres);
+ initializeAuthorDropdownListeners();
+ renderChips();
loadBooks();
})
- .catch((error) => console.error("Error loading data:", error));
+ .catch((error) => {
+ console.error(error);
+ Utils.showToast("Ошибка загрузки данных", "error");
+ });
+
+ function initAuthors(authors) {
+ const $dropdown = $("#author-dropdown");
+ authors.forEach((author) => {
+ $("
")
+ .addClass(
+ "p-2 hover:bg-gray-100 cursor-pointer author-item transition-colors",
+ )
+ .attr("data-id", author.id)
+ .attr("data-name", author.name)
+ .text(author.name)
+ .appendTo($dropdown);
+
+ if (authorIdsFromUrl.includes(String(author.id))) {
+ selectedAuthors.set(author.id, author.name);
+ }
+ });
+ }
+
+ function initGenres(genres) {
+ const $list = $("#genres-list");
+ genres.forEach((genre) => {
+ const isChecked = genreIdsFromUrl.includes(String(genre.id));
+ if (isChecked) selectedGenres.set(genre.id, genre.name);
+
+ $list.append(`
+
+
+
+ `);
+ });
+
+ $list.on("change", "input", function () {
+ const id = parseInt($(this).data("id"));
+ const name = $(this).data("name");
+ this.checked ? selectedGenres.set(id, name) : selectedGenres.delete(id);
+ });
+ }
function loadBooks() {
const searchQuery = $("#book-search-input").val().trim();
-
const params = new URLSearchParams();
- if (searchQuery.length >= 3) {
- params.append("q", searchQuery);
- }
- selectedAuthors.forEach((name, id) => {
- params.append("author_ids", id);
- });
+ params.append("q", searchQuery);
+ selectedAuthors.forEach((_, id) => params.append("author_ids", id));
+ selectedGenres.forEach((_, id) => params.append("genre_ids", id));
- selectedGenres.forEach((name, id) => {
- params.append("genre_ids", id);
- });
+ const browserParams = new URLSearchParams();
+ browserParams.append("q", searchQuery);
+ selectedAuthors.forEach((_, id) => browserParams.append("author_id", id));
+ selectedGenres.forEach((_, id) => browserParams.append("genre_id", id));
- function updateBrowserUrl() {
- const params = new URLSearchParams();
-
- const searchQuery = $("#book-search-input").val().trim();
- if (searchQuery.length >= 3) {
- params.append("q", searchQuery);
- }
-
- selectedAuthors.forEach((name, id) => {
- params.append("author_id", id);
- });
-
- selectedGenres.forEach((name, id) => {
- params.append("genre_id", id);
- });
-
- const newUrl = params.toString()
- ? `${window.location.pathname}?${params.toString()}`
- : window.location.pathname;
-
- window.history.replaceState({}, "", newUrl);
- }
+ const newUrl =
+ window.location.pathname +
+ (browserParams.toString() ? `?${browserParams.toString()}` : "");
+ window.history.replaceState({}, "", newUrl);
params.append("page", currentPage);
params.append("size", pageSize);
- const url = `/api/books/filter?${params.toString()}`;
-
showLoadingState();
- updateBrowserUrl();
-
- fetch(url)
- .then((response) => {
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- return response.json();
- })
+ Api.get(`/api/books/filter?${params.toString()}`)
.then((data) => {
totalBooks = data.total;
renderBooks(data.books);
renderPagination();
})
.catch((error) => {
- console.error("Error loading books:", error);
- showErrorState();
+ console.error(error);
+ Utils.showToast("Не удалось загрузить книги", "error");
+ $("#books-container").html(
+ document.getElementById("empty-state-template").innerHTML,
+ );
});
}
function renderBooks(books) {
const $container = $("#books-container");
+ const tpl = document.getElementById("book-card-template");
+ const emptyTpl = document.getElementById("empty-state-template");
+ const badgeTpl = document.getElementById("genre-badge-template");
+
$container.empty();
if (books.length === 0) {
- $container.html(`
-
-
-
- `);
+ $container.append(emptyTpl.content.cloneNode(true));
return;
}
books.forEach((book) => {
- const authorsText =
+ const clone = tpl.content.cloneNode(true);
+ const card = clone.querySelector(".book-card");
+
+ card.dataset.id = book.id;
+ clone.querySelector(".book-title").textContent = book.title;
+ clone.querySelector(".book-authors").textContent =
book.authors.map((a) => a.name).join(", ") || "Автор неизвестен";
- const genresText =
- book.genres.map((g) => g.name).join(", ") || "Без жанра";
+ clone.querySelector(".book-desc").textContent = book.description || "";
- const $bookCard = $(`
- Книги не найдены
-Попробуйте изменить параметры поиска или фильтры
-
-
- `);
+ const statusConfig = getStatusConfig(book.status);
+ const statusEl = clone.querySelector(".book-status");
+ statusEl.textContent = statusConfig.label;
+ statusEl.classList.add(statusConfig.bgClass, statusConfig.textClass);
- $container.append($bookCard);
- });
-
- $container.on("click", ".book-card", function () {
- const bookId = $(this).data("id");
- window.location.href = `/book/${bookId}`;
+ const genresContainer = clone.querySelector(".book-genres");
+ book.genres.forEach((g) => {
+ const badge = badgeTpl.content.cloneNode(true);
+ const span = badge.querySelector("span");
+ span.textContent = g.name;
+ genresContainer.appendChild(badge);
+ });
+
+ $container.append(clone);
});
}
function renderPagination() {
- $("#pagination-container").remove();
-
+ $("#pagination-container").empty();
const totalPages = Math.ceil(totalBooks / pageSize);
-
if (totalPages <= 1) return;
const $pagination = $(`
-
-
-
-
- - ${escapeHtml(book.title)} -
-- Авторы: ${escapeHtml(authorsText)} -
-- ${escapeHtml(book.description || "Описание отсутствует")} -
-
- ${book.genres
- .map(
- (g) => `
-
- ${escapeHtml(g.name)}
-
- `,
- )
- .join("")}
-
-
-
-
-
-
- `);
+
+
+
+
+
+ `);
const $pageNumbers = $pagination.find("#page-numbers");
-
const pages = generatePageNumbers(currentPage, totalPages);
pages.forEach((page) => {
if (page === "...") {
- $pageNumbers.append(`...`);
+ $pageNumbers.append(`...`);
} else {
const isActive = page === currentPage;
$pageNumbers.append(`
-
- `);
+
+ `);
}
});
- $("#books-container").after($pagination);
+ $("#pagination-container").append($pagination);
- $("#prev-page").on("click", function () {
+ $("#prev-page").on("click", () => {
if (currentPage > 1) {
currentPage--;
loadBooks();
scrollToTop();
}
});
-
- $("#next-page").on("click", function () {
+ $("#next-page").on("click", () => {
if (currentPage < totalPages) {
currentPage++;
loadBooks();
scrollToTop();
}
});
-
$(".page-btn").on("click", function () {
const page = parseInt($(this).data("page"));
if (page !== currentPage) {
@@ -254,7 +238,6 @@ $(document).ready(() => {
function generatePageNumbers(current, total) {
const pages = [];
const delta = 2;
-
for (let i = 1; i <= total; i++) {
if (
i === 1 ||
@@ -266,7 +249,6 @@ $(document).ready(() => {
pages.push("...");
}
}
-
return pages;
}
@@ -275,115 +257,78 @@ $(document).ready(() => {
}
function showLoadingState() {
- const $container = $("#books-container");
- $container.html(`
-
- ${Array(3)
- .fill()
- .map(
- () => `
-
-
-
-
-
- `);
+ `);
}
- function showErrorState() {
- const $container = $("#books-container");
- $container.html(`
-
-
-
+ $("#books-container").html(`
+
- `,
- )
- .join("")}
-
+ ${Array(3)
+ .fill()
+ .map(
+ () => `
+
-
+
+
+
+
+ `,
+ )
+ .join("")}
-
-
- `);
+ function renderChips() {
+ const $container = $("#selected-authors-container");
+ const $dropdown = $("#author-dropdown");
- $("#retry-btn").on("click", loadBooks);
+ $container.empty();
+
+ selectedAuthors.forEach((name, id) => {
+ $(``).appendTo($container);
+ });
+
+ $dropdown.find(".author-item").each(function () {
+ const id = parseInt($(this).data("id"));
+ if (selectedAuthors.has(id)) {
+ $(this)
+ .addClass("bg-gray-200 text-gray-900 font-semibold")
+ .removeClass("hover:bg-gray-100");
+ } else {
+ $(this)
+ .removeClass("bg-gray-200 text-gray-900 font-semibold")
+ .addClass("hover:bg-gray-100");
+ }
+ });
}
- function escapeHtml(text) {
- if (!text) return "";
- const div = document.createElement("div");
- div.textContent = text;
- return div.innerHTML;
- }
-
- function initializeAuthorDropdown() {
+ function initializeAuthorDropdownListeners() {
const $input = $("#author-search-input");
const $dropdown = $("#author-dropdown");
const $container = $("#selected-authors-container");
- function updateHighlights() {
- $dropdown.find(".author-item").each(function () {
- const id = $(this).attr("data-id");
- const isSelected = selectedAuthors.has(parseInt(id));
- $(this)
- .toggleClass("bg-gray-300 text-gray-600", isSelected)
- .toggleClass("hover:bg-gray-100", !isSelected);
- });
- }
-
- function filterDropdown(query) {
- const lowerQuery = query.toLowerCase();
- $dropdown.find(".author-item").each(function () {
- $(this).toggle($(this).text().toLowerCase().includes(lowerQuery));
- });
- }
-
- function renderChips() {
- $container.find(".author-chip").remove();
- selectedAuthors.forEach((name, id) => {
- $(``).insertBefore($input);
- });
- updateHighlights();
- }
-
- function toggleAuthor(id, name) {
- id = parseInt(id);
- if (selectedAuthors.has(id)) {
- selectedAuthors.delete(id);
- } else {
- selectedAuthors.add(id, name);
- selectedAuthors.set(id, name);
- }
- $input.val("");
- filterDropdown("");
- renderChips();
- }
-
- $input.on("focus", () => $dropdown.removeClass("hidden"));
-
- $input.on("input", function () {
- filterDropdown($(this).val().toLowerCase());
+ $input.on("focus", function () {
$dropdown.removeClass("hidden");
});
- $(document).on("click", (e) => {
+ $input.on("input", function () {
+ const val = $(this).val().toLowerCase();
+ $dropdown.removeClass("hidden");
+ $dropdown.find(".author-item").each(function () {
+ const text = $(this).text().toLowerCase();
+ $(this).toggle(text.includes(val));
+ });
+ });
+
+ $(document).on("click", function (e) {
if (
- !$(e.target).closest("#selected-authors-container, #author-dropdown")
- .length
+ !$(e.target).closest(
+ "#author-search-input, #author-dropdown, #selected-authors-container",
+ ).length
) {
$dropdown.addClass("hidden");
}
@@ -391,184 +336,52 @@ $(document).ready(() => {
$dropdown.on("click", ".author-item", function (e) {
e.stopPropagation();
- toggleAuthor($(this).attr("data-id"), $(this).attr("data-name"));
- $input.focus();
+ const id = parseInt($(this).data("id"));
+ const name = $(this).data("name");
+
+ if (selectedAuthors.has(id)) {
+ selectedAuthors.delete(id);
+ } else {
+ selectedAuthors.set(id, name);
+ }
+
+ $input.val("");
+ $dropdown.find(".author-item").show();
+ renderChips();
+ $input[0].focus();
});
$container.on("click", ".remove-author", function (e) {
e.stopPropagation();
- selectedAuthors.delete(parseInt($(this).attr("data-id")));
+ const id = parseInt($(this).data("id"));
+ selectedAuthors.delete(id);
renderChips();
- $input.focus();
});
-
- $container.on("click", (e) => {
- if (!$(e.target).closest(".author-chip").length) {
- $input.focus();
- }
- });
-
- window.renderAuthorChips = renderChips;
- window.updateAuthorHighlights = updateHighlights;
}
- function initializeFilters() {
- const $bookSearch = $("#book-search-input");
- const $applyBtn = $("#apply-filters-btn");
- const $resetBtn = $("#reset-filters-btn");
+ $("#books-container").on("click", ".book-card", function () {
+ window.location.href = `/book/${$(this).data("id")}`;
+ });
- $("#genres-list").on("change", "input[type='checkbox']", function () {
- const id = parseInt($(this).attr("data-id"));
- const name = $(this).attr("data-name");
- if ($(this).is(":checked")) {
- selectedGenres.set(id, name);
- } else {
- selectedGenres.delete(id);
- }
- });
+ $("#apply-filters-btn").on("click", function () {
+ currentPage = 1;
+ loadBooks();
+ });
- $applyBtn.on("click", function () {
+ $("#reset-filters-btn").on("click", function () {
+ $("#book-search-input").val("");
+ selectedAuthors.clear();
+ selectedGenres.clear();
+ $("#genres-list input").prop("checked", false);
+ renderChips();
+ currentPage = 1;
+ loadBooks();
+ });
+
+ $("#book-search-input").on("keypress", function (e) {
+ if (e.which === 13) {
currentPage = 1;
loadBooks();
- });
-
- $resetBtn.on("click", function () {
- $bookSearch.val("");
-
- selectedAuthors.clear();
- $("#selected-authors-container .author-chip").remove();
- if (window.updateAuthorHighlights) window.updateAuthorHighlights();
-
- selectedGenres.clear();
- $("#genres-list input[type='checkbox']").prop("checked", false);
-
- currentPage = 1;
- loadBooks();
- });
-
- let searchTimeout;
- $bookSearch.on("input", function () {
- clearTimeout(searchTimeout);
- const query = $(this).val().trim();
-
- if (query.length >= 3 || query.length === 0) {
- searchTimeout = setTimeout(() => {
- currentPage = 1;
- loadBooks();
- }, 500);
- }
- });
-
- $bookSearch.on("keypress", function (e) {
- if (e.which === 13) {
- clearTimeout(searchTimeout);
- currentPage = 1;
- loadBooks();
- }
- });
- }
-
- 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();
- });
- }
});
diff --git a/library_service/static/index.js b/library_service/static/index.js
index aa5c155..9c6b6ea 100644
--- a/library_service/static/index.js
+++ b/library_service/static/index.js
@@ -11,9 +11,9 @@ const bookX = (svgWidth - bookWidth) / 2;
const bookY = (svgHeight - bookHeight) / 2;
const desiredLineSpacing = 8;
const baseLineWidth = 2;
-const maxLineWidth = 10;
+const maxLineWidth = 8;
const maxLineHeight = bookHeight - 24;
-const innerPaddingX = 10;
+const innerPaddingX = 15;
const appearStagger = 8;
let lineSpacing;
@@ -28,7 +28,7 @@ if (lineCount > 1) {
const linesSpan = lineSpacing * (lineCount - 1);
const rightBase = bookX + bookWidth - innerPaddingX - maxLineWidth;
-const lineStartX = rightBase - linesSpan;
+const lineStartX = rightBase - linesSpan + maxLineWidth;
const leftLimit = bookX + innerPaddingX;
@@ -250,18 +250,16 @@ function observeStatCards() {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
- $(entry.target)
- .addClass("animate-fade-in")
- .css({
- opacity: "1",
- 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.each((index, card) => {
@@ -277,108 +275,4 @@ function observeStatCards() {
$(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();
- });
- }
});
diff --git a/library_service/static/profile.js b/library_service/static/profile.js
index 3b212b2..c8a2021 100644
--- a/library_service/static/profile.js
+++ b/library_service/static/profile.js
@@ -1,509 +1,131 @@
$(document).ready(() => {
- let currentUser = null;
- let allRoles = [];
-
- const token = localStorage.getItem("access_token");
-
- if (!token) {
- window.location.href = "/login";
- return;
- }
-
- loadProfile();
-
- function loadProfile() {
- showLoadingState();
-
- Promise.all([
- fetch("/api/auth/me", {
- headers: { Authorization: "Bearer " + token },
- }).then((response) => {
- if (!response.ok) {
- if (response.status === 401) {
- throw new Error("Unauthorized");
- }
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- return response.json();
- }),
- fetch("/api/auth/roles", {
- headers: { Authorization: "Bearer " + token },
- }).then((response) => {
- if (response.ok) return response.json();
- return { roles: [] };
- }),
- ])
- .then(([user, rolesData]) => {
- currentUser = user;
- allRoles = rolesData.roles || [];
- renderProfile(user);
- renderAccountInfo(user);
- renderRoles(user.roles, allRoles);
- renderActions();
- document.title = `LiB - ${user.full_name || user.username}`;
- })
- .catch((error) => {
- console.error("Error loading profile:", error);
- if (error.message === "Unauthorized") {
- localStorage.removeItem("access_token");
- localStorage.removeItem("refresh_token");
- window.location.href = "/login";
- } else {
- showErrorState(error.message);
- }
- });
- }
-
- function renderProfile(user) {
- const $card = $("#profile-card");
- const displayName = user.full_name || user.username;
- const firstLetter = displayName.charAt(0).toUpperCase();
-
- const emailHash = sha256(user.email.trim().toLowerCase());
- const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
-
- $card.html(`
- Ошибка загрузки
-Не удалось загрузить список книг
- -
-
-
- `);
- }
-
- function renderAccountInfo(user) {
- const $container = $("#account-container");
-
- $container.html(`
-
- 
-
-
- ${user.is_verified ? `
-
-
-
-
-
-
- ` : ''}
-
-
- ${escapeHtml(displayName)}
-@${escapeHtml(user.username)}
- - -
- ${user.is_active ? `
-
-
- Активен
-
- ` : `
-
-
- Заблокирован
-
- `}
- ${user.is_verified ? `
-
-
- Подтверждён
-
- ` : `
-
-
- Не подтверждён
-
- `}
-
-
-
-
-
-
-
- `);
- }
-
- function renderRoles(userRoles, allRoles) {
- const $container = $("#roles-container");
-
- if (!userRoles || userRoles.length === 0) {
- $container.html(`
-
-
-
- ID пользователя
-${user.id}
+ const token = localStorage.getItem("access_token"); + if (!token) { + window.location.href = "/auth"; + return; + } + + loadProfile(); + + function loadProfile() { + Promise.all([ + Api.get("/api/auth/me"), + Api.get("/api/auth/roles").catch(() => ({ roles: [] })), + ]) + .then(async ([user, rolesData]) => { + document.title = `LiB - ${user.full_name || user.username}`; + await renderProfileHeader(user); + renderInfo(user); + renderRoles(user.roles || [], rolesData.roles || []); + + $("#account-section, #roles-section").removeClass("hidden"); + }) + .catch((error) => { + console.error(error); + Utils.showToast("Ошибка загрузки профиля", "error"); + }); + } + + async function renderProfileHeader(user) { + const avatarUrl = await Utils.getGravatarUrl(user.email); + const displayName = Utils.escapeHtml(user.full_name || user.username); + + $("#profile-card").html(` +
+
-
+
+ ${user.is_verified ? '' : ""}
+
+
+
${displayName}
+@${Utils.escapeHtml(user.username)}
+ + ${user.is_active ? "Активен" : "Заблокирован"} +
-
-
-
-
-
-
-
-
- Имя пользователя
-@${escapeHtml(user.username)}
-
-
-
-
-
-
-
-
-
- Полное имя
-${escapeHtml(user.full_name || "Не указано")}
-
-
-
-
-
-
- Email
-
- ${escapeHtml(user.email)}
-У вас нет назначенных ролей
`); - return; - } - - const roleDescriptions = {}; - allRoles.forEach((role) => { - roleDescriptions[role.name] = role.description; - }); - - const roleIcons = { - admin: ``, - librarian: ``, - member: ``, - }; - - const roleColors = { - admin: "bg-red-100 text-red-800 border-red-200", - librarian: "bg-blue-100 text-blue-800 border-blue-200", - member: "bg-green-100 text-green-800 border-green-200", - }; - - let rolesHtml = '';
-
- userRoles.forEach((roleName) => {
- const description = roleDescriptions[roleName] || "Описание недоступно";
- const icon = roleIcons[roleName] || roleIcons.member;
- const colorClass = roleColors[roleName] || roleColors.member;
-
- rolesHtml += `
-
-
-
';
-
- $container.html(rolesHtml);
- }
-
- function renderActions() {
- const $container = $("#actions-container");
-
- $container.html(`
-
- ${icon}
+ }
+
+ function renderInfo(user) {
+ const fields = [
+ { label: "ID пользователя", value: user.id },
+ { label: "Email", value: user.email },
+ { label: "Полное имя", value: user.full_name || "Не указано" },
+ ];
+
+ const html = fields
+ .map(
+ (f) => `
+
- `;
- });
-
- rolesHtml += '
+ ${f.label}
+ ${Utils.escapeHtml(String(f.value))}
-
-
- ${escapeHtml(roleName)}
-${escapeHtml(description)}
-
-
-
-
-
-
-
- `);
-
- $("#change-password-btn").on("click", openPasswordModal);
- $("#logout-profile-btn").on("click", logout);
- }
-
- function openPasswordModal() {
- $("#password-modal").removeClass("hidden").addClass("flex");
- $("#current-password").focus();
- }
-
- function closePasswordModal() {
- $("#password-modal").removeClass("flex").addClass("hidden");
- $("#password-form")[0].reset();
- $("#password-error").addClass("hidden").text("");
- }
-
- $("#close-password-modal, #cancel-password").on("click", closePasswordModal);
-
- $("#password-modal").on("click", function (e) {
- if (e.target === this) {
- closePasswordModal();
- }
- });
-
- $(document).on("keydown", function (e) {
- if (e.key === "Escape" && $("#password-modal").hasClass("flex")) {
- closePasswordModal();
- }
- });
-
- $("#password-form").on("submit", function (e) {
- e.preventDefault();
-
- const currentPassword = $("#current-password").val();
- const newPassword = $("#new-password").val();
- const confirmPassword = $("#confirm-password").val();
- const $error = $("#password-error");
-
- if (newPassword !== confirmPassword) {
- $error.text("Пароли не совпадают").removeClass("hidden");
- return;
- }
-
- if (newPassword.length < 6) {
- $error.text("Пароль должен содержать минимум 6 символов").removeClass("hidden");
- return;
- }
-
- // TODO: смена пароля, 2FA
- // fetch("/api/auth/change-password", {
- // method: "POST",
- // headers: {
- // "Content-Type": "application/json",
- // Authorization: "Bearer " + token,
- // },
- // body: JSON.stringify({
- // current_password: currentPassword,
- // new_password: newPassword,
- // }),
- // })
- // .then((response) => {
- // if (!response.ok) throw new Error("Ошибка смены пароля");
- // return response.json();
- // })
- // .then(() => {
- // closePasswordModal();
- // showNotification("Пароль успешно изменён", "success");
- // })
- // .catch((error) => {
- // $error.text(error.message).removeClass("hidden");
- // });
-
- $error.text("Функция смены пароля временно недоступна").removeClass("hidden");
- });
-
- function logout() {
- localStorage.removeItem("access_token");
- localStorage.removeItem("refresh_token");
- window.location.href = "/login";
- }
-
- function showLoadingState() {
- const $profileCard = $("#profile-card");
- const $accountContainer = $("#account-container");
- const $rolesContainer = $("#roles-container");
- const $actionsContainer = $("#actions-container");
-
- $profileCard.html(`
-
-
-
- `);
-
- $accountContainer.html(`
-
-
-
-
-
-
-
-
-
- ${Array(4)
- .fill()
- .map(
- () => `
-
- `);
-
- $rolesContainer.html(`
-
-
-
- `
- )
- .join("")}
-
-
-
-
-
-
-
- `);
-
- $actionsContainer.html(`
-
-
-
-
- `);
- }
-
- function showErrorState(message) {
- const $profileCard = $("#profile-card");
- const $accountSection = $("#account-section");
- const $rolesSection = $("#roles-section");
- const $actionsSection = $("#actions-section");
-
- $accountSection.hide();
- $rolesSection.hide();
- $actionsSection.hide();
-
- $profileCard.html(`
-
- `);
-
- $("#retry-btn").on("click", function () {
- $accountSection.show();
- $rolesSection.show();
- $actionsSection.show();
- loadProfile();
- });
- }
-
- 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();
- }
- });
-
- $logoutBtn.on("click", logout);
-
- 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);
+ `,
+ )
+ .join("");
+
+ $("#account-info").html(html);
+ }
+
+ function renderRoles(userRoles, allRoles) {
+ const $container = $("#roles-container");
+ if (userRoles.length === 0) {
+ $container.html('Нет ролей
'); + return; } - if (currentUser) { - showUser(currentUser); + const roleMap = {}; + allRoles.forEach((r) => (roleMap[r.name] = r.description)); + + const html = userRoles + .map( + (role) => ` +
+
+ `,
+ )
+ .join("");
+
+ $container.html(html);
+ }
+
+ $("#submit-password-btn").on("click", async function () {
+ const $btn = $(this);
+ const newPass = $("#new-password").val();
+ const confirm = $("#confirm-password").val();
+
+ if (newPass !== confirm) {
+ Utils.showToast("Пароли не совпадают", "error");
+ return;
}
- });
\ No newline at end of file
+
+ if (newPass.length < 4) {
+ Utils.showToast("Пароль слишком короткий", "error");
+ return;
+ }
+
+ $btn.prop("disabled", true).text("Меняем...");
+
+ try {
+ await Api.request("/api/auth/me", {
+ method: "PUT",
+ body: JSON.stringify({
+ password: newPass,
+ }),
+ });
+
+ Utils.showToast("Пароль успешно изменен", "success");
+ window.dispatchEvent(new CustomEvent("close-modal"));
+
+ $("#change-password-form")[0].reset();
+ } catch (error) {
+ console.error(error);
+ Utils.showToast(error.message || "Ошибка смены пароля", "error");
+ } finally {
+ $btn.prop("disabled", false).text("Сменить");
+ }
+ });
+});
diff --git a/library_service/static/styles.css b/library_service/static/styles.css
index db5bc29..2b4e29c 100644
--- a/library_service/static/styles.css
+++ b/library_service/static/styles.css
@@ -13,6 +13,7 @@ h1 {
letter-spacing: 10px;
}
+h2,
nav ul li a {
font-family: "Dited", sans-serif;
letter-spacing: 2.5px;
@@ -245,8 +246,8 @@ button:disabled {
}
.line-clamp-3 {
-display: -webkit-box;
--webkit-line-clamp: 3;
--webkit-box-orient: vertical;
-overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
diff --git a/library_service/static/utils.js b/library_service/static/utils.js
new file mode 100644
index 0000000..6f0c194
--- /dev/null
+++ b/library_service/static/utils.js
@@ -0,0 +1,123 @@
+const Utils = {
+ escapeHtml: (text) => {
+ if (!text) return "";
+ return text.replace(/[&<>"']/g, function (m) {
+ return {
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ }[m];
+ });
+ },
+
+ showToast: (message, type = "info") => {
+ const container = document.getElementById("toast-container");
+ if (!container) return;
+
+ const el = document.createElement("div");
+ const colors =
+ type === "error"
+ ? "bg-red-500"
+ : type === "success"
+ ? "bg-green-500"
+ : "bg-blue-500";
+ el.className = `${colors} text-white px-6 py-3 rounded shadow-lg transform transition-all duration-300 translate-y-10 opacity-0 mb-3`;
+ el.textContent = message;
+
+ container.appendChild(el);
+
+ requestAnimationFrame(() => {
+ el.classList.remove("translate-y-10", "opacity-0");
+ });
+
+ setTimeout(() => {
+ el.classList.add("translate-y-10", "opacity-0");
+ setTimeout(() => el.remove(), 300);
+ }, 3000);
+ },
+
+ getGravatarUrl: async (email) => {
+ if (!email) return "";
+ const msgBuffer = new TextEncoder().encode(email.trim().toLowerCase());
+ const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer);
+ const hashArray = Array.from(new Uint8Array(hashBuffer));
+ const hashHex = hashArray
+ .map((b) => b.toString(16).padStart(2, "0"))
+ .join("");
+ return `https://www.gravatar.com/avatar/${hashHex}?d=identicon&s=200`;
+ },
+};
+
+const Api = {
+ async request(endpoint, options = {}) {
+ const token = localStorage.getItem("access_token");
+ const headers = {
+ "Content-Type": "application/json",
+ ...options.headers,
+ };
+
+ if (token) {
+ headers["Authorization"] = `Bearer ${token}`;
+ }
+
+ const config = { ...options, headers };
+
+ try {
+ const response = await fetch(endpoint, config);
+ if (response.status === 401) {
+ Auth.logout();
+ return null;
+ }
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(errorData.detail || `Error ${response.status}`);
+ }
+ return response.json();
+ } catch (error) {
+ throw error;
+ }
+ },
+
+ get(endpoint) {
+ return this.request(endpoint, { method: "GET" });
+ },
+
+ post(endpoint, body) {
+ return this.request(endpoint, {
+ method: "POST",
+ body: JSON.stringify(body),
+ });
+ },
+
+ postForm(endpoint, formData) {
+ return this.request(endpoint, {
+ method: "POST",
+ headers: { "Content-Type": "application/x-www-form-urlencoded" },
+ body: formData.toString(),
+ });
+ },
+};
+
+const Auth = {
+ logout: () => {
+ localStorage.removeItem("access_token");
+ localStorage.removeItem("refresh_token");
+ window.location.reload();
+ },
+
+ init: async () => {
+ const token = localStorage.getItem("access_token");
+ if (!token) return;
+
+ try {
+ const user = await Api.get("/api/auth/me");
+ if (user) {
+ document.dispatchEvent(new CustomEvent("auth:login", { detail: user }));
+ }
+ } catch (e) {
+ console.error("Auth check failed", e);
+ }
+ },
+};
diff --git a/library_service/templates/auth.html b/library_service/templates/auth.html
index 715ec25..b73cf24 100644
--- a/library_service/templates/auth.html
+++ b/library_service/templates/auth.html
@@ -19,7 +19,6 @@ block content %}
Регистрация
${Utils.escapeHtml(role)}
+ ${Utils.escapeHtml(roleMap[role] || "")}
+