public/lab10/task1/orders.html - main - Cooolprogrammers/web-nodejs-labs

public/lab10/task1/orders.html

94 строки3 KB

darkvoid6@mail.ru

ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ

18 дек 2025, 07:59

18 дек 2025, 07:59f2c4f06

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>История заказов</title>
    <style>
        body {
            background: #0a0a0a;
            color: #00ff88;
            font-family: 'Courier New', monospace;
            margin: 20px;
            padding: 20px;
        }
        h1 {
            border-bottom: 2px solid #00ff88;
            padding-bottom: 10px;
            text-shadow: 0 0 10px #00ff88;
        }
        .order-card {
            background: #1a1a1a;
            border: 1px solid #003320;
            margin: 15px 0;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
        }
        .order-card h3 {
            color: #00ff88;
            margin: 0 0 10px 0;
        }
        .order-card p {
            color: #88ffcc;
            margin: 5px 0;
        }
        button {
            background: #003320;
            color: #00ff88;
            border: 1px solid #00ff88;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
            font-family: 'Courier New', monospace;
        }
        button:hover {
            background: #00ff88;
            color: #003320;
        }
        .details {
            margin-top: 10px;
            padding: 10px;
            background: #0d0d0d;
            border-left: 3px solid #00ff88;
        }
    </style>
</head>
<body>
    <h1>📜 История заказов</h1>
    <div id="list"></div>

    <script>
        const API = '/api/lab10';
        const formatPrice = (p) => (p/100).toLocaleString('ru-RU', {style:'currency',currency:'RUB'});

        async function loadOrders() {
            const res = await fetch(API + '/orders');
            const orders = await res.json();
            
            document.getElementById('list').innerHTML = orders.map(o => `
                <div class="order-card">
                    <h3>Заказ #${o.id} • ${new Date(o.created_at).toLocaleString()}</h3>
                    <p>👤 ${o.customer_name}</p>
                    <p><strong>💰 ${formatPrice(o.total_price)}</strong></p>
                    <button onclick="loadDetails(${o.id})">📋 Показать состав</button>
                    <div id="details-${o.id}" class="details"></div>
                </div>
            `).join('');
        }

        async function loadDetails(id) {
            const res = await fetch(`${API}/task1/orders/${id}`);
            const order = await res.json();
            
            const html = `<ul>` + order.items.map(i => `
                <li>${i.title} × ${i.quantity} шт. (${formatPrice(i.price_at_purchase)})</li>
            `).join('') + `</ul>`;
            
            document.getElementById(`details-${id}`).innerHTML = html;
        }

        loadOrders();
    </script>
</body>
</html>