Improve disk UI and build performance

2026-04-23 22:51:36 +03:00
parent 31bac2b5d8
commit e7917b41b5
15 changed files with 651 additions and 154 deletions
@@ -2,100 +2,216 @@
 <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>
+    <h2>Copy Sources</h2>
+    <div class="panel-body">
+      <div class="form-hint">Select top-level folders or expand branches and choose individual nested directories.</div>
+    </div>
+    <div class="source-list">
+      <div class="source-tree" id="sourceTree">
+        <div class="text-muted source-tree-empty">Loading...</div>
+      </div>
    </div>
    <div class="btn-row">
-      <button type="button" class="button-secondary button-sm" onclick="loadSources()">↻ Обновить список</button>
+      <button type="button" class="button-secondary button-sm" onclick="reloadSourceTree()">Refresh list</button>
    </div>
  </section>

  <section class="panel">
-    <h2>Параметры копирования</h2>
+    <h2>Copy Settings</h2>
    <div class="form-body">

      <div class="form-group">
-        <label class="form-label" for="reserveGB">Оставить свободным на диске (ГБ)</label>
+        <label class="form-label" for="reserveGB">Reserved free space on disk (GB)</label>
        <input class="form-input" type="number" id="reserveGB" min="0" max="1000" step="0.5" value="2">
-        <span class="form-hint">Копирование остановится, когда свободного места останется меньше этого значения.</span>
+        <span class="form-hint">Copying will stop when free space falls below this value.</span>
      </div>

      <div class="form-group">
-        <label class="form-label" for="fileSelectMode">Какие файлы копировать</label>
+        <label class="form-label" for="fileSelectMode">Files to copy</label>
        <select class="form-select" id="fileSelectMode" style="width:auto;max-width:420px">
-          <option value="new">Только новые (не копировавшиеся на этот диск)</option>
-          <option value="all">Все подряд</option>
+          <option value="new">Only new files not copied to this disk before</option>
+          <option value="all">All matching files</option>
        </select>
-        <span class="form-hint">«Только новые» — пропускает файлы, уже скопированные на данный диск, даже если они были удалены с него (считаются просмотренными).</span>
+        <span class="form-hint">The new-only mode skips files already copied to this disk, even if they were later removed.</span>
      </div>

      <div class="form-group">
-        <label class="form-label" for="destFolder">Папка назначения на диске</label>
+        <label class="form-label" for="destFolder">Destination folder on disk</label>
        <input class="form-input" type="text" id="destFolder" placeholder="media" style="width:200px">
-        <span class="form-hint">Подпапка на диске куда копировать файлы. Структура источника воспроизводится внутри неё. По умолчанию: <code>media</code>.</span>
+        <span class="form-hint">Files will be copied into this subfolder while preserving the selected source structure.</span>
      </div>

      <div class="form-group">
-        <label class="form-label" for="overwriteMode">Режим записи</label>
+        <label class="form-label" for="overwriteMode">Default write mode</label>
        <select class="form-select" id="overwriteMode" style="width:auto;max-width:420px">
-          <option value="skip">Пропустить существующие файлы</option>
-          <option value="delete">Удалить папку назначения и перезаписать заново</option>
+          <option value="skip">Keep existing files</option>
+          <option value="delete">Replace destination folder contents</option>
        </select>
-        <span class="form-hint">«Удалить и перезаписать» — удаляет папку назначения на диске, затем копирует заново.</span>
+        <span class="form-hint">This is used for automatic copy runs. Manual dashboard actions can override it.</span>
      </div>

    </div>
  </section>

  <section class="panel">
-    <h2>Автоматизация</h2>
+    <h2>Automation</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>
+          <span class="form-label" style="margin:0">Automatic copy</span>
        </label>
-        <span class="form-hint">При обнаружении знакомого накопителя копирование запустится автоматически.</span>
+        <span class="form-hint">Start copying automatically when a known disk is detected.</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>
+    <button type="submit" class="button-primary">Save settings</button>
+    <button type="button" class="button-secondary" onclick="loadSettings()">Reset</button>
  </div>

 </form>

 <script>
