343 lines
No EOL
14 KiB
HTML
343 lines
No EOL
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TA Organizerr Dashboard</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
|
<style>
|
|
:root {
|
|
--bg-dark: #121212;
|
|
--bg-card: #1e1e1e;
|
|
--text-main: #e0e0e0;
|
|
--accent-primary: #0d6efd;
|
|
--accent-success: #198754;
|
|
--accent-warning: #ffc107;
|
|
--accent-danger: #dc3545;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-dark);
|
|
color: var(--text-main);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--bg-card);
|
|
border: 1px solid #333;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.card-header {
|
|
background-color: #252525;
|
|
border-bottom: 1px solid #333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.log-box {
|
|
height: 400px;
|
|
overflow-y: scroll;
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
font-size: 0.85em;
|
|
background-color: #0d0d0d;
|
|
color: #00ff9d;
|
|
border: 1px solid #333;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.status-dot {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.status-green { background-color: var(--accent-success); box-shadow: 0 0 8px var(--accent-success); }
|
|
.status-yellow { background-color: var(--accent-warning); box-shadow: 0 0 8px var(--accent-warning); }
|
|
.status-red { background-color: var(--accent-danger); box-shadow: 0 0 8px var(--accent-danger); }
|
|
|
|
.btn-xl {
|
|
padding: 15px 20px;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid p-4" style="max-width: 1600px;">
|
|
<header class="d-flex justify-content-between align-items-center mb-5 border-bottom pb-3" style="border-color: #333 !important;">
|
|
<div class="d-flex align-items-center">
|
|
<h1 class="display-6 mb-0 me-3"><i class="bi bi-collection-play-fill text-primary"></i> TA Organizer</h1>
|
|
<span class="badge bg-secondary" id="connection-status">Connecting...</span>
|
|
</div>
|
|
<div>
|
|
<a href="/transcode" class="btn btn-outline-primary">
|
|
<i class="bi bi-film"></i> Transcode Manager
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Stats Row -->
|
|
<div class="row mb-4 g-3">
|
|
<div class="col-md-3">
|
|
<div class="card h-100 border-primary border-opacity-25">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-subtitle mb-2 text-muted text-uppercase">Total Videos</h6>
|
|
<h2 class="card-title display-4 text-primary" id="stat-total">0</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card h-100 border-success border-opacity-25">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-subtitle mb-2 text-muted text-uppercase">Linked & Verified</h6>
|
|
<h2 class="card-title display-4 text-success" id="stat-linked">0</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card h-100 border-warning border-opacity-25">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-subtitle mb-2 text-muted text-uppercase">New / Fixed</h6>
|
|
<h2 class="card-title display-4 text-warning" id="stat-new">0</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card h-100 border-danger border-opacity-25">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-subtitle mb-2 text-muted text-uppercase">Missing / Error</h6>
|
|
<h2 class="card-title display-4 text-danger" id="stat-error">0</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls & Logs -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-4 mb-4 mb-lg-0">
|
|
<div class="card h-100">
|
|
<div class="card-header"><i class="bi bi-joystick"></i> Actions</div>
|
|
<div class="card-body d-flex flex-column gap-3">
|
|
<button class="btn btn-primary btn-xl shadow-lg" onclick="triggerScan()">
|
|
<i class="bi bi-arrow-repeat"></i> Run Full Scan
|
|
</button>
|
|
|
|
<button class="btn btn-outline-warning" onclick="checkOrphans()">
|
|
<i class="bi bi-binoculars"></i> Check Orphaned Links
|
|
</button>
|
|
|
|
<!-- Clean button disabled as requested -->
|
|
<!--
|
|
<button class="btn btn-danger" onclick="triggerCleanup()">
|
|
<i class="bi bi-trash"></i> Clean Old Folders (+00:00)
|
|
</button>
|
|
-->
|
|
<div class="alert alert-dark mt-auto mb-0 text-center">
|
|
<small class="text-muted d-block mb-1">Auto-scan timer</small>
|
|
<h4 class="mb-0"><i class="bi bi-clock-history"></i> <span id="next-scan">--</span> min</h4>
|
|
</div>
|
|
<div id="orphan-results"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-terminal"></i> Live Logs</span>
|
|
<button class="btn btn-sm btn-dark border-secondary" onclick="clearLogs()">Clear</button>
|
|
</div>
|
|
<div class="card-body p-2 bg-black">
|
|
<div class="log-box" id="log-container">
|
|
<div class="text-muted">Waiting for system logs...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span>Video Matrix</span>
|
|
<div class="d-flex gap-2">
|
|
<select class="form-select form-select-sm" id="status-filter" style="width: 150px;">
|
|
<option value="">All Status</option>
|
|
<option value="linked">Linked</option>
|
|
<option value="missing">Missing</option>
|
|
</select>
|
|
<select class="form-select form-select-sm" id="channel-filter" style="width: 200px;">
|
|
<option value="">All Channels</option>
|
|
</select>
|
|
<input type="text" class="form-control form-control-sm" id="search-input"
|
|
placeholder="Search videos..." style="width: 200px;">
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0 table-responsive" style="max-height: 500px;">
|
|
<table class="table table-striped table-hover mb-0">
|
|
<thead class="table-dark sticky-top">
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Published</th>
|
|
<th>Channel</th>
|
|
<th>Title</th>
|
|
<th>Video ID</th>
|
|
<th>Symlink Path</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="video-table-body">
|
|
<!-- Rows injected by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Poll for status every 2 seconds
|
|
setInterval(fetchStatus, 2000);
|
|
// Poll for logs every 1 second
|
|
setInterval(fetchLogs, 1000);
|
|
|
|
let lastLogIndex = 0;
|
|
|
|
async function fetchStatus() {
|
|
try {
|
|
const res = await fetch('/api/status');
|
|
const data = await res.json();
|
|
|
|
document.getElementById('connection-status').textContent = 'Connected';
|
|
document.getElementById('connection-status').className = 'badge bg-success';
|
|
|
|
// Update stats
|
|
document.getElementById('stat-total').textContent = data.total_videos;
|
|
document.getElementById('stat-linked').textContent = data.verified_links;
|
|
document.getElementById('stat-error').textContent = data.missing_count || 0;
|
|
|
|
// Update table if changed (simple check, can be optimized)
|
|
updateTable(data.videos);
|
|
|
|
} catch (e) {
|
|
document.getElementById('connection-status').textContent = 'Disconnected';
|
|
document.getElementById('connection-status').className = 'badge bg-danger';
|
|
}
|
|
}
|
|
|
|
async function fetchLogs() {
|
|
try {
|
|
const res = await fetch('/api/logs?start=' + lastLogIndex);
|
|
const data = await res.json();
|
|
if (data.logs && data.logs.length > 0) {
|
|
const logBox = document.getElementById('log-container');
|
|
data.logs.forEach(line => {
|
|
const div = document.createElement('div');
|
|
div.textContent = line;
|
|
logBox.appendChild(div);
|
|
});
|
|
logBox.scrollTop = logBox.scrollHeight;
|
|
lastLogIndex = data.next_index;
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
async function triggerScan() {
|
|
if (!confirm("Start a full library scan? This may take a moment.")) return;
|
|
await fetch('/api/scan', { method: 'POST' });
|
|
alert("Scan started! Watch the logs.");
|
|
}
|
|
|
|
async function triggerCleanup() {
|
|
if (!confirm("Are you sure you want to delete all folders containing '+00:00'?\n\nSafety check: Real files will NOT be deleted.")) return;
|
|
await fetch('/api/cleanup', { method: 'POST' });
|
|
alert("Cleanup started! Watch the logs.");
|
|
}
|
|
|
|
async function checkOrphans() {
|
|
const resultsDiv = document.getElementById('orphan-results');
|
|
resultsDiv.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Checking...';
|
|
|
|
const res = await fetch('/api/check-orphans', { method: 'POST' });
|
|
const data = await res.json();
|
|
|
|
if (data.count === 0) {
|
|
resultsDiv.innerHTML = '<div class="alert alert-success p-2 mb-0 mt-2">✅ No orphaned links found!</div>';
|
|
} else {
|
|
resultsDiv.innerHTML = `<div class="alert alert-warning p-2 mb-0 mt-2">⚠️ Found ${data.count} orphaned links. Check logs for details.</div>`;
|
|
}
|
|
|
|
setTimeout(() => { resultsDiv.innerHTML = ''; }, 10000);
|
|
}
|
|
|
|
function clearLogs() {
|
|
document.getElementById('log-container').innerHTML = '';
|
|
}
|
|
|
|
function updateTable(videos) {
|
|
const tbody = document.getElementById('video-table-body');
|
|
const search = document.getElementById('search-input').value.toLowerCase();
|
|
const channelFilter = document.getElementById('channel-filter').value;
|
|
const statusFilter = document.getElementById('status-filter').value;
|
|
|
|
// Build unique channel list for dropdown
|
|
const channels = [...new Set(videos.map(v => v.channel))].sort();
|
|
const channelDropdown = document.getElementById('channel-filter');
|
|
const currentValue = channelDropdown.value;
|
|
|
|
// Only update dropdown if channel list changed
|
|
if (channelDropdown.options.length !== channels.length + 1) {
|
|
channelDropdown.innerHTML = '<option value="">All Channels</option>';
|
|
channels.forEach(ch => {
|
|
const opt = document.createElement('option');
|
|
opt.value = ch;
|
|
opt.textContent = ch;
|
|
channelDropdown.appendChild(opt);
|
|
});
|
|
channelDropdown.value = currentValue;
|
|
}
|
|
|
|
// Clear and rebuild table
|
|
tbody.innerHTML = '';
|
|
|
|
videos.forEach(v => {
|
|
// Apply filters
|
|
if (search && !v.title.toLowerCase().includes(search) && !v.video_id.includes(search)) return;
|
|
if (channelFilter && v.channel !== channelFilter) return;
|
|
if (statusFilter && v.status !== statusFilter) return;
|
|
|
|
const tr = document.createElement('tr');
|
|
let statusColor = v.status === 'linked' ? 'status-green' : 'status-red';
|
|
|
|
tr.innerHTML = `
|
|
<td><span class="status-dot ${statusColor}"></span></td>
|
|
<td>${v.published}</td>
|
|
<td>${v.channel}</td>
|
|
<td>${v.title}</td>
|
|
<td><code>${v.video_id}</code></td>
|
|
<td class="text-truncate" style="max-width: 300px;">${v.symlink || '-'}</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
document.getElementById('search-input').addEventListener('input', () => {
|
|
fetchStatus();
|
|
});
|
|
|
|
document.getElementById('channel-filter').addEventListener('change', () => {
|
|
fetchStatus();
|
|
});
|
|
|
|
document.getElementById('status-filter').addEventListener('change', () => {
|
|
fetchStatus();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |