v0.2.2
This commit is contained in:
@@ -1,214 +1,489 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>AE Anons Control Panel</title>
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 20px; background: #f5f5f5; }
|
||||
.container { max-width: 1400px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
||||
h1 { color: #333; margin-top: 0; }
|
||||
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
|
||||
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
|
||||
th { background-color: #4CAF50; color: white; }
|
||||
tr:nth-child(even) { background-color: #f9f9f9; }
|
||||
tr:hover { background-color: #f1f1f1; }
|
||||
.state-finished { color: #4CAF50; font-weight: bold; }
|
||||
.state-error { color: #f44336; font-weight: bold; }
|
||||
.state-started { color: #2196F3; font-weight: bold; }
|
||||
.state-queued { color: #ff9800; font-weight: bold; }
|
||||
button {
|
||||
margin: 5px;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.btn-primary { background: #4CAF50; color: white; }
|
||||
.btn-primary:hover { background: #45a049; }
|
||||
.btn-secondary { background: #2196F3; color: white; }
|
||||
.btn-secondary:hover { background: #0b7dda; }
|
||||
.btn-danger { background: #f44336; color: white; }
|
||||
.btn-danger:hover { background: #da190b; }
|
||||
.status { margin-bottom: 20px; padding: 10px; background: #e7f3fe; border-left: 4px solid #2196F3; }
|
||||
.status span { margin-left: 20px; color: #666; }
|
||||
.filter-bar { margin: 10px 0; }
|
||||
.filter-bar input { padding: 8px; width: 300px; border: 1px solid #ddd; border-radius: 4px; }
|
||||
.stats { margin: 10px 0; font-size: 14px; color: #666; }
|
||||
</style>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AE Anons - Nexrender Job Manager</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎬 AE Anons - Nexrender Job Manager</h1>
|
||||
|
||||
<div class="status">
|
||||
<button class="btn-primary" onclick="generateJobs()">🔄 Generate New Jobs</button>
|
||||
<button class="btn-danger" onclick="cleanupJobs()">🧹 Cleanup Finished Jobs</button>
|
||||
<button class="btn-secondary" onclick="refreshJobs()">↻ Refresh</button>
|
||||
<span id="statusMessage"></span>
|
||||
<!-- 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">
|
||||
<input type="text" id="filterInput" placeholder="🔍 Filter by output file name..." onkeyup="filterTable()">
|
||||
<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>
|
||||
|
||||
<div class="stats" id="stats"></div>
|
||||
|
||||
<table id="jobsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Output File</th>
|
||||
<th>State</th>
|
||||
<th>Created</th>
|
||||
<th>Updated</th>
|
||||
<th>UID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="jobsTableBody">
|
||||
<tr><td colspan="5" style="text-align: center;">Loading...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 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 jobs...');
|
||||
setStatus('loading', 'Loading jobs...');
|
||||
const response = await fetch('/api/jobs');
|
||||
allJobs = await response.json();
|
||||
renderJobs(allJobs);
|
||||
filteredJobs = [];
|
||||
document.getElementById('filterInput').value = '';
|
||||
sortAndRender();
|
||||
updateStats();
|
||||
setStatus(`Loaded ${allJobs.length} jobs`);
|
||||
setStatus('success', `Loaded ${allJobs.length} jobs`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setStatus('Error loading jobs: ' + err);
|
||||
setStatus('error', 'Failed to load jobs');
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function renderJobs(jobs) {
|
||||
const tbody = document.getElementById('jobsTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
|
||||
if (jobs.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="5" style="text-align: center;">No jobs found</td></tr>';
|
||||
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;
|
||||
}
|
||||
|
||||
jobs.sort((a, b) => {
|
||||
// Сортируем по дате создания (новые сверху)
|
||||
const dateA = a.created_at ? new Date(a.created_at) : new Date(0);
|
||||
const dateB = b.created_at ? new Date(b.created_at) : new Date(0);
|
||||
return dateB - dateA;
|
||||
});
|
||||
|
||||
jobs.forEach(job => {
|
||||
const row = tbody.insertRow();
|
||||
|
||||
// Output file (выделяем жирным)
|
||||
const fileCell = row.insertCell();
|
||||
fileCell.textContent = job.outfile_name;
|
||||
fileCell.style.fontWeight = 'bold';
|
||||
|
||||
// State с цветовой кодировкой
|
||||
const stateCell = row.insertCell();
|
||||
stateCell.textContent = job.state;
|
||||
stateCell.className = `state-${job.state}`;
|
||||
|
||||
// Форматируем даты
|
||||
row.insertCell().textContent = formatDate(job.created_at);
|
||||
row.insertCell().textContent = formatDate(job.updated_at);
|
||||
|
||||
// UID (обрезаем для компактности)
|
||||
const uidCell = row.insertCell();
|
||||
uidCell.textContent = job.uid.substring(0, 8) + '...';
|
||||
uidCell.title = job.uid; // полный UID при наведении
|
||||
});
|
||||
|
||||
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 formatDate(dateStr) {
|
||||
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.toLocaleString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
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();
|
||||
const filtered = allJobs.filter(job =>
|
||||
filteredJobs = allJobs.filter(job =>
|
||||
job.outfile_name.toLowerCase().includes(filter) ||
|
||||
job.uid.toLowerCase().includes(filter)
|
||||
);
|
||||
renderJobs(filtered);
|
||||
updateStats(filtered.length);
|
||||
}
|
||||
|
||||
function updateStats(filteredCount = null) {
|
||||
const total = allJobs.length;
|
||||
const shown = filteredCount !== null ? filteredCount : total;
|
||||
const states = allJobs.reduce((acc, job) => {
|
||||
acc[job.state] = (acc[job.state] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const statsDiv = document.getElementById('stats');
|
||||
const stateText = Object.entries(states)
|
||||
.map(([state, count]) => `${state}: ${count}`)
|
||||
.join(' | ');
|
||||
|
||||
statsDiv.innerHTML = `Total: ${total} jobs${filteredCount !== null ? ` | Showing: ${shown}` : ''} | ${stateText}`;
|
||||
sortAndRender();
|
||||
}
|
||||
|
||||
// Actions
|
||||
async function generateJobs() {
|
||||
setStatus('⏳ Generating jobs...');
|
||||
setStatus('loading', 'Generating jobs...');
|
||||
try {
|
||||
const response = await fetch('/api/generate', { method: 'POST' });
|
||||
if (response.ok) {
|
||||
setStatus('✅ Job generation started. Will refresh in 10 seconds...');
|
||||
setTimeout(() => refreshJobs(), 10000);
|
||||
setStatus('success', 'Job generation started');
|
||||
setTimeout(() => refreshJobs(), 5000);
|
||||
} else {
|
||||
const text = await response.text();
|
||||
setStatus('❌ Error: ' + text);
|
||||
setStatus('error', `Error: ${text}`);
|
||||
}
|
||||
} catch (err) {
|
||||
setStatus('❌ Error: ' + 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('🧹 Cleaning up finished jobs...');
|
||||
setStatus('loading', 'Cleaning up finished jobs...');
|
||||
try {
|
||||
const response = await fetch('/api/cleanup', { method: 'POST' });
|
||||
if (response.ok) {
|
||||
setStatus('✅ Cleanup completed. Refreshing...');
|
||||
setStatus('success', 'Cleanup completed');
|
||||
await refreshJobs();
|
||||
} else {
|
||||
const text = await response.text();
|
||||
setStatus('❌ Error: ' + text);
|
||||
setStatus('error', `Error: ${text}`);
|
||||
}
|
||||
} catch (err) {
|
||||
setStatus('❌ Error: ' + err);
|
||||
setStatus('error', `Error: ${err}`);
|
||||
}
|
||||
}
|
||||
|
||||
function setStatus(msg) {
|
||||
document.getElementById('statusMessage').textContent = msg;
|
||||
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>`;
|
||||
}
|
||||
|
||||
// Initial load
|
||||
// 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();
|
||||
// Auto-refresh every 10 seconds
|
||||
setInterval(refreshJobs, 10000);
|
||||
startAutoRefresh();
|
||||
updateSortIcons();
|
||||
|
||||
window.addEventListener('beforeunload', () => {
|
||||
stopAutoRefresh();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user