requests.html - master - icedev/eks-present

requests.html
189 строк7 KB
ICEDEV
init
12 май 2026, 12:50
12 май 2026, 12:50872c4b8
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Реестр заявок - EKS</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="container">
    <header class="topbar">
      <div class="brand">EKS | Реестр заявок</div>
      <nav class="nav">
        <a class="nav-link" href="contractor.html">Подрядчик</a>
        <a class="nav-link" href="accounting.html">Бухгалтерия</a>
        <a class="nav-link" href="manager.html">Руководитель</a>
        <a class="nav-link" href="information.html">Информация</a>
        <a class="nav-link active" href="requests.html">Реестр заявок</a>
      </nav>
    </header>

    <section class="glass-card section-card">
      <h1 class="title">Реестр заявок</h1>
      <p class="subtitle">Поиск по номеру заявки и фильтрация по зданию.</p>

      <div class="inline-form">
        <div class="field" style="margin-bottom: 0;">
          <label for="request-search">Поиск по номеру заявки</label>
          <input id="request-search" type="text" placeholder="Например: RQ-1001" />
        </div>
        <div class="field" style="margin-bottom: 0;">
          <label for="building-filter">Фильтр по зданию</label>
          <select id="building-filter"></select>
        </div>
      </div>

      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Номер заявки</th>
              <th>Здание</th>
              <th>Наименование</th>
              <th>Количество</th>
              <th>Статус</th>
            </tr>
          </thead>
          <tbody id="requests-tbody"></tbody>
        </table>
      </div>
    </section>
  </div>

  <script>
    const REQUESTS_KEY = "eks_requests_registry";
    const OBJECTS_KEY = "eks_objects";
    const DEFAULT_REQUESTS = [
      {
        number: "RQ-1001",
        building: "Здание 404",
        name: "Кабель ВВГнг 3x2.5",
        quantity: 800,
        status: "Новая",
        items: [
          { name: "Кабель ВВГнг 3x2.5", quantity: 800 },
          { name: "Кабель-канал 40x25", quantity: 120 },
          { name: "Клеммы монтажные", quantity: 300 },
        ],
      },
      {
        number: "RQ-1002",
        building: "Здание 405",
        name: "Датчики дыма",
        quantity: 120,
        status: "В работе",
        items: [
          { name: "Датчик дыма адресный", quantity: 120 },
          { name: "База монтажная", quantity: 120 },
          { name: "Кабель КПСнг", quantity: 550 },
        ],
      },
      {
        number: "RQ-1003",
        building: "Здание 406",
        name: "Шкафы автоматики",
        quantity: 6,
        status: "Согласовано",
        items: [
          { name: "Шкаф автоматики ШАУ-1", quantity: 4 },
          { name: "Шкаф автоматики ШАУ-2", quantity: 2 },
        ],
      },
      {
        number: "RQ-1004",
        building: "Здание 407",
        name: "IP-камеры",
        quantity: 48,
        status: "Отгружено",
        items: [
          { name: "IP-камера уличная", quantity: 32 },
          { name: "IP-камера внутренняя", quantity: 16 },
          { name: "PoE-коммутатор 24 порта", quantity: 4 },
        ],
      },
    ];

    function getRequests() {
      const raw = localStorage.getItem(REQUESTS_KEY);
      if (!raw) {
        localStorage.setItem(REQUESTS_KEY, JSON.stringify(DEFAULT_REQUESTS));
        return [...DEFAULT_REQUESTS];
      }
      try {
        const parsed = JSON.parse(raw);
        return Array.isArray(parsed) ? parsed : [...DEFAULT_REQUESTS];
      } catch (error) {
        localStorage.setItem(REQUESTS_KEY, JSON.stringify(DEFAULT_REQUESTS));
        return [...DEFAULT_REQUESTS];
      }
    }

    function getBuildings() {
      const raw = localStorage.getItem(OBJECTS_KEY);
      if (!raw) return [];
      try {
        const parsed = JSON.parse(raw);
        return Array.isArray(parsed) ? parsed.map((item) => item.name).filter(Boolean) : [];
      } catch (error) {
        return [];
      }
    }

    function badgeClassForStatus(status) {
      if (status === "Согласовано" || status === "Отгружено") return "success";
      if (status === "В работе") return "warn";
      return "danger";
    }

    function renderBuildingFilter() {
      const select = document.getElementById("building-filter");
      const buildingSet = new Set();

      getBuildings().forEach((name) => buildingSet.add(name));
      getRequests().forEach((item) => buildingSet.add(item.building));

      const values = Array.from(buildingSet);
      select.innerHTML = "<option value=\"\">Все здания</option>";
      values.forEach((name) => {
        const option = document.createElement("option");
        option.value = name;
        option.textContent = name;
        select.appendChild(option);
      });
    }

    function renderRequests() {
      const tbody = document.getElementById("requests-tbody");
      const search = String(document.getElementById("request-search").value || "").trim().toLowerCase();
      const building = document.getElementById("building-filter").value;
      const items = getRequests();

      const filtered = items.filter((item) => {
        const byNumber = !search || String(item.number).toLowerCase().includes(search);
        const byBuilding = !building || item.building === building;
        return byNumber && byBuilding;
      });

      tbody.innerHTML = "";
      filtered.forEach((item) => {
        const tr = document.createElement("tr");
        const badgeClass = badgeClassForStatus(item.status);
        tr.innerHTML =
          "<td><a href=\"request-details.html?number=" + encodeURIComponent(item.number) + "\">" + item.number + "</a></td>" +
          "<td>" + item.building + "</td>" +
          "<td>" + item.name + "</td>" +
          "<td>" + item.quantity + "</td>" +
          "<td><span class=\"badge " + badgeClass + "\">" + item.status + "</span></td>";
        tbody.appendChild(tr);
      });
    }

    document.getElementById("request-search").addEventListener("input", renderRequests);
    document.getElementById("building-filter").addEventListener("change", renderRequests);

    renderBuildingFilter();
    renderRequests();
  </script>
</body>
</html>