public/lab9/task3/script.js - main - MashkoA/web-nodejs

public/lab9/task3/script.js
126 строк4 KB
umarovazizjohn
9 labs omg
23 апр 2026, 09:57
23 апр 2026, 09:576dff9fc
'use strict';

const API = '/api/lab9/products';

// Форматирование цены: Копейки -> Рубли
const formatPrice = (cents) => {
    return (cents / 100).toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' });
};

// Показать сообщение
function showMessage(message, type = 'error') {
    const existingMessage = document.querySelector('.message');
    if (existingMessage) {
        existingMessage.remove();
    }

    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${type}`;
    messageDiv.textContent = message;
    
    const contentContainer = document.querySelector('.content-container-wide');
    contentContainer.insertBefore(messageDiv, contentContainer.firstChild);
    
    if (type === 'success') {
        setTimeout(() => {
            messageDiv.remove();
        }, 5000);
    }
}

// Работа с корзиной в localStorage
class Cart {
    static getCart() {
        const cart = localStorage.getItem('cart');
        return cart ? JSON.parse(cart) : {};
    }

    static saveCart(cart) {
        localStorage.setItem('cart', JSON.stringify(cart));
    }

    static addToCart(productId, product) {
        const cart = this.getCart();
        if (!cart[productId]) {
            cart[productId] = {
                ...product,
                quantity: 1
            };
        } else {
            if (cart[productId].quantity < 5) {
                cart[productId].quantity += 1;
            }
        }
        this.saveCart(cart);
        this.updateCartCount();
    }

    static getCartCount() {
        const cart = this.getCart();
        return Object.values(cart).reduce((total, item) => total + item.quantity, 0);
    }

    static updateCartCount() {
        const cartCount = document.getElementById('cartCount');
        if (cartCount) {
            cartCount.textContent = this.getCartCount();
        }
    }
}

// Загрузка товаров
async function loadProducts() {
    try {
        document.getElementById('list').innerHTML = '<div class="loading">Загрузка товаров...</div>';
        
        const res = await fetch(API);
        if (!res.ok) {
            throw new Error(`Ошибка загрузки: ${res.status}`);
        }
        
        const products = await res.json();
        
        if (products.length === 0) {
            document.getElementById('list').innerHTML = '<div class="loading">Товаров пока нет</div>';
            return;
        }
        
        document.getElementById('list').innerHTML = products.map(product => `
            <div class="product-card" data-id="${product.id}">
                <div class="product-info">
                    <div class="product-title">${product.title}</div>
                    <div class="product-details">
                        <span class="product-price">${formatPrice(product.price)}</span>
                        <span class="product-amount">Остаток: ${product.amount} шт.</span>
                    </div>
                </div>
                <div class="product-actions">
                    <button class="btn btn-cart" onclick="addToCart(${product.id}, ${JSON.stringify(product).replace(/"/g, '&quot;')})">
                        Добавить в корзину
                    </button>
                </div>
            </div>
        `).join('');
        
    } catch (error) {
        console.error('Ошибка загрузки товаров:', error);
        document.getElementById('list').innerHTML = `<div class="error">Ошибка загрузки товаров: ${error.message}</div>`;
    }
}

// Добавление в корзину
function addToCart(productId, product) {
    try {
        Cart.addToCart(productId, product);
        showMessage('Товар добавлен в корзину', 'success');
    } catch (error) {
        console.error('Ошибка добавления в корзину:', error);
        showMessage('Ошибка добавления в корзину');
    }
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
    loadProducts();
    Cart.updateCartCount();
});