templates/stats.html - fronted_bot - Noriyki/VibeCodeBot

templates/stats.html
209 строк6 KB
defolttt
feat(backend): создано создание команд, в бд через сайт
28 фев 2026, 19:25
28 фев 2026, 19:25423093a
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Admin Panel</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/stats.css') }}">
</head>

<body>
<div class="app">

  <header class="topbar">
    <div class="brand">
      <h1 class="brand__title">ADMIN PANEL</h1>
      <img class="brand__logo"
           src="{{ url_for('static', filename='img/main_logo.png') }}"
           alt="Logo" />
    </div>
  </header>

  <main class="content">
    <div class="container">
      <div class="page">

        <div class="teams-panel">
          <div class="statistic">
            <h1 class="statistic_txt">Статистика</h1>
          </div>

          <div class="buttons">

            {% for team, members in team_members.items() %}

              <button class="button" onclick="toggleMenu(this)">
                <span class="team-name">{{ team }}</span>
                <span class="arrow">▼</span>
              </button>

              <div class="dropdown">

                <a href="#" class="members-btn">Участники</a>

                <div class="members-dropdown">
                  {% for user in members %}
                    <div class="member">
                      <span>{{ user.username }}</span>
                      <span class="member-score">{{ user.month_done }}</span>
                    </div>
                  {% else %}
                    <div class="member">Нет участников</div>
                  {% endfor %}
                </div>

                <a href="#" class="delete-team">Удалить команду</a>

              </div>

            {% else %}
              <p>Команды не найдены</p>
            {% endfor %}

          </div>

          <!-- МОДАЛКА -->
          <div id="modalOverlay" class="modal-overlay">
            <div class="modal-window">
              <div class="modal-header">
                <h3 id="modalText">
                  Вы точно уверены что хотите удалить команду?
                </h3>
                <span class="close-btn" id="closeModal">&times;</span>
              </div>

              <div class="modal-footer">
                <button class="btn-primary" id="confirmDelete">
                  Подтвердить
                </button>
                <button class="btn-secondary" id="cancelModal">
                  Отмена
                </button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </main>

  <footer class="down">
    <button onclick="location.href='{{url_for('pages.index')}}'"
            class="back-btn">
      ← Назад
    </button>
  </footer>

</div>

<script>

function toggleMenu(btn) {
  const dropdown = btn.nextElementSibling;
  const isOpen = dropdown.classList.contains("show");

  document.querySelectorAll(".dropdown.show").forEach(el => {
    if (el !== dropdown) {
      el.classList.remove("show");
      el.previousElementSibling.classList.remove("active");
    }
  });

  dropdown.classList.toggle("show", !isOpen);
  btn.classList.toggle("active", !isOpen);
}

document.addEventListener("DOMContentLoaded", () => {

  // Вложенный список участников
  document.querySelectorAll(".members-btn").forEach(btn => {
    btn.addEventListener("click", function(e) {
      e.preventDefault();
      e.stopPropagation();
      const membersDropdown = this.nextElementSibling;
      membersDropdown.classList.toggle("show-members");
    });
  });

  const modalOverlay = document.getElementById('modalOverlay');
  const closeModalButton = document.getElementById('closeModal');
  const cancelModalButton = document.getElementById('cancelModal');
  const confirmDeleteButton = document.getElementById('confirmDelete');
  const modalText = document.getElementById('modalText');

  let teamToDelete = null;

  function openModal(teamName) {
    teamToDelete = teamName;
    modalText.textContent =
      `Вы точно уверены что хотите удалить команду ${teamName}?`;
    modalOverlay.classList.add('active');
    document.body.style.overflow = 'hidden';
  }

  function closeModal() {
    modalOverlay.classList.remove('active');
    document.body.style.overflow = '';
    teamToDelete = null;
  }

  document.querySelectorAll('.delete-team').forEach(btn => {
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      e.stopPropagation();

      const teamName = this.closest('.dropdown')
        .previousElementSibling
        .querySelector('.team-name')
        .textContent
        .trim();

      openModal(teamName);
    });
  });

  closeModalButton.addEventListener('click', closeModal);
  cancelModalButton.addEventListener('click', closeModal);

  modalOverlay.addEventListener('click', function(event) {
    if (event.target === modalOverlay) closeModal();
  });

  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape' &&
        modalOverlay.classList.contains('active')) {
      closeModal();
    }
  });

  // Удаление команды
  confirmDeleteButton.addEventListener('click', function () {
    if (!teamToDelete) return;

    fetch("{{ url_for('pages.delete_team') }}", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: "team=" + encodeURIComponent(teamToDelete)
    })
    .then(response => {
      if (response.ok) {
        location.reload();
      } else {
        alert("Ошибка при удалении команды");
      }
    })
    .catch(() => {
      alert("Ошибка соединения с сервером");
    });

    closeModal();
  });

});
</script>

</body>
</html>