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

Добавление зарплаты для ролей, добавление статусов книг, обновление фронтэнда

Browse Source
This commit is contained in:
wowlikon
2025-12-21 00:12:17 +03:00
parent 2bb7d420ec
commit 5096b45243
24 changed files with 1811 additions and 2613 deletions
Download Patch File Download Diff File Expand all files Collapse all files
library_service/templates/auth.html
-1
View File
@@ -19,7 +19,6 @@ block content %}
Регистрация
</button>
</div>
<form id="login-form" class="p-6">
<div class="mb-4">
<label
library_service/templates/author.html
+93 -12
View File
@@ -1,16 +1,97 @@
{% extends "base.html" %} {% block title %}LiB - Автор{% endblock %} {% block
content %}
<div class="flex flex-1 mt-4 p-4">
<main class="flex-1 max-w-4xl mx-auto">
<div id="author-card" class="bg-white p-6 rounded-lg shadow-md mb-6">
</div>
<div id="books-section" class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Книги автора</h2>
<div id="books-container">
{% extends "base.html" %} {% block content %}
<div class="container mx-auto p-4 max-w-4xl">
<div id="author-card" class="bg-white rounded-lg shadow-md p-6 mb-6">
<a
href="/authors"
class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors mb-4"
>
<svg
class="w-4 h-4 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
Вернуться к списку авторов
</a>
<div id="author-loader" class="flex items-start animate-pulse">
<div class="w-24 h-24 bg-gray-200 rounded-full mr-6"></div>
<div class="flex-1">
<div class="h-8 bg-gray-200 rounded w-1/3 mb-4"></div>
<div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
<div class="h-4 bg-gray-200 rounded w-1/5"></div>
</div>
</div>
</main>
<div id="author-content" class="hidden flex items-start">
<div
id="author-avatar"
class="w-24 h-24 bg-gray-500 text-white rounded-full flex items-center justify-center text-4xl font-bold mr-6 flex-shrink-0"
></div>
<div class="flex-1">
<div class="flex items-center justify-between mb-2">
<h1
id="author-name"
class="text-3xl font-bold text-gray-900"
></h1>
<span id="author-id" class="text-sm text-gray-500"></span>
</div>
<div class="flex items-center text-gray-600 mb-4">
<svg
class="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
></path>
</svg>
<span id="author-books-count"></span>
</div>
</div>
</div>
</div>
<div id="books-section">
<h2 class="text-xl font-bold mb-4">Книги автора</h2>
<div id="books-container" class="space-y-4"></div>
</div>
</div>
<template id="book-item-template">
<div
class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-200 cursor-pointer book-card bg-white"
>
<div class="flex justify-between items-start">
<div class="flex-1">
<h3
class="book-title text-lg font-semibold text-gray-900 hover:text-gray-400 transition-colors mb-2"
></h3>
<p class="book-desc text-gray-600 text-sm line-clamp-3"></p>
</div>
<svg
class="w-5 h-5 text-gray-400 ml-4 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</div>
</div>
</template>
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/author.js"></script>
{% endblock %}
<script src="/static/author.js"></script>
{% endblock %}
library_service/templates/authors.html
+108 -57
View File
@@ -1,20 +1,88 @@
{% extends "base.html" %} {% block title %}LiB - Авторы{% endblock %} {% block
content %}
<div class="flex flex-1 mt-4 p-4">
<aside
class="w-1/4 bg-white p-4 rounded-lg shadow-md mr-4 h-fit resize-x overflow-auto min-w-64 max-w-96"
{% extends "base.html" %} {% block content %}
<div class="container mx-auto p-4">
<div
class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4"
>
<h2 class="text-xl font-semibold mb-4">Поиск</h2>
<div class="relative mb-4">
<input
type="text"
id="author-search-input"
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
placeholder="Поиск авторов..."
maxlength="50"
/>
<h2 class="text-2xl font-bold text-gray-800">Авторы</h2>
<div class="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
<div class="relative">
<input
type="text"
id="author-search-input"
placeholder="Поиск автора..."
class="border rounded-lg pl-3 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400 w-full sm:w-64"
/>
<svg
class="absolute right-3 top-2.5 h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
</div>
<div class="flex gap-2 bg-white rounded-lg p-1 border">
<label
class="cursor-pointer px-3 py-1 rounded hover:bg-gray-100 flex items-center gap-1"
>
<input
type="radio"
name="sort"
value="name_asc"
checked
class="hidden peer"
/>
<span
class="text-sm text-gray-600 peer-checked:text-black peer-checked:font-bold"
>А-Я</span
>
</label>
<label
class="cursor-pointer px-3 py-1 rounded hover:bg-gray-100 flex items-center gap-1"
>
<input
type="radio"
name="sort"
value="name_desc"
class="hidden peer"
/>
<span
class="text-sm text-gray-600 peer-checked:text-black peer-checked:font-bold"
>Я-А</span
>
</label>
</div>
</div>
</div>
<div id="results-counter" class="text-sm text-gray-500 mb-4"></div>
<div
id="authors-container"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
></div>
<div id="pagination-container"></div>
</div>
<template id="author-card-template">
<div
class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer author-card"
>
<div class="flex items-center">
<div
class="author-avatar w-12 h-12 bg-gray-500 text-white rounded-full flex items-center justify-center text-xl font-bold mr-4"
></div>
<div class="flex-1">
<h3
class="author-name text-lg font-semibold text-gray-900 hover:text-gray-400 transition-colors"
></h3>
<p class="author-id text-sm text-gray-500"></p>
</div>
<svg
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
class="w-5 h-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -23,50 +91,33 @@ content %}
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
d="M9 5l7 7-7 7"
/>
</svg>
</div>
<h2 class="text-xl font-semibold mb-4">Сортировка</h2>
<div class="mb-4">
<div class="space-y-2">
<label class="flex items-center cursor-pointer">
<input
type="radio"
name="sort"
value="name_asc"
checked
class="w-4 h-4 text-gray-500 focus:ring-gray-500"
/>
<span class="ml-2 text-gray-700">По имени (А-Я)</span>
</label>
<label class="flex items-center cursor-pointer">
<input
type="radio"
name="sort"
value="name_desc"
class="w-4 h-4 text-gray-500 focus:ring-gray-500"
/>
<span class="ml-2 text-gray-700">По имени (Я-А)</span>
</label>
</div>
</div>
<button
id="reset-filters-btn"
class="w-full bg-white text-gray-500 py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition duration-200"
</div>
</template>
<template id="empty-state-template">
<div class="col-span-full bg-white p-8 rounded-lg shadow-md text-center">
<svg
class="mx-auto h-12 w-12 text-gray-400 mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
Сбросить
</button>
<div
id="results-counter"
class="mt-4 text-center text-sm text-gray-500"
></div>
</aside>
<main class="flex-1">
<div id="authors-container"></div>
<div id="pagination-container"></div>
</main>
</div>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<h3 class="text-lg font-medium text-gray-900 mb-2">
Авторы не найдены
</h3>
<p class="text-gray-500">Попробуйте изменить параметры поиска</p>
</div>
</template>
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/authors.js"></script>
{% endblock %}
<script src="/static/authors.js"></script>
{% endblock %}
library_service/templates/base.html
+170 -45
View File
@@ -4,14 +4,30 @@
<title>{% block title %}LiB{% endblock %}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script async="" src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.11.0/sha256.min.js"></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/8.1.5/cash.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="/static/utils.js"></script>
<link rel="stylesheet" href="/static/styles.css" />
{% block extra_head %}{% endblock %}
</head>
<body class="flex flex-col min-h-screen bg-gray-100">
<header class="bg-gray-500 text-white p-4 shadow-md">
<body
class="flex flex-col min-h-screen bg-gray-100"
x-data="{
user: null,
async init() {
document.addEventListener('auth:login', async (e) => {
this.user = e.detail;
this.user.avatar = await Utils.getGravatarUrl(this.user.email);
});
await Auth.init();
}
}"
>
<header class="bg-gray-600 text-white p-4 shadow-md">
<div class="mx-auto pl-5 pr-3 flex justify-between items-center">
<a class="flex gap-4 items-center max-w-10 h-auto" href="/">
<img class="invert" src="/static/logo.svg" />
@@ -19,59 +35,168 @@
</a>
<nav>
<ul class="flex space-x-4">
<li><a href="/" class="hover:text-gray-200">Главная</a></li>
<li><a href="/books" class="hover:text-gray-200">Книги</a></li>
<li><a href="/authors" class="hover:text-gray-200">Авторы</a></li>
<li><a href="/api" class="hover:text-gray-200">API</a></li>
<li>
<a href="/" class="hover:text-gray-200">Главная</a>
</li>
<li>
<a href="/books" class="hover:text-gray-200"
>Книги</a
>
</li>
<li>
<a href="/authors" class="hover:text-gray-200"
>Авторы</a
>
</li>
<li>
<a href="/api" class="hover:text-gray-200">API</a>
</li>
</ul>
</nav>
<div class="relative" id="user-menu-area">
<a href="/auth" id="guest-link" class="block hover:opacity-80 transition"><img class="w-6 h-6 invert" src="/static/avatar.svg" /></a>
<button type="button" id="user-btn" class="hidden items-center gap-2 hover:opacity-80 transition focus:outline-none">
<img
id="user-avatar"
src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"
class="w-8 h-8 rounded-full border-2 border-white object-cover bg-gray-600"
alt="User Avatar"
/>
<svg id="user-arrow" class="w-4 h-4 transition-transform duration-200" 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"/>
</svg>
</button>
<div id="user-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-hidden">
<div class="px-4 py-3 border-b border-gray-200">
<p id="dropdown-name" class="text-sm font-semibold text-gray-900 truncate">Пользователь</p>
<p id="dropdown-username" class="text-sm text-gray-500 truncate">@username</p>
<p id="dropdown-email" class="text-xs text-gray-400 truncate mt-1">email@example.com</p>
</div>
<a href="/profile" class="flex items-center px-4 py-2 text-sm hover:bg-gray-100">
<svg class="w-4 h-4 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
<p class="text-gray-700 text-sm">Мой профиль</p>
<div class="relative" x-data="{ open: false }">
<template x-if="!user">
<a
href="/auth"
class="block hover:opacity-80 transition"
>
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
</a>
<a href="/my-books" class="flex items-center px-4 py-2 text-sm hover:bg-gray-100">
<svg class="w-4 h-4 mr-3 text-gray-400" 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>
<p class="text-gray-700 text-sm">Мои книги</p>
</a>
<div class="border-t border-gray-200 mt-1 pt-1">
<button type="button" id="logout-btn" class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50">
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
<p class="text-gray-700 text-sm">Выйти</p>
</template>
<template x-if="user">
<div>
<button
@click="open = !open"
@click.outside="open = false"
type="button"
class="flex items-center gap-2 hover:opacity-80 transition focus:outline-none"
>
<img
:src="user.avatar"
class="w-8 h-8 rounded-full border border-white object-cover bg-gray-600"
/>
<svg
class="w-4 h-4 transition-transform duration-200"
:class="open ? 'rotate-180' : ''"
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"
/>
</svg>
</button>
<div
x-show="open"
x-transition
class="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-hidden text-gray-900"
style="display: none"
>
<div class="px-4 py-3 border-b border-gray-200">
<p
class="text-sm font-semibold truncate"
x-text="user.full_name || user.username"
></p>
<p
class="text-sm text-gray-500 truncate"
x-text="'@' + user.username"
></p>
<p
class="text-xs text-gray-400 truncate mt-1"
x-text="user.email"
></p>
</div>
<a
href="/profile"
class="flex items-center px-4 py-2 text-sm hover:bg-gray-100 text-gray-700"
>
<svg
class="w-4 h-4 mr-3 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
></path>
</svg>
Мой профиль
</a>
<a
href="/my-books"
class="flex items-center px-4 py-2 text-sm hover:bg-gray-100 text-gray-700"
>
<svg
class="w-4 h-4 mr-3 text-gray-400"
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>
Мои книги
</a>
<div class="border-t border-gray-200">
<button
@click="Auth.logout()"
class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50"
>
<svg
class="w-4 h-4 mr-3"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
></path>
</svg>
Выйти
</button>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</header>
{% block content %}{% endblock %}
<main class="flex-grow">{% block content %}{% endblock %}</main>
<div
id="toast-container"
class="fixed bottom-5 right-5 flex flex-col gap-2 z-50"
></div>
<footer class="bg-gray-800 text-white p-4 mt-8">
<div class="container mx-auto text-center">
<p>&copy; 2025 My Awesome Library. All rights reserved.</p>
<p>&copy; 2025 LiB Library. All rights reserved.</p>
</div>
</footer>
{% block scripts %}{% endblock %}
</body>
</html>
</html>
library_service/templates/book.html
+113 -15
View File
@@ -1,21 +1,119 @@
{% extends "base.html" %} {% block title %}LiB - Книга{% endblock %} {% block
content %}
<div class="flex flex-1 mt-4 p-4">
<main class="flex-1 max-w-4xl mx-auto">
<div id="book-card" class="bg-white p-6 rounded-lg shadow-md mb-6">
</div>
<div id="authors-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
<h2 class="text-xl font-semibold mb-4">Авторы</h2>
<div id="authors-container">
{% extends "base.html" %} {% block content %}
<div class="container mx-auto p-4 max-w-4xl">
<div id="book-card" class="bg-white rounded-lg shadow-md p-6">
<a
href="/books"
class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors mb-4"
>
<svg
class="w-4 h-4 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
Вернуться к списку книг
</a>
<div
id="book-loader"
class="flex flex-col md:flex-row items-start animate-pulse"
>
<div
class="w-32 h-40 bg-gray-200 rounded-lg mb-4 md:mb-0 md:mr-6"
></div>
<div class="flex-1 w-full">
<div class="h-8 bg-gray-200 rounded w-2/3 mb-4"></div>
<div class="h-5 bg-gray-200 rounded w-1/3 mb-4"></div>
<div class="space-y-2 mb-6">
<div class="h-4 bg-gray-200 rounded w-full"></div>
<div class="h-4 bg-gray-200 rounded w-full"></div>
</div>
</div>
</div>
<div id="genres-section" class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Жанры</h2>
<div id="genres-container">
<div
id="book-content"
class="hidden flex flex-col md:flex-row items-start"
>
<div
class="flex flex-col items-center mb-4 md:mb-0 md:mr-6 flex-shrink-0"
>
<div
class="w-32 h-40 bg-gradient-to-br from-gray-400 to-gray-600 rounded-lg flex items-center justify-center shadow-md"
>
<svg
class="w-16 h-16 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
></path>
</svg>
</div>
<div id="book-status-container" class="mt-3">
<span
id="book-status"
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
></span>
</div>
</div>
<div class="flex-1">
<div class="flex items-start justify-between mb-2">
<h1
id="book-title"
class="text-3xl font-bold text-gray-900"
></h1>
<span
id="book-id"
class="text-sm text-gray-500 ml-4 px-2 py-1 border border-gray-300 rounded-lg"
></span>
</div>
<p
id="book-authors-text"
class="text-lg text-gray-600 mb-4"
></p>
<div class="prose prose-gray max-w-none mb-6">
<p
id="book-description"
class="text-gray-700 leading-relaxed"
></p>
</div>
<div id="genres-section" class="mb-6 hidden">
<h3
class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-2"
>
Жанры
</h3>
<div
id="genres-container"
class="flex flex-wrap gap-2"
></div>
</div>
<div id="authors-section" class="mb-6 hidden">
<h3
class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-2"
>
Авторы
</h3>
<div
id="authors-container"
class="flex flex-wrap gap-3"
></div>
</div>
</div>
</div>
</main>
</div>
</div>
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/book.js"></script>
{% endblock %}
<script src="/static/book.js"></script>
{% endblock %}
library_service/templates/books.html
+108 -58
View File
@@ -1,79 +1,129 @@
{% extends "base.html" %} {% block title %}LiB - Главная{% endblock %} {% block
content %}
<div class="flex flex-1 mt-4 p-4">
<aside
class="w-1/4 bg-white p-4 rounded-lg shadow-md mr-4 h-fit resize-x overflow-auto min-w-64 max-w-96"
>
<h2 class="text-xl font-semibold mb-4">Поиск</h2>
<div class="relative mb-4">
<input
type="text"
id="book-search-input"
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
placeholder="Поиск книг (мин. 3 символа)..."
minlength="3"
maxlength="50"
/>
<svg
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
<h2 class="text-xl font-semibold mb-4">Фильтры</h2>
<div class="mb-4">
<h3 class="font-medium mb-2">Авторы</h3>
{% extends "base.html" %} {% block content %}
<div class="container mx-auto p-4 flex flex-col md:flex-row gap-6">
<aside class="w-full md:w-1/4">
<div class="bg-white p-4 rounded-lg shadow-md mb-6">
<h2 class="text-xl font-bold mb-4">Поиск</h2>
<div class="relative">
<div
class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded-md bg-white min-h-[42px]"
id="selected-authors-container"
<input
type="text"
id="book-search-input"
placeholder="Название книги..."
class="w-full border rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400 transition"
/>
<svg
class="absolute left-3 top-2.5 h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<input
type="text"
id="author-search-input"
class="flex-grow outline-none bg-transparent min-w-[100px]"
placeholder="Начните вводить..."
/>
</div>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-md mb-6">
<h2 class="text-xl font-bold mb-4">Авторы</h2>
<div
id="selected-authors-container"
class="flex flex-wrap gap-2 mb-2 min-h-[0px]"
></div>
<div class="relative">
<input
type="text"
id="author-search-input"
placeholder="Поиск автора..."
class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400"
autocomplete="off"
/>
<div
id="author-dropdown"
class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 hidden max-h-60 overflow-y-auto shadow-lg"
class="hidden absolute z-50 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto mt-1"
></div>
</div>
</div>
<div class="mb-4">
<h3 class="font-medium mb-2">Жанры</h3>
<ul id="genres-list" class="max-h-60 overflow-y-auto"></ul>
<div class="bg-white p-4 rounded-lg shadow-md mb-6">
<h2 class="text-xl font-bold mb-4">Жанры</h2>
<ul
id="genres-list"
class="space-y-2 max-h-60 overflow-y-auto text-sm text-gray-700"
></ul>
</div>
<button
id="apply-filters-btn"
class="w-full bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition duration-200 mb-2"
class="w-full bg-gray-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-gray-700 transition mb-2"
>
Применить фильтры
Применить
</button>
<button
id="reset-filters-btn"
class="w-full bg-white text-gray-500 py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition duration-200"
class="w-full bg-white text-gray-600 border border-gray-300 font-bold py-2 px-4 rounded-lg hover:bg-gray-50 transition"
>
Сбросить фильтры
Сбросить
</button>
<div
id="results-counter"
class="mt-4 text-center text-sm text-gray-500"
></div>
</aside>
<main class="flex-1">
<div id="books-container"></div>
<main class="w-full md:w-3/4">
<div id="books-container" class="grid grid-cols-1 gap-4"></div>
<div id="pagination-container"></div>
</main>
</div>
<template id="book-card-template">
<div
class="bg-white p-4 rounded-lg shadow-md mb-4 hover:shadow-lg transition-shadow duration-200 cursor-pointer book-card"
>
<div class="flex items-start">
<div class="flex-1">
<div class="flex justify-between items-center gap-2 mb-1">
<h3
class="book-title text-lg font-bold text-gray-900 hover:text-gray-400 transition-colors"
></h3>
<span
class="book-status inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
></span>
</div>
<p class="text-sm text-gray-600 mb-2">
<span class="font-medium">Авторы:</span>
<span class="book-authors"></span>
</p>
<p
class="book-desc text-gray-700 text-sm mb-2 line-clamp-3"
></p>
<div class="book-genres flex flex-wrap gap-1"></div>
</div>
</div>
</div>
</template>
<template id="genre-badge-template">
<span
class="inline-block bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full"
></span>
</template>
<template id="empty-state-template">
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<svg
class="mx-auto h-12 w-12 text-gray-400 mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="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>
<h3 class="text-lg font-medium text-gray-900 mb-2">Книги не найдены</h3>
<p class="text-gray-500">
Попробуйте изменить параметры поиска или фильтры
</p>
</div>
</template>
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/books.js"></script>
<script src="/static/books.js"></script>
{% endblock %}
library_service/templates/profile.html
+150 -60
View File
@@ -1,69 +1,159 @@
{% extends "base.html" %} {% block title %}LiB - Профиль{% endblock %} {% block
content %}
<div class="flex flex-1 mt-4 p-4">
<main class="flex-1 max-w-2xl mx-auto">
<div id="profile-card" class="bg-white p-6 rounded-lg shadow-md mb-6">
{% extends "base.html" %} {% block content %}
<div
class="container mx-auto p-4 max-w-2xl"
x-data="{ showPasswordModal: false }"
@close-modal.window="showPasswordModal = false"
>
<div id="profile-card" class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="animate-pulse flex items-center">
<div class="w-24 h-24 bg-gray-200 rounded-full mr-6"></div>
<div class="h-6 bg-gray-200 w-48 rounded"></div>
</div>
<div id="account-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
<h2 class="text-xl font-semibold mb-4">Информация об аккаунте</h2>
<div id="account-container">
</div>
</div>
<div id="roles-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
<h2 class="text-xl font-semibold mb-4">Роли и права</h2>
<div id="roles-container">
</div>
</div>
<div id="actions-section" class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Действия</h2>
<div id="actions-container">
</div>
</div>
</main>
</div>
<div id="password-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">Смена пароля</h3>
<button id="close-password-modal" class="text-gray-400 hover:text-gray-600">
<svg class="w-6 h-6" 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"/>
</div>
<div
id="account-section"
class="bg-white rounded-lg shadow-md p-6 mb-6 hidden"
>
<h2 class="text-xl font-bold mb-4 border-b pb-2">Информация</h2>
<div id="account-info" class="space-y-4"></div>
</div>
<div
id="roles-section"
class="bg-white rounded-lg shadow-md p-6 mb-6 hidden"
>
<h2 class="text-xl font-bold mb-4 border-b pb-2">Роли</h2>
<div id="roles-container" class="space-y-3"></div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="space-y-3">
<button
@click="showPasswordModal = true"
class="w-full flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors"
>
<span class="text-gray-700 font-medium">Сменить пароль</span>
<svg
class="w-5 h-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</button>
<button
onclick="Auth.logout()"
class="w-full flex items-center justify-between p-4 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
>
<span class="text-red-700 font-medium">Выйти из аккаунта</span>
<svg
class="w-5 h-5 text-red-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
</button>
</div>
<form id="password-form">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-medium mb-2">Текущий пароль</label>
<input type="password" id="current-password"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
required minlength="6">
</div>
<div
x-show="showPasswordModal"
class="fixed inset-0 z-50 overflow-y-auto"
style="display: none"
>
<div
class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
>
<div
x-show="showPasswordModal"
x-transition.opacity
class="fixed inset-0 transition-opacity"
aria-hidden="true"
>
<div
class="absolute inset-0 bg-gray-500 opacity-75"
@click="showPasswordModal = false"
></div>
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-medium mb-2">Новый пароль</label>
<input type="password" id="new-password"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
required minlength="6">
<div
x-show="showPasswordModal"
x-transition.scale
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<h3
class="text-lg leading-6 font-medium text-gray-900 mb-4"
>
Смена пароля
</h3>
<form id="change-password-form">
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
>Текущий пароль</label
>
<input
type="password"
id="current-password"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
/>
</div>
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
>Новый пароль</label
>
<input
type="password"
id="new-password"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
/>
</div>
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
>Подтвердите пароль</label
>
<input
type="password"
id="confirm-password"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
/>
</div>
</form>
</div>
<div
class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
>
<button
type="button"
id="submit-password-btn"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 sm:ml-3 sm:w-auto sm:text-sm"
>
Сменить
</button>
<button
type="button"
@click="showPasswordModal = false"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>
Отмена
</button>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-medium mb-2">Подтвердите новый пароль</label>
<input type="password" id="confirm-password"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
required minlength="6">
</div>
<div id="password-error" class="mb-4 text-red-600 text-sm hidden"></div>
<div class="flex gap-3">
<button type="submit" class="flex-1 bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition-colors">
Сменить пароль
</button>
<button type="button" id="cancel-password" class="flex-1 bg-white text-gray-700 py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
Отмена
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/profile.js"></script>
{% endblock %}
<script src="/static/profile.js"></script>
{% endblock %}