631 lines
19 KiB
JavaScript
631 lines
19 KiB
JavaScript
const API_BASE = "/api/v1";
|
||
const TOKEN_KEY = "secureshop_token";
|
||
const CART_KEY = "secureshop_cart";
|
||
|
||
const artwork = [
|
||
"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1517336714731-489689fd1ca8?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1587829741301-dc798b83add3?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1517668808822-9ebb02f2a0e6?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1587614295999-6c1c1367514e?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1545454675-3531b543be5d?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=640&q=80",
|
||
"https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?auto=format&fit=crop&w=640&q=80",
|
||
];
|
||
|
||
const state = {
|
||
activeView: "catalog",
|
||
authMode: "login",
|
||
token: localStorage.getItem(TOKEN_KEY),
|
||
user: null,
|
||
products: [],
|
||
orders: [],
|
||
cart: loadCart(),
|
||
search: "",
|
||
sort: "new",
|
||
};
|
||
|
||
const elements = {
|
||
tabs: document.querySelectorAll(".tab"),
|
||
viewTitle: document.querySelector("#viewTitle"),
|
||
sessionPill: document.querySelector("#sessionPill"),
|
||
catalogMetric: document.querySelector("#catalogMetric"),
|
||
cartMetric: document.querySelector("#cartMetric"),
|
||
healthMetric: document.querySelector("#healthMetric"),
|
||
searchInput: document.querySelector("#searchInput"),
|
||
sortSelect: document.querySelector("#sortSelect"),
|
||
productGrid: document.querySelector("#productGrid"),
|
||
ordersList: document.querySelector("#ordersList"),
|
||
productForm: document.querySelector("#productForm"),
|
||
shopGate: document.querySelector("#shopGate"),
|
||
authPanel: document.querySelector("#authPanel"),
|
||
cartList: document.querySelector("#cartList"),
|
||
cartTotal: document.querySelector("#cartTotal"),
|
||
checkoutButton: document.querySelector("#checkoutButton"),
|
||
clearCartButton: document.querySelector("#clearCartButton"),
|
||
toast: document.querySelector("#toast"),
|
||
};
|
||
|
||
function loadCart() {
|
||
try {
|
||
const parsed = JSON.parse(localStorage.getItem(CART_KEY) || "{}");
|
||
return parsed && typeof parsed === "object" ? parsed : {};
|
||
} catch {
|
||
return {};
|
||
}
|
||
}
|
||
|
||
function saveCart() {
|
||
localStorage.setItem(CART_KEY, JSON.stringify(state.cart));
|
||
}
|
||
|
||
function money(value) {
|
||
return new Intl.NumberFormat("en-US", {
|
||
style: "currency",
|
||
currency: "USD",
|
||
}).format(Number(value || 0));
|
||
}
|
||
|
||
function dateTime(value) {
|
||
return new Intl.DateTimeFormat("ru-RU", {
|
||
dateStyle: "medium",
|
||
timeStyle: "short",
|
||
}).format(new Date(value));
|
||
}
|
||
|
||
function escapeHtml(value) {
|
||
return String(value ?? "")
|
||
.replaceAll("&", "&")
|
||
.replaceAll("<", "<")
|
||
.replaceAll(">", ">")
|
||
.replaceAll('"', """)
|
||
.replaceAll("'", "'");
|
||
}
|
||
|
||
function showToast(message) {
|
||
elements.toast.textContent = message;
|
||
elements.toast.classList.add("is-visible");
|
||
window.clearTimeout(showToast.timeoutId);
|
||
showToast.timeoutId = window.setTimeout(() => {
|
||
elements.toast.classList.remove("is-visible");
|
||
}, 3600);
|
||
}
|
||
|
||
async function apiRequest(path, options = {}) {
|
||
const headers = {
|
||
Accept: "application/json",
|
||
...(options.headers || {}),
|
||
};
|
||
if (state.token) {
|
||
headers.Authorization = `Bearer ${state.token}`;
|
||
}
|
||
if (options.body && !headers["Content-Type"]) {
|
||
headers["Content-Type"] = "application/json";
|
||
}
|
||
|
||
const response = await fetch(`${API_BASE}${path}`, {
|
||
...options,
|
||
headers,
|
||
});
|
||
const raw = await response.text();
|
||
const data = raw ? JSON.parse(raw) : null;
|
||
if (!response.ok) {
|
||
throw new Error(data?.detail || "Запрос не выполнен");
|
||
}
|
||
return data;
|
||
}
|
||
|
||
async function checkHealth() {
|
||
try {
|
||
const response = await fetch("/health", { headers: { Accept: "application/json" } });
|
||
elements.healthMetric.textContent = response.ok ? "API online" : "API error";
|
||
} catch {
|
||
elements.healthMetric.textContent = "API offline";
|
||
}
|
||
}
|
||
|
||
async function loadProducts() {
|
||
state.products = await apiRequest("/products");
|
||
syncCartProducts();
|
||
}
|
||
|
||
async function loadOrders() {
|
||
if (!state.token) {
|
||
state.orders = [];
|
||
return;
|
||
}
|
||
state.orders = await apiRequest("/orders");
|
||
}
|
||
|
||
async function loadProfile() {
|
||
if (!state.token) {
|
||
state.user = null;
|
||
return;
|
||
}
|
||
state.user = await apiRequest("/auth/me");
|
||
}
|
||
|
||
function syncCartProducts() {
|
||
const productsById = new Map(state.products.map((product) => [String(product.id), product]));
|
||
Object.keys(state.cart).forEach((id) => {
|
||
const product = productsById.get(id);
|
||
if (!product) {
|
||
delete state.cart[id];
|
||
return;
|
||
}
|
||
state.cart[id].product = product;
|
||
state.cart[id].quantity = Math.min(state.cart[id].quantity, product.stock);
|
||
if (state.cart[id].quantity < 1) {
|
||
delete state.cart[id];
|
||
}
|
||
});
|
||
saveCart();
|
||
}
|
||
|
||
function filteredProducts() {
|
||
const query = state.search.trim().toLowerCase();
|
||
const products = state.products.filter((product) => {
|
||
const haystack = `${product.name} ${product.description || ""}`.toLowerCase();
|
||
return !query || haystack.includes(query);
|
||
});
|
||
|
||
products.sort((a, b) => {
|
||
if (state.sort === "price-asc") return Number(a.price) - Number(b.price);
|
||
if (state.sort === "price-desc") return Number(b.price) - Number(a.price);
|
||
if (state.sort === "stock") return Number(b.stock) - Number(a.stock);
|
||
return new Date(b.created_at) - new Date(a.created_at);
|
||
});
|
||
return products;
|
||
}
|
||
|
||
function setView(viewName) {
|
||
state.activeView = viewName;
|
||
document.querySelectorAll(".view").forEach((view) => view.classList.remove("is-active"));
|
||
document.querySelector(`#${viewName}View`).classList.add("is-active");
|
||
elements.tabs.forEach((tab) => {
|
||
tab.classList.toggle("is-active", tab.dataset.view === viewName);
|
||
});
|
||
|
||
const titles = {
|
||
catalog: "Каталог товаров",
|
||
orders: "Мои заказы",
|
||
shop: "Панель магазина",
|
||
};
|
||
elements.viewTitle.textContent = titles[viewName];
|
||
if (viewName === "orders") {
|
||
refreshOrders();
|
||
}
|
||
render();
|
||
}
|
||
|
||
function render() {
|
||
renderSession();
|
||
renderMetrics();
|
||
renderCatalog();
|
||
renderAuthPanel();
|
||
renderCart();
|
||
renderOrders();
|
||
renderShopGate();
|
||
}
|
||
|
||
function renderSession() {
|
||
if (!state.user) {
|
||
elements.sessionPill.textContent = "Гость";
|
||
return;
|
||
}
|
||
elements.sessionPill.textContent = `${state.user.username} · ${state.user.role}`;
|
||
}
|
||
|
||
function renderMetrics() {
|
||
const cartQuantity = Object.values(state.cart).reduce((sum, item) => sum + item.quantity, 0);
|
||
elements.catalogMetric.textContent = `${state.products.length} товаров`;
|
||
elements.cartMetric.textContent = `${cartQuantity} в корзине`;
|
||
}
|
||
|
||
function renderCatalog() {
|
||
const products = filteredProducts();
|
||
if (!products.length) {
|
||
elements.productGrid.innerHTML = `<div class="empty-state">Товары не найдены</div>`;
|
||
return;
|
||
}
|
||
|
||
elements.productGrid.innerHTML = products
|
||
.map((product) => {
|
||
const description = product.description || "Товар доступен для заказа";
|
||
const image = artwork[product.id % artwork.length];
|
||
return `
|
||
<article class="product-card">
|
||
<img src="${image}" alt="${escapeHtml(product.name)}" loading="lazy" />
|
||
<div class="product-body">
|
||
<div>
|
||
<div class="product-title-row">
|
||
<h3>${escapeHtml(product.name)}</h3>
|
||
<span class="price">${money(product.price)}</span>
|
||
</div>
|
||
<span class="stock">${product.stock} шт.</span>
|
||
</div>
|
||
<p>${escapeHtml(description)}</p>
|
||
<div class="card-actions">
|
||
<input aria-label="Количество ${escapeHtml(product.name)}" type="number" min="1" max="${product.stock}" value="1" data-qty="${product.id}" />
|
||
<button class="primary-action" type="button" data-add="${product.id}">В корзину</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
`;
|
||
})
|
||
.join("");
|
||
}
|
||
|
||
function renderAuthPanel() {
|
||
if (state.user) {
|
||
elements.authPanel.innerHTML = `
|
||
<div class="panel-title">
|
||
<h2>Аккаунт</h2>
|
||
<span class="role-badge">${escapeHtml(state.user.role)}</span>
|
||
</div>
|
||
<div class="account-card">
|
||
<div class="account-name">
|
||
<strong>${escapeHtml(state.user.username)}</strong>
|
||
<small>ID ${state.user.id}</small>
|
||
</div>
|
||
<button class="ghost-action" type="button" data-logout>Выйти</button>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
const isRegister = state.authMode === "register";
|
||
elements.authPanel.innerHTML = `
|
||
<div class="auth-tabs">
|
||
<button type="button" class="${state.authMode === "login" ? "is-active" : ""}" data-auth-mode="login">Вход</button>
|
||
<button type="button" class="${isRegister ? "is-active" : ""}" data-auth-mode="register">Регистрация</button>
|
||
</div>
|
||
<form class="auth-form" id="authForm">
|
||
<label>
|
||
Логин
|
||
<input name="username" required minlength="3" maxlength="50" autocomplete="username" placeholder="client01" />
|
||
</label>
|
||
<label>
|
||
Пароль
|
||
<input name="password" required minlength="${isRegister ? 12 : 8}" maxlength="72" type="password" autocomplete="${isRegister ? "new-password" : "current-password"}" placeholder="${isRegister ? "StrongPass1!" : "password"}" />
|
||
</label>
|
||
<button class="primary-action" type="submit">${isRegister ? "Создать аккаунт" : "Войти"}</button>
|
||
</form>
|
||
`;
|
||
}
|
||
|
||
function renderCart() {
|
||
const items = Object.values(state.cart);
|
||
if (!items.length) {
|
||
elements.cartList.innerHTML = `<div class="empty-state">Корзина пуста</div>`;
|
||
elements.cartTotal.textContent = money(0);
|
||
elements.checkoutButton.disabled = true;
|
||
return;
|
||
}
|
||
|
||
elements.cartList.innerHTML = items
|
||
.map(({ product, quantity }) => `
|
||
<div class="cart-row">
|
||
<div>
|
||
<strong>${escapeHtml(product.name)}</strong>
|
||
<small>${quantity} × ${money(product.price)}</small>
|
||
</div>
|
||
<div class="cart-controls">
|
||
<button class="icon-button" type="button" aria-label="Уменьшить" data-decrease="${product.id}">−</button>
|
||
<span>${quantity}</span>
|
||
<button class="icon-button" type="button" aria-label="Увеличить" data-increase="${product.id}">+</button>
|
||
</div>
|
||
</div>
|
||
`)
|
||
.join("");
|
||
|
||
const total = items.reduce((sum, item) => sum + Number(item.product.price) * item.quantity, 0);
|
||
elements.cartTotal.textContent = money(total);
|
||
elements.checkoutButton.disabled = false;
|
||
}
|
||
|
||
function renderOrders() {
|
||
if (!state.user) {
|
||
elements.ordersList.innerHTML = `<div class="empty-state">Войдите, чтобы увидеть свои заказы</div>`;
|
||
return;
|
||
}
|
||
if (!state.orders.length) {
|
||
elements.ordersList.innerHTML = `<div class="empty-state">Заказов пока нет</div>`;
|
||
return;
|
||
}
|
||
|
||
elements.ordersList.innerHTML = state.orders
|
||
.map((order) => `
|
||
<article class="order-card">
|
||
<div class="order-head">
|
||
<div>
|
||
<h3>Заказ #${order.id}</h3>
|
||
<small>${dateTime(order.created_at)}</small>
|
||
</div>
|
||
<span class="status-badge ${order.status}">${order.status}</span>
|
||
</div>
|
||
<div class="order-items">
|
||
${order.items
|
||
.map((item) => `
|
||
<div class="order-item">
|
||
<span>${escapeHtml(item.product_name)} × ${item.quantity}</span>
|
||
<strong>${money(item.subtotal)}</strong>
|
||
</div>
|
||
`)
|
||
.join("")}
|
||
</div>
|
||
<div class="order-footer">
|
||
<strong>${money(order.total_amount)}</strong>
|
||
${
|
||
order.status === "pending"
|
||
? `<button class="secondary-action" type="button" data-pay="${order.id}">Оплатить</button>`
|
||
: `<span class="role-badge">Оплачен</span>`
|
||
}
|
||
</div>
|
||
</article>
|
||
`)
|
||
.join("");
|
||
}
|
||
|
||
function renderShopGate() {
|
||
const isShop = state.user?.role === "shop";
|
||
elements.productForm.style.display = isShop ? "block" : "none";
|
||
elements.shopGate.classList.toggle("is-visible", !isShop);
|
||
if (!isShop) {
|
||
elements.shopGate.innerHTML = `
|
||
<div class="empty-state">
|
||
${state.user ? "Доступ к созданию товаров открыт только роли shop" : "Войдите как shop, чтобы управлять каталогом"}
|
||
</div>
|
||
`;
|
||
} else {
|
||
elements.shopGate.innerHTML = "";
|
||
}
|
||
}
|
||
|
||
function addToCart(productId, quantity) {
|
||
const product = state.products.find((item) => item.id === Number(productId));
|
||
if (!product) return;
|
||
const id = String(product.id);
|
||
const current = state.cart[id]?.quantity || 0;
|
||
const nextQuantity = Math.min(product.stock, current + quantity);
|
||
state.cart[id] = { product, quantity: nextQuantity };
|
||
saveCart();
|
||
render();
|
||
showToast(`${product.name} добавлен в корзину`);
|
||
}
|
||
|
||
function changeCartQuantity(productId, delta) {
|
||
const item = state.cart[String(productId)];
|
||
if (!item) return;
|
||
const nextQuantity = item.quantity + delta;
|
||
if (nextQuantity < 1) {
|
||
delete state.cart[String(productId)];
|
||
} else {
|
||
item.quantity = Math.min(nextQuantity, item.product.stock);
|
||
}
|
||
saveCart();
|
||
render();
|
||
}
|
||
|
||
async function refreshOrders() {
|
||
try {
|
||
await loadOrders();
|
||
renderOrders();
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
}
|
||
}
|
||
|
||
async function submitAuth(form) {
|
||
const formData = new FormData(form);
|
||
const username = String(formData.get("username") || "").trim().toLowerCase();
|
||
const password = String(formData.get("password") || "");
|
||
|
||
if (state.authMode === "register" && !isStrongPassword(password)) {
|
||
showToast("Пароль должен содержать верхний и нижний регистр, цифру и спецсимвол");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
if (state.authMode === "register") {
|
||
await apiRequest("/auth/register", {
|
||
method: "POST",
|
||
body: JSON.stringify({ username, password }),
|
||
});
|
||
}
|
||
const tokenResponse = await apiRequest("/auth/login", {
|
||
method: "POST",
|
||
body: JSON.stringify({ username, password }),
|
||
});
|
||
state.token = tokenResponse.access_token;
|
||
localStorage.setItem(TOKEN_KEY, state.token);
|
||
await loadProfile();
|
||
await loadOrders();
|
||
render();
|
||
showToast(`Добро пожаловать, ${state.user.username}`);
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
}
|
||
}
|
||
|
||
function isStrongPassword(value) {
|
||
return (
|
||
value.length >= 12 &&
|
||
/[A-Z]/.test(value) &&
|
||
/[a-z]/.test(value) &&
|
||
/\d/.test(value) &&
|
||
/[^A-Za-z0-9]/.test(value)
|
||
);
|
||
}
|
||
|
||
async function logout() {
|
||
state.token = null;
|
||
state.user = null;
|
||
state.orders = [];
|
||
localStorage.removeItem(TOKEN_KEY);
|
||
render();
|
||
showToast("Сессия завершена");
|
||
}
|
||
|
||
async function checkout() {
|
||
if (!state.user) {
|
||
showToast("Сначала войдите в аккаунт");
|
||
return;
|
||
}
|
||
const items = Object.values(state.cart).map(({ product, quantity }) => ({
|
||
product_id: product.id,
|
||
quantity,
|
||
}));
|
||
if (!items.length) return;
|
||
|
||
try {
|
||
await apiRequest("/orders", {
|
||
method: "POST",
|
||
body: JSON.stringify({ items }),
|
||
});
|
||
state.cart = {};
|
||
saveCart();
|
||
await loadProducts();
|
||
await loadOrders();
|
||
setView("orders");
|
||
showToast("Заказ создан");
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
}
|
||
}
|
||
|
||
async function payOrder(orderId) {
|
||
try {
|
||
await apiRequest(`/payments/orders/${orderId}/confirm`, { method: "POST" });
|
||
await loadOrders();
|
||
renderOrders();
|
||
showToast("Оплата подтверждена");
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
}
|
||
}
|
||
|
||
async function createProduct(form) {
|
||
if (state.user?.role !== "shop") {
|
||
showToast("Недостаточно прав");
|
||
return;
|
||
}
|
||
const formData = new FormData(form);
|
||
const description = String(formData.get("description") || "").trim();
|
||
const payload = {
|
||
name: String(formData.get("name") || "").trim(),
|
||
description: description || null,
|
||
price: String(formData.get("price") || "0"),
|
||
stock: Number(formData.get("stock") || 0),
|
||
is_active: true,
|
||
};
|
||
|
||
try {
|
||
await apiRequest("/products", {
|
||
method: "POST",
|
||
body: JSON.stringify(payload),
|
||
});
|
||
form.reset();
|
||
await loadProducts();
|
||
render();
|
||
showToast("Товар добавлен");
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
}
|
||
}
|
||
|
||
function bindEvents() {
|
||
elements.tabs.forEach((tab) => {
|
||
tab.addEventListener("click", () => setView(tab.dataset.view));
|
||
});
|
||
|
||
elements.searchInput.addEventListener("input", (event) => {
|
||
state.search = event.target.value;
|
||
renderCatalog();
|
||
});
|
||
|
||
elements.sortSelect.addEventListener("change", (event) => {
|
||
state.sort = event.target.value;
|
||
renderCatalog();
|
||
});
|
||
|
||
elements.productGrid.addEventListener("click", (event) => {
|
||
const button = event.target.closest("[data-add]");
|
||
if (!button) return;
|
||
const productId = button.dataset.add;
|
||
const qtyInput = elements.productGrid.querySelector(`[data-qty="${productId}"]`);
|
||
const quantity = Math.max(1, Number(qtyInput?.value || 1));
|
||
addToCart(productId, quantity);
|
||
});
|
||
|
||
elements.authPanel.addEventListener("click", (event) => {
|
||
const authModeButton = event.target.closest("[data-auth-mode]");
|
||
if (authModeButton) {
|
||
state.authMode = authModeButton.dataset.authMode;
|
||
renderAuthPanel();
|
||
return;
|
||
}
|
||
if (event.target.closest("[data-logout]")) {
|
||
logout();
|
||
}
|
||
});
|
||
|
||
elements.authPanel.addEventListener("submit", (event) => {
|
||
if (event.target.id !== "authForm") return;
|
||
event.preventDefault();
|
||
submitAuth(event.target);
|
||
});
|
||
|
||
elements.cartList.addEventListener("click", (event) => {
|
||
const increase = event.target.closest("[data-increase]");
|
||
const decrease = event.target.closest("[data-decrease]");
|
||
if (increase) changeCartQuantity(increase.dataset.increase, 1);
|
||
if (decrease) changeCartQuantity(decrease.dataset.decrease, -1);
|
||
});
|
||
|
||
elements.checkoutButton.addEventListener("click", checkout);
|
||
elements.clearCartButton.addEventListener("click", () => {
|
||
state.cart = {};
|
||
saveCart();
|
||
render();
|
||
});
|
||
|
||
elements.ordersList.addEventListener("click", (event) => {
|
||
const payButton = event.target.closest("[data-pay]");
|
||
if (payButton) payOrder(payButton.dataset.pay);
|
||
});
|
||
|
||
elements.productForm.addEventListener("submit", (event) => {
|
||
event.preventDefault();
|
||
createProduct(event.target);
|
||
});
|
||
}
|
||
|
||
async function init() {
|
||
bindEvents();
|
||
render();
|
||
await checkHealth();
|
||
try {
|
||
if (state.token) {
|
||
await loadProfile();
|
||
await loadOrders();
|
||
}
|
||
} catch {
|
||
localStorage.removeItem(TOKEN_KEY);
|
||
state.token = null;
|
||
state.user = null;
|
||
}
|
||
try {
|
||
await loadProducts();
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
}
|
||
render();
|
||
}
|
||
|
||
init();
|