lexx/AE_Anons
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases 3 Activity

v0.2.2

Browse Source
This commit is contained in:
Алексей Барабанов
2026-04-17 12:54:43 +03:00
parent 8721353b8d
commit bb371e1b71
9 changed files with 1024 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Cargo.lock generated
View File

@@ -10,7 +10,7 @@ checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
[[package]] [[package]]
name = "ae_anons" name = "ae_anons"
version = "0.2.0" version = "0.2.2"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"askama", "askama",

2
Cargo.toml
View File

@@ -1,6 +1,6 @@
[package] [package]
name = "ae_anons" name = "ae_anons"
version = "0.2.0" version = "0.2.2"
edition = "2021" edition = "2021"
license = "MIT" license = "MIT"
license-file = "LICENSE" license-file = "LICENSE"

20
README.md
View File

@@ -342,15 +342,21 @@ RUST_LOG=debug ./target/release/ae_anons
ae_anons/ ae_anons/
├── Cargo.toml ├── Cargo.toml
├── LICENSE ├── LICENSE
├── assets/
│ └── logo.png
├── README.md ├── README.md
├── .env.example ├── .env.example
└── src/ ├── src/
├── main.rs # Точка входа и оркестрация приложения │ ├── main.rs
├── config.rs # Управление конфигурацией │ ├── config.rs
├── nexrender.rs # Генерация заданий Nexrender и структура данных │ ├── nexrender.rs
└── synology.rs # Клиент API Synology │ ├── synology.rs
│ ├── processor.rs
│ └── web.rs
├── static/
│ ├── index.html
│ └── style.css
└── assets/
└── logo.png
``` ```
## Зависимости ## Зависимости

12
src/main.rs
View File

