manager.html - master - icedev/eks-present

manager.html
173 строки8 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="index.html">Выход</a>
        <a class="nav-link active" href="manager.html">Главная</a>
        <a class="nav-link" href="objects.html">Объекты</a>
        <a class="nav-link" href="information.html">Информация</a>
        <a class="nav-link" href="suppliers.html">Поставщики</a>
        <a class="nav-link" href="requests.html">Реестр заявок</a>
      </nav>
    </header>

    <section class="glass-card section-card">
      <h1 class="title">Панель руководителя</h1>
      <p class="subtitle">Сводный контроль компаний и ключевых блоков проекта</p>
      <div class="grid">
        <article class="tile"><h3>Компании</h3><p>Структура исполнителей и зона ответственности.</p></article>
        <article class="tile"><h3>Объекты</h3><p>Стадии работ, критические задачи и дедлайны.</p></article>
        <a class="tile" href="information.html"><h3>Информация</h3><p>Контроль входящих и выходящих согласований.</p></a>
        <article class="tile"><h3>Отчеты</h3><p>Динамика выполнения и финансовые показатели.</p></article>
        <article class="tile"><h3>Чат</h3><p>Быстрые коммуникации по статусам и проблемам.</p></article>
        <a class="tile" href="suppliers.html">
          <h3>Поставщики оборудования</h3>
          <p>Каталог поставщиков, SLA, сроки и статусы отгрузок.</p>
        </a>
      </div>
    </section>

    <section class="glass-card section-card">
      <h2 class="title" style="font-size: 22px; margin-bottom: 8px;">Заявки руководителя</h2>
      <p class="subtitle">Создавайте заявки через popup и управляйте ими в реестре.</p>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Тема</th>
              <th>Объект</th>
              <th>Комментарий</th>
              <th class="actions-cell">Действия</th>
            </tr>
          </thead>
          <tbody id="requests-tbody"></tbody>
        </table>
      </div>
    </section>
  </div>

  <div class="popup" id="requestPopup" aria-hidden="true">
    <div class="popup__overlay" data-close-popup></div>
    <div class="popup__dialog glass-card" role="dialog" aria-modal="true" aria-labelledby="popupTitle">
      <button class="popup__close" type="button" aria-label="Закрыть" data-close-popup>&times;</button>
      <h2 class="title popup__title" id="popupTitle">Форма заявки</h2>
      <p class="subtitle">Заполните данные для отправки в систему.</p>
      <form id="request-form">
        <div class="field">
          <label for="requestTheme">Тема</label>
          <input id="requestTheme" name="theme" type="text" placeholder="Например: поставка оборудования" />
        </div>
        <div class="field">
          <label for="requestObject">Объект</label>
          <input id="requestObject" name="object" type="text" placeholder="Название объекта" />
        </div>
        <div class="field">
          <label for="requestComment">Комментарий</label>
          <input id="requestComment" name="comment" type="text" placeholder="Краткое описание задачи" />
        </div>
        <button class="btn btn-primary" type="submit">Отправить</button>
      </form>
    </div>
  </div>

  <script>
    const popup = document.getElementById("requestPopup");
    const openButton = document.getElementById("openRequestForm");
    const closeControls = document.querySelectorAll("[data-close-popup]");
    const requestForm = document.getElementById("request-form");
    const REQUESTS_STORAGE_KEY = "eks_manager_requests";
    const DEFAULT_REQUESTS = [
      { id: "r1", theme: "Поставка кабельной продукции", object: "Здание 404", comment: "Проверить готовность к этапу монтажа" },
      { id: "r2", theme: "Сверка графика ПНР", object: "Здание 406", comment: "Нужен актуальный план и ответственный подрядчик" },
    ];

    function setPopupState(isOpen) {
      popup.classList.toggle("is-open", isOpen);
      popup.setAttribute("aria-hidden", String(!isOpen));
    }

    function getRequests() {
      const raw = localStorage.getItem(REQUESTS_STORAGE_KEY);
      if (!raw) {
        localStorage.setItem(REQUESTS_STORAGE_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_STORAGE_KEY, JSON.stringify(DEFAULT_REQUESTS));
        return [...DEFAULT_REQUESTS];
      }
    }

    function saveRequests(items) {
      localStorage.setItem(REQUESTS_STORAGE_KEY, JSON.stringify(items));
    }

    function removeRequest(id) {
      const items = getRequests().filter((item) => item.id !== id);
      saveRequests(items);
      renderRequests();
    }

    function renderRequests() {
      const tbody = document.getElementById("requests-tbody");
      const items = getRequests();
      tbody.innerHTML = "";

      items.forEach((item) => {
        const tr = document.createElement("tr");
        tr.innerHTML =
          "<td>" + item.theme + "</td>" +
          "<td>" + item.object + "</td>" +
          "<td>" + item.comment + "</td>" +
          "<td><button class=\"btn btn-danger\" type=\"button\" data-delete-request=\"" + item.id + "\">Удалить</button></td>";
        tbody.appendChild(tr);
      });

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

    openButton.addEventListener("click", () => setPopupState(true));
    closeControls.forEach((element) => {
      element.addEventListener("click", () => setPopupState(false));
    });

    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && popup.classList.contains("is-open")) {
        setPopupState(false);
      }
    });

    requestForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const formData = new FormData(requestForm);
      const theme = String(formData.get("theme") || "").trim();
      const object = String(formData.get("object") || "").trim();
      const comment = String(formData.get("comment") || "").trim();
      if (!theme || !object || !comment) return;

      const items = getRequests();
      items.push({ id: String(Date.now()), theme, object, comment });
      saveRequests(items);
      requestForm.reset();
      setPopupState(false);
      renderRequests();
    });

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