mirror of
https://github.com/wowlikon/LiB.git
synced 2026-02-04 04:31:09 +00:00
354 lines
11 KiB
JavaScript
354 lines
11 KiB
JavaScript
$(document).ready(() => {
|
||
if (!window.canManage()) return;
|
||
setTimeout(() => window.canManage, 100);
|
||
|
||
let allAuthors = [];
|
||
let allGenres = [];
|
||
const selectedAuthors = new Map();
|
||
const selectedGenres = new Map();
|
||
|
||
const $form = $("#create-book-form");
|
||
const $submitBtn = $("#submit-btn");
|
||
const $submitText = $("#submit-text");
|
||
const $loadingSpinner = $("#loading-spinner");
|
||
const $successModal = $("#success-modal");
|
||
|
||
Promise.all([Api.get("/api/authors"), Api.get("/api/genres")])
|
||
.then(([authorsData, genresData]) => {
|
||
allAuthors = authorsData.authors || [];
|
||
allGenres = genresData.genres || [];
|
||
initAuthors(allAuthors);
|
||
initGenres(allGenres);
|
||
initializeDropdownListeners();
|
||
})
|
||
.catch((err) => {
|
||
console.error("Ошибка загрузки данных:", err);
|
||
Utils.showToast(
|
||
"Не удалось загрузить списки авторов или жанров",
|
||
"error",
|
||
);
|
||
});
|
||
|
||
$("#book-title").on("input", function () {
|
||
$("#title-counter").text(`${this.value.length}/255`);
|
||
});
|
||
|
||
$("#book-description").on("input", function () {
|
||
$("#desc-counter").text(`${this.value.length}/2000`);
|
||
});
|
||
|
||
function initAuthors(authors) {
|
||
const $dropdown = $("#author-dropdown");
|
||
$dropdown.empty();
|
||
authors.forEach((author) => {
|
||
$("<div>")
|
||
.addClass(
|
||
"p-2 hover:bg-gray-100 cursor-pointer author-item transition-colors text-sm",
|
||
)
|
||
.attr("data-id", author.id)
|
||
.attr("data-name", author.name)
|
||
.text(author.name)
|
||
.appendTo($dropdown);
|
||
});
|
||
}
|
||
|
||
function initGenres(genres) {
|
||
const $dropdown = $("#genre-dropdown");
|
||
$dropdown.empty();
|
||
genres.forEach((genre) => {
|
||
$("<div>")
|
||
.addClass(
|
||
"p-2 hover:bg-gray-100 cursor-pointer genre-item transition-colors text-sm",
|
||
)
|
||
.attr("data-id", genre.id)
|
||
.attr("data-name", genre.name)
|
||
.text(genre.name)
|
||
.appendTo($dropdown);
|
||
});
|
||
}
|
||
|
||
function renderAuthorChips() {
|
||
const $container = $("#selected-authors-container");
|
||
const $dropdown = $("#author-dropdown");
|
||
|
||
$container.empty();
|
||
|
||
selectedAuthors.forEach((name, id) => {
|
||
$(`<span class="inline-flex items-center bg-gray-600 text-white text-sm font-medium px-2.5 pt-0.5 pb-1 rounded-full">
|
||
${Utils.escapeHtml(name)}
|
||
<button type="button" class="remove-author mt-0.5 ml-2 inline-flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-500 rounded-full w-4 h-4 transition-colors" data-id="${id}">
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
</span>`).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 renderGenreChips() {
|
||
const $container = $("#selected-genres-container");
|
||
const $dropdown = $("#genre-dropdown");
|
||
|
||
$container.empty();
|
||
|
||
selectedGenres.forEach((name, id) => {
|
||
$(`<span class="inline-flex items-center bg-gray-600 text-white text-sm font-medium px-2.5 pt-0.5 pb-1 rounded-full">
|
||
${Utils.escapeHtml(name)}
|
||
<button type="button" class="remove-genre mt-0.5 ml-2 inline-flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-500 rounded-full w-4 h-4 transition-colors" data-id="${id}">
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
</span>`).appendTo($container);
|
||
});
|
||
|
||
$dropdown.find(".genre-item").each(function () {
|
||
const id = parseInt($(this).data("id"));
|
||
if (selectedGenres.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 initializeDropdownListeners() {
|
||
const $authorInput = $("#author-search-input");
|
||
const $authorDropdown = $("#author-dropdown");
|
||
const $authorContainer = $("#selected-authors-container");
|
||
|
||
$authorInput.on("focus", function () {
|
||
$authorDropdown.removeClass("hidden");
|
||
});
|
||
|
||
$authorInput.on("input", function () {
|
||
const val = $(this).val().toLowerCase();
|
||
$authorDropdown.removeClass("hidden");
|
||
$authorDropdown.find(".author-item").each(function () {
|
||
const text = $(this).text().toLowerCase();
|
||
$(this).toggle(text.includes(val));
|
||
});
|
||
});
|
||
|
||
$authorDropdown.on("click", ".author-item", function (e) {
|
||
e.stopPropagation();
|
||
const id = parseInt($(this).data("id"));
|
||
const name = $(this).data("name");
|
||
|
||
if (selectedAuthors.has(id)) {
|
||
selectedAuthors.delete(id);
|
||
} else {
|
||
selectedAuthors.set(id, name);
|
||
}
|
||
|
||
$authorInput.val("");
|
||
$authorDropdown.find(".author-item").show();
|
||
renderAuthorChips();
|
||
$authorInput[0].focus();
|
||
});
|
||
|
||
$authorContainer.on("click", ".remove-author", function (e) {
|
||
e.stopPropagation();
|
||
const id = parseInt($(this).data("id"));
|
||
selectedAuthors.delete(id);
|
||
renderAuthorChips();
|
||
});
|
||
|
||
const $genreInput = $("#genre-search-input");
|
||
const $genreDropdown = $("#genre-dropdown");
|
||
const $genreContainer = $("#selected-genres-container");
|
||
|
||
$genreInput.on("focus", function () {
|
||
$genreDropdown.removeClass("hidden");
|
||
});
|
||
|
||
$genreInput.on("input", function () {
|
||
const val = $(this).val().toLowerCase();
|
||
$genreDropdown.removeClass("hidden");
|
||
$genreDropdown.find(".genre-item").each(function () {
|
||
const text = $(this).text().toLowerCase();
|
||
$(this).toggle(text.includes(val));
|
||
});
|
||
});
|
||
|
||
$genreDropdown.on("click", ".genre-item", function (e) {
|
||
e.stopPropagation();
|
||
const id = parseInt($(this).data("id"));
|
||
const name = $(this).data("name");
|
||
|
||
if (selectedGenres.has(id)) {
|
||
selectedGenres.delete(id);
|
||
} else {
|
||
selectedGenres.set(id, name);
|
||
}
|
||
|
||
$genreInput.val("");
|
||
$genreDropdown.find(".genre-item").show();
|
||
renderGenreChips();
|
||
$genreInput[0].focus();
|
||
});
|
||
|
||
$genreContainer.on("click", ".remove-genre", function (e) {
|
||
e.stopPropagation();
|
||
const id = parseInt($(this).data("id"));
|
||
selectedGenres.delete(id);
|
||
renderGenreChips();
|
||
});
|
||
|
||
$(document).on("click", function (e) {
|
||
if (
|
||
!$(e.target).closest(
|
||
"#author-search-input, #author-dropdown, #selected-authors-container",
|
||
).length
|
||
) {
|
||
$authorDropdown.addClass("hidden");
|
||
}
|
||
if (
|
||
!$(e.target).closest(
|
||
"#genre-search-input, #genre-dropdown, #selected-genres-container",
|
||
).length
|
||
) {
|
||
$genreDropdown.addClass("hidden");
|
||
}
|
||
});
|
||
}
|
||
|
||
$form.on("submit", async function (e) {
|
||
e.preventDefault();
|
||
|
||
const title = $("#book-title").val().trim();
|
||
const description = $("#book-description").val().trim();
|
||
const pageCount = parseInt($("#book-page-count").val()) || null;
|
||
|
||
if (!title) {
|
||
Utils.showToast("Введите название книги", "error");
|
||
return;
|
||
}
|
||
|
||
if (!pageCount) {
|
||
Utils.showToast("Введите количество страниц", "error");
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
|
||
try {
|
||
const bookPayload = {
|
||
title: title,
|
||
description: description || null,
|
||
page_count: pageCount,
|
||
};
|
||
|
||
const createdBook = await Api.post("/api/books/", bookPayload);
|
||
|
||
const linkPromises = [];
|
||
|
||
selectedAuthors.forEach((_, authorId) => {
|
||
linkPromises.push(
|
||
Api.post(
|
||
`/api/relationships/author-book?author_id=${authorId}&book_id=${createdBook.id}`,
|
||
),
|
||
);
|
||
});
|
||
|
||
selectedGenres.forEach((_, genreId) => {
|
||
linkPromises.push(
|
||
Api.post(
|
||
`/api/relationships/genre-book?genre_id=${genreId}&book_id=${createdBook.id}`,
|
||
),
|
||
);
|
||
});
|
||
|
||
if (linkPromises.length > 0) {
|
||
await Promise.allSettled(linkPromises);
|
||
}
|
||
|
||
showSuccess(createdBook);
|
||
} catch (error) {
|
||
console.error("Ошибка создания:", error);
|
||
|
||
let errorMsg = "Произошла ошибка при создании книги";
|
||
if (error.responseJSON && error.responseJSON.detail) {
|
||
errorMsg = error.responseJSON.detail;
|
||
} else if (error.status === 401) {
|
||
errorMsg = "Вы не авторизованы";
|
||
} else if (error.status === 403) {
|
||
errorMsg = "У вас недостаточно прав";
|
||
}
|
||
|
||
Utils.showToast(errorMsg, "error");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
});
|
||
|
||
function setLoading(isLoading) {
|
||
$submitBtn.prop("disabled", isLoading);
|
||
if (isLoading) {
|
||
$submitText.text("Сохранение...");
|
||
$loadingSpinner.removeClass("hidden");
|
||
} else {
|
||
$submitText.text("Создать книгу");
|
||
$loadingSpinner.addClass("hidden");
|
||
}
|
||
}
|
||
|
||
function showSuccess(book) {
|
||
$("#modal-book-title").text(book.title);
|
||
$("#modal-link-btn").attr("href", `/book/${book.id}`);
|
||
$successModal.removeClass("hidden");
|
||
}
|
||
|
||
function resetForm() {
|
||
$form[0].reset();
|
||
selectedAuthors.clear();
|
||
selectedGenres.clear();
|
||
$("#selected-authors-container").empty();
|
||
$("#selected-genres-container").empty();
|
||
$("#title-counter").text("0/255");
|
||
$("#desc-counter").text("0/2000");
|
||
|
||
$("#author-dropdown .author-item")
|
||
.removeClass("bg-gray-200 text-gray-900 font-semibold")
|
||
.addClass("hover:bg-gray-100");
|
||
$("#genre-dropdown .genre-item")
|
||
.removeClass("bg-gray-200 text-gray-900 font-semibold")
|
||
.addClass("hover:bg-gray-100");
|
||
}
|
||
|
||
$("#modal-close-btn").on("click", function () {
|
||
$successModal.addClass("hidden");
|
||
resetForm();
|
||
window.scrollTo(0, 0);
|
||
});
|
||
|
||
$successModal.on("click", function (e) {
|
||
if (e.target === this) {
|
||
window.location.href = "/books";
|
||
}
|
||
});
|
||
|
||
$(document).on("keydown", function (e) {
|
||
if (e.key === "Escape" && !$successModal.hasClass("hidden")) {
|
||
window.location.href = "/books";
|
||
}
|
||
});
|
||
});
|