-let allSources = [];
-let enabledSources = {};
+const sourceTree = new Map();
+const expandedNodes = new Set();
+const loadingNodes = new Set();
+let sourceConfig = {};
+
+function escapeHTML(value) {
+  return String(value || '').replace(/[&<>"']/g, (char) => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  }[char]));
+}
+
+function pathDepth(path) {
+  return path ? path.split('/').length : 0;
+}
+
+function parentPath(path) {
+  if (!path || !path.includes('/')) return '';
+  return path.slice(0, path.lastIndexOf('/'));
+}
+
+function effectiveSourceState(path) {
+  let current = path;
+  while (true) {
+    if (Object.prototype.hasOwnProperty.call(sourceConfig, current)) {
+      return sourceConfig[current];
+    }
+    if (!current) return true;
+    current = parentPath(current);
+  }
+}
+
+function collectSourcesForSave() {
+  const items = [];
+  const seen = new Set();
+  const roots = sourceTree.get('') || [];
+
+  for (const item of roots) {
+    items.push({ path: item.path, enabled: effectiveSourceState(item.path) });
+    seen.add(item.path);
+  }
+
+  Object.entries(sourceConfig).forEach(([path, enabled]) => {
+    if (seen.has(path)) return;
+    items.push({ path, enabled });
+  });
+
+  return items.sort((a, b) => a.path.localeCompare(b.path));
+}
+
+async function loadSourceChildren(path = '') {
+  if (loadingNodes.has(path)) return;
+  loadingNodes.add(path);
+  renderSources();

-async function loadSources() {
  try {
-    const r = await fetch('/api/sources');
-    if (!r.ok) return;
-    const d = await r.json();
-    allSources = d.items || [];
+    const query = path ? '?path=' + encodeURIComponent(path) : '';
+    const response = await fetch('/api/sources' + query);
+    if (!response.ok) return;
+    const payload = await response.json();
+    sourceTree.set(path, payload.items || []);
+  } catch (error) {
+  } finally {
+    loadingNodes.delete(path);
    renderSources();
-  } catch(e) {}
+  }
+}
+
+async function ensureExpanded(path) {
+  expandedNodes.add(path);
+  if (!sourceTree.has(path)) {
+    await loadSourceChildren(path);
+    return;
+  }
+  renderSources();
+}
+
+function toggleSource(path, checked) {
+  sourceConfig[path] = checked;
+  renderSources();
+}
+
+function renderSourceNodes(parent = '') {
+  const items = sourceTree.get(parent) || [];
+  return items.map((item) => {
+    const checked = effectiveSourceState(item.path);
+    const expanded = expandedNodes.has(item.path);
+    const childrenKnown = sourceTree.has(item.path);
+    const children = childrenKnown ? sourceTree.get(item.path) : [];
+    const hasChildren = !childrenKnown || children.length > 0;
+    const pad = 16 + pathDepth(item.path) * 20;
+
+    return `
+      <div class="source-node">
+        <div class="source-row" style="padding-left:${pad}px">
+          <button
+            type="button"
+            class="source-toggle ${hasChildren ? '' : 'source-toggle-empty'}"
+            data-action="toggle-expand"
+            data-path="${escapeHTML(item.path)}"
+            ${hasChildren ? '' : 'tabindex="-1" aria-hidden="true"'}
+          >${expanded ? '▾' : '▸'}</button>
+          <input class="source-check" type="checkbox" data-action="toggle-check" data-path="${escapeHTML(item.path)}" ${checked ? 'checked' : ''}>
+          <div class="source-label">
+            <span class="source-item-name">${escapeHTML(item.name)}</span>
+            <span class="source-item-path">/media/${escapeHTML(item.path)}</span>
+          </div>
+        </div>
+        ${expanded && loadingNodes.has(item.path) ? '<div class="source-loading">Loading...</div>' : ''}
+        ${expanded && childrenKnown && children.length ? `<div class="source-children">${renderSourceNodes(item.path)}</div>` : ''}
+      </div>
+    `;
+  }).join('');
 }

 function renderSources() {
-  const el = document.getElementById('sourceList');
-  if (!allSources.length) {
-    el.innerHTML = '<div class="text-muted" style="padding:12px 16px">Папки в /media не найдены.</div>';
+  const el = document.getElementById('sourceTree');
+  const roots = sourceTree.get('');
+
+  if (loadingNodes.has('') && !roots) {
+    el.innerHTML = '<div class="text-muted source-tree-empty">Loading...</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('');
+  if (!roots || !roots.length) {
+    el.innerHTML = '<div class="text-muted source-tree-empty">No folders found in /media.</div>';
+    return;
+  }
+
+  el.innerHTML = renderSourceNodes('');
+}
+
+async function reloadSourceTree() {
+  sourceTree.clear();
+  expandedNodes.clear();
+  await loadSourceChildren('');
 }

 async function loadSettings() {
@@ -108,39 +224,65 @@ async function loadSettings() {
    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; });
+
+    sourceConfig = {};
+    (cfg.sources || []).forEach((source) => {
+      sourceConfig[source.path] = !!source.enabled;
+    });
    renderSources();
-  } catch(e) {}
+  } catch (error) {}
 }

-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 });
-  });
+async function saveSettings(event) {
+  event.preventDefault();
+
  const body = {
    reserve_free_gb:  parseFloat(document.getElementById('reserveGB').value) || 2,
    dest_folder:      document.getElementById('destFolder').value.trim() || 'media',
    file_select_mode: document.getElementById('fileSelectMode').value,
    overwrite_mode:   document.getElementById('overwriteMode').value,
    auto_copy:        document.getElementById('autoCopy').checked,
-    sources,
+    sources:          collectSourcesForSave(),
  };
+
  try {
-    const r = await fetch('/api/config', {
+    const response = 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'); }
+    if (response.ok) {
+      toast('Settings saved', 'ok');
+      await loadSettings();
+      return;
+    }
+    const payload = await response.json();
+    toast(payload.error || 'Failed to save settings', 'error');
+  } catch (error) {
+    toast('Network error', 'error');
+  }
 }

+document.getElementById('sourceTree').addEventListener('click', async (event) => {
+  const button = event.target.closest('[data-action="toggle-expand"]');
+  if (!button) return;
+
+  const path = button.dataset.path;
+  if (expandedNodes.has(path)) {
+    expandedNodes.delete(path);
+    renderSources();
+    return;
+  }
+  await ensureExpanded(path);
+});
+
+document.getElementById('sourceTree').addEventListener('change', (event) => {
+  const checkbox = event.target.closest('[data-action="toggle-check"]');
+  if (!checkbox) return;
+  toggleSource(checkbox.dataset.path, checkbox.checked);
+});
+
 loadSettings();
-loadSources();
+loadSourceChildren('');
 </script>
 {{end}}