objects.html - master - icedev/eks-present

objects.html
158 строк6 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="manager.html">Руководитель</a>
        <a class="nav-link" href="information.html">Информация</a>
        <a class="nav-link" href="requests.html">Реестр заявок</a>
        <a class="nav-link" href="index.html">Выход</a>
      </nav>
    </header>

    <section class="glass-card section-card">
      <h1 class="title">Список объектов</h1>
      <p class="subtitle">По каждому объекту указаны количество систем, закрепленный подрядчик и степень готовности.</p>

      <form id="add-object-form" class="inline-form">
        <div class="field" style="margin-bottom: 0;">
          <label for="object-name">Название объекта</label>
          <input id="object-name" name="name" type="text" placeholder="Например: Здание 410" required />
        </div>
        <div class="field" style="margin-bottom: 0;">
          <label for="object-systems">Кол-во систем</label>
          <input id="object-systems" name="systemsCount" type="number" min="1" placeholder="6" required />
        </div>
        <div class="field" style="margin-bottom: 0;">
          <label for="object-contractor">Подрядчик</label>
          <input id="object-contractor" name="contractor" type="text" placeholder='ООО "Новый подрядчик"' required />
        </div>
        <div class="field" style="margin-bottom: 0;">
          <label for="object-progress">Степень готовности (%)</label>
          <input id="object-progress" name="progress" type="number" min="0" max="100" placeholder="50" required />
        </div>
        <div style="display: flex; align-items: flex-end;">
          <button class="btn btn-primary" type="submit" style="width: 100%;">Добавить объект</button>
        </div>
      </form>

      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Объект</th>
              <th>Кол-во систем в здании</th>
              <th>Подрядчик</th>
              <th>Степень готовности</th>
              <th class="actions-cell">Действия</th>
            </tr>
          </thead>
          <tbody id="objects-tbody"></tbody>
        </table>
      </div>
    </section>
  </div>

  <script>
    const STORAGE_KEY = "eks_objects";
    const DEFAULT_OBJECTS = [
      { id: "404", name: "Здание 404", systemsCount: 6, contractor: 'ООО "ТехМонтаж"', progress: 85 },
      { id: "405", name: "Здание 405", systemsCount: 8, contractor: 'ООО "СигналПро"', progress: 57 },
      { id: "406", name: "Здание 406", systemsCount: 7, contractor: 'ООО "Безопасность+"', progress: 34 },
      { id: "407", name: "Здание 407", systemsCount: 9, contractor: 'ООО "ЭнергоСтрой"', progress: 76 },
    ];

    function getBadgeClass(progress) {
      if (progress >= 70) return "success";
      if (progress >= 40) return "warn";
      return "danger";
    }

    function getObjects() {
      const raw = localStorage.getItem(STORAGE_KEY);
      if (!raw) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(DEFAULT_OBJECTS));
        return [...DEFAULT_OBJECTS];
      }
      try {
        const parsed = JSON.parse(raw);
        return Array.isArray(parsed) ? parsed : [...DEFAULT_OBJECTS];
      } catch (e) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(DEFAULT_OBJECTS));
        return [...DEFAULT_OBJECTS];
      }
    }

    function saveObjects(objects) {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(objects));
    }

    function removeObject(id) {
      const objects = getObjects().filter((item) => item.id !== id);
      saveObjects(objects);
      renderObjects();
    }

    function renderObjects() {
      const tbody = document.getElementById("objects-tbody");
      const objects = getObjects();
      tbody.innerHTML = "";

      objects.forEach((item) => {
        const tr = document.createElement("tr");
        const badgeClass = getBadgeClass(Number(item.progress));
        tr.innerHTML =
          "<td><a href=\"building.html?id=" + item.id + "\">" + item.name + "</a></td>" +
          "<td>" + item.systemsCount + "</td>" +
          "<td>" + item.contractor + "</td>" +
          "<td><span class=\"badge " + badgeClass + "\">" + item.progress + "%</span></td>" +
          "<td><button class=\"btn btn-danger\" type=\"button\" data-delete-id=\"" + item.id + "\">Удалить</button></td>";
        tbody.appendChild(tr);
      });

      tbody.querySelectorAll("[data-delete-id]").forEach((button) => {
        button.addEventListener("click", () => {
          removeObject(button.getAttribute("data-delete-id"));
        });
      });
    }

    document.getElementById("add-object-form").addEventListener("submit", function (event) {
      event.preventDefault();
      const formData = new FormData(event.target);

      const name = String(formData.get("name") || "").trim();
      const systemsCount = Number(formData.get("systemsCount"));
      const contractor = String(formData.get("contractor") || "").trim();
      const progress = Number(formData.get("progress"));

      if (!name || !contractor || Number.isNaN(systemsCount) || Number.isNaN(progress)) return;

      const objects = getObjects();
      const newId = String(Date.now());
      objects.push({
        id: newId,
        name,
        systemsCount: Math.max(1, systemsCount),
        contractor,
        progress: Math.min(100, Math.max(0, progress)),
      });

      saveObjects(objects);
      event.target.reset();
      renderObjects();
    });

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