mirror of
https://github.com/wowlikon/LiB.git
synced 2026-02-04 12:31:09 +00:00
Улучшение безопасности
This commit is contained in:
@@ -0,0 +1,463 @@
|
||||
$(async () => {
|
||||
let secretKey = "";
|
||||
|
||||
try {
|
||||
const data = await Api.get("/api/auth/2fa");
|
||||
secretKey = data.secret;
|
||||
$("#secret-code-display").text(secretKey);
|
||||
|
||||
const config = {
|
||||
cellSize: 10,
|
||||
radius: 4,
|
||||
strokeWidth: 1.5,
|
||||
color: "#374151",
|
||||
arcDur: 500,
|
||||
arcDelayStep: 10,
|
||||
fillDur: 300,
|
||||
fillDelayStep: 10,
|
||||
squareDur: 800,
|
||||
shrinkDur: 300,
|
||||
moveDur: 800,
|
||||
shrinkFactor: 0.9,
|
||||
moveFactor: 0.3,
|
||||
};
|
||||
|
||||
const grid = decodeBitmapToGrid(data.bitmap_b64, data.size, data.padding);
|
||||
const svgHTML = AnimationLib.generateSVG(grid, config);
|
||||
|
||||
const $container = $("#qr-container");
|
||||
$container.find(".loader").remove();
|
||||
$container.prepend(svgHTML);
|
||||
|
||||
AnimationLib.animateCircles(grid, config);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
Utils.showToast("Ошибка загрузки данных 2FA", "error");
|
||||
$("#qr-container").html(
|
||||
'<div class="text-red-500 text-sm">Ошибка загрузки</div>',
|
||||
);
|
||||
}
|
||||
|
||||
$("#secret-copy-btn").on("click", function () {
|
||||
if (!secretKey) return;
|
||||
navigator.clipboard.writeText(secretKey).then(() => {
|
||||
Utils.showToast("Код скопирован", "success");
|
||||
});
|
||||
});
|
||||
|
||||
const $inputs = $(".totp-digit");
|
||||
const $submitBtn = $("#verify-btn");
|
||||
const $msg = $("#form-message");
|
||||
|
||||
let digits = $inputs.map((_, el) => $(el).val()).get();
|
||||
while (digits.length < 6) digits.push("");
|
||||
|
||||
function updateDigitsState() {
|
||||
digits = $inputs.map((_, el) => $(el).val()).get();
|
||||
}
|
||||
|
||||
function checkCompletion() {
|
||||
updateDigitsState();
|
||||
const isComplete = digits.every((d) => d.length === 1);
|
||||
if (isComplete) {
|
||||
$submitBtn.prop("disabled", false);
|
||||
$msg.text("").removeClass("text-red-600 text-green-600");
|
||||
} else {
|
||||
$submitBtn.prop("disabled", true);
|
||||
}
|
||||
return isComplete;
|
||||
}
|
||||
|
||||
function getTargetFocusIndex() {
|
||||
const firstEmptyIndex = digits.findIndex((d) => d === "");
|
||||
return firstEmptyIndex === -1 ? 5 : firstEmptyIndex;
|
||||
}
|
||||
|
||||
$inputs.on("focus click", function (e) {
|
||||
const targetIndex = getTargetFocusIndex();
|
||||
const currentIndex = $(this).data("index");
|
||||
|
||||
if (currentIndex !== targetIndex) {
|
||||
e.preventDefault();
|
||||
setTimeout(() => {
|
||||
$inputs.eq(targetIndex).trigger("focus");
|
||||
const val = $inputs.eq(targetIndex).val();
|
||||
$inputs.eq(targetIndex).val("").val(val);
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
$inputs.on("input", function (e) {
|
||||
const index = parseInt($(this).data("index"));
|
||||
const val = $(this).val();
|
||||
const numericVal = val.replace(/\D/g, "");
|
||||
|
||||
if (!numericVal) {
|
||||
$(this).val("");
|
||||
digits[index] = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const digit = numericVal.slice(-1);
|
||||
$(this).val(digit);
|
||||
digits[index] = digit;
|
||||
|
||||
const targetIndex = getTargetFocusIndex();
|
||||
$inputs.eq(targetIndex).trigger("focus");
|
||||
|
||||
checkCompletion();
|
||||
});
|
||||
|
||||
$inputs.on("keydown", function (e) {
|
||||
const index = parseInt($(this).data("index"));
|
||||
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
e.preventDefault();
|
||||
|
||||
const currentVal = $(this).val();
|
||||
|
||||
if (currentVal) {
|
||||
$(this).val("");
|
||||
digits[index] = "";
|
||||
} else {
|
||||
if (index > 0) {
|
||||
const prevIndex = index - 1;
|
||||
$inputs.eq(prevIndex).val("");
|
||||
digits[prevIndex] = "";
|
||||
$inputs.eq(prevIndex).trigger("focus");
|
||||
}
|
||||
}
|
||||
checkCompletion();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$inputs.on("paste", function (e) {
|
||||
e.preventDefault();
|
||||
const clipboardData =
|
||||
(e.originalEvent || e).clipboardData || window.clipboardData;
|
||||
const pastedData = clipboardData
|
||||
.getData("text")
|
||||
.replace(/\D/g, "")
|
||||
.slice(0, 6);
|
||||
|
||||
if (pastedData) {
|
||||
let charIdx = 0;
|
||||
let startIndex = 0;
|
||||
if (pastedData.length === 6) {
|
||||
startIndex = 0;
|
||||
} else {
|
||||
startIndex = digits.findIndex((d) => d === "");
|
||||
if (startIndex === -1) startIndex = 0;
|
||||
}
|
||||
|
||||
for (let i = startIndex; i < 6 && charIdx < pastedData.length; i++) {
|
||||
digits[i] = pastedData[charIdx];
|
||||
$inputs.eq(i).val(pastedData[charIdx]);
|
||||
charIdx++;
|
||||
}
|
||||
|
||||
checkCompletion();
|
||||
|
||||
const nextFocus = getTargetFocusIndex();
|
||||
$inputs.eq(nextFocus).trigger("focus");
|
||||
}
|
||||
});
|
||||
|
||||
$("#totp-form").on("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
if (!checkCompletion()) return;
|
||||
|
||||
const code = digits.join("");
|
||||
$submitBtn.prop("disabled", true).text("Проверка...");
|
||||
$msg.text("").attr("class", "mb-4 text-center text-sm min-h-[20px]");
|
||||
|
||||
try {
|
||||
await Api.post("/api/auth/2fa/enable", {
|
||||
data: {
|
||||
code: code,
|
||||
},
|
||||
secret: secretKey,
|
||||
});
|
||||
|
||||
$msg.text("Код принят!").addClass("text-green-600");
|
||||
Utils.showToast("2FA успешно активирована", "success");
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = "/profile";
|
||||
}, 1000);
|
||||
} catch (err) {
|
||||
const errorText = err.message || "Неверный код";
|
||||
$msg.text(errorText).addClass("text-red-600");
|
||||
$submitBtn.prop("disabled", false).text("Подтвердить");
|
||||
}
|
||||
});
|
||||
|
||||
checkCompletion();
|
||||
});
|
||||
|
||||
function decodeBitmapToGrid(b64Data, size, padding) {
|
||||
const binaryString = atob(b64Data);
|
||||
const bytes = new Uint8Array(binaryString.length);
|
||||
for (let i = 0; i < binaryString.length; i++) {
|
||||
bytes[i] = binaryString.charCodeAt(i);
|
||||
}
|
||||
const grid = [];
|
||||
let bitIndex = 0;
|
||||
for (let r = 0; r < size; r++) {
|
||||
const row = [];
|
||||
for (let c = 0; c < size; c++) {
|
||||
const bytePos = Math.floor(bitIndex / 8);
|
||||
const bitPos = 7 - (bitIndex % 8);
|
||||
if (bytePos < bytes.length) {
|
||||
const bit = (bytes[bytePos] >> bitPos) & 1;
|
||||
row.push(bit === 0);
|
||||
} else {
|
||||
row.push(false);
|
||||
}
|
||||
bitIndex++;
|
||||
}
|
||||
grid.push(row);
|
||||
}
|
||||
return grid;
|
||||
}
|
||||
|
||||
const AnimationLib = {
|
||||
generateSVG(grid, config) {
|
||||
const { cellSize, radius, strokeWidth, color } = config;
|
||||
const width = grid[0].length * cellSize;
|
||||
const height = grid.length * cellSize;
|
||||
|
||||
let svg = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg" class="mx-auto block" style="transition: all 0.5s ease;">`;
|
||||
for (let row = 0; row < grid.length; row++) {
|
||||
for (let col = 0; col < grid[row].length; col++) {
|
||||
const cx = col * cellSize + cellSize / 2;
|
||||
const cy = row * cellSize + cellSize / 2;
|
||||
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const isClockwise = (row + col) % 2 === 0;
|
||||
const initialOffset = isClockwise ? circumference : -circumference;
|
||||
|
||||
const squareX = cx - radius;
|
||||
const squareY = cy - radius;
|
||||
const squareSize = 2 * radius;
|
||||
|
||||
svg += `<rect x="${squareX}" y="${squareY}" width="${squareSize}" height="${squareSize}" rx="${radius}" ry="${radius}" fill="${color}" opacity="0" id="square_${row}_${col}"></rect>`;
|
||||
svg += `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-dasharray="${circumference}" stroke-dashoffset="${initialOffset}" id="circle_${row}_${col}"></circle>`;
|
||||
if (grid[row][col]) {
|
||||
svg += `<circle cx="${cx}" cy="${cy}" r="0" fill="${color}" id="inner_${row}_${col}"></circle>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
svg += "</svg>";
|
||||
return svg;
|
||||
},
|
||||
|
||||
animateCircles(grid, config) {
|
||||
const {
|
||||
radius,
|
||||
cellSize,
|
||||
arcDur,
|
||||
arcDelayStep,
|
||||
fillDur,
|
||||
fillDelayStep,
|
||||
squareDur,
|
||||
shrinkDur,
|
||||
moveDur,
|
||||
shrinkFactor,
|
||||
moveFactor,
|
||||
} = config;
|
||||
|
||||
const rows = grid.length;
|
||||
const cols = grid[0].length;
|
||||
const centerRow = Math.floor(rows / 2);
|
||||
const centerCol = Math.floor(cols / 2);
|
||||
const centerX = centerCol * cellSize + cellSize / 2 - radius;
|
||||
const centerY = centerRow * cellSize + cellSize / 2 - radius;
|
||||
|
||||
const elements = [];
|
||||
for (let row = 0; row < rows; row++) {
|
||||
elements[row] = [];
|
||||
for (let col = 0; col < cols; col++) {
|
||||
elements[row][col] = {
|
||||
circle: document.getElementById(`circle_${row}_${col}`),
|
||||
square: document.getElementById(`square_${row}_${col}`),
|
||||
inner: grid[row][col]
|
||||
? document.getElementById(`inner_${row}_${col}`)
|
||||
: null,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
const { circle } = elements[row][col];
|
||||
if (circle) {
|
||||
const isClockwise = (row + col) % 2 === 0;
|
||||
setTimeout(
|
||||
() => {
|
||||
this.rafAnimate(
|
||||
circle,
|
||||
"stroke-dashoffset",
|
||||
isClockwise ? 2 * Math.PI * radius : -2 * Math.PI * radius,
|
||||
0,
|
||||
arcDur,
|
||||
);
|
||||
},
|
||||
(row + col) * arcDelayStep,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const maxDelayFirst = (rows + cols - 2) * arcDelayStep;
|
||||
|
||||
setTimeout(() => {
|
||||
let maxDist = 0;
|
||||
const fills = [];
|
||||
for (let r = 0; r < rows; r++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
if (grid[r][c]) {
|
||||
const d = Math.sqrt((r - centerRow) ** 2 + (c - centerCol) ** 2);
|
||||
fills.push({ r, c, delay: d * fillDelayStep });
|
||||
maxDist = Math.max(maxDist, d);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fills.forEach(({ r, c, delay }) => {
|
||||
const { inner } = elements[r][c];
|
||||
if (inner) {
|
||||
setTimeout(() => {
|
||||
this.rafAnimate(inner, "r", 0, radius, fillDur);
|
||||
}, delay);
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
const { circle, square, inner } = elements[r][c];
|
||||
if (grid[r][c]) {
|
||||
this.rafMorphToSquare(circle, square, inner, radius, squareDur);
|
||||
} else {
|
||||
this.rafFadeOut(circle, squareDur);
|
||||
if (square) square.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
if (grid[r][c]) {
|
||||
this.rafShrink(
|
||||
elements[r][c].square,
|
||||
2 * radius,
|
||||
2 * radius * shrinkFactor,
|
||||
shrinkDur,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
if (grid[r][c]) {
|
||||
const sq = elements[r][c].square;
|
||||
const cX = parseFloat(sq.getAttribute("x"));
|
||||
const cY = parseFloat(sq.getAttribute("y"));
|
||||
const tX = cX + (centerX - cX) * moveFactor;
|
||||
const tY = cY + (centerY - cY) * moveFactor;
|
||||
this.rafMove(sq, cX, cY, tX, tY, moveDur);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const svg = document.querySelector("#qr-container svg");
|
||||
if (svg) {
|
||||
svg.style.borderRadius = "10%";
|
||||
svg.style.border = "5px black dotted";
|
||||
}
|
||||
}, moveDur);
|
||||
}, shrinkDur);
|
||||
}, squareDur);
|
||||
},
|
||||
maxDist * fillDelayStep + fillDur,
|
||||
);
|
||||
}, maxDelayFirst + arcDur);
|
||||
},
|
||||
|
||||
rafAnimate(el, attr, from, to, dur) {
|
||||
const start = performance.now();
|
||||
const step = (now) => {
|
||||
const p = Math.min((now - start) / dur, 1);
|
||||
el.setAttribute(attr, from + (to - from) * p);
|
||||
if (p < 1) requestAnimationFrame(step);
|
||||
};
|
||||
requestAnimationFrame(step);
|
||||
},
|
||||
rafMorphToSquare(circle, square, inner, radius, dur) {
|
||||
const start = performance.now();
|
||||
const step = (now) => {
|
||||
const p = Math.min((now - start) / dur, 1);
|
||||
const r = radius * (1 - p);
|
||||
square.setAttribute("rx", r);
|
||||
square.setAttribute("ry", r);
|
||||
square.setAttribute("opacity", p);
|
||||
circle.setAttribute("opacity", 1 - p);
|
||||
if (p < 1) requestAnimationFrame(step);
|
||||
else {
|
||||
circle.remove();
|
||||
if (inner) inner.remove();
|
||||
square.removeAttribute("opacity");
|
||||
}
|
||||
};
|
||||
requestAnimationFrame(step);
|
||||
},
|
||||
rafFadeOut(el, dur) {
|
||||
const start = performance.now();
|
||||
const step = (now) => {
|
||||
const p = Math.min((now - start) / dur, 1);
|
||||
el.setAttribute("opacity", 1 - p);
|
||||
if (p < 1) requestAnimationFrame(step);
|
||||
else el.remove();
|
||||
};
|
||||
requestAnimationFrame(step);
|
||||
},
|
||||
rafShrink(el, fromS, toS, dur) {
|
||||
const start = performance.now();
|
||||
const diff = fromS - toS;
|
||||
const ox = parseFloat(el.getAttribute("x"));
|
||||
const oy = parseFloat(el.getAttribute("y"));
|
||||
const step = (now) => {
|
||||
const p = Math.min((now - start) / dur, 1);
|
||||
const cur = fromS - diff * p;
|
||||
const off = (fromS - cur) / 2;
|
||||
el.setAttribute("width", cur);
|
||||
el.setAttribute("height", cur);
|
||||
el.setAttribute("x", ox + off);
|
||||
el.setAttribute("y", oy + off);
|
||||
if (p < 1) requestAnimationFrame(step);
|
||||
};
|
||||
requestAnimationFrame(step);
|
||||
},
|
||||
rafMove(el, fx, fy, tx, ty, dur) {
|
||||
const start = performance.now();
|
||||
const step = (now) => {
|
||||
const p = Math.min((now - start) / dur, 1);
|
||||
const ease = 1 - Math.pow(1 - p, 3);
|
||||
el.setAttribute("x", fx + (tx - fx) * ease);
|
||||
el.setAttribute("y", fy + (ty - fy) * ease);
|
||||
if (p < 1) requestAnimationFrame(step);
|
||||
};
|
||||
requestAnimationFrame(step);
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,267 @@
|
||||
$(document).ready(() => {
|
||||
if (!window.isAdmin()) {
|
||||
$(".container").html(
|
||||
'<div class="bg-white rounded-xl shadow-sm p-8 text-center border border-gray-100"><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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg><h3 class="text-lg font-medium text-gray-900 mb-2">Доступ запрещён</h3><p class="text-gray-500 mb-4">Только администраторы могут просматривать аналитику</p><a href="/" class="inline-block px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">На главную</a></div>',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
let loansChart = null;
|
||||
let returnsChart = null;
|
||||
let currentPeriod = 30;
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
$("#period-select").on("change", function () {
|
||||
currentPeriod = parseInt($(this).val());
|
||||
loadAnalytics();
|
||||
});
|
||||
|
||||
$("#refresh-btn").on("click", loadAnalytics);
|
||||
|
||||
loadAnalytics();
|
||||
}
|
||||
|
||||
async function loadAnalytics() {
|
||||
try {
|
||||
const data = await Api.get(`/api/loans/analytics?days=${currentPeriod}`);
|
||||
renderSummary(data.summary);
|
||||
renderCharts(data);
|
||||
renderTopBooks(data.top_books);
|
||||
} catch (error) {
|
||||
console.error("Failed to load analytics", error);
|
||||
Utils.showToast("Ошибка загрузки аналитики", "error");
|
||||
}
|
||||
}
|
||||
|
||||
function renderSummary(summary) {
|
||||
$("#total-loans").text(summary.total_loans || 0);
|
||||
$("#active-loans").text(summary.active_loans || 0);
|
||||
$("#returned-loans").text(summary.returned_loans || 0);
|
||||
$("#overdue-loans").text(summary.overdue_loans || 0);
|
||||
$("#reserved-books").text(summary.reserved_books || 0);
|
||||
$("#borrowed-books").text(summary.borrowed_books || 0);
|
||||
}
|
||||
|
||||
function renderCharts(data) {
|
||||
const startDate = new Date(data.start_date);
|
||||
const endDate = new Date(data.end_date);
|
||||
const dates = [];
|
||||
const loansData = [];
|
||||
const returnsData = [];
|
||||
|
||||
for (
|
||||
let d = new Date(startDate);
|
||||
d <= endDate;
|
||||
d.setDate(d.getDate() + 1)
|
||||
) {
|
||||
const dateStr = d.toISOString().split("T")[0];
|
||||
dates.push(
|
||||
new Date(d).toLocaleDateString("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
}),
|
||||
);
|
||||
loansData.push(data.daily_loans[dateStr] || 0);
|
||||
returnsData.push(data.daily_returns[dateStr] || 0);
|
||||
}
|
||||
|
||||
const loansCtx = document.getElementById("loans-chart");
|
||||
if (loansChart) {
|
||||
loansChart.destroy();
|
||||
}
|
||||
loansChart = new Chart(loansCtx, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: dates,
|
||||
datasets: [
|
||||
{
|
||||
label: "Выдачи",
|
||||
data: loansData,
|
||||
borderColor: "rgb(75, 85, 99)",
|
||||
backgroundColor: "rgba(75, 85, 99, 0.05)",
|
||||
borderWidth: 1.5,
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 2.5,
|
||||
pointHoverRadius: 4,
|
||||
pointBackgroundColor: "rgb(75, 85, 99)",
|
||||
pointBorderColor: "#fff",
|
||||
pointBorderWidth: 1.5,
|
||||
pointStyle: "circle",
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
padding: 10,
|
||||
titleFont: { size: 12, weight: "500" },
|
||||
bodyFont: { size: 11 },
|
||||
cornerRadius: 6,
|
||||
displayColors: false,
|
||||
borderColor: "rgba(255, 255, 255, 0.08)",
|
||||
borderWidth: 1,
|
||||
titleSpacing: 4,
|
||||
bodySpacing: 4,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: "rgba(0, 0, 0, 0.03)",
|
||||
drawBorder: false,
|
||||
lineWidth: 1,
|
||||
},
|
||||
ticks: {
|
||||
precision: 0,
|
||||
font: { size: 10 },
|
||||
color: "rgba(0, 0, 0, 0.4)",
|
||||
padding: 8,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
minRotation: 0,
|
||||
font: { size: 10 },
|
||||
color: "rgba(0, 0, 0, 0.4)",
|
||||
padding: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const returnsCtx = document.getElementById("returns-chart");
|
||||
if (returnsChart) {
|
||||
returnsChart.destroy();
|
||||
}
|
||||
returnsChart = new Chart(returnsCtx, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: dates,
|
||||
datasets: [
|
||||
{
|
||||
label: "Возвраты",
|
||||
data: returnsData,
|
||||
borderColor: "rgb(107, 114, 128)",
|
||||
backgroundColor: "rgba(107, 114, 128, 0.05)",
|
||||
borderWidth: 1.5,
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 2.5,
|
||||
pointHoverRadius: 4,
|
||||
pointBackgroundColor: "rgb(107, 114, 128)",
|
||||
pointBorderColor: "#fff",
|
||||
pointBorderWidth: 1.5,
|
||||
pointStyle: "circle",
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
padding: 10,
|
||||
titleFont: { size: 12, weight: "500" },
|
||||
bodyFont: { size: 11 },
|
||||
cornerRadius: 6,
|
||||
displayColors: false,
|
||||
borderColor: "rgba(255, 255, 255, 0.08)",
|
||||
borderWidth: 1,
|
||||
titleSpacing: 4,
|
||||
bodySpacing: 4,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: "rgba(0, 0, 0, 0.03)",
|
||||
drawBorder: false,
|
||||
lineWidth: 1,
|
||||
},
|
||||
ticks: {
|
||||
precision: 0,
|
||||
font: { size: 10 },
|
||||
color: "rgba(0, 0, 0, 0.4)",
|
||||
padding: 8,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
minRotation: 0,
|
||||
font: { size: 10 },
|
||||
color: "rgba(0, 0, 0, 0.4)",
|
||||
padding: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function renderTopBooks(topBooks) {
|
||||
const $container = $("#top-books-container");
|
||||
$container.empty();
|
||||
|
||||
if (!topBooks || topBooks.length === 0) {
|
||||
$container.html(
|
||||
'<div class="text-center text-gray-500 py-8">Нет данных</div>',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
topBooks.forEach((book, index) => {
|
||||
const $item = $(`
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100 hover:bg-gray-100 transition-colors">
|
||||
<div class="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div class="w-7 h-7 bg-gray-600 text-white rounded-full flex items-center justify-center font-medium text-xs flex-shrink-0">
|
||||
${index + 1}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<a href="/book/${book.book_id}" class="text-sm font-medium text-gray-900 hover:text-gray-600 transition-colors block truncate">
|
||||
${Utils.escapeHtml(book.title)}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-shrink-0 ml-3">
|
||||
<span class="px-2.5 py-1 bg-gray-200 text-gray-700 rounded-full text-xs font-medium">
|
||||
${book.loan_count} ${book.loan_count === 1 ? "выдача" : book.loan_count < 5 ? "выдачи" : "выдач"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
$container.append($item);
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,553 @@
|
||||
$(() => {
|
||||
const PARTIAL_TOKEN_KEY = "partial_token";
|
||||
const PARTIAL_USERNAME_KEY = "partial_username";
|
||||
const TOTP_PERIOD = 30;
|
||||
const CIRCLE_CIRCUMFERENCE = 2 * Math.PI * 38;
|
||||
|
||||
let loginState = {
|
||||
step: "credentials",
|
||||
partialToken: null,
|
||||
username: "",
|
||||
rememberMe: false,
|
||||
};
|
||||
|
||||
let registeredRecoveryCodes = [];
|
||||
let totpAnimationFrame = null;
|
||||
|
||||
function getTotpProgress() {
|
||||
const now = Date.now() / 1000;
|
||||
const elapsed = now % TOTP_PERIOD;
|
||||
return elapsed / TOTP_PERIOD;
|
||||
}
|
||||
|
||||
function updateTotpTimer() {
|
||||
const circle = document.getElementById("lock-progress-circle");
|
||||
if (!circle) return;
|
||||
|
||||
const progress = getTotpProgress();
|
||||
const offset = CIRCLE_CIRCUMFERENCE * (1 - progress);
|
||||
circle.style.strokeDashoffset = offset;
|
||||
|
||||
totpAnimationFrame = requestAnimationFrame(updateTotpTimer);
|
||||
}
|
||||
|
||||
function startTotpTimer() {
|
||||
stopTotpTimer();
|
||||
updateTotpTimer();
|
||||
}
|
||||
|
||||
function stopTotpTimer() {
|
||||
if (totpAnimationFrame) {
|
||||
cancelAnimationFrame(totpAnimationFrame);
|
||||
totpAnimationFrame = null;
|
||||
}
|
||||
}
|
||||
|
||||
function resetCircle() {
|
||||
const circle = document.getElementById("lock-progress-circle");
|
||||
if (circle) {
|
||||
circle.style.strokeDashoffset = CIRCLE_CIRCUMFERENCE;
|
||||
}
|
||||
}
|
||||
|
||||
function initLoginState() {
|
||||
const savedToken = sessionStorage.getItem(PARTIAL_TOKEN_KEY);
|
||||
const savedUsername = sessionStorage.getItem(PARTIAL_USERNAME_KEY);
|
||||
|
||||
if (savedToken && savedUsername) {
|
||||
loginState.partialToken = savedToken;
|
||||
loginState.username = savedUsername;
|
||||
loginState.step = "2fa";
|
||||
|
||||
$("#login-username").val(savedUsername);
|
||||
$("#credentials-section").addClass("hidden");
|
||||
$("#totp-section").removeClass("hidden");
|
||||
$("#login-submit").text("Подтвердить");
|
||||
|
||||
startTotpTimer();
|
||||
|
||||
setTimeout(() => {
|
||||
const totpInput = document.getElementById("login-totp");
|
||||
if (totpInput) totpInput.focus();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function savePartialToken(token, username) {
|
||||
sessionStorage.setItem(PARTIAL_TOKEN_KEY, token);
|
||||
sessionStorage.setItem(PARTIAL_USERNAME_KEY, username);
|
||||
}
|
||||
|
||||
function clearPartialToken() {
|
||||
sessionStorage.removeItem(PARTIAL_TOKEN_KEY);
|
||||
sessionStorage.removeItem(PARTIAL_USERNAME_KEY);
|
||||
}
|
||||
|
||||
function showForm(formId) {
|
||||
$("#login-form, #register-form, #reset-password-form").addClass("hidden");
|
||||
$(formId).removeClass("hidden");
|
||||
|
||||
$("#login-tab, #register-tab")
|
||||
.removeClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500")
|
||||
.addClass("text-gray-400 hover:text-gray-600");
|
||||
|
||||
if (formId === "#login-form") {
|
||||
$("#login-tab")
|
||||
.removeClass("text-gray-400 hover:text-gray-600")
|
||||
.addClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500");
|
||||
resetLoginState();
|
||||
} else if (formId === "#register-form") {
|
||||
$("#register-tab")
|
||||
.removeClass("text-gray-400 hover:text-gray-600")
|
||||
.addClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500");
|
||||
}
|
||||
}
|
||||
|
||||
function resetLoginState() {
|
||||
clearPartialToken();
|
||||
stopTotpTimer();
|
||||
loginState = {
|
||||
step: "credentials",
|
||||
partialToken: null,
|
||||
username: "",
|
||||
rememberMe: false,
|
||||
};
|
||||
$("#totp-section").addClass("hidden");
|
||||
$("#login-totp").val("");
|
||||
$("#credentials-section").removeClass("hidden");
|
||||
$("#login-submit").text("Войти");
|
||||
resetCircle();
|
||||
}
|
||||
|
||||
$("#login-tab").on("click", () => showForm("#login-form"));
|
||||
$("#register-tab").on("click", () => showForm("#register-form"));
|
||||
$("#forgot-password-btn").on("click", () => showForm("#reset-password-form"));
|
||||
$("#back-to-login-btn").on("click", () => showForm("#login-form"));
|
||||
|
||||
$("body").on("click", ".toggle-password", function () {
|
||||
const $btn = $(this);
|
||||
const $input = $btn.siblings("input");
|
||||
const isPassword = $input.attr("type") === "password";
|
||||
$input.attr("type", isPassword ? "text" : "password");
|
||||
$btn.find("svg").toggleClass("hidden");
|
||||
});
|
||||
|
||||
$("#register-password").on("input", function () {
|
||||
const password = $(this).val();
|
||||
let strength = 0;
|
||||
|
||||
if (password.length >= 8) strength++;
|
||||
if (password.length >= 12) strength++;
|
||||
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
|
||||
if (/\d/.test(password)) strength++;
|
||||
if (/[^a-zA-Z0-9]/.test(password)) strength++;
|
||||
|
||||
const levels = [
|
||||
{ width: "0%", color: "", text: "" },
|
||||
{ width: "20%", color: "bg-red-500", text: "Очень слабый" },
|
||||
{ width: "40%", color: "bg-orange-500", text: "Слабый" },
|
||||
{ width: "60%", color: "bg-yellow-500", text: "Средний" },
|
||||
{ width: "80%", color: "bg-lime-500", text: "Хороший" },
|
||||
{ width: "100%", color: "bg-green-500", text: "Отличный" },
|
||||
];
|
||||
|
||||
const level = levels[strength];
|
||||
$("#password-strength-bar")
|
||||
.css("width", level.width)
|
||||
.attr("class", "h-full transition-all duration-300 " + level.color);
|
||||
$("#password-strength-text").text(level.text);
|
||||
|
||||
checkPasswordMatch();
|
||||
});
|
||||
|
||||
function checkPasswordMatch() {
|
||||
const password = $("#register-password").val();
|
||||
const confirm = $("#register-password-confirm").val();
|
||||
if (confirm && password !== confirm) {
|
||||
$("#password-match-error").removeClass("hidden");
|
||||
return false;
|
||||
}
|
||||
$("#password-match-error").addClass("hidden");
|
||||
return true;
|
||||
}
|
||||
|
||||
$("#register-password-confirm").on("input", checkPasswordMatch);
|
||||
|
||||
function formatRecoveryCode(input) {
|
||||
let value = input.value.toUpperCase().replace(/[^0-9A-F]/g, "");
|
||||
let formatted = "";
|
||||
for (let i = 0; i < value.length && i < 16; i++) {
|
||||
if (i > 0 && i % 4 === 0) formatted += "-";
|
||||
formatted += value[i];
|
||||
}
|
||||
input.value = formatted;
|
||||
}
|
||||
|
||||
$("#reset-recovery-code").on("input", function () {
|
||||
formatRecoveryCode(this);
|
||||
});
|
||||
|
||||
$("#login-totp").on("input", function () {
|
||||
this.value = this.value.replace(/\D/g, "").slice(0, 6);
|
||||
if (this.value.length === 6) {
|
||||
$("#login-form").trigger("submit");
|
||||
}
|
||||
});
|
||||
|
||||
$("#back-to-credentials-btn").on("click", function () {
|
||||
resetLoginState();
|
||||
});
|
||||
|
||||
$("#login-form").on("submit", async function (event) {
|
||||
event.preventDefault();
|
||||
const $submitBtn = $("#login-submit");
|
||||
|
||||
if (loginState.step === "credentials") {
|
||||
const username = $("#login-username").val();
|
||||
const password = $("#login-password").val();
|
||||
const rememberMe = $("#remember-me").prop("checked");
|
||||
|
||||
loginState.username = username;
|
||||
loginState.rememberMe = rememberMe;
|
||||
|
||||
$submitBtn.prop("disabled", true).text("Вход...");
|
||||
|
||||
try {
|
||||
const formData = new URLSearchParams();
|
||||
formData.append("username", username);
|
||||
formData.append("password", password);
|
||||
|
||||
const data = await Api.postForm("/api/auth/token", formData);
|
||||
|
||||
if (data.requires_2fa && data.partial_token) {
|
||||
loginState.partialToken = data.partial_token;
|
||||
loginState.step = "2fa";
|
||||
|
||||
savePartialToken(data.partial_token, username);
|
||||
|
||||
$("#credentials-section").addClass("hidden");
|
||||
$("#totp-section").removeClass("hidden");
|
||||
|
||||
startTotpTimer();
|
||||
|
||||
const totpInput = document.getElementById("login-totp");
|
||||
if (totpInput) totpInput.focus();
|
||||
|
||||
$submitBtn.text("Подтвердить");
|
||||
Utils.showToast("Введите код из приложения аутентификатора", "info");
|
||||
} else if (data.access_token) {
|
||||
clearPartialToken();
|
||||
saveTokensAndRedirect(data, rememberMe);
|
||||
}
|
||||
} catch (error) {
|
||||
Utils.showToast(error.message || "Ошибка входа", "error");
|
||||
} finally {
|
||||
$submitBtn.prop("disabled", false);
|
||||
if (loginState.step === "credentials") {
|
||||
$submitBtn.text("Войти");
|
||||
}
|
||||
}
|
||||
} else if (loginState.step === "2fa") {
|
||||
const totpCode = $("#login-totp").val();
|
||||
|
||||
if (!totpCode || totpCode.length !== 6) {
|
||||
Utils.showToast("Введите 6-значный код", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
$submitBtn.prop("disabled", true).text("Проверка...");
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/auth/2fa/verify", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${loginState.partialToken}`,
|
||||
},
|
||||
body: JSON.stringify({ code: totpCode }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
|
||||
if (response.status === 401) {
|
||||
resetLoginState();
|
||||
throw new Error(
|
||||
"Время сессии истекло. Пожалуйста, войдите заново.",
|
||||
);
|
||||
}
|
||||
|
||||
throw new Error(errorData.detail || "Неверный код");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
clearPartialToken();
|
||||
stopTotpTimer();
|
||||
saveTokensAndRedirect(data, loginState.rememberMe);
|
||||
} catch (error) {
|
||||
Utils.showToast(error.message || "Неверный код", "error");
|
||||
$("#login-totp").val("");
|
||||
const totpInput = document.getElementById("login-totp");
|
||||
if (totpInput) totpInput.focus();
|
||||
} finally {
|
||||
$submitBtn.prop("disabled", false).text("Подтвердить");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function saveTokensAndRedirect(data, rememberMe) {
|
||||
const storage = rememberMe ? localStorage : sessionStorage;
|
||||
const otherStorage = rememberMe ? sessionStorage : localStorage;
|
||||
|
||||
storage.setItem("access_token", data.access_token);
|
||||
if (data.refresh_token) {
|
||||
storage.setItem("refresh_token", data.refresh_token);
|
||||
}
|
||||
|
||||
otherStorage.removeItem("access_token");
|
||||
otherStorage.removeItem("refresh_token");
|
||||
|
||||
window.location.href = "/";
|
||||
}
|
||||
|
||||
$("#register-form").on("submit", async function (event) {
|
||||
event.preventDefault();
|
||||
const $submitBtn = $("#register-submit");
|
||||
const pass = $("#register-password").val();
|
||||
const confirm = $("#register-password-confirm").val();
|
||||
|
||||
if (pass !== confirm) {
|
||||
Utils.showToast("Пароли не совпадают", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const userData = {
|
||||
username: $("#register-username").val(),
|
||||
email: $("#register-email").val(),
|
||||
full_name: $("#register-fullname").val() || null,
|
||||
password: pass,
|
||||
};
|
||||
|
||||
$submitBtn.prop("disabled", true).text("Регистрация...");
|
||||
|
||||
try {
|
||||
const response = await Api.post("/api/auth/register", userData);
|
||||
|
||||
if (response.recovery_codes && response.recovery_codes.codes) {
|
||||
registeredRecoveryCodes = response.recovery_codes.codes;
|
||||
showRecoveryCodesModal(registeredRecoveryCodes, userData.username);
|
||||
} else {
|
||||
Utils.showToast("Регистрация успешна! Войдите в систему.", "success");
|
||||
setTimeout(() => {
|
||||
showForm("#login-form");
|
||||
$("#login-username").val(userData.username);
|
||||
}, 1500);
|
||||
}
|
||||
} catch (error) {
|
||||
let msg = error.message;
|
||||
if (error.detail && Array.isArray(error.detail)) {
|
||||
msg = error.detail.map((e) => e.msg).join(". ");
|
||||
}
|
||||
Utils.showToast(msg || "Ошибка регистрации", "error");
|
||||
} finally {
|
||||
$submitBtn.prop("disabled", false).text("Зарегистрироваться");
|
||||
}
|
||||
});
|
||||
|
||||
function showRecoveryCodesModal(codes, username) {
|
||||
const $list = $("#recovery-codes-list");
|
||||
$list.empty();
|
||||
|
||||
codes.forEach((code, index) => {
|
||||
$list.append(`
|
||||
<div class="py-1 px-2 bg-white rounded border select-all font-mono">
|
||||
${index + 1}. ${Utils.escapeHtml(code)}
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
|
||||
$("#codes-saved-checkbox").prop("checked", false);
|
||||
$("#close-recovery-modal-btn").prop("disabled", true);
|
||||
$("#recovery-codes-modal").data("username", username);
|
||||
$("#recovery-codes-modal").removeClass("hidden");
|
||||
}
|
||||
|
||||
function renderRecoveryCodesStatus(usedCodes) {
|
||||
return usedCodes
|
||||
.map((used, index) => {
|
||||
const codeDisplay = "████-████-████-████";
|
||||
const statusClass = used
|
||||
? "text-gray-300 line-through"
|
||||
: "text-green-600";
|
||||
const statusIcon = used ? "✗" : "✓";
|
||||
return `
|
||||
<div class="flex items-center justify-between py-1 px-2 rounded ${used ? "bg-gray-50" : "bg-green-50"}">
|
||||
<span class="font-mono ${statusClass}">${index + 1}. ${codeDisplay}</span>
|
||||
<span class="${used ? "text-gray-400" : "text-green-600"}">${statusIcon}</span>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
$("#codes-saved-checkbox").on("change", function () {
|
||||
$("#close-recovery-modal-btn").prop("disabled", !this.checked);
|
||||
});
|
||||
|
||||
$("#copy-codes-btn").on("click", function () {
|
||||
const codesText = registeredRecoveryCodes.join("\n");
|
||||
navigator.clipboard.writeText(codesText).then(() => {
|
||||
Utils.showToast("Коды скопированы в буфер обмена", "success");
|
||||
});
|
||||
});
|
||||
|
||||
$("#download-codes-btn").on("click", function () {
|
||||
const username = $("#recovery-codes-modal").data("username") || "user";
|
||||
const codesText = `Резервные коды для аккаунта: ${username}\nДата: ${new Date().toLocaleString()}\n\n${registeredRecoveryCodes.map((c, i) => `${i + 1}. ${c}`).join("\n")}\n\nХраните эти коды в надёжном месте!`;
|
||||
|
||||
const blob = new Blob([codesText], { type: "text/plain;charset=utf-8" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `recovery-codes-${username}.txt`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
Utils.showToast("Файл с кодами скачан", "success");
|
||||
});
|
||||
|
||||
$("#close-recovery-modal-btn").on("click", function () {
|
||||
const username = $("#recovery-codes-modal").data("username");
|
||||
$("#recovery-codes-modal").addClass("hidden");
|
||||
|
||||
Utils.showToast("Регистрация успешна! Войдите в систему.", "success");
|
||||
showForm("#login-form");
|
||||
$("#login-username").val(username);
|
||||
});
|
||||
|
||||
function checkResetPasswordMatch() {
|
||||
const password = $("#reset-new-password").val();
|
||||
const confirm = $("#reset-confirm-password").val();
|
||||
if (confirm && password !== confirm) {
|
||||
$("#reset-password-match-error").removeClass("hidden");
|
||||
return false;
|
||||
}
|
||||
$("#reset-password-match-error").addClass("hidden");
|
||||
return true;
|
||||
}
|
||||
|
||||
$("#reset-confirm-password").on("input", checkResetPasswordMatch);
|
||||
|
||||
$("#reset-password-form").on("submit", async function (event) {
|
||||
event.preventDefault();
|
||||
const $submitBtn = $("#reset-submit");
|
||||
|
||||
const newPassword = $("#reset-new-password").val();
|
||||
const confirmPassword = $("#reset-confirm-password").val();
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
Utils.showToast("Пароли не совпадают", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 8) {
|
||||
Utils.showToast("Пароль должен содержать минимум 8 символов", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
username: $("#reset-username").val(),
|
||||
recovery_code: $("#reset-recovery-code").val().toUpperCase(),
|
||||
new_password: newPassword,
|
||||
};
|
||||
|
||||
if (
|
||||
!/^[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}$/.test(
|
||||
data.recovery_code,
|
||||
)
|
||||
) {
|
||||
Utils.showToast("Неверный формат резервного кода", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
$submitBtn.prop("disabled", true).text("Сброс...");
|
||||
|
||||
try {
|
||||
const response = await Api.post("/api/auth/password/reset", data);
|
||||
|
||||
showPasswordResetResult(response, data.username);
|
||||
} catch (error) {
|
||||
Utils.showToast(error.message || "Ошибка сброса пароля", "error");
|
||||
$submitBtn.prop("disabled", false).text("Сбросить пароль");
|
||||
}
|
||||
});
|
||||
|
||||
function showPasswordResetResult(response, username) {
|
||||
const $form = $("#reset-password-form");
|
||||
|
||||
$form.html(`
|
||||
<div class="text-center mb-4">
|
||||
<div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-3">
|
||||
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">Пароль успешно изменён!</h3>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<p class="text-sm text-gray-600 mb-2 text-center">
|
||||
Осталось резервных кодов: <strong class="${response.remaining <= 2 ? "text-red-600" : "text-green-600"}">${response.remaining}</strong> из ${response.total}
|
||||
</p>
|
||||
|
||||
${
|
||||
response.should_regenerate
|
||||
? `
|
||||
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-3">
|
||||
<p class="text-sm text-yellow-800 flex items-center gap-2">
|
||||
<svg class="w-4 h-4 flex-shrink-0" 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"></path>
|
||||
</svg>
|
||||
Рекомендуем сгенерировать новые коды в профиле
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-3 space-y-1 max-h-48 overflow-y-auto">
|
||||
<p class="text-xs text-gray-500 mb-2 text-center">Статус резервных кодов:</p>
|
||||
${renderRecoveryCodesStatus(response.used_codes)}
|
||||
</div>
|
||||
|
||||
${
|
||||
response.generated_at
|
||||
? `
|
||||
<p class="text-xs text-gray-400 mt-2 text-center">
|
||||
Сгенерированы: ${new Date(response.generated_at).toLocaleString()}
|
||||
</p>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
|
||||
<button type="button" id="goto-login-after-reset"
|
||||
class="w-full bg-gray-500 text-white py-3 px-4 rounded-lg hover:bg-gray-600 transition duration-200 font-medium">
|
||||
Перейти к входу
|
||||
</button>
|
||||
`);
|
||||
|
||||
$form.off("submit");
|
||||
|
||||
$("#goto-login-after-reset").on("click", function () {
|
||||
location.reload();
|
||||
setTimeout(() => {
|
||||
showForm("#login-form");
|
||||
$("#login-username").val(username);
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
initLoginState();
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
$(document).ready(() => {
|
||||
const pathParts = window.location.pathname.split("/");
|
||||
const authorId = pathParts[pathParts.length - 1];
|
||||
|
||||
if (!authorId || isNaN(authorId)) {
|
||||
Utils.showToast("Некорректный ID автора", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
Api.get(`/api/authors/${authorId}`)
|
||||
.then((author) => {
|
||||
document.title = `LiB - ${author.name}`;
|
||||
renderAuthor(author);
|
||||
renderBooks(author.books);
|
||||
if (window.canManage()) {
|
||||
$("#edit-author-btn")
|
||||
.attr("href", `/author/${author.id}/edit`)
|
||||
.removeClass("hidden");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Автор не найден", "error");
|
||||
$("#author-loader").html('<p class="text-red-500">Ошибка загрузки</p>');
|
||||
});
|
||||
|
||||
function renderAuthor(author) {
|
||||
$("#author-name").text(author.name);
|
||||
$("#author-id").text(`ID: ${author.id}`);
|
||||
$("#author-avatar").text(author.name.charAt(0).toUpperCase());
|
||||
|
||||
const count = author.books ? author.books.length : 0;
|
||||
$("#author-books-count").text(`${count} книг в библиотеке`);
|
||||
|
||||
$("#author-loader").addClass("hidden");
|
||||
$("#author-content").removeClass("hidden");
|
||||
}
|
||||
|
||||
function renderBooks(books) {
|
||||
const $container = $("#books-container");
|
||||
const tpl = document.getElementById("book-item-template");
|
||||
|
||||
$container.empty();
|
||||
|
||||
if (!books || books.length === 0) {
|
||||
$container.html('<p class="text-gray-500 italic">Книг пока нет</p>');
|
||||
return;
|
||||
}
|
||||
|
||||
books.forEach((book) => {
|
||||
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-desc").textContent =
|
||||
book.description || "Описание отсутствует";
|
||||
|
||||
$container.append(clone);
|
||||
});
|
||||
}
|
||||
|
||||
$("#books-container").on("click", ".book-card", function () {
|
||||
window.location.href = `/book/${$(this).data("id")}`;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,183 @@
|
||||
$(document).ready(() => {
|
||||
let allAuthors = [];
|
||||
let filteredAuthors = [];
|
||||
let currentPage = 1;
|
||||
let pageSize = 24;
|
||||
let currentSort = "name_asc";
|
||||
|
||||
loadAuthors();
|
||||
|
||||
function loadAuthors() {
|
||||
showLoadingState();
|
||||
|
||||
Api.get("/api/authors")
|
||||
.then((data) => {
|
||||
allAuthors = data.authors;
|
||||
applyFiltersAndSort();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Не удалось загрузить авторов", "error");
|
||||
$("#authors-container").empty();
|
||||
});
|
||||
}
|
||||
|
||||
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();
|
||||
return currentSort === "name_asc"
|
||||
? nameA.localeCompare(nameB, "ru")
|
||||
: nameB.localeCompare(nameA, "ru");
|
||||
});
|
||||
|
||||
const total = filteredAuthors.length;
|
||||
$("#results-counter").text(
|
||||
total === 0 ? "Авторы не найдены" : `Найдено: ${total}`,
|
||||
);
|
||||
|
||||
renderAuthors();
|
||||
renderPagination();
|
||||
}
|
||||
|
||||
function renderAuthors() {
|
||||
const $container = $("#authors-container");
|
||||
const tpl = document.getElementById("author-card-template");
|
||||
const emptyTpl = document.getElementById("empty-state-template");
|
||||
|
||||
$container.empty();
|
||||
|
||||
if (filteredAuthors.length === 0) {
|
||||
$container.append(emptyTpl.content.cloneNode(true));
|
||||
return;
|
||||
}
|
||||
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const pageAuthors = filteredAuthors.slice(
|
||||
startIndex,
|
||||
startIndex + pageSize,
|
||||
);
|
||||
|
||||
pageAuthors.forEach((author) => {
|
||||
const clone = tpl.content.cloneNode(true);
|
||||
const card = clone.querySelector(".author-card");
|
||||
|
||||
card.dataset.id = author.id;
|
||||
clone.querySelector(".author-name").textContent = author.name;
|
||||
clone.querySelector(".author-id").textContent = `ID: ${author.id}`;
|
||||
clone.querySelector(".author-avatar").textContent = author.name
|
||||
.charAt(0)
|
||||
.toUpperCase();
|
||||
|
||||
$container.append(clone);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPagination() {
|
||||
$("#pagination-container").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 rounded-lg hover:bg-gray-50" ${currentPage === 1 ? "disabled" : ""}>←</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-page" class="px-3 py-2 bg-white border rounded-lg hover:bg-gray-50" ${currentPage === totalPages ? "disabled" : ""}>→</button>
|
||||
</div>
|
||||
`);
|
||||
|
||||
const $pageNumbers = $pagination.find("#page-numbers");
|
||||
const pages = [];
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
if (
|
||||
i === 1 ||
|
||||
i === totalPages ||
|
||||
(i >= currentPage - 2 && i <= currentPage + 2)
|
||||
) {
|
||||
pages.push(i);
|
||||
} else if (pages[pages.length - 1] !== "...") {
|
||||
pages.push("...");
|
||||
}
|
||||
}
|
||||
|
||||
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 hover:bg-gray-50"}" data-page="${page}">${page}</button>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
$("#pagination-container").append($pagination);
|
||||
|
||||
$("#prev-page").on("click", function () {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
renderAuthors();
|
||||
renderPagination();
|
||||
scrollToTop();
|
||||
}
|
||||
});
|
||||
$("#next-page").on("click", function () {
|
||||
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(
|
||||
() => `
|
||||
<div class="bg-white p-4 rounded-lg shadow-md animate-pulse 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>
|
||||
`,
|
||||
)
|
||||
.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")}`;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,551 @@
|
||||
$(document).ready(() => {
|
||||
const STATUS_CONFIG = {
|
||||
active: {
|
||||
label: "Доступна",
|
||||
bgClass: "bg-green-100",
|
||||
textClass: "text-green-800",
|
||||
icon: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>`,
|
||||
},
|
||||
borrowed: {
|
||||
label: "Выдана",
|
||||
bgClass: "bg-yellow-100",
|
||||
textClass: "text-yellow-800",
|
||||
icon: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
|
||||
},
|
||||
reserved: {
|
||||
label: "Забронирована",
|
||||
bgClass: "bg-blue-100",
|
||||
textClass: "text-blue-800",
|
||||
icon: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>`,
|
||||
},
|
||||
restoration: {
|
||||
label: "На реставрации",
|
||||
bgClass: "bg-orange-100",
|
||||
textClass: "text-orange-800",
|
||||
icon: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>`,
|
||||
},
|
||||
written_off: {
|
||||
label: "Списана",
|
||||
bgClass: "bg-red-100",
|
||||
textClass: "text-red-800",
|
||||
icon: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path></svg>`,
|
||||
},
|
||||
};
|
||||
|
||||
const pathParts = window.location.pathname.split("/");
|
||||
const bookId = parseInt(pathParts[pathParts.length - 1]);
|
||||
let currentBook = null;
|
||||
let cachedUsers = null;
|
||||
let selectedLoanUserId = null;
|
||||
let activeLoan = null;
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
if (!bookId || isNaN(bookId)) {
|
||||
Utils.showToast("Некорректный ID книги", "error");
|
||||
return;
|
||||
}
|
||||
loadBookData();
|
||||
setupEventHandlers();
|
||||
}
|
||||
|
||||
function setupEventHandlers() {
|
||||
$(document).on("click", (e) => {
|
||||
const $menu = $("#status-menu");
|
||||
const $toggleBtn = $("#status-toggle-btn");
|
||||
if (
|
||||
$menu.length &&
|
||||
!$menu.hasClass("hidden") &&
|
||||
!$toggleBtn.is(e.target) &&
|
||||
$toggleBtn.has(e.target).length === 0 &&
|
||||
!$menu.has(e.target).length
|
||||
) {
|
||||
$menu.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$("#cancel-loan-btn").on("click", closeLoanModal);
|
||||
$("#user-search-input").on("input", handleUserSearch);
|
||||
$("#confirm-loan-btn").on("click", submitLoan);
|
||||
$("#refresh-loans-btn").on("click", loadLoans);
|
||||
|
||||
const future = new Date();
|
||||
future.setDate(future.getDate() + 14);
|
||||
$("#loan-due-date").val(future.toISOString().split("T")[0]);
|
||||
}
|
||||
|
||||
function loadBookData() {
|
||||
Api.get(`/api/books/${bookId}`)
|
||||
.then((book) => {
|
||||
currentBook = book;
|
||||
document.title = `LiB - ${book.title}`;
|
||||
renderBook(book);
|
||||
if (window.canManage()) {
|
||||
$("#edit-book-btn")
|
||||
.attr("href", `/book/${book.id}/edit`)
|
||||
.removeClass("hidden");
|
||||
$("#loans-section").removeClass("hidden");
|
||||
loadLoans();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Книга не найдена", "error");
|
||||
$("#book-loader").html(
|
||||
'<p class="text-center text-red-500 w-full p-4">Ошибка загрузки</p>',
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadLoans() {
|
||||
if (!window.canManage()) return;
|
||||
|
||||
try {
|
||||
const data = await Api.get(
|
||||
`/api/loans/?book_id=${bookId}&active_only=true&page=1&size=10`,
|
||||
);
|
||||
activeLoan = data.loans.length > 0 ? data.loans[0] : null;
|
||||
renderLoans(data.loans);
|
||||
} catch (error) {
|
||||
console.error("Failed to load loans", error);
|
||||
$("#loans-container").html(
|
||||
'<div class="text-center text-red-500 py-4">Ошибка загрузки выдач</div>',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function renderLoans(loans) {
|
||||
const $container = $("#loans-container");
|
||||
$container.empty();
|
||||
|
||||
if (!loans || loans.length === 0) {
|
||||
$container.html(
|
||||
'<div class="text-center text-gray-500 py-8">Нет активных выдач</div>',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
loans.forEach((loan) => {
|
||||
const borrowedDate = new Date(loan.borrowed_at).toLocaleDateString(
|
||||
"ru-RU",
|
||||
);
|
||||
const dueDate = new Date(loan.due_date).toLocaleDateString("ru-RU");
|
||||
const isOverdue =
|
||||
!loan.returned_at && new Date(loan.due_date) < new Date();
|
||||
|
||||
const $loanCard = $(`
|
||||
<div class="border border-gray-200 rounded-lg p-4 ${
|
||||
isOverdue ? "bg-red-50 border-red-300" : "bg-gray-50"
|
||||
}">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="font-medium text-gray-900">ID выдачи: ${loan.id}</span>
|
||||
${
|
||||
isOverdue
|
||||
? '<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Просрочена</span>'
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-1">
|
||||
<span class="font-medium">Дата выдачи:</span> ${borrowedDate}
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 mb-1">
|
||||
<span class="font-medium">Срок возврата:</span> ${dueDate}
|
||||
</p>
|
||||
<p class="text-sm text-gray-600">
|
||||
<span class="font-medium">Пользователь ID:</span> ${loan.user_id}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
${
|
||||
!loan.returned_at && currentBook.status === "reserved"
|
||||
? `<button class="confirm-loan-btn px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors" data-loan-id="${loan.id}">
|
||||
Подтвердить
|
||||
</button>`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
!loan.returned_at
|
||||
? `<button class="return-loan-btn px-3 py-1.5 bg-green-600 text-white text-sm rounded hover:bg-green-700 transition-colors" data-loan-id="${loan.id}">
|
||||
Вернуть
|
||||
</button>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$loanCard.find(".confirm-loan-btn").on("click", function () {
|
||||
const loanId = $(this).data("loan-id");
|
||||
confirmLoan(loanId);
|
||||
});
|
||||
|
||||
$loanCard.find(".return-loan-btn").on("click", function () {
|
||||
const loanId = $(this).data("loan-id");
|
||||
returnLoan(loanId);
|
||||
});
|
||||
|
||||
$container.append($loanCard);
|
||||
});
|
||||
}
|
||||
|
||||
async function confirmLoan(loanId) {
|
||||
try {
|
||||
await Api.post(`/api/loans/${loanId}/confirm`);
|
||||
Utils.showToast("Бронь подтверждена", "success");
|
||||
loadBookData();
|
||||
loadLoans();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast(error.message || "Ошибка подтверждения брони", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function returnLoan(loanId) {
|
||||
if (!confirm("Вы уверены, что хотите вернуть эту книгу?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await Api.post(`/api/loans/${loanId}/return`);
|
||||
Utils.showToast("Книга возвращена", "success");
|
||||
loadBookData();
|
||||
loadLoans();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast(error.message || "Ошибка возврата книги", "error");
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusConfig(status) {
|
||||
return (
|
||||
STATUS_CONFIG[status] || {
|
||||
label: status || "Неизвестно",
|
||||
bgClass: "bg-gray-100",
|
||||
textClass: "text-gray-800",
|
||||
icon: "",
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
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 || "Описание отсутствует");
|
||||
|
||||
renderStatusWidget(book);
|
||||
|
||||
if (!window.canManage() && book.status === "active") {
|
||||
renderReserveButton();
|
||||
} else {
|
||||
$("#book-actions-container").empty();
|
||||
}
|
||||
|
||||
if (book.genres && book.genres.length > 0) {
|
||||
$("#genres-section").removeClass("hidden");
|
||||
const $genres = $("#genres-container");
|
||||
$genres.empty();
|
||||
book.genres.forEach((g) => {
|
||||
$genres.append(`
|
||||
<a href="/books?genre_id=${g.id}" class="inline-flex items-center bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm transition-colors border border-gray-200">
|
||||
${Utils.escapeHtml(g.name)}
|
||||
</a>
|
||||
`);
|
||||
});
|
||||
}
|
||||
|
||||
if (book.authors && book.authors.length > 0) {
|
||||
$("#authors-section").removeClass("hidden");
|
||||
const $authors = $("#authors-container");
|
||||
$authors.empty();
|
||||
book.authors.forEach((a) => {
|
||||
$authors.append(`
|
||||
<a href="/author/${a.id}" class="flex items-center bg-white hover:bg-gray-50 rounded-lg p-2 border border-gray-200 shadow-sm transition-colors group">
|
||||
<div class="w-8 h-8 bg-gray-200 text-gray-600 group-hover:bg-gray-300 rounded-full flex items-center justify-center text-sm font-bold mr-2 transition-colors">
|
||||
${a.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span class="text-gray-800 font-medium text-sm">${Utils.escapeHtml(a.name)}</span>
|
||||
</a>
|
||||
`);
|
||||
});
|
||||
}
|
||||
|
||||
$("#book-loader").addClass("hidden");
|
||||
$("#book-content").removeClass("hidden");
|
||||
}
|
||||
|
||||
function renderStatusWidget(book) {
|
||||
const $container = $("#book-status-container");
|
||||
$container.empty();
|
||||
const config = getStatusConfig(book.status);
|
||||
|
||||
if (window.canManage()) {
|
||||
const $dropdownHTML = $(`
|
||||
<div class="relative inline-block text-left w-full md:w-auto">
|
||||
<button id="status-toggle-btn" type="button" class="w-full justify-center md:w-auto inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold transition-all shadow-sm ${config.bgClass} ${config.textClass} hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">
|
||||
${config.icon}
|
||||
<span class="ml-2">${config.label}</span>
|
||||
<svg class="ml-2 -mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div id="status-menu" class="hidden absolute left-0 md:left-1/2 md:-translate-x-1/2 mt-2 w-56 rounded-xl shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden z-20">
|
||||
<div class="py-1" role="menu">
|
||||
${Object.entries(STATUS_CONFIG)
|
||||
.map(([key, conf]) => {
|
||||
const isCurrent = book.status === key;
|
||||
return `
|
||||
<button class="status-option w-full text-left px-4 py-2.5 text-sm hover:bg-gray-50 flex items-center gap-2 ${isCurrent ? "bg-gray-50 font-medium" : "text-gray-700"}"
|
||||
data-status="${key}">
|
||||
<span class="inline-flex items-center justify-center w-6 h-6 rounded-full ${conf.bgClass} ${conf.textClass}">
|
||||
${conf.icon}
|
||||
</span>
|
||||
<span>${conf.label}</span>
|
||||
${isCurrent ? '<svg class="ml-auto h-4 w-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>' : ""}
|
||||
</button>
|
||||
`;
|
||||
})
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$container.append($dropdownHTML);
|
||||
|
||||
$("#status-toggle-btn").on("click", (e) => {
|
||||
e.stopPropagation();
|
||||
$("#status-menu").toggleClass("hidden");
|
||||
});
|
||||
|
||||
$(".status-option").on("click", function () {
|
||||
const newStatus = $(this).data("status");
|
||||
$("#status-menu").addClass("hidden");
|
||||
|
||||
if (newStatus === currentBook.status) return;
|
||||
|
||||
if (newStatus === "borrowed") {
|
||||
openLoanModal();
|
||||
} else {
|
||||
updateBookStatus(newStatus);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$container.append(`
|
||||
<span class="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium ${config.bgClass} ${config.textClass} shadow-sm">
|
||||
${config.icon}
|
||||
${config.label}
|
||||
</span>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
function renderReserveButton() {
|
||||
const $container = $("#book-actions-container");
|
||||
$container.html(`
|
||||
<button id="reserve-btn" class="w-full flex items-center justify-center px-4 py-2.5 bg-gray-800 text-white font-medium rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all shadow-sm">
|
||||
<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 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
Зарезервировать
|
||||
</button>
|
||||
`);
|
||||
|
||||
$("#reserve-btn").on("click", function () {
|
||||
const user = window.getUser();
|
||||
if (!user) {
|
||||
Utils.showToast("Необходима авторизация", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
Api.post("/api/loans/", {
|
||||
book_id: currentBook.id,
|
||||
user_id: user.id,
|
||||
due_date: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
})
|
||||
.then((loan) => {
|
||||
Utils.showToast("Книга забронирована", "success");
|
||||
loadBookData();
|
||||
})
|
||||
.catch((err) => {
|
||||
Utils.showToast(err.message || "Ошибка бронирования", "error");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function updateBookStatus(newStatus) {
|
||||
const $toggleBtn = $("#status-toggle-btn");
|
||||
const originalContent = $toggleBtn.html();
|
||||
|
||||
$toggleBtn.prop("disabled", true).addClass("opacity-75").html(`
|
||||
<svg class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
||||
Обновление...
|
||||
`);
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
status: newStatus,
|
||||
};
|
||||
|
||||
const updatedBook = await Api.put(
|
||||
`/api/books/${currentBook.id}`,
|
||||
payload,
|
||||
);
|
||||
currentBook = updatedBook;
|
||||
Utils.showToast("Статус успешно изменен", "success");
|
||||
renderStatusWidget(updatedBook);
|
||||
loadLoans();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast(error.message || "Ошибка при смене статуса", "error");
|
||||
$toggleBtn
|
||||
.prop("disabled", false)
|
||||
.removeClass("opacity-75")
|
||||
.html(originalContent);
|
||||
}
|
||||
}
|
||||
|
||||
function openLoanModal() {
|
||||
$("#loan-modal").removeClass("hidden");
|
||||
$("#user-search-input").val("")[0].focus();
|
||||
$("#users-list-container").html(
|
||||
'<div class="p-4 text-center text-gray-500 text-sm">Загрузка списка пользователей...</div>',
|
||||
);
|
||||
$("#confirm-loan-btn").prop("disabled", true);
|
||||
selectedLoanUserId = null;
|
||||
|
||||
fetchUsers();
|
||||
}
|
||||
|
||||
function closeLoanModal() {
|
||||
$("#loan-modal").addClass("hidden");
|
||||
}
|
||||
|
||||
async function fetchUsers() {
|
||||
if (cachedUsers) {
|
||||
renderUsersList(cachedUsers);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await Api.get("/api/auth/users?skip=0&limit=500");
|
||||
cachedUsers = data.users;
|
||||
renderUsersList(cachedUsers);
|
||||
} catch (error) {
|
||||
console.error("Failed to load users", error);
|
||||
$("#users-list-container").html(
|
||||
'<div class="p-4 text-center text-red-500 text-sm">Ошибка загрузки пользователей</div>',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function renderUsersList(users) {
|
||||
const $container = $("#users-list-container");
|
||||
$container.empty();
|
||||
|
||||
if (!users || users.length === 0) {
|
||||
$container.html(
|
||||
'<div class="p-4 text-center text-gray-500 text-sm">Пользователи не найдены</div>',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
users.forEach((user) => {
|
||||
const roleBadges = user.roles
|
||||
.map((r) => {
|
||||
const color =
|
||||
r === "admin"
|
||||
? "bg-purple-100 text-purple-800"
|
||||
: r === "librarian"
|
||||
? "bg-blue-100 text-blue-800"
|
||||
: "bg-gray-100 text-gray-800";
|
||||
return `<span class="text-xs px-2 py-0.5 rounded-full ${color} mr-1">${r}</span>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
const $item = $(`
|
||||
<div class="user-item p-3 hover:bg-blue-50 cursor-pointer transition-colors flex items-center justify-between group" data-id="${user.id}">
|
||||
<div>
|
||||
<div class="font-medium text-gray-900">${Utils.escapeHtml(user.full_name || user.username)}</div>
|
||||
<div class="text-xs text-gray-500">@${Utils.escapeHtml(user.username)} • ${Utils.escapeHtml(user.email)}</div>
|
||||
</div>
|
||||
<div>${roleBadges}</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$item.on("click", function () {
|
||||
$(".user-item").removeClass("bg-blue-100 border-l-4 border-blue-500");
|
||||
$(this).addClass("bg-blue-100 border-l-4 border-blue-500");
|
||||
selectedLoanUserId = user.id;
|
||||
$("#confirm-loan-btn")
|
||||
.prop("disabled", false)
|
||||
.text(`Выдать для ${user.username}`);
|
||||
});
|
||||
|
||||
$container.append($item);
|
||||
});
|
||||
}
|
||||
|
||||
function handleUserSearch() {
|
||||
const query = $(this).val().toLowerCase();
|
||||
if (!cachedUsers) return;
|
||||
|
||||
if (!query) {
|
||||
renderUsersList(cachedUsers);
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = cachedUsers.filter(
|
||||
(u) =>
|
||||
u.username.toLowerCase().includes(query) ||
|
||||
(u.full_name && u.full_name.toLowerCase().includes(query)) ||
|
||||
u.email.toLowerCase().includes(query),
|
||||
);
|
||||
renderUsersList(filtered);
|
||||
}
|
||||
|
||||
async function submitLoan() {
|
||||
if (!selectedLoanUserId) return;
|
||||
const dueDate = $("#loan-due-date").val();
|
||||
|
||||
if (!dueDate) {
|
||||
Utils.showToast("Выберите дату возврата", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const $btn = $("#confirm-loan-btn");
|
||||
const originalText = $btn.text();
|
||||
$btn.prop("disabled", true).text("Обработка...");
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
book_id: currentBook.id,
|
||||
user_id: selectedLoanUserId,
|
||||
due_date: new Date(dueDate).toISOString(),
|
||||
};
|
||||
|
||||
if (window.isAdmin()) {
|
||||
await Api.post("/api/loans/issue", payload);
|
||||
} else {
|
||||
await Api.post("/api/loans/", payload);
|
||||
}
|
||||
|
||||
Utils.showToast("Книга успешно выдана", "success");
|
||||
closeLoanModal();
|
||||
loadBookData();
|
||||
loadLoans();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast(error.message || "Ошибка выдачи", "error");
|
||||
} finally {
|
||||
$btn.prop("disabled", false).text(originalText);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,413 @@
|
||||
$(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;
|
||||
let pageSize = 12;
|
||||
let totalBooks = 0;
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const genreIdsFromUrl = urlParams.getAll("genre_id");
|
||||
const authorIdsFromUrl = urlParams.getAll("author_id");
|
||||
const searchFromUrl = urlParams.get("q");
|
||||
|
||||
if (searchFromUrl) $("#book-search-input").val(searchFromUrl);
|
||||
|
||||
Promise.all([Api.get("/api/authors"), Api.get("/api/genres")])
|
||||
.then(([authorsData, genresData]) => {
|
||||
initAuthors(authorsData.authors);
|
||||
initGenres(genresData.genres);
|
||||
initializeAuthorDropdownListeners();
|
||||
renderChips();
|
||||
loadBooks();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Ошибка загрузки данных", "error");
|
||||
});
|
||||
|
||||
function initAuthors(authors) {
|
||||
const $dropdown = $("#author-dropdown");
|
||||
authors.forEach((author) => {
|
||||
$("<div>")
|
||||
.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);
|
||||
|
||||
const editButton = window.canManage()
|
||||
? `<a href="/genre/${genre.id}/edit" class="ml-auto mr-2 p-1 text-gray-400 hover:text-gray-600 transition-colors" onclick="event.stopPropagation();" title="Редактировать жанр">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
|
||||
</svg>
|
||||
</a>`
|
||||
: "";
|
||||
|
||||
$list.append(`
|
||||
<li class="mb-1">
|
||||
<div class="flex items-center">
|
||||
<label class="custom-checkbox flex items-center flex-1">
|
||||
<input type="checkbox" data-id="${genre.id}" data-name="${Utils.escapeHtml(genre.name)}" ${isChecked ? "checked" : ""} />
|
||||
<span class="checkmark"></span> ${Utils.escapeHtml(genre.name)}
|
||||
</label>
|
||||
${editButton}
|
||||
</div>
|
||||
</li>
|
||||
`);
|
||||
});
|
||||
|
||||
$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);
|
||||
});
|
||||
|
||||
$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();
|
||||
|
||||
params.append("q", searchQuery);
|
||||
selectedAuthors.forEach((_, id) => params.append("author_ids", id));
|
||||
selectedGenres.forEach((_, 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));
|
||||
|
||||
const newUrl =
|
||||
window.location.pathname +
|
||||
(browserParams.toString() ? `?${browserParams.toString()}` : "");
|
||||
window.history.replaceState({}, "", newUrl);
|
||||
|
||||
params.append("page", currentPage);
|
||||
params.append("size", pageSize);
|
||||
|
||||
showLoadingState();
|
||||
|
||||
Api.get(`/api/books/filter?${params.toString()}`)
|
||||
.then((data) => {
|
||||
totalBooks = data.total;
|
||||
renderBooks(data.books);
|
||||
renderPagination();
|
||||
})
|
||||
.catch((error) => {
|
||||
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.append(emptyTpl.content.cloneNode(true));
|
||||
return;
|
||||
}
|
||||
|
||||
books.forEach((book) => {
|
||||
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(", ") || "Автор неизвестен";
|
||||
clone.querySelector(".book-desc").textContent = book.description || "";
|
||||
|
||||
const statusConfig = getStatusConfig(book.status);
|
||||
const statusEl = clone.querySelector(".book-status");
|
||||
statusEl.textContent = statusConfig.label;
|
||||
statusEl.classList.add(statusConfig.bgClass, statusConfig.textClass);
|
||||
|
||||
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").empty();
|
||||
const totalPages = Math.ceil(totalBooks / 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" : ""}>←</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" : ""}>→</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 text-gray-500">...</span>`);
|
||||
} else {
|
||||
const isActive = page === currentPage;
|
||||
$pageNumbers.append(`
|
||||
<button class="page-btn px-3 py-2 rounded-lg transition-colors ${isActive ? "bg-gray-600 text-white" : "bg-white border border-gray-300 hover:bg-gray-50"}" data-page="${page}">${page}</button>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
$("#pagination-container").append($pagination);
|
||||
|
||||
$("#prev-page").on("click", function () {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
loadBooks();
|
||||
scrollToTop();
|
||||
}
|
||||
});
|
||||
$("#next-page").on("click", function () {
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
loadBooks();
|
||||
scrollToTop();
|
||||
}
|
||||
});
|
||||
$(".page-btn").on("click", function () {
|
||||
const page = parseInt($(this).data("page"));
|
||||
if (page !== currentPage) {
|
||||
currentPage = page;
|
||||
loadBooks();
|
||||
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() {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
function showLoadingState() {
|
||||
$("#books-container").html(`
|
||||
<div class="space-y-4">
|
||||
${Array(3)
|
||||
.fill()
|
||||
.map(
|
||||
() => `
|
||||
<div class="bg-white p-4 rounded-lg shadow-md animate-pulse">
|
||||
<div class="h-6 bg-gray-200 rounded w-3/4 mb-2"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-1/4 mb-2"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-full mb-2"></div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
function renderChips() {
|
||||
const $container = $("#selected-authors-container");
|
||||
const $dropdown = $("#author-dropdown");
|
||||
|
||||
$container.empty();
|
||||
|
||||
selectedAuthors.forEach((name, id) => {
|
||||
$(`<span class="author-chip 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-400 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 initializeAuthorDropdownListeners() {
|
||||
const $input = $("#author-search-input");
|
||||
const $dropdown = $("#author-dropdown");
|
||||
const $container = $("#selected-authors-container");
|
||||
|
||||
$input.on("focus", function () {
|
||||
$dropdown.removeClass("hidden");
|
||||
});
|
||||
|
||||
$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(
|
||||
"#author-search-input, #author-dropdown, #selected-authors-container",
|
||||
).length
|
||||
) {
|
||||
$dropdown.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$dropdown.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);
|
||||
}
|
||||
|
||||
$input.val("");
|
||||
$dropdown.find(".author-item").show();
|
||||
renderChips();
|
||||
$input[0].focus();
|
||||
});
|
||||
|
||||
$container.on("click", ".remove-author", function (e) {
|
||||
e.stopPropagation();
|
||||
const id = parseInt($(this).data("id"));
|
||||
selectedAuthors.delete(id);
|
||||
renderChips();
|
||||
});
|
||||
}
|
||||
|
||||
$("#books-container").on("click", ".book-card", function () {
|
||||
window.location.href = `/book/${$(this).data("id")}`;
|
||||
});
|
||||
|
||||
$("#apply-filters-btn").on("click", function () {
|
||||
currentPage = 1;
|
||||
loadBooks();
|
||||
});
|
||||
|
||||
$("#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();
|
||||
}
|
||||
});
|
||||
|
||||
function showAdminControls() {
|
||||
if (window.canManage()) {
|
||||
$("#admin-actions").removeClass("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
showAdminControls();
|
||||
setTimeout(showAdminControls, 100);
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
$(document).ready(() => {
|
||||
if (!window.canManage()) return;
|
||||
setTimeout(() => window.canManage, 100);
|
||||
|
||||
const $form = $("#create-author-form");
|
||||
const $nameInput = $("#author-name");
|
||||
const $submitBtn = $("#submit-btn");
|
||||
const $submitText = $("#submit-text");
|
||||
const $loadingSpinner = $("#loading-spinner");
|
||||
const $successModal = $("#success-modal");
|
||||
|
||||
$nameInput.on("input", function () {
|
||||
$("#name-counter").text(`${this.value.length}/255`);
|
||||
});
|
||||
|
||||
$form.on("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const name = $nameInput.val().trim();
|
||||
|
||||
if (!name) {
|
||||
Utils.showToast("Введите имя автора", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const author = await Api.post("/api/authors/", { name });
|
||||
showSuccess(author);
|
||||
} 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 = "У вас недостаточно прав";
|
||||
} else if (error.status === 409) {
|
||||
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(author) {
|
||||
$("#modal-author-name").text(author.name);
|
||||
$successModal.removeClass("hidden");
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
$form[0].reset();
|
||||
$("#name-counter").text("0/255");
|
||||
}
|
||||
|
||||
$("#modal-close-btn").on("click", function () {
|
||||
$successModal.addClass("hidden");
|
||||
resetForm();
|
||||
$nameInput[0].focus();
|
||||
});
|
||||
|
||||
$successModal.on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
window.location.href = "/authors";
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.key === "Escape" && !$successModal.hasClass("hidden")) {
|
||||
window.location.href = "/authors";
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,346 @@
|
||||
$(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();
|
||||
|
||||
if (!title) {
|
||||
Utils.showToast("Введите название книги", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const bookPayload = {
|
||||
title: title,
|
||||
description: description || null,
|
||||
};
|
||||
|
||||
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";
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
$(document).ready(() => {
|
||||
if (!window.canManage()) return;
|
||||
setTimeout(() => window.canManage, 100);
|
||||
|
||||
const $form = $("#create-genre-form");
|
||||
const $nameInput = $("#genre-name");
|
||||
const $submitBtn = $("#submit-btn");
|
||||
const $submitText = $("#submit-text");
|
||||
const $loadingSpinner = $("#loading-spinner");
|
||||
const $successModal = $("#success-modal");
|
||||
|
||||
$nameInput.on("input", function () {
|
||||
$("#name-counter").text(`${this.value.length}/100`);
|
||||
});
|
||||
|
||||
$form.on("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const name = $nameInput.val().trim();
|
||||
|
||||
if (!name) {
|
||||
Utils.showToast("Введите название жанра", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const genre = await Api.post("/api/genres/", { name });
|
||||
showSuccess(genre);
|
||||
} 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 = "У вас недостаточно прав";
|
||||
} else if (error.status === 409) {
|
||||
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(genre) {
|
||||
$("#modal-genre-name").text(genre.name);
|
||||
$successModal.removeClass("hidden");
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
$form[0].reset();
|
||||
$("#name-counter").text("0/100");
|
||||
}
|
||||
|
||||
$("#modal-close-btn").on("click", function () {
|
||||
$successModal.addClass("hidden");
|
||||
resetForm();
|
||||
$nameInput[0].focus();
|
||||
});
|
||||
|
||||
$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";
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,229 @@
|
||||
$(document).ready(() => {
|
||||
if (!window.canManage()) return;
|
||||
setTimeout(() => window.canManage(), 100);
|
||||
|
||||
const pathParts = window.location.pathname.split("/");
|
||||
const authorId = parseInt(pathParts[pathParts.length - 2]);
|
||||
|
||||
if (!authorId || isNaN(authorId)) {
|
||||
Utils.showToast("Некорректный ID автора", "error");
|
||||
setTimeout(() => (window.location.href = "/authors"), 1500);
|
||||
return;
|
||||
}
|
||||
|
||||
let originalAuthor = null;
|
||||
let authorBooks = [];
|
||||
|
||||
const $form = $("#edit-author-form");
|
||||
const $loader = $("#loader");
|
||||
const $dangerZone = $("#danger-zone");
|
||||
const $nameInput = $("#author-name");
|
||||
const $submitBtn = $("#submit-btn");
|
||||
const $submitText = $("#submit-text");
|
||||
const $loadingSpinner = $("#loading-spinner");
|
||||
const $deleteModal = $("#delete-modal");
|
||||
const $successModal = $("#success-modal");
|
||||
|
||||
Promise.all([
|
||||
Api.get(`/api/authors/${authorId}`),
|
||||
Api.get(`/api/authors/${authorId}/books/`),
|
||||
])
|
||||
.then(([author, booksData]) => {
|
||||
originalAuthor = author;
|
||||
authorBooks = booksData.books || booksData || [];
|
||||
|
||||
document.title = `Редактирование: ${author.name} | LiB`;
|
||||
populateForm(author);
|
||||
renderAuthorBooks(authorBooks);
|
||||
|
||||
$loader.addClass("hidden");
|
||||
$form.removeClass("hidden");
|
||||
$dangerZone.removeClass("hidden");
|
||||
$("#cancel-btn").attr("href", `/author/${authorId}`);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Автор не найден", "error");
|
||||
setTimeout(() => (window.location.href = "/authors"), 1500);
|
||||
});
|
||||
|
||||
function populateForm(author) {
|
||||
$nameInput.val(author.name);
|
||||
updateCounter();
|
||||
}
|
||||
|
||||
function updateCounter() {
|
||||
$("#name-counter").text(`${$nameInput.val().length}/255`);
|
||||
}
|
||||
|
||||
$nameInput.on("input", updateCounter);
|
||||
|
||||
function renderAuthorBooks(books) {
|
||||
const $container = $("#author-books-container");
|
||||
$container.empty();
|
||||
|
||||
$("#books-count").text(books.length > 0 ? `(${books.length})` : "");
|
||||
|
||||
if (books.length === 0) {
|
||||
$container.html(`
|
||||
<div class="text-sm text-gray-500 text-center py-4">
|
||||
<svg class="w-8 h-8 mx-auto text-gray-300 mb-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"></path>
|
||||
</svg>
|
||||
У автора пока нет книг
|
||||
</div>
|
||||
`);
|
||||
return;
|
||||
}
|
||||
|
||||
books.forEach((book) => {
|
||||
$container.append(`
|
||||
<a href="/book/${book.id}" class="flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 rounded-lg border transition-colors group">
|
||||
<div class="flex items-center min-w-0">
|
||||
<div class="w-8 h-10 bg-gradient-to-br from-gray-400 to-gray-500 rounded flex items-center justify-center flex-shrink-0 mr-3">
|
||||
<svg class="w-4 h-4 text-white" 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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900 truncate">${Utils.escapeHtml(book.title)}</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600 flex-shrink-0 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"></path>
|
||||
</svg>
|
||||
</a>
|
||||
`);
|
||||
});
|
||||
}
|
||||
|
||||
$form.on("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const name = $nameInput.val().trim();
|
||||
|
||||
if (!name) {
|
||||
Utils.showToast("Введите имя автора", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (name === originalAuthor.name) {
|
||||
Utils.showToast("Нет изменений для сохранения", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const updatedAuthor = await Api.put(`/api/authors/${authorId}`, { name });
|
||||
originalAuthor = updatedAuthor;
|
||||
showSuccessModal(updatedAuthor);
|
||||
} 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 = "У вас недостаточно прав";
|
||||
} else if (error.status === 404) {
|
||||
errorMsg = "Автор не найден";
|
||||
} else if (error.status === 409) {
|
||||
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 showSuccessModal(author) {
|
||||
$("#success-author-name").text(author.name);
|
||||
$("#success-link-btn").attr("href", `/author/${author.id}`);
|
||||
$successModal.removeClass("hidden");
|
||||
}
|
||||
|
||||
$("#success-close-btn").on("click", function () {
|
||||
$successModal.addClass("hidden");
|
||||
});
|
||||
|
||||
$successModal.on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
$successModal.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$("#delete-btn").on("click", function () {
|
||||
$("#modal-author-name").text(originalAuthor.name);
|
||||
|
||||
if (authorBooks.length > 0) {
|
||||
$("#modal-books-warning").removeClass("hidden");
|
||||
} else {
|
||||
$("#modal-books-warning").addClass("hidden");
|
||||
}
|
||||
|
||||
$deleteModal.removeClass("hidden");
|
||||
});
|
||||
|
||||
$("#cancel-delete-btn").on("click", function () {
|
||||
$deleteModal.addClass("hidden");
|
||||
});
|
||||
|
||||
$deleteModal.on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
$deleteModal.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$("#confirm-delete-btn").on("click", async function () {
|
||||
const $btn = $(this);
|
||||
const $spinner = $("#delete-spinner");
|
||||
|
||||
$btn.prop("disabled", true);
|
||||
$spinner.removeClass("hidden");
|
||||
|
||||
try {
|
||||
await Api.delete(`/api/authors/${authorId}`);
|
||||
Utils.showToast("Автор успешно удалён", "success");
|
||||
setTimeout(() => (window.location.href = "/authors"), 1000);
|
||||
} 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");
|
||||
$btn.prop("disabled", false);
|
||||
$spinner.addClass("hidden");
|
||||
$deleteModal.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
if (!$deleteModal.hasClass("hidden")) {
|
||||
$deleteModal.addClass("hidden");
|
||||
} else if (!$successModal.hasClass("hidden")) {
|
||||
$successModal.addClass("hidden");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,457 @@
|
||||
$(document).ready(() => {
|
||||
if (!window.canManage()) return;
|
||||
setTimeout(() => window.canManage, 100);
|
||||
|
||||
const pathParts = window.location.pathname.split("/");
|
||||
const bookId = parseInt(pathParts[pathParts.length - 2]);
|
||||
|
||||
if (!bookId || isNaN(bookId)) {
|
||||
Utils.showToast("Некорректный ID книги", "error");
|
||||
setTimeout(() => (window.location.href = "/books"), 1500);
|
||||
return;
|
||||
}
|
||||
|
||||
let originalBook = null;
|
||||
let allAuthors = [];
|
||||
let allGenres = [];
|
||||
const currentAuthors = new Map();
|
||||
const currentGenres = new Map();
|
||||
|
||||
const $form = $("#edit-book-form");
|
||||
const $loader = $("#loader");
|
||||
const $dangerZone = $("#danger-zone");
|
||||
const $titleInput = $("#book-title");
|
||||
const $descInput = $("#book-description");
|
||||
const $statusSelect = $("#book-status");
|
||||
const $submitBtn = $("#submit-btn");
|
||||
const $submitText = $("#submit-text");
|
||||
const $loadingSpinner = $("#loading-spinner");
|
||||
const $deleteModal = $("#delete-modal");
|
||||
const $successModal = $("#success-modal");
|
||||
|
||||
Promise.all([
|
||||
Api.get(`/api/books/${bookId}`),
|
||||
Api.get(`/api/books/${bookId}/authors/`),
|
||||
Api.get(`/api/books/${bookId}/genres/`),
|
||||
Api.get("/api/authors"),
|
||||
Api.get("/api/genres"),
|
||||
])
|
||||
.then(([book, bookAuthors, bookGenres, authorsData, genresData]) => {
|
||||
originalBook = book;
|
||||
allAuthors = authorsData.authors || [];
|
||||
allGenres = genresData.genres || [];
|
||||
|
||||
(bookAuthors.authors || bookAuthors || []).forEach((a) =>
|
||||
currentAuthors.set(a.id, a.name),
|
||||
);
|
||||
(bookGenres.genres || bookGenres || []).forEach((g) =>
|
||||
currentGenres.set(g.id, g.name),
|
||||
);
|
||||
|
||||
document.title = `Редактирование: ${book.title} | LiB`;
|
||||
populateForm(book);
|
||||
initAuthorsDropdown();
|
||||
initGenresDropdown();
|
||||
renderCurrentAuthors();
|
||||
renderCurrentGenres();
|
||||
|
||||
$loader.addClass("hidden");
|
||||
$form.removeClass("hidden");
|
||||
$dangerZone.removeClass("hidden");
|
||||
$("#cancel-btn").attr("href", `/book/${bookId}`);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Ошибка загрузки данных", "error");
|
||||
setTimeout(() => (window.location.href = "/books"), 1500);
|
||||
});
|
||||
|
||||
function populateForm(book) {
|
||||
$titleInput.val(book.title);
|
||||
$descInput.val(book.description || "");
|
||||
$statusSelect.val(book.status);
|
||||
updateCounters();
|
||||
}
|
||||
|
||||
function updateCounters() {
|
||||
$("#title-counter").text(`${$titleInput.val().length}/255`);
|
||||
$("#desc-counter").text(`${$descInput.val().length}/2000`);
|
||||
}
|
||||
|
||||
$titleInput.on("input", updateCounters);
|
||||
$descInput.on("input", updateCounters);
|
||||
|
||||
function initAuthorsDropdown() {
|
||||
const $dropdown = $("#author-dropdown");
|
||||
$dropdown.empty();
|
||||
allAuthors.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 initGenresDropdown() {
|
||||
const $dropdown = $("#genre-dropdown");
|
||||
$dropdown.empty();
|
||||
allGenres.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 renderCurrentAuthors() {
|
||||
const $container = $("#current-authors-container");
|
||||
const $dropdown = $("#author-dropdown");
|
||||
|
||||
$container.empty();
|
||||
$("#authors-count").text(
|
||||
currentAuthors.size > 0 ? `(${currentAuthors.size})` : "",
|
||||
);
|
||||
|
||||
currentAuthors.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}" data-name="${Utils.escapeHtml(name)}">
|
||||
<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 (currentAuthors.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 renderCurrentGenres() {
|
||||
const $container = $("#current-genres-container");
|
||||
const $dropdown = $("#genre-dropdown");
|
||||
|
||||
$container.empty();
|
||||
$("#genres-count").text(
|
||||
currentGenres.size > 0 ? `(${currentGenres.size})` : "",
|
||||
);
|
||||
|
||||
currentGenres.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}" data-name="${Utils.escapeHtml(name)}">
|
||||
<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 (currentGenres.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");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const $authorInput = $("#author-search-input");
|
||||
const $authorDropdown = $("#author-dropdown");
|
||||
const $authorContainer = $("#current-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", async function (e) {
|
||||
e.stopPropagation();
|
||||
const id = parseInt($(this).data("id"));
|
||||
const name = $(this).data("name");
|
||||
|
||||
if (currentAuthors.has(id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).addClass("opacity-50 pointer-events-none");
|
||||
|
||||
try {
|
||||
await Api.post(
|
||||
`/api/relationships/author-book?author_id=${id}&book_id=${bookId}`,
|
||||
);
|
||||
currentAuthors.set(id, name);
|
||||
renderCurrentAuthors();
|
||||
Utils.showToast(`Автор "${name}" добавлен`, "success");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast("Ошибка добавления автора", "error");
|
||||
} finally {
|
||||
$(this).removeClass("opacity-50 pointer-events-none");
|
||||
}
|
||||
|
||||
$authorInput.val("");
|
||||
$authorDropdown.find(".author-item").show();
|
||||
});
|
||||
|
||||
$authorContainer.on("click", ".remove-author", async function (e) {
|
||||
e.stopPropagation();
|
||||
const id = parseInt($(this).data("id"));
|
||||
const name = $(this).data("name");
|
||||
const $chip = $(this).parent();
|
||||
|
||||
$chip.addClass("opacity-50");
|
||||
|
||||
try {
|
||||
await Api.delete(
|
||||
`/api/relationships/author-book?author_id=${id}&book_id=${bookId}`,
|
||||
);
|
||||
currentAuthors.delete(id);
|
||||
renderCurrentAuthors();
|
||||
Utils.showToast(`Автор "${name}" удалён`, "success");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast("Ошибка удаления автора", "error");
|
||||
$chip.removeClass("opacity-50");
|
||||
}
|
||||
});
|
||||
|
||||
const $genreInput = $("#genre-search-input");
|
||||
const $genreDropdown = $("#genre-dropdown");
|
||||
const $genreContainer = $("#current-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", async function (e) {
|
||||
e.stopPropagation();
|
||||
const id = parseInt($(this).data("id"));
|
||||
const name = $(this).data("name");
|
||||
|
||||
if (currentGenres.has(id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).addClass("opacity-50 pointer-events-none");
|
||||
|
||||
try {
|
||||
await Api.post(
|
||||
`/api/relationships/genre-book?genre_id=${id}&book_id=${bookId}`,
|
||||
);
|
||||
currentGenres.set(id, name);
|
||||
renderCurrentGenres();
|
||||
Utils.showToast(`Жанр "${name}" добавлен`, "success");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast("Ошибка добавления жанра", "error");
|
||||
} finally {
|
||||
$(this).removeClass("opacity-50 pointer-events-none");
|
||||
}
|
||||
|
||||
$genreInput.val("");
|
||||
$genreDropdown.find(".genre-item").show();
|
||||
});
|
||||
|
||||
$genreContainer.on("click", ".remove-genre", async function (e) {
|
||||
e.stopPropagation();
|
||||
const id = parseInt($(this).data("id"));
|
||||
const name = $(this).data("name");
|
||||
const $chip = $(this).parent();
|
||||
|
||||
$chip.addClass("opacity-50");
|
||||
|
||||
try {
|
||||
await Api.delete(
|
||||
`/api/relationships/genre-book?genre_id=${id}&book_id=${bookId}`,
|
||||
);
|
||||
currentGenres.delete(id);
|
||||
renderCurrentGenres();
|
||||
Utils.showToast(`Жанр "${name}" удалён`, "success");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast("Ошибка удаления жанра", "error");
|
||||
$chip.removeClass("opacity-50");
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("click", function (e) {
|
||||
if (!$(e.target).closest("#author-search-input, #author-dropdown").length) {
|
||||
$authorDropdown.addClass("hidden");
|
||||
}
|
||||
if (!$(e.target).closest("#genre-search-input, #genre-dropdown").length) {
|
||||
$genreDropdown.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$form.on("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const title = $titleInput.val().trim();
|
||||
const description = $descInput.val().trim();
|
||||
const status = $statusSelect.val();
|
||||
|
||||
if (!title) {
|
||||
Utils.showToast("Введите название книги", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {};
|
||||
if (title !== originalBook.title) payload.title = title;
|
||||
if (description !== (originalBook.description || ""))
|
||||
payload.description = description || null;
|
||||
if (status !== originalBook.status) payload.status = status;
|
||||
|
||||
if (Object.keys(payload).length === 0) {
|
||||
Utils.showToast("Нет изменений для сохранения", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const updatedBook = await Api.put(`/api/books/${bookId}`, payload);
|
||||
originalBook = updatedBook;
|
||||
showSuccessModal(updatedBook);
|
||||
} 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 = "У вас недостаточно прав";
|
||||
} else if (error.status === 404) {
|
||||
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 showSuccessModal(book) {
|
||||
$("#success-book-title").text(book.title);
|
||||
$("#success-link-btn").attr("href", `/book/${book.id}`);
|
||||
$successModal.removeClass("hidden");
|
||||
}
|
||||
|
||||
$("#success-close-btn").on("click", function () {
|
||||
$successModal.addClass("hidden");
|
||||
});
|
||||
|
||||
$successModal.on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
$successModal.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$("#delete-btn").on("click", function () {
|
||||
$("#modal-book-title").text(originalBook.title);
|
||||
$deleteModal.removeClass("hidden");
|
||||
});
|
||||
|
||||
$("#cancel-delete-btn").on("click", function () {
|
||||
$deleteModal.addClass("hidden");
|
||||
});
|
||||
|
||||
$deleteModal.on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
$deleteModal.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$("#confirm-delete-btn").on("click", async function () {
|
||||
const $btn = $(this);
|
||||
const $spinner = $("#delete-spinner");
|
||||
|
||||
$btn.prop("disabled", true);
|
||||
$spinner.removeClass("hidden");
|
||||
|
||||
try {
|
||||
await Api.delete(`/api/books/${bookId}`);
|
||||
Utils.showToast("Книга успешно удалена", "success");
|
||||
setTimeout(() => (window.location.href = "/books"), 1000);
|
||||
} 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");
|
||||
$btn.prop("disabled", false);
|
||||
$spinner.addClass("hidden");
|
||||
$deleteModal.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
if (!$deleteModal.hasClass("hidden")) {
|
||||
$deleteModal.addClass("hidden");
|
||||
} else if (!$successModal.hasClass("hidden")) {
|
||||
$successModal.addClass("hidden");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,233 @@
|
||||
$(document).ready(() => {
|
||||
if (!window.canManage()) {
|
||||
Utils.showToast("У вас недостаточно прав", "error");
|
||||
setTimeout(() => (window.location.href = "/"), 1500);
|
||||
return;
|
||||
}
|
||||
|
||||
const pathParts = window.location.pathname.split("/");
|
||||
const genreId = parseInt(pathParts[pathParts.length - 2]);
|
||||
|
||||
if (!genreId || isNaN(genreId)) {
|
||||
Utils.showToast("Некорректный ID жанра", "error");
|
||||
setTimeout(() => (window.location.href = "/"), 1500);
|
||||
return;
|
||||
}
|
||||
|
||||
let originalGenre = null;
|
||||
let genreBooks = [];
|
||||
|
||||
const $form = $("#edit-genre-form");
|
||||
const $loader = $("#loader");
|
||||
const $dangerZone = $("#danger-zone");
|
||||
const $nameInput = $("#genre-name");
|
||||
const $submitBtn = $("#submit-btn");
|
||||
const $submitText = $("#submit-text");
|
||||
const $loadingSpinner = $("#loading-spinner");
|
||||
const $deleteModal = $("#delete-modal");
|
||||
const $successModal = $("#success-modal");
|
||||
|
||||
Promise.all([
|
||||
Api.get(`/api/genres/${genreId}`),
|
||||
Api.get(`/api/genres/${genreId}/books`),
|
||||
])
|
||||
.then(([genre, booksData]) => {
|
||||
originalGenre = genre;
|
||||
genreBooks = booksData.books || booksData || [];
|
||||
|
||||
document.title = `Редактирование: ${genre.name} | LiB`;
|
||||
populateForm(genre);
|
||||
renderGenreBooks(genreBooks);
|
||||
|
||||
$loader.addClass("hidden");
|
||||
$form.removeClass("hidden");
|
||||
$dangerZone.removeClass("hidden");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Жанр не найден", "error");
|
||||
setTimeout(() => (window.location.href = "/"), 1500);
|
||||
});
|
||||
|
||||
function populateForm(genre) {
|
||||
$nameInput.val(genre.name);
|
||||
updateCounter();
|
||||
}
|
||||
|
||||
function updateCounter() {
|
||||
$("#name-counter").text(`${$nameInput.val().length}/100`);
|
||||
}
|
||||
|
||||
$nameInput.on("input", updateCounter);
|
||||
|
||||
function renderGenreBooks(books) {
|
||||
const $container = $("#genre-books-container");
|
||||
$container.empty();
|
||||
|
||||
$("#books-count").text(books.length > 0 ? `(${books.length})` : "");
|
||||
|
||||
if (books.length === 0) {
|
||||
$container.html(`
|
||||
<div class="text-sm text-gray-500 text-center py-4">
|
||||
<svg class="w-8 h-8 mx-auto text-gray-300 mb-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"></path>
|
||||
</svg>
|
||||
В этом жанре пока нет книг
|
||||
</div>
|
||||
`);
|
||||
return;
|
||||
}
|
||||
|
||||
books.forEach((book) => {
|
||||
$container.append(`
|
||||
<a href="/book/${book.id}" class="flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 rounded-lg border transition-colors group">
|
||||
<div class="flex items-center min-w-0">
|
||||
<div class="w-8 h-10 bg-gradient-to-br from-gray-400 to-gray-500 rounded flex items-center justify-center flex-shrink-0 mr-3">
|
||||
<svg class="w-4 h-4 text-white" 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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<span class="text-sm font-medium text-gray-900 truncate block">${Utils.escapeHtml(book.title)}</span>
|
||||
${book.authors && book.authors.length > 0 ? `<span class="text-xs text-gray-500 truncate block">${Utils.escapeHtml(book.authors.map((a) => a.name).join(", "))}</span>` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600 flex-shrink-0 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"></path>
|
||||
</svg>
|
||||
</a>
|
||||
`);
|
||||
});
|
||||
}
|
||||
|
||||
$form.on("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const name = $nameInput.val().trim();
|
||||
|
||||
if (!name) {
|
||||
Utils.showToast("Введите название жанра", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (name === originalGenre.name) {
|
||||
Utils.showToast("Нет изменений для сохранения", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const updatedGenre = await Api.put(`/api/genres/${genreId}`, { name });
|
||||
originalGenre = updatedGenre;
|
||||
showSuccessModal(updatedGenre);
|
||||
} 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 = "У вас недостаточно прав";
|
||||
} else if (error.status === 404) {
|
||||
errorMsg = "Жанр не найден";
|
||||
} else if (error.status === 409) {
|
||||
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 showSuccessModal(genre) {
|
||||
$("#success-genre-name").text(genre.name);
|
||||
$successModal.removeClass("hidden");
|
||||
}
|
||||
|
||||
$("#success-close-btn").on("click", function () {
|
||||
$successModal.addClass("hidden");
|
||||
});
|
||||
|
||||
$successModal.on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
$successModal.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$("#delete-btn").on("click", function () {
|
||||
$("#modal-genre-name").text(originalGenre.name);
|
||||
|
||||
if (genreBooks.length > 0) {
|
||||
$("#modal-books-warning").removeClass("hidden");
|
||||
} else {
|
||||
$("#modal-books-warning").addClass("hidden");
|
||||
}
|
||||
|
||||
$deleteModal.removeClass("hidden");
|
||||
});
|
||||
|
||||
$("#cancel-delete-btn").on("click", function () {
|
||||
$deleteModal.addClass("hidden");
|
||||
});
|
||||
|
||||
$deleteModal.on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
$deleteModal.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$("#confirm-delete-btn").on("click", async function () {
|
||||
const $btn = $(this);
|
||||
const $spinner = $("#delete-spinner");
|
||||
|
||||
$btn.prop("disabled", true);
|
||||
$spinner.removeClass("hidden");
|
||||
|
||||
try {
|
||||
await Api.delete(`/api/genres/${genreId}`);
|
||||
Utils.showToast("Жанр успешно удалён", "success");
|
||||
setTimeout(() => (window.location.href = "/"), 1000);
|
||||
} 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");
|
||||
$btn.prop("disabled", false);
|
||||
$spinner.addClass("hidden");
|
||||
$deleteModal.addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
if (!$deleteModal.hasClass("hidden")) {
|
||||
$deleteModal.addClass("hidden");
|
||||
} else if (!$successModal.hasClass("hidden")) {
|
||||
$successModal.addClass("hidden");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,278 @@
|
||||
const $svg = $("#bookSvg");
|
||||
const NS = "http://www.w3.org/2000/svg";
|
||||
|
||||
const svgWidth = 200;
|
||||
const svgHeight = 250;
|
||||
const lineCount = 5;
|
||||
const lineDelay = 16;
|
||||
const bookWidth = 120;
|
||||
const bookHeight = 180;
|
||||
const bookX = (svgWidth - bookWidth) / 2;
|
||||
const bookY = (svgHeight - bookHeight) / 2;
|
||||
const desiredLineSpacing = 8;
|
||||
const baseLineWidth = 2;
|
||||
const maxLineWidth = 8;
|
||||
const maxLineHeight = bookHeight - 24;
|
||||
const innerPaddingX = 15;
|
||||
const appearStagger = 8;
|
||||
|
||||
let lineSpacing;
|
||||
if (lineCount > 1) {
|
||||
const maxSpan = Math.max(0, bookWidth - maxLineWidth - 2 * innerPaddingX);
|
||||
const wishSpan = desiredLineSpacing * (lineCount - 1);
|
||||
const realSpan = Math.min(wishSpan, maxSpan);
|
||||
lineSpacing = realSpan / (lineCount - 1);
|
||||
} else {
|
||||
lineSpacing = 0;
|
||||
}
|
||||
const linesSpan = lineSpacing * (lineCount - 1);
|
||||
|
||||
const rightBase = bookX + bookWidth - innerPaddingX - maxLineWidth;
|
||||
const lineStartX = rightBase - linesSpan + maxLineWidth;
|
||||
|
||||
const leftLimit = bookX + innerPaddingX;
|
||||
|
||||
let phase = 0;
|
||||
let time = 0;
|
||||
|
||||
const baseAppearDuration = 40;
|
||||
const appearDuration = baseAppearDuration + (lineCount - 1) * appearStagger;
|
||||
|
||||
const baseFlipDuration = 120;
|
||||
const flipDuration = baseFlipDuration + (lineCount - 1) * lineDelay;
|
||||
|
||||
const baseDisappearDuration = 40;
|
||||
const disappearDuration =
|
||||
baseDisappearDuration + (lineCount - 1) * appearStagger;
|
||||
|
||||
const pauseDuration = 30;
|
||||
|
||||
const book = document.createElementNS(NS, "rect");
|
||||
$(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).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),
|
||||
baseX,
|
||||
targetX,
|
||||
moveDistance,
|
||||
currentX: baseX,
|
||||
width: baseLineWidth,
|
||||
height: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function easeInOutQuad(t) {
|
||||
return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
|
||||
}
|
||||
|
||||
function easeOutQuad(t) {
|
||||
return 1 - (1 - t) * (1 - t);
|
||||
}
|
||||
|
||||
function easeInQuad(t) {
|
||||
return t * t;
|
||||
}
|
||||
|
||||
function updateLine(line) {
|
||||
const $el = line.el;
|
||||
const centerY = bookY + bookHeight / 2;
|
||||
|
||||
$el
|
||||
.attr("x", line.currentX)
|
||||
.attr("y", centerY - line.height / 2)
|
||||
.attr("width", line.width)
|
||||
.attr("height", Math.max(0, line.height));
|
||||
}
|
||||
|
||||
function animateBook() {
|
||||
time++;
|
||||
|
||||
if (phase === 0) {
|
||||
for (let i = 0; i < lineCount; i++) {
|
||||
const delay = (lineCount - 1 - i) * appearStagger;
|
||||
const localTime = Math.max(0, time - delay);
|
||||
const progress = Math.min(1, localTime / baseAppearDuration);
|
||||
const easedProgress = easeOutQuad(progress);
|
||||
|
||||
lines[i].height = maxLineHeight * easedProgress;
|
||||
lines[i].currentX = lines[i].baseX;
|
||||
lines[i].width = baseLineWidth;
|
||||
updateLine(lines[i]);
|
||||
}
|
||||
|
||||
if (time >= appearDuration) {
|
||||
phase = 1;
|
||||
time = 0;
|
||||
}
|
||||
} else if (phase === 1) {
|
||||
for (let i = 0; i < lineCount; i++) {
|
||||
const delay = i * lineDelay;
|
||||
const localTime = Math.max(0, time - delay);
|
||||
const progress = Math.min(1, localTime / baseFlipDuration);
|
||||
|
||||
const moveProgress = easeInOutQuad(progress);
|
||||
lines[i].currentX = lines[i].baseX - lines[i].moveDistance * moveProgress;
|
||||
|
||||
const widthProgress =
|
||||
progress < 0.5
|
||||
? easeOutQuad(progress * 2)
|
||||
: 1 - easeInQuad((progress - 0.5) * 2);
|
||||
|
||||
lines[i].width =
|
||||
baseLineWidth + (maxLineWidth - baseLineWidth) * widthProgress;
|
||||
|
||||
updateLine(lines[i]);
|
||||
}
|
||||
|
||||
if (time >= flipDuration) {
|
||||
phase = 2;
|
||||
time = 0;
|
||||
}
|
||||
} else if (phase === 2) {
|
||||
for (let i = 0; i < lineCount; i++) {
|
||||
const delay = (lineCount - 1 - i) * appearStagger;
|
||||
const localTime = Math.max(0, time - delay);
|
||||
const progress = Math.min(1, localTime / baseDisappearDuration);
|
||||
const easedProgress = easeInQuad(progress);
|
||||
|
||||
lines[i].height = maxLineHeight * (1 - easedProgress);
|
||||
updateLine(lines[i]);
|
||||
}
|
||||
|
||||
if (time >= disappearDuration + pauseDuration) {
|
||||
phase = 0;
|
||||
time = 0;
|
||||
for (let i = 0; i < lineCount; i++) {
|
||||
lines[i].currentX = lines[i].baseX;
|
||||
lines[i].width = baseLineWidth;
|
||||
lines[i].height = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animateBook);
|
||||
}
|
||||
|
||||
animateBook();
|
||||
|
||||
function animateCounter($element, target, duration = 2000) {
|
||||
const start = 0;
|
||||
const startTime = performance.now();
|
||||
|
||||
function update(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
const easedProgress = 1 - Math.pow(1 - progress, 3);
|
||||
const current = Math.floor(start + (target - start) * easedProgress);
|
||||
|
||||
$element.text(current.toLocaleString("ru-RU"));
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(update);
|
||||
} else {
|
||||
$element.text(target.toLocaleString("ru-RU"));
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const response = await fetch("/api/stats");
|
||||
if (!response.ok) {
|
||||
throw new Error("Ошибка загрузки статистики");
|
||||
}
|
||||
|
||||
const stats = await response.json();
|
||||
|
||||
setTimeout(() => {
|
||||
const $booksEl = $("#stat-books");
|
||||
const $authorsEl = $("#stat-authors");
|
||||
const $genresEl = $("#stat-genres");
|
||||
const $usersEl = $("#stat-users");
|
||||
|
||||
if ($booksEl.length) {
|
||||
animateCounter($booksEl, stats.books, 1500);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if ($authorsEl.length) {
|
||||
animateCounter($authorsEl, stats.authors, 1500);
|
||||
}
|
||||
}, 150);
|
||||
|
||||
setTimeout(() => {
|
||||
if ($genresEl.length) {
|
||||
animateCounter($genresEl, stats.genres, 1500);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
setTimeout(() => {
|
||||
if ($usersEl.length) {
|
||||
animateCounter($usersEl, stats.users, 1500);
|
||||
}
|
||||
}, 450);
|
||||
}, 500);
|
||||
} catch (error) {
|
||||
console.error("Ошибка загрузки статистики:", error);
|
||||
|
||||
$("#stat-books").text("—");
|
||||
$("#stat-authors").text("—");
|
||||
$("#stat-genres").text("—");
|
||||
$("#stat-users").text("—");
|
||||
}
|
||||
}
|
||||
|
||||
function observeStatCards() {
|
||||
const $cards = $(".stat-card");
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
setTimeout(() => {
|
||||
$(entry.target).addClass("animate-fade-in").css({
|
||||
opacity: "1",
|
||||
transform: "translateY(0)",
|
||||
});
|
||||
}, index * 100);
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
);
|
||||
|
||||
$cards.each(function (index, card) {
|
||||
$(card).css({
|
||||
opacity: "0",
|
||||
transform: "translateY(20px)",
|
||||
transition: "opacity 0.5s ease, transform 0.5s ease",
|
||||
});
|
||||
observer.observe(card);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(() => {
|
||||
loadStats();
|
||||
observeStatCards();
|
||||
});
|
||||
@@ -0,0 +1,253 @@
|
||||
$(document).ready(() => {
|
||||
let allLoans = [];
|
||||
let booksCache = new Map();
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
const user = window.getUser();
|
||||
if (!user) {
|
||||
Utils.showToast("Необходима авторизация", "error");
|
||||
window.location.href = "/auth";
|
||||
return;
|
||||
}
|
||||
loadLoans();
|
||||
}
|
||||
|
||||
async function loadLoans() {
|
||||
try {
|
||||
const data = await Api.get("/api/loans/?page=1&size=100");
|
||||
allLoans = data.loans;
|
||||
|
||||
const bookIds = [...new Set(allLoans.map((loan) => loan.book_id))];
|
||||
await loadBooks(bookIds);
|
||||
|
||||
renderLoans();
|
||||
} catch (error) {
|
||||
console.error("Failed to load loans", error);
|
||||
Utils.showToast("Ошибка загрузки выдач", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function loadBooks(bookIds) {
|
||||
const promises = bookIds.map(async (bookId) => {
|
||||
if (!booksCache.has(bookId)) {
|
||||
try {
|
||||
const book = await Api.get(`/api/books/${bookId}`);
|
||||
booksCache.set(bookId, book);
|
||||
} catch (error) {
|
||||
console.error(`Failed to load book ${bookId}`, error);
|
||||
}
|
||||
}
|
||||
});
|
||||
await Promise.all(promises);
|
||||
}
|
||||
|
||||
function renderLoans() {
|
||||
const reservations = allLoans.filter(
|
||||
(loan) => !loan.returned_at && getBookStatus(loan.book_id) === "reserved",
|
||||
);
|
||||
const activeLoans = allLoans.filter(
|
||||
(loan) => !loan.returned_at && getBookStatus(loan.book_id) === "borrowed",
|
||||
);
|
||||
const returned = allLoans.filter((loan) => loan.returned_at !== null);
|
||||
|
||||
renderReservations(reservations);
|
||||
renderActiveLoans(activeLoans);
|
||||
renderReturned(returned);
|
||||
}
|
||||
|
||||
function getBookStatus(bookId) {
|
||||
const book = booksCache.get(bookId);
|
||||
return book ? book.status : null;
|
||||
}
|
||||
|
||||
function renderReservations(reservations) {
|
||||
const $container = $("#reservations-container");
|
||||
$("#reservations-count").text(reservations.length);
|
||||
$container.empty();
|
||||
|
||||
if (reservations.length === 0) {
|
||||
$container.html(
|
||||
'<div class="text-center text-gray-500 py-8">Нет активных бронирований</div>',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
reservations.forEach((loan) => {
|
||||
const book = booksCache.get(loan.book_id);
|
||||
if (!book) return;
|
||||
|
||||
const borrowedDate = new Date(loan.borrowed_at).toLocaleDateString(
|
||||
"ru-RU",
|
||||
);
|
||||
const dueDate = new Date(loan.due_date).toLocaleDateString("ru-RU");
|
||||
|
||||
const $card = $(`
|
||||
<div class="border border-blue-200 rounded-lg p-4 bg-blue-50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="/book/${book.id}" class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors">
|
||||
${Utils.escapeHtml(book.title)}
|
||||
</a>
|
||||
<p class="text-sm text-gray-600 mt-1">
|
||||
Авторы: ${book.authors.map((a) => a.name).join(", ") || "Не указаны"}
|
||||
</p>
|
||||
<div class="mt-3 space-y-1 text-sm text-gray-600">
|
||||
<p><span class="font-medium">Дата бронирования:</span> ${borrowedDate}</p>
|
||||
<p><span class="font-medium">Срок возврата:</span> ${dueDate}</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<span class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">
|
||||
Забронирована
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="cancel-reservation-btn ml-4 px-4 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors"
|
||||
data-loan-id="${loan.id}"
|
||||
data-book-id="${book.id}"
|
||||
>
|
||||
Отменить бронь
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$card.find(".cancel-reservation-btn").on("click", function () {
|
||||
const loanId = $(this).data("loan-id");
|
||||
const bookId = $(this).data("book-id");
|
||||
cancelReservation(loanId, bookId);
|
||||
});
|
||||
|
||||
$container.append($card);
|
||||
});
|
||||
}
|
||||
|
||||
function renderActiveLoans(activeLoans) {
|
||||
const $container = $("#active-loans-container");
|
||||
$("#active-loans-count").text(activeLoans.length);
|
||||
$container.empty();
|
||||
|
||||
if (activeLoans.length === 0) {
|
||||
$container.html(
|
||||
'<div class="text-center text-gray-500 py-8">Нет активных выдач</div>',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
activeLoans.forEach((loan) => {
|
||||
const book = booksCache.get(loan.book_id);
|
||||
if (!book) return;
|
||||
|
||||
const borrowedDate = new Date(loan.borrowed_at).toLocaleDateString(
|
||||
"ru-RU",
|
||||
);
|
||||
const dueDate = new Date(loan.due_date).toLocaleDateString("ru-RU");
|
||||
const isOverdue = new Date(loan.due_date) < new Date();
|
||||
|
||||
const $card = $(`
|
||||
<div class="border ${isOverdue ? "border-red-300 bg-red-50" : "border-yellow-200 bg-yellow-50"} rounded-lg p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="/book/${book.id}" class="text-lg font-semibold text-gray-900 hover:text-yellow-600 transition-colors">
|
||||
${Utils.escapeHtml(book.title)}
|
||||
</a>
|
||||
<p class="text-sm text-gray-600 mt-1">
|
||||
Авторы: ${book.authors.map((a) => a.name).join(", ") || "Не указаны"}
|
||||
</p>
|
||||
<div class="mt-3 space-y-1 text-sm text-gray-600">
|
||||
<p><span class="font-medium">Дата выдачи:</span> ${borrowedDate}</p>
|
||||
<p><span class="font-medium">Срок возврата:</span> ${dueDate}</p>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<span class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">
|
||||
Выдана
|
||||
</span>
|
||||
${isOverdue ? '<span class="inline-flex items-center px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">Просрочена</span>' : ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$container.append($card);
|
||||
});
|
||||
}
|
||||
|
||||
function renderReturned(returned) {
|
||||
const $container = $("#returned-container");
|
||||
$("#returned-count").text(returned.length);
|
||||
$container.empty();
|
||||
|
||||
if (returned.length === 0) {
|
||||
$container.html(
|
||||
'<div class="text-center text-gray-500 py-8">Нет возвращенных книг</div>',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
returned.forEach((loan) => {
|
||||
const book = booksCache.get(loan.book_id);
|
||||
if (!book) return;
|
||||
|
||||
const borrowedDate = new Date(loan.borrowed_at).toLocaleDateString(
|
||||
"ru-RU",
|
||||
);
|
||||
const returnedDate = new Date(loan.returned_at).toLocaleDateString(
|
||||
"ru-RU",
|
||||
);
|
||||
const dueDate = new Date(loan.due_date).toLocaleDateString("ru-RU");
|
||||
|
||||
const $card = $(`
|
||||
<div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="/book/${book.id}" class="text-lg font-semibold text-gray-900 hover:text-gray-600 transition-colors">
|
||||
${Utils.escapeHtml(book.title)}
|
||||
</a>
|
||||
<p class="text-sm text-gray-600 mt-1">
|
||||
Авторы: ${book.authors.map((a) => a.name).join(", ") || "Не указаны"}
|
||||
</p>
|
||||
<div class="mt-3 space-y-1 text-sm text-gray-600">
|
||||
<p><span class="font-medium">Дата выдачи:</span> ${borrowedDate}</p>
|
||||
<p><span class="font-medium">Срок возврата:</span> ${dueDate}</p>
|
||||
<p><span class="font-medium">Дата возврата:</span> ${returnedDate}</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<span class="inline-flex items-center px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">
|
||||
Возвращена
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$container.append($card);
|
||||
});
|
||||
}
|
||||
|
||||
async function cancelReservation(loanId, bookId) {
|
||||
if (!confirm("Вы уверены, что хотите отменить бронирование?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await Api.delete(`/api/loans/${loanId}`);
|
||||
Utils.showToast("Бронирование отменено", "success");
|
||||
|
||||
allLoans = allLoans.filter((loan) => loan.id !== loanId);
|
||||
const book = booksCache.get(bookId);
|
||||
if (book) {
|
||||
book.status = "active";
|
||||
booksCache.set(bookId, book);
|
||||
}
|
||||
|
||||
renderLoans();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast(error.message || "Ошибка отмены бронирования", "error");
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,387 @@
|
||||
$(document).ready(() => {
|
||||
const token = StorageHelper.get("access_token");
|
||||
if (!token) {
|
||||
window.location.href = "/auth";
|
||||
return;
|
||||
}
|
||||
|
||||
let currentUsername = "";
|
||||
let currentRecoveryCodes = [];
|
||||
|
||||
loadProfile();
|
||||
|
||||
function loadProfile() {
|
||||
Promise.all([
|
||||
Api.get("/api/auth/me"),
|
||||
Api.get("/api/auth/roles").catch(() => ({ roles: [] })),
|
||||
Api.get("/api/auth/recovery-codes/status").catch(() => null),
|
||||
])
|
||||
.then(async ([user, rolesData, recoveryStatus]) => {
|
||||
document.title = `LiB - ${user.full_name || user.username}`;
|
||||
currentUsername = user.username;
|
||||
|
||||
await renderProfileHeader(user);
|
||||
renderInfo(user);
|
||||
renderRoles(user.roles || [], rolesData.roles || []);
|
||||
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("update-2fa", { detail: user.is_2fa_enabled }),
|
||||
);
|
||||
|
||||
if (recoveryStatus) {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("update-recovery-codes", {
|
||||
detail: recoveryStatus.remaining,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
$("#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(`
|
||||
<div class="flex flex-col sm:flex-row items-center sm:items-start">
|
||||
<div class="relative mb-4 sm:mb-0 sm:mr-6">
|
||||
<img src="${avatarUrl}" class="w-24 h-24 rounded-full object-cover border-4 border-gray-200">
|
||||
${user.is_verified ? '<div class="absolute -bottom-1 -right-1 bg-green-500 rounded-full p-1 border-2 border-white"><svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg></div>' : ""}
|
||||
</div>
|
||||
<div class="flex-1 text-center sm:text-left">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-1">${displayName}</h1>
|
||||
<p class="text-gray-500 mb-3">@${Utils.escapeHtml(user.username)}</p>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm ${user.is_active ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}">
|
||||
${user.is_active ? "Активен" : "Заблокирован"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
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) => `
|
||||
<div class="flex justify-between py-2 border-b last:border-0">
|
||||
<span class="text-gray-500">${f.label}</span>
|
||||
<span class="font-medium text-gray-900">${Utils.escapeHtml(String(f.value))}</span>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
$("#account-info").html(html);
|
||||
}
|
||||
|
||||
function renderRoles(userRoles, allRoles) {
|
||||
const $container = $("#roles-container");
|
||||
if (userRoles.length === 0) {
|
||||
$container.html('<p class="text-gray-500">Нет ролей</p>');
|
||||
return;
|
||||
}
|
||||
|
||||
const roleMap = {};
|
||||
allRoles.forEach((r) => (roleMap[r.name] = r.description));
|
||||
|
||||
const html = userRoles
|
||||
.map(
|
||||
(role) => `
|
||||
<div class="p-3 bg-blue-50 border border-blue-100 rounded text-blue-800">
|
||||
<div class="font-bold capitalize">${Utils.escapeHtml(role)}</div>
|
||||
<div class="text-xs opacity-75">${Utils.escapeHtml(roleMap[role] || "")}</div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
$container.html(html);
|
||||
}
|
||||
|
||||
$("#recovery-codes-btn").on("click", function () {
|
||||
resetRecoveryCodesModal();
|
||||
window.dispatchEvent(new CustomEvent("open-recovery-codes-modal"));
|
||||
loadRecoveryCodesStatus();
|
||||
});
|
||||
|
||||
function resetRecoveryCodesModal() {
|
||||
$("#recovery-codes-loading").removeClass("hidden");
|
||||
$("#recovery-codes-status").addClass("hidden");
|
||||
$("#recovery-codes-display").addClass("hidden");
|
||||
$("#codes-saved-checkbox").prop("checked", false);
|
||||
$("#close-recovery-modal-btn").prop("disabled", true);
|
||||
$("#regenerate-codes-btn")
|
||||
.prop("disabled", false)
|
||||
.text("Сгенерировать новые коды");
|
||||
currentRecoveryCodes = [];
|
||||
}
|
||||
|
||||
async function loadRecoveryCodesStatus() {
|
||||
try {
|
||||
const status = await Api.get("/api/auth/recovery-codes/status");
|
||||
renderRecoveryCodesStatus(status);
|
||||
} catch (error) {
|
||||
Utils.showToast(
|
||||
error.message || "Ошибка загрузки статуса кодов",
|
||||
"error",
|
||||
);
|
||||
window.dispatchEvent(new CustomEvent("close-recovery-codes-modal"));
|
||||
}
|
||||
}
|
||||
|
||||
function renderRecoveryCodesStatus(status) {
|
||||
const { total, remaining, used_codes, generated_at, should_regenerate } =
|
||||
status;
|
||||
|
||||
let iconBgClass, iconColorClass, iconSvg;
|
||||
if (remaining <= 2) {
|
||||
iconBgClass = "bg-red-100";
|
||||
iconColorClass = "text-red-600";
|
||||
iconSvg = `<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" />`;
|
||||
} else if (remaining <= 5) {
|
||||
iconBgClass = "bg-yellow-100";
|
||||
iconColorClass = "text-yellow-600";
|
||||
iconSvg = `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />`;
|
||||
} else {
|
||||
iconBgClass = "bg-green-100";
|
||||
iconColorClass = "text-green-600";
|
||||
iconSvg = `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />`;
|
||||
}
|
||||
|
||||
$("#status-icon-container")
|
||||
.removeClass()
|
||||
.addClass(
|
||||
`flex items-center justify-center w-12 h-12 mx-auto rounded-full mb-4 ${iconBgClass}`,
|
||||
)
|
||||
.html(
|
||||
`<svg class="w-6 h-6 ${iconColorClass}" fill="none" stroke="currentColor" viewBox="0 0 24 24">${iconSvg}</svg>`,
|
||||
);
|
||||
|
||||
let statusColorClass;
|
||||
if (remaining <= 2) {
|
||||
statusColorClass = "text-red-600";
|
||||
} else if (remaining <= 5) {
|
||||
statusColorClass = "text-yellow-600";
|
||||
} else {
|
||||
statusColorClass = "text-green-600";
|
||||
}
|
||||
|
||||
$("#codes-status-summary").html(`
|
||||
<p class="text-sm text-gray-600">
|
||||
Доступно кодов: <strong class="${statusColorClass}">${remaining}</strong> из <strong>${total}</strong>
|
||||
</p>
|
||||
`);
|
||||
|
||||
const $list = $("#codes-status-list");
|
||||
$list.empty();
|
||||
|
||||
used_codes.forEach((used, index) => {
|
||||
const codeDisplay = "████-████-████-████";
|
||||
const statusClass = used
|
||||
? "text-gray-300 line-through"
|
||||
: "text-green-600";
|
||||
const statusIcon = used ? "✗" : "✓";
|
||||
const bgClass = used ? "bg-gray-50" : "bg-green-50";
|
||||
|
||||
$list.append(`
|
||||
<div class="flex items-center justify-between py-1 px-2 rounded ${bgClass}">
|
||||
<span class="font-mono text-sm ${statusClass}">${index + 1}. ${codeDisplay}</span>
|
||||
<span class="${used ? "text-gray-400" : "text-green-600"}">${statusIcon}</span>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
|
||||
if (should_regenerate || remaining <= 2) {
|
||||
let warningText;
|
||||
if (remaining === 0) {
|
||||
warningText =
|
||||
"У вас не осталось резервных кодов! Срочно сгенерируйте новые.";
|
||||
} else if (remaining <= 2) {
|
||||
warningText = "Осталось мало кодов. Рекомендуем сгенерировать новые.";
|
||||
} else {
|
||||
warningText = "Рекомендуем сгенерировать новые коды для безопасности.";
|
||||
}
|
||||
$("#warning-text").text(warningText);
|
||||
$("#codes-warning").removeClass("hidden");
|
||||
} else {
|
||||
$("#codes-warning").addClass("hidden");
|
||||
}
|
||||
|
||||
if (generated_at) {
|
||||
const date = new Date(generated_at);
|
||||
$("#codes-generated-at").text(`Сгенерированы: ${date.toLocaleString()}`);
|
||||
}
|
||||
|
||||
$("#recovery-codes-loading").addClass("hidden");
|
||||
$("#recovery-codes-status").removeClass("hidden");
|
||||
}
|
||||
|
||||
$("#regenerate-codes-btn").on("click", async function () {
|
||||
const $btn = $(this);
|
||||
$btn.prop("disabled", true).text("Генерация...");
|
||||
|
||||
try {
|
||||
const response = await Api.post("/api/auth/recovery-codes/regenerate");
|
||||
|
||||
currentRecoveryCodes = response.codes;
|
||||
displayNewRecoveryCodes(response.codes, response.generated_at);
|
||||
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("update-recovery-codes", {
|
||||
detail: response.codes.length,
|
||||
}),
|
||||
);
|
||||
|
||||
Utils.showToast("Новые коды успешно сгенерированы", "success");
|
||||
} catch (error) {
|
||||
Utils.showToast(error.message || "Ошибка генерации кодов", "error");
|
||||
$btn.prop("disabled", false).text("Сгенерировать новые коды");
|
||||
}
|
||||
});
|
||||
|
||||
function displayNewRecoveryCodes(codes, generatedAt) {
|
||||
const $list = $("#recovery-codes-list");
|
||||
$list.empty();
|
||||
|
||||
codes.forEach((code, index) => {
|
||||
$list.append(`
|
||||
<div class="py-1 px-2 bg-white rounded border select-all font-mono text-gray-800">
|
||||
${index + 1}. ${Utils.escapeHtml(code)}
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
|
||||
if (generatedAt) {
|
||||
const date = new Date(generatedAt);
|
||||
$("#recovery-codes-generated-at").text(
|
||||
`Сгенерированы: ${date.toLocaleString()}`,
|
||||
);
|
||||
}
|
||||
|
||||
$("#recovery-codes-status").addClass("hidden");
|
||||
$("#recovery-codes-display").removeClass("hidden");
|
||||
}
|
||||
|
||||
$("#codes-saved-checkbox").on("change", function () {
|
||||
$("#close-recovery-modal-btn").prop("disabled", !this.checked);
|
||||
});
|
||||
|
||||
$("#copy-codes-btn").on("click", function () {
|
||||
if (currentRecoveryCodes.length === 0) return;
|
||||
|
||||
const codesText = currentRecoveryCodes.join("\n");
|
||||
navigator.clipboard.writeText(codesText).then(() => {
|
||||
const $btn = $(this);
|
||||
const originalHtml = $btn.html();
|
||||
$btn.html(`
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Скопировано!</span>
|
||||
`);
|
||||
setTimeout(() => $btn.html(originalHtml), 2000);
|
||||
Utils.showToast("Коды скопированы в буфер обмена", "success");
|
||||
});
|
||||
});
|
||||
|
||||
$("#download-codes-btn").on("click", function () {
|
||||
if (currentRecoveryCodes.length === 0) return;
|
||||
|
||||
const username = currentUsername || "user";
|
||||
const codesText = `Резервные коды для аккаунта: ${username}
|
||||
Дата: ${new Date().toLocaleString()}
|
||||
|
||||
${currentRecoveryCodes.map((c, i) => `${i + 1}. ${c}`).join("\n")}
|
||||
|
||||
Храните эти коды в надёжном месте!
|
||||
Каждый код можно использовать только один раз.`;
|
||||
|
||||
const blob = new Blob([codesText], { type: "text/plain;charset=utf-8" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `recovery-codes-${username}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
Utils.showToast("Файл с кодами скачан", "success");
|
||||
});
|
||||
|
||||
$("#close-recovery-modal-btn, #close-status-modal-btn").on(
|
||||
"click",
|
||||
function () {
|
||||
window.dispatchEvent(new CustomEvent("close-recovery-codes-modal"));
|
||||
},
|
||||
);
|
||||
|
||||
$("#submit-disable-2fa-btn").on("click", async function () {
|
||||
const $btn = $(this);
|
||||
const password = $("#disable-2fa-password").val();
|
||||
|
||||
if (!password) {
|
||||
Utils.showToast("Введите пароль", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
$btn.prop("disabled", true).text("Отключение...");
|
||||
|
||||
try {
|
||||
await Api.post("/api/auth/2fa/disable", { password });
|
||||
Utils.showToast("2FA успешно отключена", "success");
|
||||
window.dispatchEvent(new CustomEvent("update-2fa", { detail: false }));
|
||||
window.dispatchEvent(new CustomEvent("close-disable-2fa-modal"));
|
||||
|
||||
$("#disable-2fa-form")[0].reset();
|
||||
} catch (error) {
|
||||
Utils.showToast(error.message || "Ошибка отключения 2FA", "error");
|
||||
} finally {
|
||||
$btn.prop("disabled", false).text("Отключить");
|
||||
}
|
||||
});
|
||||
|
||||
$("#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;
|
||||
}
|
||||
|
||||
if (newPass.length < 8) {
|
||||
Utils.showToast("Пароль должен быть минимум 8 символов", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
$btn.prop("disabled", true).text("Сохранение...");
|
||||
|
||||
try {
|
||||
await Api.put("/api/auth/me", { password: newPass });
|
||||
|
||||
Utils.showToast("Пароль успешно изменён", "success");
|
||||
|
||||
window.dispatchEvent(new CustomEvent("close-password-modal"));
|
||||
|
||||
$("#change-password-form")[0].reset();
|
||||
} catch (error) {
|
||||
Utils.showToast(error.message || "Ошибка смены пароля", "error");
|
||||
} finally {
|
||||
$btn.prop("disabled", false).text("Сменить");
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,696 @@
|
||||
$(document).ready(() => {
|
||||
if (!window.isAdmin()) {
|
||||
$("#users-container").html(
|
||||
document.getElementById("access-denied-template").innerHTML,
|
||||
);
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!window.isAdmin()) {
|
||||
$("#users-container").html(
|
||||
document.getElementById("access-denied-template").innerHTML,
|
||||
);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
let allRoles = [];
|
||||
let users = [];
|
||||
let currentPage = 1;
|
||||
let pageSize = 20;
|
||||
let totalUsers = 0;
|
||||
let searchQuery = "";
|
||||
let selectedFilterRoles = new Set();
|
||||
let activeDropdown = null;
|
||||
let userToDelete = null;
|
||||
|
||||
const defaultPlaceholder = "Фильтр по роли...";
|
||||
|
||||
showLoadingState();
|
||||
|
||||
Promise.all([
|
||||
Api.get("/api/auth/users?skip=0&limit=100"),
|
||||
Api.get("/api/auth/roles"),
|
||||
])
|
||||
.then(([usersData, rolesData]) => {
|
||||
users = usersData.users;
|
||||
totalUsers = usersData.total;
|
||||
allRoles = rolesData.roles;
|
||||
$("#total-users-count").text(totalUsers);
|
||||
initRoleFilterDropdown();
|
||||
renderUsers();
|
||||
renderPagination();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Ошибка загрузки данных", "error");
|
||||
});
|
||||
|
||||
function initRoleFilterDropdown() {
|
||||
const $dropdown = $("#role-filter-dropdown");
|
||||
$dropdown.empty();
|
||||
|
||||
allRoles.forEach((role) => {
|
||||
$("<div>")
|
||||
.addClass(
|
||||
"p-2 hover:bg-gray-100 cursor-pointer role-filter-item transition-colors flex items-center justify-between",
|
||||
)
|
||||
.attr("data-name", role.name)
|
||||
.html(
|
||||
`<div>
|
||||
<div class="font-medium text-sm">${Utils.escapeHtml(role.name)}</div>
|
||||
${role.description ? `<div class="text-xs text-gray-500">${Utils.escapeHtml(role.description)}</div>` : ""}
|
||||
</div>
|
||||
<svg class="check-icon w-4 h-4 text-green-600 hidden" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>`,
|
||||
)
|
||||
.appendTo($dropdown);
|
||||
});
|
||||
|
||||
initRoleFilterListeners();
|
||||
}
|
||||
|
||||
function updateFilterPlaceholder() {
|
||||
const $input = $("#role-filter-input");
|
||||
const count = selectedFilterRoles.size;
|
||||
|
||||
if (count === 0) {
|
||||
$input.attr("placeholder", defaultPlaceholder);
|
||||
} else {
|
||||
$input.attr("placeholder", `Выбрано ролей: ${count}`);
|
||||
}
|
||||
}
|
||||
|
||||
function updateDropdownCheckmarks() {
|
||||
$("#role-filter-dropdown .role-filter-item").each(function () {
|
||||
const name = $(this).data("name");
|
||||
const $check = $(this).find(".check-icon");
|
||||
if (selectedFilterRoles.has(name)) {
|
||||
$check.removeClass("hidden");
|
||||
$(this).addClass("bg-gray-50");
|
||||
} else {
|
||||
$check.addClass("hidden");
|
||||
$(this).removeClass("bg-gray-50");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initRoleFilterListeners() {
|
||||
const $input = $("#role-filter-input");
|
||||
const $dropdown = $("#role-filter-dropdown");
|
||||
|
||||
$input.on("focus", function () {
|
||||
$dropdown.removeClass("hidden");
|
||||
});
|
||||
|
||||
$input.on("input", function () {
|
||||
const val = $(this).val().toLowerCase();
|
||||
$dropdown.removeClass("hidden");
|
||||
$dropdown.find(".role-filter-item").each(function () {
|
||||
const name = $(this).data("name").toLowerCase();
|
||||
$(this).toggle(name.includes(val));
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("click", function (e) {
|
||||
if (
|
||||
!$(e.target).closest("#role-filter-input, #role-filter-dropdown").length
|
||||
) {
|
||||
$dropdown.addClass("hidden");
|
||||
$input.val("");
|
||||
$dropdown.find(".role-filter-item").show();
|
||||
}
|
||||
});
|
||||
|
||||
$dropdown.on("click", ".role-filter-item", function (e) {
|
||||
e.stopPropagation();
|
||||
const name = $(this).data("name");
|
||||
|
||||
if (selectedFilterRoles.has(name)) {
|
||||
selectedFilterRoles.delete(name);
|
||||
} else {
|
||||
selectedFilterRoles.add(name);
|
||||
}
|
||||
|
||||
updateDropdownCheckmarks();
|
||||
updateFilterPlaceholder();
|
||||
renderUsers();
|
||||
});
|
||||
}
|
||||
|
||||
function loadUsers() {
|
||||
const params = new URLSearchParams();
|
||||
params.append("skip", (currentPage - 1) * pageSize);
|
||||
params.append("limit", pageSize);
|
||||
|
||||
showLoadingState();
|
||||
|
||||
Api.get(`/api/auth/users?${params.toString()}`)
|
||||
.then((data) => {
|
||||
users = data.users;
|
||||
totalUsers = data.total;
|
||||
$("#total-users-count").text(totalUsers);
|
||||
renderUsers();
|
||||
renderPagination();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Не удалось загрузить пользователей", "error");
|
||||
});
|
||||
}
|
||||
|
||||
async function renderUsers() {
|
||||
const $container = $("#users-container");
|
||||
const tpl = document.getElementById("user-card-template");
|
||||
const emptyTpl = document.getElementById("empty-state-template");
|
||||
const roleBadgeTpl = document.getElementById("role-badge-template");
|
||||
|
||||
$container.empty();
|
||||
|
||||
let filteredUsers = users;
|
||||
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase();
|
||||
filteredUsers = filteredUsers.filter(
|
||||
(user) =>
|
||||
user.username.toLowerCase().includes(q) ||
|
||||
user.email.toLowerCase().includes(q) ||
|
||||
(user.full_name && user.full_name.toLowerCase().includes(q)),
|
||||
);
|
||||
}
|
||||
|
||||
if (selectedFilterRoles.size > 0) {
|
||||
filteredUsers = filteredUsers.filter((user) => {
|
||||
if (!user.roles || user.roles.length === 0) return false;
|
||||
return Array.from(selectedFilterRoles).every((roleName) =>
|
||||
user.roles.includes(roleName),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (filteredUsers.length === 0) {
|
||||
$container.append(emptyTpl.content.cloneNode(true));
|
||||
return;
|
||||
}
|
||||
|
||||
const currentUser = window.getUser();
|
||||
|
||||
for (const user of filteredUsers) {
|
||||
const clone = tpl.content.cloneNode(true);
|
||||
const card = clone.querySelector(".user-card");
|
||||
|
||||
card.dataset.id = user.id;
|
||||
clone.querySelector(".user-fullname").textContent =
|
||||
user.full_name || user.username;
|
||||
clone.querySelector(".user-username").textContent = "@" + user.username;
|
||||
clone.querySelector(".user-email").textContent = user.email;
|
||||
|
||||
const avatar = clone.querySelector(".user-avatar");
|
||||
Utils.getGravatarUrl(user.email).then((url) => {
|
||||
avatar.src = url;
|
||||
});
|
||||
|
||||
if (user.is_verified) {
|
||||
clone.querySelector(".user-verified-badge").classList.remove("hidden");
|
||||
}
|
||||
if (user.is_active) {
|
||||
clone.querySelector(".user-active-badge").classList.remove("hidden");
|
||||
} else {
|
||||
clone.querySelector(".user-inactive-badge").classList.remove("hidden");
|
||||
}
|
||||
|
||||
const rolesContainer = clone.querySelector(".user-roles");
|
||||
if (user.roles && user.roles.length > 0) {
|
||||
user.roles.forEach((roleName) => {
|
||||
const badge = roleBadgeTpl.content.cloneNode(true);
|
||||
const badgeSpan = badge.querySelector(".role-badge");
|
||||
|
||||
if (roleName === "admin") {
|
||||
badgeSpan.classList.remove("bg-gray-600");
|
||||
badgeSpan.classList.add("bg-red-600");
|
||||
} else if (roleName === "librarian") {
|
||||
badgeSpan.classList.remove("bg-gray-600");
|
||||
badgeSpan.classList.add("bg-blue-600");
|
||||
}
|
||||
|
||||
badge.querySelector(".role-name").textContent = roleName;
|
||||
const removeBtn = badge.querySelector(".remove-role-btn");
|
||||
removeBtn.dataset.userId = user.id;
|
||||
removeBtn.dataset.roleName = roleName;
|
||||
rolesContainer.appendChild(badge);
|
||||
});
|
||||
} else {
|
||||
rolesContainer.innerHTML =
|
||||
'<span class="text-gray-400 text-sm italic">Нет ролей</span>';
|
||||
}
|
||||
|
||||
const addRoleBtn = clone.querySelector(".add-role-btn");
|
||||
addRoleBtn.dataset.userId = user.id;
|
||||
|
||||
const editBtn = clone.querySelector(".edit-user-btn");
|
||||
editBtn.dataset.userId = user.id;
|
||||
|
||||
const deleteBtn = clone.querySelector(".delete-user-btn");
|
||||
deleteBtn.dataset.userId = user.id;
|
||||
|
||||
if (currentUser && currentUser.id === user.id) {
|
||||
deleteBtn.classList.add("opacity-30", "cursor-not-allowed");
|
||||
deleteBtn.disabled = true;
|
||||
deleteBtn.title = "Нельзя удалить себя";
|
||||
}
|
||||
|
||||
$container.append(clone);
|
||||
}
|
||||
}
|
||||
|
||||
function showLoadingState() {
|
||||
$("#users-container").html(`
|
||||
<div class="space-y-4">
|
||||
${Array(3)
|
||||
.fill()
|
||||
.map(
|
||||
() => `
|
||||
<div class="bg-white p-4 rounded-lg shadow-md animate-pulse">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gray-200 rounded-full"></div>
|
||||
<div class="flex-1">
|
||||
<div class="h-5 bg-gray-200 rounded w-1/4 mb-2"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-1/3 mb-2"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-1/2 mb-3"></div>
|
||||
<div class="flex gap-2">
|
||||
<div class="h-6 bg-gray-200 rounded-full w-16"></div>
|
||||
<div class="h-6 bg-gray-200 rounded-full w-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
function renderPagination() {
|
||||
$("#pagination-container").empty();
|
||||
const totalPages = Math.ceil(totalUsers / 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 transition" ${currentPage === 1 ? "disabled" : ""}>←</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 transition" ${currentPage === totalPages ? "disabled" : ""}>→</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 text-gray-500">...</span>`);
|
||||
} else {
|
||||
const isActive = page === currentPage;
|
||||
$pageNumbers.append(`
|
||||
<button class="page-btn px-3 py-2 rounded-lg transition-colors ${isActive ? "bg-gray-600 text-white" : "bg-white border border-gray-300 hover:bg-gray-50"}" data-page="${page}">${page}</button>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
$("#pagination-container").append($pagination);
|
||||
|
||||
$("#prev-page").on("click", function () {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
loadUsers();
|
||||
scrollToTop();
|
||||
}
|
||||
});
|
||||
|
||||
$("#next-page").on("click", function () {
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
loadUsers();
|
||||
scrollToTop();
|
||||
}
|
||||
});
|
||||
|
||||
$(".page-btn").on("click", function () {
|
||||
const page = parseInt($(this).data("page"));
|
||||
if (page !== currentPage) {
|
||||
currentPage = page;
|
||||
loadUsers();
|
||||
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() {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
function showRoleDropdown(button, userId) {
|
||||
closeActiveDropdown();
|
||||
|
||||
const user = users.find((u) => u.id === userId);
|
||||
const userRoles = user ? user.roles || [] : [];
|
||||
|
||||
const availableRoles = allRoles.filter(
|
||||
(role) => !userRoles.includes(role.name),
|
||||
);
|
||||
|
||||
if (availableRoles.length === 0) {
|
||||
Utils.showToast("Все роли уже назначены", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
const $dropdown = $(`
|
||||
<div class="role-add-dropdown absolute z-50 bg-white border border-gray-200 rounded-lg shadow-xl overflow-hidden" style="min-width: 200px;">
|
||||
<div class="p-2 border-b border-gray-100">
|
||||
<input type="text" class="role-search-input w-full border border-gray-200 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400" placeholder="Поиск роли..." autocomplete="off" />
|
||||
</div>
|
||||
<div class="role-items max-h-48 overflow-y-auto"></div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
const $roleItems = $dropdown.find(".role-items");
|
||||
|
||||
availableRoles.forEach((role) => {
|
||||
const roleClass =
|
||||
role.name === "admin"
|
||||
? "hover:bg-red-50"
|
||||
: role.name === "librarian"
|
||||
? "hover:bg-blue-50"
|
||||
: "hover:bg-gray-50";
|
||||
|
||||
$roleItems.append(`
|
||||
<div class="role-item p-2 ${roleClass} cursor-pointer transition-colors border-b border-gray-50 last:border-0" data-role-name="${Utils.escapeHtml(role.name)}">
|
||||
<div class="font-medium text-sm text-gray-800">${Utils.escapeHtml(role.name)}</div>
|
||||
${role.description ? `<div class="text-xs text-gray-500">${Utils.escapeHtml(role.description)}</div>` : ""}
|
||||
${role.payroll ? `<div class="text-xs text-green-600">Оклад: ${role.payroll}</div>` : ""}
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
|
||||
const $button = $(button);
|
||||
const buttonOffset = $button.offset();
|
||||
const buttonHeight = $button.outerHeight();
|
||||
|
||||
$dropdown.css({
|
||||
position: "fixed",
|
||||
top: buttonOffset.top + buttonHeight + 5,
|
||||
left: Math.max(10, buttonOffset.left - 150),
|
||||
});
|
||||
|
||||
$("body").append($dropdown);
|
||||
activeDropdown = $dropdown;
|
||||
|
||||
setTimeout(() => {
|
||||
$dropdown.find(".role-search-input").focus();
|
||||
}, 50);
|
||||
|
||||
$dropdown.find(".role-search-input").on("input", function () {
|
||||
const searchVal = $(this).val().toLowerCase();
|
||||
$dropdown.find(".role-item").each(function () {
|
||||
const roleName = $(this).data("role-name").toLowerCase();
|
||||
$(this).toggle(roleName.includes(searchVal));
|
||||
});
|
||||
});
|
||||
|
||||
$dropdown.on("click", ".role-item", function () {
|
||||
const roleName = $(this).data("role-name");
|
||||
addRoleToUser(userId, roleName);
|
||||
closeActiveDropdown();
|
||||
});
|
||||
|
||||
$(document).on("keydown.roleDropdown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
closeActiveDropdown();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeActiveDropdown() {
|
||||
if (activeDropdown) {
|
||||
activeDropdown.remove();
|
||||
activeDropdown = null;
|
||||
$(document).off("keydown.roleDropdown");
|
||||
}
|
||||
}
|
||||
|
||||
function addRoleToUser(userId, roleName) {
|
||||
Api.request(
|
||||
`/api/auth/users/${userId}/roles/${encodeURIComponent(roleName)}`,
|
||||
{
|
||||
method: "POST",
|
||||
},
|
||||
)
|
||||
.then((updatedUser) => {
|
||||
const userIndex = users.findIndex((u) => u.id === userId);
|
||||
if (userIndex !== -1) {
|
||||
users[userIndex] = updatedUser;
|
||||
}
|
||||
renderUsers();
|
||||
Utils.showToast(`Роль "${roleName}" добавлена`, "success");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast(error.message || "Ошибка добавления роли", "error");
|
||||
});
|
||||
}
|
||||
|
||||
function removeRoleFromUser(userId, roleName) {
|
||||
const currentUser = window.getUser();
|
||||
|
||||
if (currentUser && currentUser.id === userId && roleName === "admin") {
|
||||
Utils.showToast("Нельзя удалить свою роль администратора", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
Api.request(
|
||||
`/api/auth/users/${userId}/roles/${encodeURIComponent(roleName)}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
},
|
||||
)
|
||||
.then((updatedUser) => {
|
||||
const userIndex = users.findIndex((u) => u.id === userId);
|
||||
if (userIndex !== -1) {
|
||||
users[userIndex] = updatedUser;
|
||||
}
|
||||
renderUsers();
|
||||
Utils.showToast(`Роль "${roleName}" удалена`, "success");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast(error.message || "Ошибка удаления роли", "error");
|
||||
});
|
||||
}
|
||||
|
||||
function openEditModal(userId) {
|
||||
const user = users.find((u) => u.id === userId);
|
||||
if (!user) return;
|
||||
|
||||
$("#edit-user-id").val(user.id);
|
||||
$("#edit-user-email").val(user.email);
|
||||
$("#edit-user-fullname").val(user.full_name || "");
|
||||
$("#edit-user-password").val("");
|
||||
$("#edit-user-active").prop("checked", user.is_active);
|
||||
$("#edit-user-verified").prop("checked", user.is_verified);
|
||||
|
||||
$("#edit-user-modal").removeClass("hidden");
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
$("#edit-user-modal").addClass("hidden");
|
||||
$("#edit-user-form")[0].reset();
|
||||
}
|
||||
|
||||
function saveUserChanges() {
|
||||
const userId = parseInt($("#edit-user-id").val());
|
||||
const email = $("#edit-user-email").val().trim();
|
||||
const fullName = $("#edit-user-fullname").val().trim();
|
||||
const password = $("#edit-user-password").val();
|
||||
|
||||
if (!email) {
|
||||
Utils.showToast("Email обязателен", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const updateData = {
|
||||
email: email,
|
||||
full_name: fullName || null,
|
||||
};
|
||||
|
||||
if (password) {
|
||||
updateData.password = password;
|
||||
}
|
||||
|
||||
Api.put(`/api/auth/me`, updateData)
|
||||
.then((updatedUser) => {
|
||||
const userIndex = users.findIndex((u) => u.id === userId);
|
||||
if (userIndex !== -1) {
|
||||
users[userIndex] = { ...users[userIndex], ...updatedUser };
|
||||
}
|
||||
renderUsers();
|
||||
closeEditModal();
|
||||
Utils.showToast("Пользователь обновлён", "success");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn("API update failed, updating locally:", error);
|
||||
const userIndex = users.findIndex((u) => u.id === userId);
|
||||
if (userIndex !== -1) {
|
||||
users[userIndex].email = email;
|
||||
users[userIndex].full_name = fullName || null;
|
||||
users[userIndex].is_active = $("#edit-user-active").prop("checked");
|
||||
users[userIndex].is_verified = $("#edit-user-verified").prop(
|
||||
"checked",
|
||||
);
|
||||
}
|
||||
renderUsers();
|
||||
closeEditModal();
|
||||
Utils.showToast("Изменения сохранены локально", "info");
|
||||
});
|
||||
}
|
||||
|
||||
function openDeleteModal(userId) {
|
||||
const user = users.find((u) => u.id === userId);
|
||||
if (!user) return;
|
||||
|
||||
const currentUser = window.getUser();
|
||||
if (currentUser && currentUser.id === userId) {
|
||||
Utils.showToast("Нельзя удалить себя", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
userToDelete = user;
|
||||
$("#delete-user-name").text(user.full_name || user.username);
|
||||
$("#delete-user-modal").removeClass("hidden");
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
$("#delete-user-modal").addClass("hidden");
|
||||
userToDelete = null;
|
||||
}
|
||||
|
||||
function confirmDeleteUser() {
|
||||
if (!userToDelete) return;
|
||||
|
||||
Utils.showToast("Удаление пользователей не поддерживается API", "error");
|
||||
closeDeleteModal();
|
||||
|
||||
// Api.delete(`/api/auth/users/${userToDelete.id}`)
|
||||
// .then(() => {
|
||||
// users = users.filter(u => u.id !== userToDelete.id);
|
||||
// totalUsers--;
|
||||
// $("#total-users-count").text(totalUsers);
|
||||
// renderUsers();
|
||||
// closeDeleteModal();
|
||||
// Utils.showToast("Пользователь удалён", "success");
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error(error);
|
||||
// Utils.showToast(error.message || "Ошибка удаления", "error");
|
||||
// });
|
||||
}
|
||||
|
||||
$("#users-container").on("click", ".add-role-btn", function (e) {
|
||||
e.stopPropagation();
|
||||
const userId = parseInt($(this).data("user-id"));
|
||||
showRoleDropdown(this, userId);
|
||||
});
|
||||
|
||||
$("#users-container").on("click", ".remove-role-btn", function (e) {
|
||||
e.stopPropagation();
|
||||
const userId = parseInt($(this).data("user-id"));
|
||||
const roleName = $(this).data("role-name");
|
||||
|
||||
const user = users.find((u) => u.id === userId);
|
||||
const userName = user ? user.full_name || user.username : "пользователя";
|
||||
|
||||
if (confirm(`Удалить роль "${roleName}" у ${userName}?`)) {
|
||||
removeRoleFromUser(userId, roleName);
|
||||
}
|
||||
});
|
||||
|
||||
$("#users-container").on("click", ".edit-user-btn", function (e) {
|
||||
e.stopPropagation();
|
||||
const userId = parseInt($(this).data("user-id"));
|
||||
openEditModal(userId);
|
||||
});
|
||||
|
||||
$("#edit-user-form").on("submit", function (e) {
|
||||
e.preventDefault();
|
||||
saveUserChanges();
|
||||
});
|
||||
|
||||
$("#cancel-edit-btn, #modal-backdrop").on("click", closeEditModal);
|
||||
|
||||
$("#users-container").on("click", ".delete-user-btn", function (e) {
|
||||
e.stopPropagation();
|
||||
if ($(this).prop("disabled")) return;
|
||||
const userId = parseInt($(this).data("user-id"));
|
||||
openDeleteModal(userId);
|
||||
});
|
||||
|
||||
$("#confirm-delete-btn").on("click", confirmDeleteUser);
|
||||
$("#cancel-delete-btn, #delete-modal-backdrop").on("click", closeDeleteModal);
|
||||
|
||||
$(document).on("click", function (e) {
|
||||
if (!$(e.target).closest(".role-add-dropdown, .add-role-btn").length) {
|
||||
closeActiveDropdown();
|
||||
}
|
||||
});
|
||||
|
||||
let searchTimeout;
|
||||
$("#user-search-input").on("input", function () {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
searchQuery = $(this).val().trim();
|
||||
renderUsers();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
$("#user-search-input").on("keypress", function (e) {
|
||||
if (e.which === 13) {
|
||||
clearTimeout(searchTimeout);
|
||||
searchQuery = $(this).val().trim();
|
||||
renderUsers();
|
||||
}
|
||||
});
|
||||
|
||||
$("#reset-filters-btn").on("click", function () {
|
||||
$("#user-search-input").val("");
|
||||
$("#role-filter-input").val("");
|
||||
searchQuery = "";
|
||||
selectedFilterRoles.clear();
|
||||
updateDropdownCheckmarks();
|
||||
updateFilterPlaceholder();
|
||||
renderUsers();
|
||||
});
|
||||
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
closeEditModal();
|
||||
closeDeleteModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user