WhatIDo/public/files.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Файлы — Админ-панель</title>
<link rel="stylesheet" href="admin.css">
<style>
.file-icon{width:80px;height:80px;border-radius:8px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;color:var(--muted)}
.file-name{font-weight:600;font-size:.95rem}
.file-name a{color:var(--text);text-decoration:none}
.file-name a:hover{color:var(--accent)}
</style>
</head>
<body data-page="files">
<div class="layout">
  <div class="sidebar" id="sidebar"></div>
  <div class="main">
    <h2>Файлы</h2>
    <div class="filters">
      <div><label>Поиск</label><input type="text" id="searchInput" class="search-input" placeholder="Имя файла"></div>
      <div><label>Студент</label><input type="text" id="studentFilter" list="studentFilterList" placeholder="Все / введите имя..."><datalist id="studentFilterList"></datalist></div>
      <div><label>Группа</label><select id="groupFilter"><option value="">Все группы</option></select></div>
      <div><label>С</label><input type="date" id="dateFrom"></div>
      <div><label>По</label><input type="date" id="dateTo"></div>
    </div>
    <div class="grid" id="grid"><div class="empty">Загрузка...</div></div>
    <div class="pager" id="pager"></div>
  </div>
</div>

<div class="modal-overlay" id="imgModal" onclick="this.classList.remove('open')">
  <img id="imgModalSrc">
</div>

<div class="toast" id="toast"></div>
<script src="admin.js"></script>
<script>
const PAGE_SIZE = 20;
let page = 1;
let totalFiles = 0;
let currentFiles = [];
let groupsLoaded = false;
let studentsLoaded = false;
let searchTimer = null;

function isImageFile(name) {
  return /\.(jpe?g|png|gif|webp|bmp|avif|svg|ico)$/i.test(name || '');
}

function humanSize(b) {
  if (!b) return '';
  if (b < 1024) return b + ' Б';
  if (b < 1048576) return (b / 1024).toFixed(1) + ' КБ';
  return (b / 1048576).toFixed(1) + ' МБ';
}

function fileCardHTML(f) {
  const url = `${API}/api/files/${f.token}`;
  const thumb = isImageFile(f.name)
    ? `<img src="${url}" onclick="showImg('${url}')" alt="">`
    : `<div class="file-icon">📄</div>`;
  const target = isImageFile(f.name)
    ? `href="#" onclick="showImg('${url}');return false;"`
    : `href="${url}" download`;
  return `
    <div class="card">
      ${thumb}
      <div class="info">
        <div class="file-name"><a ${target}>${esc(f.name)}</a></div>
        <div class="group">${esc(f.student_name)} · ${esc(f.group_name)}</div>
        <div class="time">${new Date(f.created_at).toLocaleString('ru')}${f.size ? ' · ' + humanSize(f.size) : ''}</div>
      </div>
    </div>
  `;
}

function renderGrid() {
  const grid = document.getElementById('grid');
  if (!currentFiles.length) {
    grid.className = 'grid';
    grid.innerHTML = '<div class="empty">Файлов не найдено</div>';
    return;
  }
  grid.className = 'grid';
  grid.innerHTML = currentFiles.map(fileCardHTML).join('');
}

async function loadGroupOptions() {
  if (groupsLoaded) return;
  const sel = document.getElementById('groupFilter');
  while (sel.options.length > 1) sel.remove(1);
  const res = await fetch(`${API}/api/groups`, { headers: hdr() });
  const groups = await res.json();
  groups.forEach(g => {
    const o = document.createElement('option');
    o.value = g.id; o.textContent = g.name;
    sel.appendChild(o);
  });
  groupsLoaded = true;
}

async function loadStudentOptions() {
  if (studentsLoaded) return;
  const dl = document.getElementById('studentFilterList');
  const res = await fetch(`${API}/api/students/names`, { headers: hdr() });
  const names = await res.json();
  dl.innerHTML = names.map(n => `<option value="${esc(n)}">`).join('');
  studentsLoaded = true;
}

async function loadFiles() {
  const p = new URLSearchParams();
  const q = document.getElementById('searchInput').value;
  const sn = document.getElementById('studentFilter').value;
  const gid = document.getElementById('groupFilter').value;
  const df = document.getElementById('dateFrom').value;
  const dt = document.getElementById('dateTo').value;
  if (q) p.set('search', q);
  if (sn) p.set('student_name', sn);
  if (gid) p.set('group_id', gid);
  if (df) p.set('date_from', df);
  if (dt) p.set('date_to', dt);
  p.set('limit', PAGE_SIZE);
  p.set('offset', (page - 1) * PAGE_SIZE);
  const res = await fetch(`${API}/api/files?${p}`, { headers: hdr() });
  const data = await res.json();
  currentFiles = data.files;
  totalFiles = data.total;
  renderGrid();
  renderPager(document.getElementById('pager'), page, Math.max(1, Math.ceil(totalFiles / PAGE_SIZE)), goPage);
}

function goPage(p) {
  page = p;
  loadFiles();
}

document.getElementById('studentFilter').addEventListener('change', () => { page = 1; loadFiles(); });
document.getElementById('groupFilter').addEventListener('change', () => { page = 1; loadFiles(); });
document.getElementById('dateFrom').addEventListener('change', () => { page = 1; loadFiles(); });
document.getElementById('dateTo').addEventListener('change', () => { page = 1; loadFiles(); });
document.getElementById('searchInput').addEventListener('input', () => {
  clearTimeout(searchTimer);
  searchTimer = setTimeout(() => { page = 1; loadFiles(); }, 300);
});

(async () => {
  if (await checkAuth()) {
    buildSidebar(document.body.dataset.page);
    loadGroupOptions();
    loadStudentOptions();
    loadFiles();
  }
})();
</script>
</body>
</html>