wander/ta-organizerr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Implement video transcoding, add dashboard UI, and cleanup repository

Browse source
This commit is contained in:
wander 2026-01-01 00:39:28 -05:00
parent 94f077944b
commit 2f8ec83cd8
7 changed files with 1060 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

305
templates/dashboard.html Normal file
View file

@ -0,0 +1,305 @@
<!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>
.log-box {
height: 300px;
overflow-y: scroll;
font-family: monospace;
font-size: 0.9em;
background-color: #1e1e1e;
color: #00ff00;
border: 1px solid #444;
padding: 10px;
}
.status-dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.status-green {
background-color: #28a745;
}
.status-yellow {
background-color: #ffc107;
}
.status-red {
background-color: #dc3545;
}
</style>
</head>
<body>
<div class="container-fluid p-4">
<header class="d-flex justify-content-between align-items-center mb-4">
<h1><i class="bi bi-folder2-open"></i> TA Organizerr</h1>
<div>
<a href="/transcode" class="btn btn-outline-primary me-2">
<i class="bi bi-film"></i> Transcode
</a>
<span class="badge bg-secondary" id="connection-status">Connecting...</span>
</div>
</header>
<!-- Stats Row -->
<div class="row mb-4">
<div class="col-md-3">
<div class="card text-bg-primary mb-3">
<div class="card-header">Total Videos</div>
<div class="card-body">
<h2 class="card-title" id="stat-total">0</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-bg-success mb-3">
<div class="card-header">Linked & Verified</div>
<div class="card-body">
<h2 class="card-title" id="stat-linked">0</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-bg-warning mb-3">
<div class="card-header">New / Fixed</div>
<div class="card-body">
<h2 class="card-title" id="stat-new">0</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-bg-danger mb-3">
<div class="card-header">Missing / Error</div>
<div class="card-body">
<h2 class="card-title" id="stat-error">0</h2>
</div>
</div>
</div>
</div>
<!-- Controls & Logs -->
<div class="row mb-4">
<div class="col-md-4">
<div class="card h-100">
<div class="card-header">Control Panel</div>
<div class="card-body d-grid gap-2">
<button class="btn btn-primary btn-lg" onclick="triggerScan()">
<i class="bi bi-arrow-repeat"></i> SCAN NOW
</button>
<button class="btn btn-danger" onclick="triggerCleanup()">
<i class="bi bi-trash"></i> CLEAN OLD FOLDERS (+00:00)
</button>
<button class="btn btn-warning" onclick="checkOrphans()">
<i class="bi bi-search"></i> CHECK ORPHANED LINKS
</button>
<hr>
<small class="text-muted">Next scheduled scan in: <span id="next-scan">--</span> min</small>
<div id="orphan-results" class="mt-2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<span>Live Logs</span>
<button class="btn btn-sm btn-outline-secondary" onclick="clearLogs()">Clear</button>
</div>
<div class="card-body p-0">
<div class="log-box" id="log-container">
<div>Waiting for 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>