Add jukebox_maker web app v1.0
Go web application for filling USB drives with media files. Runs in Docker on Unraid with /media, /mnt/usb, /config volumes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
137
web/templates/dashboard.html
Normal file
137
web/templates/dashboard.html
Normal file
@@ -0,0 +1,137 @@
|
||||
{{define "content"}}
|
||||
|
||||
<section class="panel">
|
||||
<h2>Накопитель</h2>
|
||||
<table class="kv-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Статус</th>
|
||||
<td id="diskState"><span class="badge badge-unknown">Не подключён</span></td>
|
||||
</tr>
|
||||
<tr id="rowDiskID" class="hidden">
|
||||
<th>ID диска</th>
|
||||
<td><span class="mono" id="valDiskID"></span></td>
|
||||
</tr>
|
||||
<tr id="rowTotal" class="hidden">
|
||||
<th>Всего на диске</th>
|
||||
<td id="valTotal"></td>
|
||||
</tr>
|
||||
<tr id="rowFree" class="hidden">
|
||||
<th>Свободно</th>
|
||||
<td id="valFree"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="panel hidden" id="progressPanel">
|
||||
<h2>Копирование</h2>
|
||||
<div style="padding:14px 16px">
|
||||
<div class="progress-bar-bg">
|
||||
<div class="progress-bar-fill" id="progressFill" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="progress-label" id="progressMsg">Подготовка…</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="btn-row" style="background:transparent;border:none;padding:0;margin-bottom:24px">
|
||||
<button class="button-primary" id="btnStart" onclick="startCopy()" disabled>▶ Запустить копирование</button>
|
||||
<button class="button-danger hidden" id="btnCancel" onclick="cancelCopy()">✕ Отменить</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let pollInterval = null;
|
||||
let activeTaskId = null;
|
||||
|
||||
async function refreshDisk() {
|
||||
try {
|
||||
const r = await fetch('/api/disk');
|
||||
if (!r.ok) return;
|
||||
const d = await r.json();
|
||||
|
||||
const labels = { absent: 'Не подключён', foreign: 'Незнакомый диск', known: 'Диск подключён' };
|
||||
const cls = { absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' };
|
||||
document.getElementById('diskState').innerHTML =
|
||||
`<span class="badge ${cls[d.state]||'badge-unknown'}">${labels[d.state]||'—'}</span>`;
|
||||
|
||||
const known = d.state === 'known';
|
||||
['rowDiskID','rowTotal','rowFree'].forEach(id =>
|
||||
document.getElementById(id).classList.toggle('hidden', !known));
|
||||
if (known) {
|
||||
document.getElementById('valDiskID').textContent = d.disk_id;
|
||||
document.getElementById('valTotal').textContent = fmtBytes(d.total_bytes);
|
||||
document.getElementById('valFree').textContent = fmtBytes(d.free_bytes);
|
||||
}
|
||||
|
||||
const hasTask = !!d.active_task_id;
|
||||
document.getElementById('btnStart').disabled = !known || hasTask;
|
||||
document.getElementById('btnStart').classList.toggle('hidden', hasTask);
|
||||
document.getElementById('btnCancel').classList.toggle('hidden', !hasTask);
|
||||
document.getElementById('progressPanel').classList.toggle('hidden', !hasTask);
|
||||
|
||||
if (d.active_task_id && d.active_task_id !== activeTaskId) {
|
||||
activeTaskId = d.active_task_id;
|
||||
startTaskPoll(activeTaskId);
|
||||
}
|
||||
if (!d.active_task_id && activeTaskId) {
|
||||
activeTaskId = null; stopTaskPoll();
|
||||
document.getElementById('progressPanel').classList.add('hidden');
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
function startTaskPoll(id) { stopTaskPoll(); pollInterval = setInterval(() => pollTask(id), 1500); }
|
||||
function stopTaskPoll() { if (pollInterval) { clearInterval(pollInterval); pollInterval = null; } }
|
||||
|
||||
async function pollTask(id) {
|
||||
try {
|
||||
const r = await fetch('/api/tasks/' + id);
|
||||
if (!r.ok) return;
|
||||
const t = await r.json();
|
||||
document.getElementById('progressFill').style.width = t.progress + '%';
|
||||
document.getElementById('progressMsg').textContent = t.message || '…';
|
||||
if (['success','failed','canceled'].includes(t.status)) {
|
||||
stopTaskPoll(); activeTaskId = null;
|
||||
document.getElementById('btnStart').disabled = false;
|
||||
document.getElementById('btnStart').classList.remove('hidden');
|
||||
document.getElementById('btnCancel').classList.add('hidden');
|
||||
document.getElementById('progressPanel').classList.add('hidden');
|
||||
if (t.status === 'success') toast(t.message || 'Готово', 'ok');
|
||||
if (t.status === 'failed') toast('Ошибка: ' + t.error, 'error');
|
||||
if (t.status === 'canceled') toast('Копирование отменено', 'error');
|
||||
refreshDisk();
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
async function startCopy() {
|
||||
document.getElementById('btnStart').disabled = true;
|
||||
try {
|
||||
const r = await fetch('/api/copy/start', { method: 'POST' });
|
||||
const d = await r.json();
|
||||
if (!r.ok) {
|
||||
toast(d.error || 'Ошибка запуска', 'error');
|
||||
document.getElementById('btnStart').disabled = false;
|
||||
return;
|
||||
}
|
||||
activeTaskId = d.task_id;
|
||||
document.getElementById('btnStart').classList.add('hidden');
|
||||
document.getElementById('btnCancel').classList.remove('hidden');
|
||||
document.getElementById('progressPanel').classList.remove('hidden');
|
||||
document.getElementById('progressFill').style.width = '0%';
|
||||
document.getElementById('progressMsg').textContent = 'Подготовка…';
|
||||
startTaskPoll(activeTaskId);
|
||||
} catch(e) {
|
||||
toast('Ошибка связи', 'error');
|
||||
document.getElementById('btnStart').disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function cancelCopy() {
|
||||
try { await fetch('/api/copy/cancel', { method: 'POST' }); toast('Отмена…', 'ok'); } catch(e) {}
|
||||
}
|
||||
|
||||
refreshDisk();
|
||||
setInterval(refreshDisk, 5000);
|
||||
</script>
|
||||
{{end}}
|
||||
44
web/templates/layout.html
Normal file
44
web/templates/layout.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{{define "layout"}}<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.Title}} — Jukebox Maker</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="page-header">
|
||||
<h1>🎵 Jukebox Maker</h1>
|
||||
<nav class="header-nav">
|
||||
<a href="/" class="header-action {{if eq .Page "dashboard"}}active{{end}}">Dashboard</a>
|
||||
<a href="/settings" class="header-action {{if eq .Page "settings"}}active{{end}}">Настройки</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="page-main">
|
||||
{{template "content" .}}
|
||||
</main>
|
||||
|
||||
<div class="toast-container" id="toastContainer"></div>
|
||||
|
||||
<script>
|
||||
function toast(msg, type) {
|
||||
const c = document.getElementById('toastContainer');
|
||||
const t = document.createElement('div');
|
||||
t.className = 'toast toast-' + (type === 'error' ? 'error' : 'ok');
|
||||
t.textContent = msg;
|
||||
c.appendChild(t);
|
||||
setTimeout(() => t.remove(), 4000);
|
||||
}
|
||||
function fmtBytes(b) {
|
||||
if (!b) return '—';
|
||||
if (b >= 1e12) return (b/1e12).toFixed(1) + ' ТБ';
|
||||
if (b >= 1e9) return (b/1e9).toFixed(1) + ' ГБ';
|
||||
if (b >= 1e6) return (b/1e6).toFixed(1) + ' МБ';
|
||||
return (b/1e3).toFixed(0) + ' КБ';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
138
web/templates/settings.html
Normal file
138
web/templates/settings.html
Normal file
@@ -0,0 +1,138 @@
|
||||
{{define "content"}}
|
||||
<form id="settingsForm" onsubmit="saveSettings(event)">
|
||||
|
||||
<section class="panel">
|
||||
<h2>Источники копирования</h2>
|
||||
<div class="source-list" id="sourceList">
|
||||
<div class="text-muted" style="padding:12px 16px">Загрузка…</div>
|
||||
</div>
|
||||
<div class="btn-row">
|
||||
<button type="button" class="button-secondary button-sm" onclick="loadSources()">↻ Обновить список</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Параметры копирования</h2>
|
||||
<div class="form-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="reserveGB">Оставить свободным на диске (ГБ)</label>
|
||||
<input class="form-input" type="number" id="reserveGB" min="0" max="1000" step="0.5" value="2">
|
||||
<span class="form-hint">Копирование остановится, когда свободного места останется меньше этого значения.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="fileSelectMode">Какие файлы копировать</label>
|
||||
<select class="form-select" id="fileSelectMode" style="width:auto;max-width:420px">
|
||||
<option value="new">Только новые (не копировавшиеся на этот диск)</option>
|
||||
<option value="all">Все подряд</option>
|
||||
</select>
|
||||
<span class="form-hint">«Только новые» — пропускает файлы, уже скопированные на данный диск, даже если они были удалены с него (считаются просмотренными).</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="overwriteMode">Режим записи</label>
|
||||
<select class="form-select" id="overwriteMode" style="width:auto;max-width:420px">
|
||||
<option value="skip">Пропустить существующие файлы</option>
|
||||
<option value="delete">Удалить наши данные с диска и перезаписать заново</option>
|
||||
</select>
|
||||
<span class="form-hint">«Удалить и перезаписать» — удаляет с диска всё кроме папки .jukebox, затем копирует заново.</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Автоматизация</h2>
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
|
||||
<input type="checkbox" id="autoCopy" style="width:15px;height:15px;accent-color:var(--accent)">
|
||||
<span class="form-label" style="margin:0">Автоматическое копирование</span>
|
||||
</label>
|
||||
<span class="form-hint">При обнаружении знакомого накопителя копирование запустится автоматически.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display:flex;gap:8px;margin-bottom:24px">
|
||||
<button type="submit" class="button-primary">Сохранить настройки</button>
|
||||
<button type="button" class="button-secondary" onclick="loadSettings()">Сбросить</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script>
|
||||
let allSources = [];
|
||||
let enabledSources = {};
|
||||
|
||||
async function loadSources() {
|
||||
try {
|
||||
const r = await fetch('/api/sources');
|
||||
if (!r.ok) return;
|
||||
const d = await r.json();
|
||||
allSources = d.items || [];
|
||||
renderSources();
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
function renderSources() {
|
||||
const el = document.getElementById('sourceList');
|
||||
if (!allSources.length) {
|
||||
el.innerHTML = '<div class="text-muted" style="padding:12px 16px">Папки в /media не найдены.</div>';
|
||||
return;
|
||||
}
|
||||
el.innerHTML = allSources.map(path => {
|
||||
const checked = enabledSources[path] !== false;
|
||||
return `<label class="source-item">
|
||||
<input type="checkbox" data-source="${path}" ${checked ? 'checked' : ''}>
|
||||
<span class="source-item-name">${path}</span>
|
||||
<span class="source-item-path">/media/${path}</span>
|
||||
</label>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const r = await fetch('/api/config');
|
||||
if (!r.ok) return;
|
||||
const cfg = await r.json();
|
||||
document.getElementById('reserveGB').value = cfg.reserve_free_gb ?? 2;
|
||||
document.getElementById('fileSelectMode').value = cfg.file_select_mode || 'new';
|
||||
document.getElementById('overwriteMode').value = cfg.overwrite_mode || 'skip';
|
||||
document.getElementById('autoCopy').checked = !!cfg.auto_copy;
|
||||
enabledSources = {};
|
||||
(cfg.sources || []).forEach(s => { enabledSources[s.path] = s.enabled; });
|
||||
renderSources();
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
async function saveSettings(e) {
|
||||
e.preventDefault();
|
||||
const checkboxes = document.querySelectorAll('[data-source]');
|
||||
const sources = Array.from(checkboxes).map(cb => ({ path: cb.dataset.source, enabled: cb.checked }));
|
||||
Object.keys(enabledSources).forEach(path => {
|
||||
if (!sources.find(s => s.path === path)) sources.push({ path, enabled: false });
|
||||
});
|
||||
const body = {
|
||||
reserve_free_gb: parseFloat(document.getElementById('reserveGB').value) || 2,
|
||||
file_select_mode: document.getElementById('fileSelectMode').value,
|
||||
overwrite_mode: document.getElementById('overwriteMode').value,
|
||||
auto_copy: document.getElementById('autoCopy').checked,
|
||||
sources,
|
||||
};
|
||||
try {
|
||||
const r = await fetch('/api/config', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (r.ok) { toast('Настройки сохранены', 'ok'); await loadSettings(); }
|
||||
else { const d = await r.json(); toast(d.error || 'Ошибка сохранения', 'error'); }
|
||||
} catch(e) { toast('Ошибка связи', 'error'); }
|
||||
}
|
||||
|
||||
loadSettings();
|
||||
loadSources();
|
||||
</script>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user