408 lines
19 KiB
HTML
408 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AE Anons</title>
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
<link rel="stylesheet" href="/static/fontawesome/all.min.css">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<div class="logo-container">
|
|
<img src="/assets/logo.png" alt="AE Anons Logo" class="logo" id="logo">
|
|
</div>
|
|
<h1>AE Anons</h1>
|
|
</div>
|
|
<div class="header-controls">
|
|
<button class="theme-toggle" onclick="toggleTheme()">
|
|
<i class="fas fa-circle-half-stroke" id="themeIcon"></i>
|
|
<span id="themeText">Auto</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Bar -->
|
|
<div class="action-bar">
|
|
<button class="btn btn-primary" onclick="generateJobs()">
|
|
<i class="fas fa-play"></i> Generate New Jobs
|
|
</button>
|
|
<button class="btn btn-warning" onclick="stopAllJobs()">
|
|
<i class="fas fa-stop"></i> Stop All Jobs
|
|
</button>
|
|
<button class="btn btn-danger" onclick="cleanupJobs()">
|
|
<i class="fas fa-trash-alt"></i> Cleanup Finished
|
|
</button>
|
|
<button class="btn btn-outline" onclick="refreshJobs()">
|
|
<i class="fas fa-sync-alt"></i> Refresh
|
|
</button>
|
|
<div class="status-message" id="statusMessage">
|
|
<i class="fas fa-circle" style="color: var(--accent-success); font-size: 8px;"></i>
|
|
<span>Ready</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="stats-grid" id="statsGrid"></div>
|
|
|
|
<!-- Filter Bar -->
|
|
<div class="filter-bar">
|
|
<div class="search-wrapper">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" class="search-input" id="filterInput" placeholder="Filter by filename or UID..."
|
|
onkeyup="filterTable()">
|
|
</div>
|
|
<div class="auto-refresh-badge">
|
|
<i class="fas fa-clock"></i>
|
|
<span>Auto-refresh: 60s</span>
|
|
<span id="refreshCountdown">60</span>s
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="table-container">
|
|
<table id="jobsTable">
|
|
<thead>
|
|
<tr>
|
|
<th data-column="filename" onclick="sortTable('filename')">
|
|
Output File <i class="fas fa-sort"></i>
|
|
</th>
|
|
<th data-column="state" onclick="sortTable('state')" class="sorted-asc">
|
|
State <i class="fas fa-sort-up"></i>
|
|
</th>
|
|
<th data-column="created" onclick="sortTable('created')">
|
|
Created <i class="fas fa-sort"></i>
|
|
</th>
|
|
<th data-column="updated" onclick="sortTable('updated')">
|
|
Updated <i class="fas fa-sort"></i>
|
|
</th>
|
|
<th data-column="uid" onclick="sortTable('uid')">
|
|
UID <i class="fas fa-sort"></i>
|
|
</th>
|
|
<th>Preview</th>
|
|
<th>Move</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="jobsTableBody">
|
|
<tr>
|
|
<td colspan="7">
|
|
<div class="empty-state">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>Loading jobs...</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video Player Modal -->
|
|
<div id="playerModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closePlayer()">×</span>
|
|
<video id="videoPlayer" controls style="width:100%; max-height:70vh;"></video>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ========== ОРИГИНАЛЬНЫЙ КОД (Задания) ==========
|
|
let allJobs = [];
|
|
let filteredJobs = [];
|
|
let isLoading = false;
|
|
let autoRefreshTimer = null;
|
|
let countdownTimer = null;
|
|
let countdownValue = 60;
|
|
let currentTheme = 'auto';
|
|
let currentSort = { column: 'state', direction: 'asc' };
|
|
const stateOrder = { 'finished': 1, 'started': 2, 'processing': 3, 'queued': 4, 'pending': 5, 'error': 6 };
|
|
|
|
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
function getOSPreference() { return darkModeMediaQuery.matches ? 'dark' : 'light'; }
|
|
function applyTheme(theme) {
|
|
const effectiveTheme = theme === 'auto' ? getOSPreference() : theme;
|
|
document.documentElement.setAttribute('data-theme', effectiveTheme);
|
|
updateThemeButton(theme);
|
|
}
|
|
function updateThemeButton(theme) {
|
|
const icon = document.getElementById('themeIcon');
|
|
const text = document.getElementById('themeText');
|
|
if (theme === 'auto') { icon.className = 'fas fa-circle-half-stroke'; text.textContent = 'Auto'; }
|
|
else if (theme === 'dark') { icon.className = 'fas fa-moon'; text.textContent = 'Dark'; }
|
|
else { icon.className = 'fas fa-sun'; text.textContent = 'Light'; }
|
|
}
|
|
function toggleTheme() {
|
|
if (currentTheme === 'auto') currentTheme = 'light';
|
|
else if (currentTheme === 'light') currentTheme = 'dark';
|
|
else currentTheme = 'auto';
|
|
localStorage.setItem('theme', currentTheme);
|
|
applyTheme(currentTheme);
|
|
}
|
|
function initTheme() {
|
|
const savedTheme = localStorage.getItem('theme') || 'auto';
|
|
currentTheme = savedTheme;
|
|
applyTheme(currentTheme);
|
|
darkModeMediaQuery.addEventListener('change', () => { if (currentTheme === 'auto') applyTheme('auto'); });
|
|
}
|
|
|
|
function sortTable(column) {
|
|
if (currentSort.column === column) currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
|
|
else { currentSort.column = column; currentSort.direction = 'asc'; }
|
|
updateSortIcons();
|
|
sortAndRender();
|
|
}
|
|
function updateSortIcons() {
|
|
document.querySelectorAll('th').forEach(th => {
|
|
const column = th.dataset.column;
|
|
th.classList.remove('sorted-asc', 'sorted-desc');
|
|
const icon = th.querySelector('i');
|
|
if (column === currentSort.column) {
|
|
th.classList.add(currentSort.direction === 'asc' ? 'sorted-asc' : 'sorted-desc');
|
|
icon.className = currentSort.direction === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down';
|
|
} else {
|
|
icon.className = 'fas fa-sort';
|
|
}
|
|
});
|
|
}
|
|
function sortJobs(jobs) {
|
|
const { column, direction } = currentSort;
|
|
const multiplier = direction === 'asc' ? 1 : -1;
|
|
return [...jobs].sort((a, b) => {
|
|
let aVal, bVal;
|
|
switch (column) {
|
|
case 'filename': aVal = a.outfile_name || ''; bVal = b.outfile_name || ''; return multiplier * aVal.localeCompare(bVal);
|
|
case 'state': aVal = stateOrder[a.state] || 999; bVal = stateOrder[b.state] || 999; return multiplier * (aVal - bVal);
|
|
case 'created': aVal = a.created_at ? new Date(a.created_at).getTime() : 0; bVal = b.created_at ? new Date(b.created_at).getTime() : 0; return multiplier * (bVal - aVal);
|
|
case 'updated': aVal = a.updated_at ? new Date(a.updated_at).getTime() : 0; bVal = b.updated_at ? new Date(b.updated_at).getTime() : 0; return multiplier * (bVal - aVal);
|
|
case 'uid': aVal = a.uid || ''; bVal = b.uid || ''; return multiplier * aVal.localeCompare(bVal);
|
|
default: return 0;
|
|
}
|
|
});
|
|
}
|
|
function sortAndRender() {
|
|
const jobsToRender = filteredJobs.length > 0 || document.getElementById('filterInput').value ? filteredJobs : allJobs;
|
|
const sorted = sortJobs(jobsToRender);
|
|
renderJobs(sorted);
|
|
}
|
|
|
|
async function refreshJobs() {
|
|
if (isLoading) return;
|
|
isLoading = true;
|
|
try {
|
|
setStatus('loading', 'Loading jobs...');
|
|
const response = await fetch('/api/jobs');
|
|
allJobs = await response.json();
|
|
filteredJobs = [];
|
|
document.getElementById('filterInput').value = '';
|
|
sortAndRender();
|
|
updateStats();
|
|
setStatus('success', `Loaded ${allJobs.length} jobs`);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setStatus('error', 'Failed to load jobs');
|
|
} finally { isLoading = false; }
|
|
}
|
|
|
|
function renderJobs(jobs) {
|
|
const tbody = document.getElementById('jobsTableBody');
|
|
if (jobs.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="7"><div class="empty-state"><i class="fas fa-inbox"></i><p>No jobs found</p></div></td></tr>';
|
|
return;
|
|
}
|
|
tbody.innerHTML = jobs.map(job => {
|
|
const stateClass = getStateClass(job.state);
|
|
const created = formatDateTime(job.created_at);
|
|
const updated = formatDateTime(job.updated_at);
|
|
const previewBtn = job.state === 'finished'
|
|
? `<button class="btn btn-outline btn-sm" onclick="playVideo('${escapeHtml(job.outfile_name)}')"><i class="fas fa-play"></i></button>`
|
|
: '';
|
|
// Заглушка‑иконка, обновится асинхронно
|
|
const moveIcon = job.state === 'finished'
|
|
? `<span class="move-icon" data-file="${escapeHtml(job.outfile_name)}"><i class="fas fa-spinner fa-spin"></i></span>`
|
|
: '';
|
|
return `<tr>
|
|
<td><div class="job-filename" title="${escapeHtml(job.outfile_name)}">${escapeHtml(job.outfile_name)}</div></td>
|
|
<td><span class="badge ${stateClass}">${escapeHtml(job.state)}</span></td>
|
|
<td class="datetime">${created}</td>
|
|
<td class="datetime">${updated}</td>
|
|
<td class="uid" title="${escapeHtml(job.uid)}">${job.uid.substring(0, 10)}...</td>
|
|
<td>${previewBtn}</td>
|
|
<td>${moveIcon}</td>
|
|
</tr>`;
|
|
}).join('');
|
|
// Запускаем проверку статусов после рендера
|
|
updateMoveStatuses();
|
|
}
|
|
function escapeHtml(text) { if (!text) return ''; const div = document.createElement('div'); div.textContent = text; return div.innerHTML; }
|
|
function getStateClass(state) {
|
|
const classes = { 'finished': 'badge-finished', 'started': 'badge-started', 'processing': 'badge-processing', 'queued': 'badge-queued', 'error': 'badge-error', 'pending': 'badge-pending' };
|
|
return classes[state] || 'badge-pending';
|
|
}
|
|
function formatDateTime(dateStr) {
|
|
if (!dateStr) return '-';
|
|
try { const date = new Date(dateStr); return `${date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}, ${date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' })}`; }
|
|
catch { return dateStr; }
|
|
}
|
|
function updateStats() {
|
|
const stats = { total: allJobs.length, finished: 0, started: 0, queued: 0, error: 0, other: 0 };
|
|
allJobs.forEach(job => {
|
|
switch (job.state) {
|
|
case 'finished': stats.finished++; break;
|
|
case 'started': case 'processing': stats.started++; break;
|
|
case 'queued': stats.queued++; break;
|
|
case 'error': stats.error++; break;
|
|
default: stats.other++; break;
|
|
}
|
|
});
|
|
document.getElementById('statsGrid').innerHTML = `
|
|
<div class="stat-card"><h3><i class="fas fa-tasks"></i> Total Jobs</h3><div class="value">${stats.total}</div></div>
|
|
<div class="stat-card"><h3><i class="fas fa-check-circle"></i> Completed</h3><div class="value">${stats.finished}</div></div>
|
|
<div class="stat-card"><h3><i class="fas fa-play-circle"></i> Active</h3><div class="value">${stats.started + stats.queued}</div></div>
|
|
<div class="stat-card"><h3><i class="fas fa-exclamation-circle"></i> Errors</h3><div class="value">${stats.error}</div></div>`;
|
|
}
|
|
function filterTable() {
|
|
const filter = document.getElementById('filterInput').value.toLowerCase();
|
|
filteredJobs = allJobs.filter(job => job.outfile_name.toLowerCase().includes(filter) || job.uid.toLowerCase().includes(filter));
|
|
sortAndRender();
|
|
}
|
|
|
|
// Оригинальные реализации generateJobs, stopAllJobs, cleanupJobs, setStatus, startAutoRefresh, stopAutoRefresh, resetCountdown
|
|
async function generateJobs() {
|
|
setStatus('loading', 'Generating jobs...');
|
|
try {
|
|
const response = await fetch('/api/generate', { method: 'POST' });
|
|
if (response.ok) {
|
|
setStatus('success', 'Job generation started');
|
|
setTimeout(() => refreshJobs(), 5000);
|
|
} else {
|
|
const text = await response.text();
|
|
setStatus('error', `Error: ${text}`);
|
|
}
|
|
} catch (err) {
|
|
setStatus('error', `Error: ${err}`);
|
|
}
|
|
}
|
|
|
|
async function stopAllJobs() {
|
|
if (!confirm('Are you sure you want to stop all active jobs?')) return;
|
|
setStatus('loading', 'Stopping all jobs...');
|
|
try {
|
|
const response = await fetch('/api/jobs/stop-all', { method: 'POST' });
|
|
if (response.ok) {
|
|
setStatus('success', 'All jobs stopped');
|
|
refreshJobs();
|
|
} else {
|
|
const text = await response.text();
|
|
setStatus('error', `Error: ${text}`);
|
|
}
|
|
} catch (err) {
|
|
setStatus('error', `Error: ${err}`);
|
|
}
|
|
}
|
|
|
|
async function cleanupJobs() {
|
|
setStatus('loading', 'Cleaning up finished jobs...');
|
|
try {
|
|
const response = await fetch('/api/cleanup', { method: 'POST' });
|
|
if (response.ok) {
|
|
setStatus('success', 'Cleanup completed');
|
|
await refreshJobs();
|
|
} else {
|
|
const text = await response.text();
|
|
setStatus('error', `Error: ${text}`);
|
|
}
|
|
} catch (err) {
|
|
setStatus('error', `Error: ${err}`);
|
|
}
|
|
}
|
|
|
|
function setStatus(type, message) {
|
|
const el = document.getElementById('statusMessage');
|
|
const icons = {
|
|
loading: '<span class="spinner"></span>',
|
|
success: '<i class="fas fa-check-circle" style="color: var(--accent-success);"></i>',
|
|
error: '<i class="fas fa-times-circle" style="color: var(--accent-danger);"></i>'
|
|
};
|
|
el.innerHTML = `${icons[type] || ''} <span>${message}</span>`;
|
|
}
|
|
|
|
function startAutoRefresh() {
|
|
stopAutoRefresh();
|
|
autoRefreshTimer = setInterval(() => { refreshJobs(); resetCountdown(); }, 60000);
|
|
countdownTimer = setInterval(() => {
|
|
countdownValue--;
|
|
document.getElementById('refreshCountdown').textContent = countdownValue;
|
|
if (countdownValue <= 0) countdownValue = 60;
|
|
}, 1000);
|
|
}
|
|
|
|
function stopAutoRefresh() {
|
|
if (autoRefreshTimer) clearInterval(autoRefreshTimer);
|
|
if (countdownTimer) clearInterval(countdownTimer);
|
|
}
|
|
|
|
function resetCountdown() {
|
|
countdownValue = 60;
|
|
document.getElementById('refreshCountdown').textContent = countdownValue;
|
|
}
|
|
|
|
// ========== НОВЫЙ КОД: Видео ==========
|
|
function playVideo(filename) {
|
|
const player = document.getElementById('videoPlayer');
|
|
player.src = '/api/videos/' + encodeURIComponent(filename);
|
|
document.getElementById('playerModal').classList.add('active');
|
|
}
|
|
function closePlayer() {
|
|
const player = document.getElementById('videoPlayer');
|
|
player.pause();
|
|
player.src = '';
|
|
document.getElementById('playerModal').classList.remove('active');
|
|
}
|
|
|
|
async function moveVideo(filename) {
|
|
if (!confirm(`Переместить файл "${filename}" в целевую папку?`)) return;
|
|
try {
|
|
const response = await fetch('/api/videos/' + encodeURIComponent(filename) + '/move?remove=true', { method: 'POST' });
|
|
if (!response.ok) throw new Error(await response.text());
|
|
alert('Файл успешно перемещён.');
|
|
refreshJobs(); // обновим список, возможно, файл исчезнет
|
|
} catch (e) {
|
|
alert('Ошибка перемещения: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function updateMoveStatuses() {
|
|
const icons = document.querySelectorAll('.move-icon');
|
|
for (const icon of icons) {
|
|
const filename = icon.dataset.file;
|
|
try {
|
|
const resp = await fetch('/api/videos/' + encodeURIComponent(filename) + '/status');
|
|
const status = await resp.json();
|
|
const exists = status.exists_in_dest;
|
|
const subfolder = status.subfolder;
|
|
if (exists) {
|
|
icon.innerHTML = `<i class="fas fa-check-circle" style="color: var(--accent-success);" title="Already in ${subfolder}"></i>`;
|
|
} else {
|
|
icon.innerHTML = `<button class="btn btn-primary btn-sm" onclick="moveVideo('${escapeHtml(filename)}')"><i class="fas fa-share"></i></button>`;
|
|
}
|
|
} catch (e) {
|
|
icon.innerHTML = `<i class="fas fa-question-circle" title="Status unknown"></i>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ========== ИНИЦИАЛИЗАЦИЯ ==========
|
|
initTheme();
|
|
refreshJobs();
|
|
startAutoRefresh();
|
|
updateSortIcons();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |