templates/matchmaking.html - fronted_bot - Noriyki/VibeCodeBot

templates/matchmaking.html
318 строк10 KB
defolttt
refactoring(TSKVBCDBT2--30): /matchmaking добавление, добавление увед, логики, времени
31 мар 2026, 17:15
31 мар 2026, 17:15e712fc8
<!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">

        <form method="POST">
        <div class="teams-panel">

          <!-- DROPDOWN -->
          <div class="choice_team" id="teamDropdown">
            <button type="button" class="choice_team_tex" id="dropdownBtn">
              <span>Настройки времени</span>
              <span class="arrow_ct">▼</span>
            </button>

            <div class="team_list">
              <div class="team_item" data-type="date">
                <span class="label">Date</span>
                <span class="value" id="dateValue">Не выставленно</span>
              </div>

              <div class="team_item" data-type="time">
                <span class="label">Start time</span>
                <span class="value" id="timeValue">Не выставленно</span>
              </div>

              <div class="team_item" data-type="duration">
                <span class="label">Duration</span>
                <span class="value" id="durationValue">Не выставленно</span>
              </div>
            </div>
          </div>

          <!-- Hidden поля -->
          <input type="hidden" name="date" id="dateInput">
          <input type="hidden" name="time" id="timeInput">
          <input type="hidden" name="duration" id="durationInput">

          <!-- Заголовок -->
          <div class="vanished_heading">
            <input id="heading"
                   name="heading"
                   class="heading_input"
                   minlength="3"
                   maxlength="80"
                   required
                   type="text"
                   placeholder="@place heading here">
          </div>

          <!-- Описание -->
          <div class="vanished_description">
            <textarea id="description"
                      name="description"
                      class="description_input"
                      maxlength="3000"
                      required
                      placeholder="@place description here"></textarea>
          </div>

          <!-- Кнопка добавить ссылку -->
          <div>
            <button type="button" id="addLinkBtn" class="button_link">
              + Добавить ссылку
            </button>
          </div>

          <!-- Контейнер ссылок -->
          <div id="linksContainer" class="links-container"></div>

          <!-- Submit -->
          <div class="buttons">
            <button type="submit" class="button_sm">
              <span>Назначить</span>
            </button>
          </div>

        </div>
        </form>

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

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

<!-- OVERLAY -->
<div id="pickerOverlay" class="picker-overlay hidden"></div>

<!-- DATE PICKER -->
<div id="dateModal" class="picker-modal hidden">
  <div class="picker-header">Select Date</div>
  <div class="picker-wheels">
    <div class="wheel" id="dayWheel"></div>
    <div class="wheel" id="monthWheel"></div>
    <div class="wheel" id="yearWheel"></div>
  </div>
  <button class="picker-ok" onclick="confirmDate()">OK</button>
</div>

<!-- TIME PICKER -->
<div id="timeModal" class="picker-modal hidden">
  <div class="picker-header">Start Time</div>
  <div class="picker-wheels">
    <div class="wheel" id="hourWheel"></div>
    <div class="wheel" id="minuteWheel"></div>
  </div>
  <button class="picker-ok" onclick="confirmTime()">OK</button>
</div>

<!-- DURATION PICKER -->
<div id="durationModal" class="picker-modal hidden">
  <div class="picker-header">Duration</div>
  <div class="duration-list" id="durationList"></div>
</div>

<script>
/* DROPDOWN */
const dropdown = document.getElementById('teamDropdown');
const btn = document.getElementById('dropdownBtn');
btn.addEventListener('click', (e) => {
  e.stopPropagation();
  dropdown.classList.toggle('open');
});
document.addEventListener('click', () => dropdown.classList.remove('open'));

/* LINK LOGIC */
const addLinkBtn = document.getElementById('addLinkBtn');
const linksContainer = document.getElementById('linksContainer');
let taskCount = 0;

addLinkBtn.addEventListener('click', () => {
  taskCount++;

  const wrapper = document.createElement('div');
  wrapper.className = 'link-item';

  wrapper.innerHTML = `
    <input type="text" name="links[]" class="link-input"
           placeholder="Вставьте ссылку для задачи ${taskCount}">
    <a href="#" class="task-link" target="_blank" style="display:none;">
      Задача ${taskCount}
    </a>
    <button type="button" class="remove-link">Удалить</button>
  `;

  const input = wrapper.querySelector('.link-input');
  const link = wrapper.querySelector('.task-link');
  const removeBtn = wrapper.querySelector('.remove-link');

  input.addEventListener('change', () => {
    let url = input.value.trim();
    if (!url) return;

    if (!url.startsWith('http://') && !url.startsWith('https://')) {
      url = 'https://' + url;
    }

    try {
      new URL(url);
      link.href = url;
      link.style.display = 'inline';
      input.style.display = 'none';
    } catch {
      alert('Введите корректную ссылку');
    }
  });

  removeBtn.addEventListener('click', () => {
    wrapper.remove();
    updateTaskNumbers();
  });

  linksContainer.appendChild(wrapper);
});

function updateTaskNumbers() {
  const items = linksContainer.querySelectorAll('.link-item');
  items.forEach((item, index) => {
    const link = item.querySelector('.task-link');
    const input = item.querySelector('.link-input');
    const number = index + 1;
    link.textContent = `Задача ${number}`;
    input.placeholder = `Вставьте ссылку для задачи ${number}`;
  });
  taskCount = items.length;
}

/* PICKER */
const overlay = document.getElementById('pickerOverlay');
const dateModal = document.getElementById('dateModal');
const timeModal = document.getElementById('timeModal');
const durationModal = document.getElementById('durationModal');

function openModal(modal) {
  overlay.classList.remove('hidden');
  modal.classList.remove('hidden');
}
function closeModals() {
  overlay.classList.add('hidden');
  document.querySelectorAll('.picker-modal').forEach(m => m.classList.add('hidden'));
}
overlay.addEventListener('click', closeModals);

/* WHEEL LOGIC */
function createWheel(container, values) {
  container.innerHTML = '';
  const itemHeight = 44;
  const spacerHeight = itemHeight;

  const topSpacer = document.createElement('div');
  topSpacer.style.height = spacerHeight + 'px';
  container.appendChild(topSpacer);

  values.forEach(val => {
    const div = document.createElement('div');
    div.textContent = val;
    container.appendChild(div);
  });

  const bottomSpacer = document.createElement('div');
  bottomSpacer.style.height = spacerHeight + 'px';
  container.appendChild(bottomSpacer);


  container.addEventListener('scroll', () => {
    clearTimeout(container._scrollTimeout);
    container._scrollTimeout = setTimeout(() => {
      const index = Math.round(container.scrollTop / itemHeight);
      container.scrollTop = index * itemHeight;
    }, 100);
  });
}


function getSelectedValue(wheel) {
  const itemHeight = 44;
  const index = Math.round(wheel.scrollTop / itemHeight);
  const element = wheel.children[index + 1]; // +1 из-за spacer
  return element ? element.textContent : '';
}

/* DATE */
createWheel(dayWheel, Array.from({length:31},(_,i)=>String(i+1).padStart(2,'0')));
createWheel(monthWheel, ['01','02','03','04','05','06','07','08','09','10','11','12']);
createWheel(yearWheel, Array.from({length:10},(_,i)=>2026+i));

function confirmDate() {
  const day = getSelectedValue(dayWheel);
  const month = getSelectedValue(monthWheel);
  const year = getSelectedValue(yearWheel);

  const value = `${day}-${month}-${year}`;
  dateValue.textContent = value;
  document.getElementById("dateInput").value = value;

  closeModals();
}

/* TIME */
createWheel(hourWheel, Array.from({length:24},(_,i)=>String(i).padStart(2,'0')));
createWheel(minuteWheel, Array.from({length:60},(_,i)=>String(i).padStart(2,'0')));

function confirmTime() {
  const hour = getSelectedValue(hourWheel);
  const minute = getSelectedValue(minuteWheel);

  const value = `${hour}:${minute}`;
  timeValue.textContent = value;
  document.getElementById("timeInput").value = value;

  closeModals();
}

/* DURATION */
["30 min","1 hour","1.5 hours","2 hours","2.5 hours","3 hours","3.5 hours","4 hours"]
.forEach(d => {
  const div = document.createElement('div');
  div.textContent = d;
  div.onclick = () => {
    durationValue.textContent = d;
    document.getElementById("durationInput").value = d;
    closeModals();
  };
  durationList.appendChild(div);
});

/* OPEN */
document.querySelector('[data-type="date"]').onclick = () => openModal(dateModal);
document.querySelector('[data-type="time"]').onclick = () => openModal(timeModal);
document.querySelector('[data-type="duration"]').onclick = () => openModal(durationModal);
</script>

</body>
</html>