mchus/jukebox_maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add multi-disk copy workflow

Browse Source
This commit is contained in:
mchus
2026-04-23 22:24:32 +03:00
parent 5b3cb9e393
commit 31bac2b5d8
10 changed files with 466 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/dashboard.html
+202 -126
View File
@@ -1,161 +1,237 @@
{{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 style="display:flex;justify-content:space-between;align-items:baseline;margin-top:6px">
<div class="progress-label" id="progressMsg">Подготовка…</div>
<div class="progress-label" id="progressMeta" style="text-align:right"></div>
</div>
<h2>Накопители</h2>
<div class="panel-body">
<div id="diskSummary" class="text-muted">Загрузка списка накопителей…</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>
<div class="disk-grid" id="diskGrid"></div>
<script>
let pollInterval = null;
let activeTaskId = null;
let disks = [];
const taskState = new Map();
const taskPollers = new Map();
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 escapeHTML(value) {
return String(value || '').replace(/[&<>"']/g, (char) => ({
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;'
}[char]));
}
function startTaskPoll(id) { stopTaskPoll(); pollInterval = setInterval(() => pollTask(id), 1500); }
function stopTaskPoll() { if (pollInterval) { clearInterval(pollInterval); pollInterval = null; } }
function diskKey(disk) {
return disk.disk_id || disk.mount_path;
}
function badgeClass(state) {
return ({ absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' })[state] || 'badge-unknown';
}
function badgeLabel(state) {
return ({ absent: 'Не подключён', foreign: 'Незнакомый диск', known: 'Диск подключён' })[state] || '—';
}
function fmtSpeed(bps) {
if (!bps) return '';
if (bps >= 1e9) return (bps/1e9).toFixed(1) + ' ГБ/с';
if (bps >= 1e6) return (bps/1e6).toFixed(1) + ' МБ/с';
if (bps >= 1e3) return (bps/1e3).toFixed(0) + ' КБ/с';
if (bps >= 1e9) return (bps / 1e9).toFixed(1) + ' ГБ/с';
if (bps >= 1e6) return (bps / 1e6).toFixed(1) + ' МБ/с';
if (bps >= 1e3) return (bps / 1e3).toFixed(0) + ' КБ/с';
return bps + ' Б/с';
}
function fmtETA(sec) {
if (!sec || sec <= 0) return '';
if (sec >= 3600) return Math.floor(sec/3600) + ' ч ' + Math.floor((sec%3600)/60) + ' мин';
if (sec >= 60) return Math.floor(sec/60) + ' мин';
if (sec >= 3600) return Math.floor(sec / 3600) + ' ч ' + Math.floor((sec % 3600) / 60) + ' мин';
if (sec >= 60) return Math.floor(sec / 60) + ' мин';
return sec + ' с';
}
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 || '…';
const speed = fmtSpeed(t.speed_bps);
const eta = fmtETA(t.eta_sec);
const meta = [speed, eta ? 'ETA: ' + eta : ''].filter(Boolean).join(' · ');
document.getElementById('progressMeta').textContent = meta;
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');
document.getElementById('progressMeta').textContent = '';
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) {}
function taskMeta(task) {
if (!task) return '';
return [fmtSpeed(task.speed_bps), task.eta_sec ? 'ETA: ' + fmtETA(task.eta_sec) : ''].filter(Boolean).join(' · ');
}
async function startCopy() {
document.getElementById('btnStart').disabled = true;
function renderDisks() {
const grid = document.getElementById('diskGrid');
const summary = document.getElementById('diskSummary');
if (!disks.length) {
summary.textContent = 'Подключённые накопители не найдены.';
grid.innerHTML = '';
return;
}
const knownCount = disks.filter((disk) => disk.state === 'known').length;
summary.textContent = `Найдено накопителей: ${disks.length}. Готово к копированию: ${knownCount}.`;
grid.innerHTML = disks.map((disk) => {
const activeTask = disk.active_task_id ? taskState.get(disk.active_task_id) : null;
const progress = activeTask ? activeTask.progress : 0;
const message = activeTask ? (activeTask.message || 'Подготовка…') : '';
const meta = activeTask ? taskMeta(activeTask) : '';
const isKnown = disk.state === 'known';
const isForeign = disk.state === 'foreign';
return `
<section class="panel disk-card">
<h2>${escapeHTML(disk.mount_path)}</h2>
<table class="kv-table">
<tbody>
<tr>
<th>Статус</th>
<td><span class="badge ${badgeClass(disk.state)}">${badgeLabel(disk.state)}</span></td>
</tr>
<tr>
<th>ID диска</th>
<td>${disk.disk_id ? `<span class="mono">${escapeHTML(disk.disk_id)}</span>` : '<span class="text-muted">ещё не инициализирован</span>'}</td>
</tr>
<tr>
<th>Всего на диске</th>
<td>${isKnown ? fmtBytes(disk.total_bytes) : '—'}</td>
</tr>
<tr>
<th>Свободно</th>
<td>${isKnown ? fmtBytes(disk.free_bytes) : '—'}</td>
</tr>
</tbody>
</table>
${activeTask ? `
<div class="panel-body progress-wrap">
<div class="progress-bar-bg">
<div class="progress-bar-fill" style="width:${progress}%"></div>
</div>
<div class="progress-label">${escapeHTML(message)}</div>
<div class="progress-label">${escapeHTML(meta)}</div>
</div>
` : ''}
<div class="btn-row">
${isKnown ? `
<button class="button-primary" data-action="start-copy" data-disk-id="${escapeHTML(disk.disk_id)}" ${activeTask ? 'disabled' : ''}>▶ Копировать</button>
<button class="button-danger ${activeTask ? '' : 'hidden'}" data-action="cancel-copy" data-disk-id="${escapeHTML(disk.disk_id)}">✕ Отменить</button>
` : ''}
${isForeign ? `
<button class="button-secondary" data-action="init-disk" data-mount-path="${escapeHTML(disk.mount_path)}">Инициализировать диск</button>
` : ''}
</div>
</section>
`;
}).join('');
}
function stopTaskPoll(taskID) {
if (!taskPollers.has(taskID)) return;
clearInterval(taskPollers.get(taskID));
taskPollers.delete(taskID);
}
function startTaskPoll(taskID) {
if (!taskID || taskPollers.has(taskID)) return;
taskPollers.set(taskID, setInterval(() => pollTask(taskID), 1500));
pollTask(taskID);
}
async function refreshDisks() {
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;
const response = await fetch('/api/disks');
if (!response.ok) return;
const payload = await response.json();
disks = payload.items || [];
renderDisks();
const activeTasks = new Set();
for (const disk of disks) {
if (disk.active_task_id) {
activeTasks.add(disk.active_task_id);
startTaskPoll(disk.active_task_id);
}
}
for (const taskID of Array.from(taskPollers.keys())) {
if (!activeTasks.has(taskID)) {
stopTaskPoll(taskID);
taskState.delete(taskID);
}
}
} catch (error) {}
}
async function pollTask(taskID) {
try {
const response = await fetch('/api/tasks/' + taskID);
if (!response.ok) return;
const task = await response.json();
taskState.set(taskID, task);
renderDisks();
if (['success', 'failed', 'canceled'].includes(task.status)) {
stopTaskPoll(taskID);
taskState.delete(taskID);
if (task.status === 'success') toast(task.message || 'Готово', 'ok');
if (task.status === 'failed') toast('Ошибка: ' + task.error, 'error');
if (task.status === 'canceled') toast('Копирование отменено', 'error');
refreshDisks();
}
} catch (error) {}
}
async function startCopy(diskID) {
try {
const response = await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/start', { method: 'POST' });
const payload = await response.json();
if (!response.ok) {
toast(payload.error || 'Ошибка запуска', 'error');
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) {
startTaskPoll(payload.task_id);
refreshDisks();
} catch (error) {
toast('Ошибка связи', 'error');
document.getElementById('btnStart').disabled = false;
}
}
async function cancelCopy() {
try { await fetch('/api/copy/cancel', { method: 'POST' }); toast('Отмена…', 'ok'); } catch(e) {}
async function cancelCopy(diskID) {
try {
await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/cancel', { method: 'POST' });
toast('Отмена…', 'ok');
} catch (error) {
toast('Ошибка связи', 'error');
}
}
refreshDisk();
setInterval(refreshDisk, 5000);
async function initDisk(mountPath) {
try {
const response = await fetch('/api/disks/init', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ mount_path: mountPath })
});
const payload = await response.json();
if (!response.ok) {
toast(payload.error || 'Ошибка инициализации', 'error');
return;
}
toast('Диск инициализирован', 'ok');
refreshDisks();
} catch (error) {
toast('Ошибка связи', 'error');
}
}
document.getElementById('diskGrid').addEventListener('click', (event) => {
const button = event.target.closest('button[data-action]');
if (!button) return;
const action = button.dataset.action;
if (action === 'start-copy') startCopy(button.dataset.diskId);
if (action === 'cancel-copy') cancelCopy(button.dataset.diskId);
if (action === 'init-disk') initDisk(button.dataset.mountPath);
});
refreshDisks();
setInterval(refreshDisks, 5000);
</script>
{{end}}