Add multi-disk copy workflow

web/static/style.css

@@ -89,6 +89,24 @@ a:hover { text-decoration: underline; }
   color: var(--ink);
 }
 
+.panel-body {
+  padding: 14px 16px;
+}
+
+.disk-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
+}
+
+.disk-card {
+  margin-bottom: 0;
+}
+
+.progress-wrap {
+  border-top: 1px solid var(--border-lite);
+}
+
 /* KV table */
 .kv-table {
   width: 100%;
@@ -325,5 +343,7 @@ a:hover { text-decoration: underline; }
 @media (max-width: 720px) {
   .page-header { flex-wrap: wrap; padding: 12px 16px; }
   .page-main { width: calc(100vw - 24px); margin-top: 20px; }
+  .disk-grid { grid-template-columns: 1fr; }
   .kv-table th { width: 130px; }
+  .btn-row { flex-wrap: wrap; }
 }

web/templates/dashboard.html

@@ -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}}