@@ -1,7 +1,7 @@
mod config; mod config;
mod nexrender; mod nexrender;
mod synology;
mod processor; mod processor;
mod synology;
mod web; mod web;
use anyhow::Result; use anyhow::Result;
@@ -29,11 +29,17 @@ async fn main() -> Result<()> {
let config = Config::from_env()?; let config = Config::from_env()?;
if cli.web { if cli.web {
info!("Starting AE Anons web server v{}", env!("CARGO_PKG_VERSION")); info!(
"Starting AE Anons web server v{}",
env!("CARGO_PKG_VERSION")
);
web::run_web_server(config).await?; web::run_web_server(config).await?;
} else { } else {
// По умолчанию или с флагом --once выполняем однократную обработку // По умолчанию или с флагом --once выполняем однократную обработку
info!("Starting AE Anons processor v{} (one-time mode)", env!("CARGO_PKG_VERSION")); info!(
"Starting AE Anons processor v{} (one-time mode)",
env!("CARGO_PKG_VERSION")
);
let submitted = processor::process_spreadsheet(&config).await?; let submitted = processor::process_spreadsheet(&config).await?;
info!("Submitted {} jobs. Exiting.", submitted.len()); info!("Submitted {} jobs. Exiting.", submitted.len());
} }

1
src/nexrender.rs
View File

@@ -302,7 +302,6 @@ impl JobData {
variants variants
} }
// ЕДИНСТВЕННАЯ реализация метода
pub fn to_nexrender_job(&self, config: &crate::config::Config) -> NexrenderJob { pub fn to_nexrender_job(&self, config: &crate::config::Config) -> NexrenderJob {
let template = if self.team_b.is_empty() { let template = if self.team_b.is_empty() {
Template::single( Template::single(

3
src/processor.rs
View File

@@ -11,8 +11,6 @@ use std::collections::HashMap;
use std::io::Cursor; use std::io::Cursor;
use std::path::Path; use std::path::Path;
// Добавить после импортов в processor.rs
#[derive(Debug, Clone)] #[derive(Debug, Clone)]
pub struct SheetData { pub struct SheetData {
pub name: String, pub name: String,
@@ -174,7 +172,6 @@ fn parse_sheet_dynamic_optimized(
}) })
.collect(); .collect();
// Парсим строки данных
let rows_data: Vec<HashMap<String, String>> = data_matrix let rows_data: Vec<HashMap<String, String>> = data_matrix
.iter() .iter()
.skip(1) .skip(1)

527
src/static/index.html
View File

@@ -1,214 +1,489 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="ru">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>AE Anons Control Panel</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <title>AE Anons - Nexrender Job Manager</title>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 20px; background: #f5f5f5; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
.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); } <link rel="stylesheet" href="/static/style.css">
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>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>🎬 AE Anons - Nexrender Job Manager</h1> <!-- Header -->
<div class="header">
<div class="status"> <div class="header-left">
<button class="btn-primary" onclick="generateJobs()">🔄 Generate New Jobs</button> <div class="logo-container">
<button class="btn-danger" onclick="cleanupJobs()">🧹 Cleanup Finished Jobs</button> <img src="/assets/logo.png" alt="AE Anons Logo" class="logo" id="logo"
<button class="btn-secondary" onclick="refreshJobs()">↻ Refresh</button> onerror="this.style.display='none'; document.getElementById('logoPlaceholder').style.display='flex';">
<span id="statusMessage"></span> <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> </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="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>
<div class="stats" id="stats"></div> <!-- Table -->
<div class="table-container">
<table id="jobsTable"> <table id="jobsTable">
<thead> <thead>
<tr> <tr>
<th>Output File</th> <th data-column="filename" onclick="sortTable('filename')">
<th>State</th> Output File <i class="fas fa-sort"></i>
<th>Created</th> </th>
<th>Updated</th> <th data-column="state" onclick="sortTable('state')" class="sorted-asc">
<th>UID</th> 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> </tr>
</thead> </thead>
<tbody id="jobsTableBody"> <tbody id="jobsTableBody">
<tr><td colspan="5" style="text-align: center;">Loading...</td></tr> <tr>
<td colspan="5">
<div class="empty-state">
<i class="fas fa-spinner fa-spin"></i>
<p>Loading jobs...</p>
</div>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<script> <script>
// State
let allJobs = []; 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() { async function refreshJobs() {
if (isLoading) return;
isLoading = true;
try { try {
setStatus('Loading jobs...'); setStatus('loading', 'Loading jobs...');
const response = await fetch('/api/jobs'); const response = await fetch('/api/jobs');
allJobs = await response.json(); allJobs = await response.json();
renderJobs(allJobs); filteredJobs = [];
document.getElementById('filterInput').value = '';
sortAndRender();
updateStats(); updateStats();
setStatus(`Loaded ${allJobs.length} jobs`); setStatus('success', `Loaded ${allJobs.length} jobs`);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
setStatus('Error loading jobs: ' + err); setStatus('error', 'Failed to load jobs');
} finally {
isLoading = false;
} }
} }
function renderJobs(jobs) { function renderJobs(jobs) {
const tbody = document.getElementById('jobsTableBody'); const tbody = document.getElementById('jobsTableBody');
tbody.innerHTML = '';
if (jobs.length === 0) { 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; return;
} }
jobs.sort((a, b) => { tbody.innerHTML = jobs.map(job => {
// Сортируем по дате создания (новые сверху) const stateClass = getStateClass(job.state);
const dateA = a.created_at ? new Date(a.created_at) : new Date(0); const created = formatDateTime(job.created_at);
const dateB = b.created_at ? new Date(b.created_at) : new Date(0); const updated = formatDateTime(job.updated_at);
return dateB - dateA;
});
jobs.forEach(job => { return `
const row = tbody.insertRow(); <tr>
<td>
// Output file (выделяем жирным) <div class="job-filename" title="${escapeHtml(job.outfile_name)}">${escapeHtml(job.outfile_name)}</div>
const fileCell = row.insertCell(); </td>
fileCell.textContent = job.outfile_name; <td><span class="badge ${stateClass}">${escapeHtml(job.state)}</span></td>
fileCell.style.fontWeight = 'bold'; <td class="datetime">${created}</td>
<td class="datetime">${updated}</td>
// State с цветовой кодировкой <td class="uid" title="${escapeHtml(job.uid)}">${job.uid.substring(0, 10)}...</td>
const stateCell = row.insertCell(); </tr>
stateCell.textContent = job.state; `;
stateCell.className = `state-${job.state}`; }).join('');
// Форматируем даты
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 при наведении
});
} }
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 '-'; if (!dateStr) return '-';
try { try {
const date = new Date(dateStr); const date = new Date(dateStr);
return date.toLocaleString('ru-RU', { const time = date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
day: '2-digit', const dayMonth = date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' });
month: '2-digit', return `${time}, ${dayMonth}`;
hour: '2-digit',
minute: '2-digit'
});
} catch { } catch {
return dateStr; 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() { function filterTable() {
const filter = document.getElementById('filterInput').value.toLowerCase(); const filter = document.getElementById('filterInput').value.toLowerCase();
const filtered = allJobs.filter(job => filteredJobs = allJobs.filter(job =>
job.outfile_name.toLowerCase().includes(filter) || job.outfile_name.toLowerCase().includes(filter) ||
job.uid.toLowerCase().includes(filter) job.uid.toLowerCase().includes(filter)
); );
renderJobs(filtered); sortAndRender();
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}`;
} }
// Actions
async function generateJobs() { async function generateJobs() {
setStatus('⏳ Generating jobs...'); setStatus('loading', 'Generating jobs...');
try { try {
const response = await fetch('/api/generate', { method: 'POST' }); const response = await fetch('/api/generate', { method: 'POST' });
if (response.ok) { if (response.ok) {
setStatus('✅ Job generation started. Will refresh in 10 seconds...'); setStatus('success', 'Job generation started');
setTimeout(() => refreshJobs(), 10000); setTimeout(() => refreshJobs(), 5000);
} else { } else {
const text = await response.text(); const text = await response.text();
setStatus('❌ Error: ' + text); setStatus('error', `Error: ${text}`);
} }
} catch (err) { } 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() { async function cleanupJobs() {
setStatus('🧹 Cleaning up finished jobs...'); setStatus('loading', 'Cleaning up finished jobs...');
try { try {
const response = await fetch('/api/cleanup', { method: 'POST' }); const response = await fetch('/api/cleanup', { method: 'POST' });
if (response.ok) { if (response.ok) {
setStatus('✅ Cleanup completed. Refreshing...'); setStatus('success', 'Cleanup completed');
await refreshJobs(); await refreshJobs();
} else { } else {
const text = await response.text(); const text = await response.text();
setStatus('❌ Error: ' + text); setStatus('error', `Error: ${text}`);
} }
} catch (err) { } catch (err) {
setStatus('❌ Error: ' + err); setStatus('error', `Error: ${err}`);
} }
} }
function setStatus(msg) { function setStatus(type, message) {
document.getElementById('statusMessage').textContent = msg; 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(); refreshJobs();
// Auto-refresh every 10 seconds resetCountdown();
setInterval(refreshJobs, 10000); }, 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> </script>
</body> </body>
</html> </html>

555
src/static/style.css Normal file
View File

@@ -0,0 +1,555 @@
/* ========================================
AE Anons - Nexrender Job Manager Styles
======================================== */
/* CSS Variables - Light Theme (default) */
:root {
--bg-primary: #ffffff;
--bg-secondary: #fafafa;
--bg-tertiary: #f3f0f7;
--text-primary: #1a1a1a;
--text-secondary: #6b4f7c;
--border-color: #e0d4e8;
--accent-primary: #7c3aed;
--accent-secondary: #c2410c;
--accent-success: #10b981;
--accent-warning: #ea580c;
--accent-danger: #ef4444;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--header-bg: #7c3aed;
--header-text: #ffffff;
}
/* Dark Theme */
[data-theme="dark"] {
--bg-primary: #1a1025;
--bg-secondary: #251a30;
--bg-tertiary: #352545;
--text-primary: #f0e6ff;
--text-secondary: #c4a6d9;
--border-color: #4a3560;
--accent-primary: #a78bfa;
--accent-secondary: #f59e0b;
--accent-success: #34d399;
--accent-warning: #fbbf24;
--accent-danger: #f87171;
--header-bg: #a78bfa;
--header-text: #1a1025;
}
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 24px;
}
/* Header */
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.logo-container {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--accent-primary);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.logo {
width: 100%;
height: 100%;
object-fit: cover;
}
.logo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: bold;
}
.header h1 {
font-size: 28px;
font-weight: 600;
color: var(--accent-primary);
letter-spacing: -0.5px;
}
.header-controls {
display: flex;
align-items: center;
gap: 12px;
}
.theme-toggle {
background: var(--bg-secondary);
border: 2px solid var(--accent-primary);
border-radius: 24px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--text-primary);
font-size: 14px;
box-shadow: var(--shadow-sm);
}
.theme-toggle:hover {
box-shadow: var(--shadow-md);
}
/* Action Bar */
.action-bar {
background: var(--bg-secondary);
border-radius: 12px;
padding: 20px;
margin-bottom: 24px;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
border: 1px solid var(--border-color);
}
/* Buttons */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity 0.2s;
}
.btn:hover::before {
opacity: 1;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn i {
font-size: 14px;
}
/* Generate - Purple */
.btn-primary {
background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
color: white;
border: none;
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}
[data-theme="dark"] .btn-primary {
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
color: #1a1025;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}
.btn-primary:hover {
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}
/* Stop - Orange */
.btn-warning {
background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
color: white;
border: none;
box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}
[data-theme="dark"] .btn-warning {
background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
color: #1a1025;
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
}
.btn-warning:hover {
box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4);
}
/* Cleanup - Plum */
.btn-danger {
background: linear-gradient(135deg, #9d174d 0%, #be185d 100%);
color: white;
border: none;
box-shadow: 0 2px 8px rgba(157, 23, 77, 0.3);
}
[data-theme="dark"] .btn-danger {
background: linear-gradient(135deg, #be185d 0%, #db2777 100%);
color: #f0e6ff;
box-shadow: 0 2px 8px rgba(190, 24, 93, 0.4);
}
.btn-danger:hover {
box-shadow: 0 4px 12px rgba(157, 23, 77, 0.4);
}
/* Refresh - Outline */
.btn-outline {
background: transparent;
border: 2px solid #7c3aed;
color: #7c3aed;
box-shadow: none;
}
[data-theme="dark"] .btn-outline {
border-color: #a78bfa;
color: #a78bfa;
}
.btn-outline:hover {
background: #7c3aed;
color: white;
border-color: #7c3aed;
}
[data-theme="dark"] .btn-outline:hover {
background: #a78bfa;
color: #1a1025;
border-color: #a78bfa;
}
/* Status Message */
.status-message {
margin-left: auto;
padding: 8px 16px;
background: var(--bg-tertiary);
border-radius: 20px;
font-size: 14px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
/* Stats Cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: var(--bg-secondary);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
}
.stat-card h3 {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
font-weight: 500;
}
.stat-card .value {
font-size: 32px;
font-weight: 700;
color: var(--accent-primary);
}
/* Filter Bar */
.filter-bar {
margin-bottom: 20px;
display: flex;
gap: 12px;
align-items: center;
}
.search-wrapper {
flex: 1;
position: relative;
}
.search-wrapper i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
}
.search-input {
width: 100%;
padding: 12px 16px 12px 44px;
background: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: 24px;
color: var(--text-primary);
font-size: 14px;
}
.search-input:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.auto-refresh-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--bg-tertiary);
border-radius: 20px;
font-size: 13px;
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
/* Table */
.table-container {
background: var(--bg-secondary);
border-radius: 12px;
box-shadow: var(--shadow-lg);
overflow-x: auto;
border: 1px solid var(--border-color);
}
table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
min-width: 800px;
}
th {
text-align: left;
padding: 16px;
background: var(--header-bg);
color: var(--header-text);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
cursor: pointer;
user-select: none;
position: relative;
}
th:hover {
opacity: 0.9;
}
th i {
margin-left: 8px;
font-size: 12px;
opacity: 0.7;
}
th.sorted-asc i,
th.sorted-desc i {
opacity: 1;
}
td {
padding: 12px 16px;
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
vertical-align: middle;
}
tr:last-child td {
border-bottom: none;
}
tr:hover {
background: var(--bg-tertiary);
}
/* Job Filename */
.job-filename {
font-family: 'Monaco', 'Menlo', 'Cascadia Code', 'Consolas', monospace;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
word-break: break-word;
white-space: normal;
max-width: 100%;
color: var(--text-primary);
}
/* Badges */
.badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: inline-block;
white-space: nowrap;
}
.badge-finished {
background: rgba(16, 185, 129, 0.15);
color: var(--accent-success);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.badge-started,
.badge-processing {
background: rgba(124, 58, 237, 0.15);
color: var(--accent-primary);
border: 1px solid rgba(124, 58, 237, 0.3);
}
.badge-queued {
background: rgba(234, 88, 12, 0.15);
color: var(--accent-warning);
border: 1px solid rgba(234, 88, 12, 0.3);
}
.badge-error {
background: rgba(239, 68, 68, 0.15);
color: var(--accent-danger);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.badge-pending {
background: rgba(245, 158, 11, 0.15);
color: var(--accent-secondary);
border: 1px solid rgba(245, 158, 11, 0.3);
}
/* Date & Time */
.datetime {
font-family: 'Monaco', 'Menlo', monospace;
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
}
.uid {
font-family: 'Monaco', 'Menlo', monospace;
font-size: 11px;
color: var(--text-secondary);
white-space: nowrap;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state i {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
color: var(--accent-primary);
}
/* Loading Spinner */
.spinner {
width: 20px;
height: 20px;
border: 3px solid var(--border-color);
border-top-color: var(--accent-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Responsive */
@media (max-width: 768px) {
.container {
padding: 16px;
}
.header {
flex-direction: column;
align-items: flex-start;
}
.header-left {
flex-wrap: wrap;
}
.header h1 {
font-size: 20px;
}
.action-bar {
flex-direction: column;
align-items: stretch;
}
.status-message {
margin-left: 0;
}
}

32
src/web.rs
View File

@@ -12,6 +12,7 @@ use std::net::SocketAddr;
use std::sync::Arc; use std::sync::Arc;
use tokio::sync::Mutex; use tokio::sync::Mutex;
use tower_http::trace::TraceLayer; use tower_http::trace::TraceLayer;
use tower_http::services::ServeDir;
#[derive(Clone)] #[derive(Clone)]
pub struct AppState { pub struct AppState {
@@ -99,6 +100,9 @@ pub async fn run_web_server(config: Config) -> anyhow::Result<()> {
.route("/api/generate", post(generate_jobs)) .route("/api/generate", post(generate_jobs))
.route("/api/cleanup", post(cleanup_jobs)) .route("/api/cleanup", post(cleanup_jobs))
.route("/api/status", get(get_status)) .route("/api/status", get(get_status))
.route("/api/jobs/stop-all", post(stop_all_jobs))
.nest_service("/static", ServeDir::new("src/static"))
.nest_service("/assets", ServeDir::new("assets"))
.layer(TraceLayer::new_for_http()) .layer(TraceLayer::new_for_http())
.with_state(state); .with_state(state);
@@ -176,6 +180,34 @@ async fn get_status(State(state): State<AppState>) -> Result<Json<serde_json::Va
Ok(Json(status)) Ok(Json(status))
} }
async fn stop_all_jobs(State(state): State<AppState>) -> Result<impl IntoResponse, AppError> {
use reqwest::Client;
let client = Client::new();
let api_url = &state.config.nexrender_api_url;
// Получаем все задания
let jobs = fetch_all_jobs(api_url)
.await
.map_err(|e| AppError(StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
let mut stopped = 0;
for job in jobs {
let state = job.get("state").and_then(|s| s.as_str()).unwrap_or("");
if state == "queued" || state == "started" || state == "processing" {
if let Some(uid) = job.get("uid").and_then(|u| u.as_str()) {
// Отправляем DELETE запрос для остановки задания
let _ = client.delete(&format!("{}/{}", api_url, uid)).send().await;
stopped += 1;
log::info!("Stopped job: {}", uid);
}
}
}
log::info!("Stopped {} active jobs", stopped);
Ok((StatusCode::OK, format!("Stopped {} jobs", stopped)))
}
// Error handling // Error handling
struct AppError(StatusCode, String); struct AppError(StatusCode, String);