public/lab9/task1/script.js - main - Cooolprogrammers/web-nodejs-labs

public/lab9/task1/script.js
258 строк9 KB
darkvoid6@mail.ru
ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ
18 дек 2025, 07:59
18 дек 2025, 07:59f2c4f06
const API_BASE = '/api/lab9';

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

// Форматирование больших чисел
const formatNumber = (num) => {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
};

document.getElementById('createProductForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const priceRub = parseFloat(formData.get('price'));
    const priceCents = Math.round(priceRub * 100);
    
    const data = {
        title: formData.get('title'),
        price: priceCents,
        amount: parseInt(formData.get('amount'))
    };
    
    try {
        const response = await fetch(`${API_BASE}/products`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || 'Ошибка создания товара');
        }
        
        const newProduct = await response.json();
        showMessage(`Товар "${newProduct.title}" успешно создан!`, 'success');
        e.target.reset();
        
        // Обновляем все списки
        loadAllProducts();
        searchProducts(document.getElementById('searchInput').value);
        loadStats();
    } catch (error) {
        showMessage('Ошибка при создании товара: ' + error.message, 'error');
    }
});

// Загрузка статистики
async function loadStats() {
    try {
        const response = await fetch(`${API_BASE}/task1/stock`);
        if (!response.ok) {
            throw new Error('Ошибка загрузки статистики');
        }
        const stats = await response.json();
        displayStats(stats);
    } catch (error) {
        showMessage(error.message, 'error');
    }
}

// Отображение статистики
function displayStats(stats) {
    const statsResult = document.getElementById('statsResult');
    
    statsResult.innerHTML = `
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-label">Всего наименований</div>
                <div class="stat-value">${formatNumber(stats.total_products)}</div>
                <div class="stat-desc">товаров</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Единиц на складе</div>
                <div class="stat-value">${formatNumber(stats.total_items)}</div>
                <div class="stat-desc">штук</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Общая стоимость</div>
                <div class="stat-value">${formatPrice(stats.total_value)}</div>
                <div class="stat-desc">в рублях</div>
            </div>
        </div>
    `;
    
    statsResult.style.display = 'block';
}

// Поиск товаров
async function searchProducts(searchTerm = '') {
    try {
        let url = `${API_BASE}/task1/products`;
        if (searchTerm) {
            url += `?q=${encodeURIComponent(searchTerm)}`;
        }
        
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Ошибка поиска товаров');
        }
        const products = await response.json();
        displaySearchResults(products, searchTerm);
    } catch (error) {
        showMessage(error.message, 'error');
    }
}

// Отображение результатов поиска
function displaySearchResults(products, searchTerm) {
    const searchResults = document.getElementById('searchResults');
    
    if (searchTerm) {
        searchResults.innerHTML = `
            <div class="search-info">
                Найдено товаров: <strong>${products.length}</strong> по запросу: "<strong>${searchTerm}</strong>"
            </div>
            ${renderProductsList(products)}
        `;
    } else {
        searchResults.innerHTML = `
            <div class="search-info">
                Показаны все товары: <strong>${products.length}</strong>
            </div>
            ${renderProductsList(products)}
        `;
    }
}

// Загрузка всех товаров
async function loadAllProducts() {
    try {
        const response = await fetch(`${API_BASE}/products`);
        if (!response.ok) {
            throw new Error('Ошибка загрузки товаров');
        }
        const products = await response.json();
        displayAllProducts(products);
    } catch (error) {
        document.getElementById('productsList').innerHTML = 
            `<div class="error-message">${error.message}</div>`;
    }
}

// Отображение всех товаров
function displayAllProducts(products) {
    const productsList = document.getElementById('productsList');
    
    if (products.length === 0) {
        productsList.innerHTML = '<div class="loading">Нет товаров</div>';
        return;
    }

    productsList.innerHTML = `
        <div class="products-header">
            <h3>Всего товаров: ${products.length}</h3>
            <button class="refresh-btn" onclick="loadAllProducts()">🔄 Обновить</button>
        </div>
        ${renderProductsList(products)}
    `;
}

// Рендер списка товаров (общая функция)
function renderProductsList(products) {
    if (products.length === 0) {
        return '<div class="loading">Товары не найдены</div>';
    }

    return products.map(product => `
        <div class="product-card">
            <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>
                    <span class="product-id">ID: ${product.id}</span>
                </div>
            </div>
            <div class="product-actions">
                <button class="btn-danger" onclick="deleteProduct(${product.id})">
                    Удалить
                </button>
            </div>
        </div>
    `).join('');
}

// Удаление товара
async function deleteProduct(id) {
    if (!confirm('Удалить товар?')) return;
    
    try {
        const response = await fetch(`${API_BASE}/products/${id}`, {
            method: 'DELETE'
        });
        
        if (!response.ok) {
            throw new Error('Ошибка удаления товара');
        }
        
        showMessage('Товар успешно удален', 'success');
        // Обновляем все списки
        loadAllProducts();
        searchProducts(document.getElementById('searchInput').value);
        loadStats();
    } catch (error) {
        showMessage(error.message, 'error');
    }
}

// Показать сообщение
function showMessage(message, type) {
    const messageDiv = document.createElement('div');
    messageDiv.className = type === 'success' ? 'success-message' : 'error-message';
    messageDiv.textContent = message;
    
    const content = document.querySelector('.task-content');
    content.insertBefore(messageDiv, content.firstChild);
    
    setTimeout(() => {
        messageDiv.remove();
    }, 5000);
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
    // Загружаем все товары при старте
    loadAllProducts();
    
    // Обработчики для кнопки статистики
    document.getElementById('loadStatsBtn').addEventListener('click', loadStats);
    
    // Обработчики для поиска
    document.getElementById('searchBtn').addEventListener('click', function() {
        const searchTerm = document.getElementById('searchInput').value.trim();
        searchProducts(searchTerm);
    });
    
    document.getElementById('clearSearchBtn').addEventListener('click', function() {
        document.getElementById('searchInput').value = '';
        searchProducts('');
    });
    
    // Поиск при нажатии Enter в поле ввода
    document.getElementById('searchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            const searchTerm = this.value.trim();
            searchProducts(searchTerm);
        }
    });
});