public/lab9/task1/index.html - master - Coderdev/web-nodejs-labs

public/lab9/task1/index.html
84 строки3 KB
Coderdev
12 май 2026, 12:34
12 май 2026, 12:34f5e899f
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Задание 1</title>
  <style>
    body { font-family: sans-serif; max-width: 700px; margin: 40px auto; padding: 0 20px; color: #222; }
    h1 { border-bottom: 2px solid #222; padding-bottom: 10px; }
    a { color: #2563eb; }
    .stock-box { background: #f4f4f4; border-radius: 8px; padding: 14px 18px; margin: 16px 0; font-size: 1rem; }
    .search-row { display: flex; gap: 8px; margin: 16px 0; }
    input[type=text] { flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; }
    button { padding: 8px 16px; background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.95rem; }
    button:hover { background: #1d4ed8; }
    button.ghost { background: #fff; color: #555; border: 1px solid #ccc; }
    button.ghost:hover { background: #f4f4f4; }
    .product { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid #e5e5e5; border-radius: 8px; margin: 6px 0; }
    .product:hover { background: #fafafa; }
    .price { color: #16a34a; font-weight: 600; }
    .muted { color: #888; font-size: 0.85rem; }
  </style>
</head>
<body>
  <p><a href="/lab9/">← Назад</a></p>
  <h1>Задание 1 — Статистика и поиск</h1>

  <h2>Статистика склада</h2>
  <div class="stock-box" id="stock">Загрузка...</div>

  <h2>Поиск товара</h2>
  <div class="search-row">
    <input type="text" id="searchInput" placeholder="Введите название или подстроку">
    <button onclick="doSearch()">Найти</button>
    <button class="ghost" onclick="clearSearch()">Сбросить</button>
  </div>

  <div id="resultsInfo" class="muted"></div>
  <div id="results"></div>

  <script>
    const fmt = cents => (cents / 100).toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' });

    async function loadStock() {
      const res = await fetch('/api/lab9/products/task1/stock');
      const d = await res.json();
      document.getElementById('stock').innerHTML =
        `Наименований: <b>${d.total_products}</b> &nbsp;|&nbsp; Единиц на складе: <b>${d.total_items}</b> &nbsp;|&nbsp; Общая стоимость: <b>${fmt(d.total_value)}</b>`;
    }

    async function doSearch() {
      const q = document.getElementById('searchInput').value;
      const url = q.trim()
        ? `/api/lab9/products/task1/products?q=${encodeURIComponent(q)}`
        : '/api/lab9/products/task1/products';
      const res = await fetch(url);
      const products = await res.json();
      document.getElementById('resultsInfo').textContent = `Найдено: ${products.length}`;
      document.getElementById('results').innerHTML = products.map(p => `
        <div class="product">
          <div>
            <div>${p.title}</div>
            <div class="muted">ID: ${p.id}</div>
          </div>
          <div style="text-align:right">
            <div class="price">${fmt(p.price)}</div>
            <div class="muted">Склад: ${p.amount} шт.</div>
          </div>
        </div>`).join('');
    }

    function clearSearch() {
      document.getElementById('searchInput').value = '';
      doSearch();
    }

    document.getElementById('searchInput').addEventListener('keydown', e => {
      if (e.key === 'Enter') doSearch();
    });

    loadStock();
    doSearch();
  </script>
</body>
</html>