Алексей Барабанов
6f13679dd9
- Replace CDN with local Font Awesome files - Add favicon handler - Embed all static assets (CSS, fonts, logo) - Update README with Font Awesome license attribution - Bump version to 0.2.3
494 lines
18 KiB
HTML
494 lines
18 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 - Nexrender Job Manager</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" href="/favicon.ico">
|
|
<link rel="apple-touch-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"
|
|
onerror="this.style.display='none'; document.getElementById('logoPlaceholder').style.display='flex';">
|
|
<div class="logo-placeholder" id="logoPlaceholder" style="display: none;">
|
|
<i class="fas fa-bolt"></i>
|
|
</div>
|
|
</div>
|
|
<h1>AE Anons - Nexrender Job Manager</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>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="jobsTableBody">
|
|
<tr>
|
|
<td colspan="5">
|
|
<div class="empty-state">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>Loading jobs...</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// State
|
|
let allJobs = [];
|
|
let filteredJobs = [];
|
|
let isLoading = false;
|
|
let autoRefreshTimer = null;
|
|
let countdownTimer = null;
|
|
let countdownValue = 60;
|
|
let currentTheme = 'auto';
|
|
|
|
// Sorting state
|
|
let currentSort = { column: 'state', direction: 'asc' };
|
|
const stateOrder = { 'finished': 1, 'started': 2, 'processing': 3, 'queued': 4, 'pending': 5, 'error': 6 };
|
|
|
|
// Theme handling
|
|
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', (e) => {
|
|
if (currentTheme === 'auto') {
|
|
applyTheme('auto');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Sorting
|
|
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);
|
|
}
|
|
|
|
// Data fetching
|
|
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="5">
|
|
<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);
|
|
|
|
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>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
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);
|
|
const time = date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
|
|
const dayMonth = date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' });
|
|
return `${time}, ${dayMonth}`;
|
|
} 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;
|
|
}
|
|
});
|
|
|
|
const grid = document.getElementById('statsGrid');
|
|
grid.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();
|
|
}
|
|
|
|
// Actions
|
|
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>`;
|
|
}
|
|
|
|
// Auto-refresh
|
|
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;
|
|
}
|
|
|
|
// Initialize
|
|
initTheme();
|
|
refreshJobs();
|
|
startAutoRefresh();
|
|
updateSortIcons();
|
|
|
|
window.addEventListener('beforeunload', () => {
|
|
stopAutoRefresh();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |