206 lines
8.1 KiB
HTML
206 lines
8.1 KiB
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><label>Тип</label>
|
||
<div class="view-toggle" id="tabToggle">
|
||
<button data-mode="attached" onclick="setMode('attached')">Прикреплённые</button>
|
||
<button data-mode="detached" onclick="setMode('detached')">Откреплённые</button>
|
||
</div>
|
||
</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;
|
||
let mode = 'attached';
|
||
|
||
function setMode(m) {
|
||
mode = m === 'detached' ? 'detached' : 'attached';
|
||
document.querySelectorAll('#tabToggle button').forEach(b => {
|
||
b.classList.toggle('active', b.dataset.mode === mode);
|
||
});
|
||
const show = mode === 'attached';
|
||
const keep = ['searchInput', 'studentFilter', 'groupFilter', 'dateFrom', 'dateTo'].map(id => document.getElementById(id));
|
||
if (!show) { keep.forEach(el => { el.value = ''; }); }
|
||
keep.forEach(el => { el.parentElement.style.display = show ? '' : 'none'; });
|
||
page = 1;
|
||
loadFiles();
|
||
}
|
||
|
||
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`;
|
||
const meta = mode === 'detached'
|
||
? `<div class="group" style="color:#f59e0b">Откреплён от записи, не привязан</div>`
|
||
: `<div class="group">${esc(f.student_name)} · ${esc(f.group_name)}</div>`;
|
||
const action = mode === 'detached'
|
||
? `<button class="f-action f-del" onclick="deleteFile(${f.id})" title="Удалить файл навсегда">Удалить</button>`
|
||
: `<button class="f-action" onclick="detachFile(${f.id})" title="Открепить файл от записи">Открепить</button>`;
|
||
return `
|
||
<div class="card">
|
||
${thumb}
|
||
<div class="info">
|
||
<div class="file-name"><a ${target}>${esc(f.name)}</a></div>
|
||
${meta}
|
||
<div class="time">${new Date(f.created_at).toLocaleString('ru')}${f.size ? ' · ' + humanSize(f.size) : ''}</div>
|
||
</div>
|
||
<div class="f-actions">${action}</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderGrid() {
|
||
const grid = document.getElementById('grid');
|
||
if (!currentFiles.length) {
|
||
grid.className = 'grid';
|
||
grid.innerHTML = mode === 'detached'
|
||
? '<div class="empty">Откреплённых файлов нет</div>'
|
||
: '<div class="empty">Файлов не найдено</div>';
|
||
return;
|
||
}
|
||
grid.className = 'grid';
|
||
grid.innerHTML = currentFiles.map(fileCardHTML).join('');
|
||
}
|
||
|
||
async function detachFile(id) {
|
||
if (!confirm('Открепить файл от записи? Он переместится во вкладку «Откреплённые».')) return;
|
||
const res = await fetch(`${API}/api/files/${id}/detach`, { method: 'POST', headers: hdr() });
|
||
if (res.ok) { showToast('Файл откреплён'); loadFiles(); }
|
||
else { const err = await res.json().catch(() => ({})); alert(err.error || 'Ошибка'); }
|
||
}
|
||
|
||
async function deleteFile(id) {
|
||
if (!confirm('Удалить файл навсегда? Отменить это действие нельзя.')) return;
|
||
const res = await fetch(`${API}/api/files/${id}`, { method: 'DELETE', headers: hdr() });
|
||
if (res.ok) { showToast('Файл удалён'); loadFiles(); }
|
||
else { const err = await res.json().catch(() => ({})); alert(err.error || 'Ошибка'); }
|
||
}
|
||
|
||
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();
|
||
if (mode === 'attached') {
|
||
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${mode === 'detached' ? '/detached' : ''}?${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);
|
||
document.querySelectorAll('#tabToggle button').forEach(b => {
|
||
b.classList.toggle('active', b.dataset.mode === mode);
|
||
});
|
||
loadGroupOptions();
|
||
loadStudentOptions();
|
||
loadFiles();
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |