From 105459ef1ac2ac3954d877fae1844509df1a6801 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CNaeel=E2=80=9D?= <tazet@narod.ru>
Date: Mon, 15 Jun 2026 07:34:13 +0400
Subject: [PATCH] =?UTF-8?q?feat(ui):=20ZIP-=D0=BF=D1=80=D0=B5=D0=B2=D1=8C?=
 =?UTF-8?q?=D1=8E=20=E2=80=94=20=D1=80=D0=B0=D1=81=D0=BF=D0=B0=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BA=D0=B0=20=D0=B2=20=D0=B1=D1=80=D0=B0=D1=83=D0=B7?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5,=20=D0=BF=D0=BE=D0=BA=D0=B0=D0=B7=20=D1=81?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B5=D1=80=D0=B6=D0=B8=D0=BC=D0=BE=D0=B3=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- JSZip: при выборе ZIP показывает список файлов внутри
- 📦 ZIP-файл → ниже с отступом файлы из архива
- Дубликаты проверяются по всем именам (включая ZIP-содержимое)
- Красная корзина для удаления
---
 site/templates/upload.html | 104 ++++++++++++++++++++++++++-----------
 1 file changed, 75 insertions(+), 29 deletions(-)

diff --git a/site/templates/upload.html b/site/templates/upload.html
index 61e4fe1..1e10128 100644
--- a/site/templates/upload.html
+++ b/site/templates/upload.html
@@ -6,6 +6,7 @@
   <title>Сверка договоров</title>
   <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
   <script src="https://unpkg.com/lucide@latest"></script>
+  <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
   <style>
     :root {
       --brand-primary: #2563eb; --brand-primary-dark: #1d4ed8;
@@ -54,6 +55,8 @@
     .queue-item .size { color: var(--muted); font-size: 12px; }
     .queue-item .remove { cursor: pointer; color: var(--destructive); padding: 4px; opacity: .7; }
     .queue-item .remove:hover { opacity: 1; }
+    .queue-zip { font-weight: 600; }
+    .queue-sub { margin-left: 24px; border-left: 2px solid var(--brand-gray); padding-left: 12px; }
     .queue-empty { color: var(--muted); padding: 12px; text-align: center; font-size: 14px; }
     .duplicate-warn { color: #f59e0b; font-size: 12px; margin-left: 8px; }
     .table-wrap { border-radius: 6px; border: 1px solid var(--brand-gray); overflow: hidden; margin-top: 12px; }
@@ -156,38 +159,64 @@
   const queueDiv = document.getElementById('queue');
   const queueEmpty = document.getElementById('queueEmpty');
 
+  // fileQueue: [{_type:'file'|'zip', name, size, file, _entries: [...]}]
   let fileQueue = [];
 
-  // Добавление файлов в очередь при выборе
-  visibleInput.addEventListener('change', () => {
+  // Все имена файлов (для проверки дубликатов)
+  function allNames() {
+    const names = [];
+    fileQueue.forEach(item => {
+      if (item._type === 'zip' && item._entries) {
+        item._entries.forEach(e => names.push(e.name));
+      } else {
+        names.push(item.name);
+      }
+    });
+    return names;
+  }
+
+  function isDuplicate(name) {
+    return allNames().includes(name);
+  }
+
+  visibleInput.addEventListener('change', async () => {
     let added = 0, skipped = 0;
     for (const f of visibleInput.files) {
-      const dup = fileQueue.find(q => q.name === f.name && q.size === f.size);
-      if (dup) {
-        dup._duplicate = true;
-        skipped++;
+      if (f.name.toLowerCase().endsWith('.zip')) {
+        // ZIP: читаем содержимое
+        try {
+          const zip = await JSZip.loadAsync(f);
+          const entries = [];
+          const validExts = ['.docx','.doc','.pdf'];
+          zip.forEach((path, entry) => {
+            if (!entry.dir && validExts.some(e => path.toLowerCase().endsWith(e))) {
+              entries.push({name: path, size: entry._data ? entry._data.uncompressedSize : 0});
+            }
+          });
+          if (entries.length > 0) {
+            fileQueue.push({_type:'zip', name:f.name, size:f.size, file:f, _entries:entries});
+            added++;
+          }
+        } catch(e) { skipped++; }
       } else {
-        f._duplicate = false;
-        fileQueue.push(f);
+        if (isDuplicate(f.name)) { skipped++; continue; }
+        fileQueue.push({_type:'file', name:f.name, size:f.size, file:f});
         added++;
       }
     }
     visibleInput.value = '';
     if (skipped > 0) {
       queueEmpty.innerHTML = '⚠️ ' + skipped + ' файл(ов) уже в очереди — пропущены';
-      queueEmpty.style.display = 'block';
-      queueEmpty.style.color = '#f59e0b';
-      setTimeout(() => { queueEmpty.style.color = 'var(--muted)'; if (fileQueue.length === 0) queueEmpty.innerHTML = 'Нет файлов — выберите file.docx / file.pdf / file.zip'; }, 3000);
+      queueEmpty.style.display = 'block'; queueEmpty.style.color = '#f59e0b';
+      setTimeout(() => { queueEmpty.style.color = 'var(--muted)'; renderQueue(); }, 3000);
     }
     renderQueue();
   });
 
-  function removeFile(index) {
-    fileQueue.splice(index, 1);
-    renderQueue();
-  }
+  function removeFile(index) { fileQueue.splice(index, 1); renderQueue(); }
 
   function formatSize(bytes) {
+    if (!bytes || bytes === 0) return '';
     if (bytes < 1024) return bytes + ' B';
     if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
     return (bytes / 1048576).toFixed(1) + ' MB';
@@ -203,33 +232,50 @@
     } else {
       queueEmpty.style.display = 'none';
       processBtn.disabled = false;
-      queueDiv.innerHTML = fileQueue.map((f, i) =>
-        '<div class="queue-item">' +
-        '<i data-lucide="file-text" style="width:16px;height:16px;color:var(--muted);"></i>' +
-        '<span class="name">' + f.name + (f._duplicate ? '<span class="duplicate-warn">⚠ дубликат</span>' : '') + '</span>' +
-        '<span class="size">' + formatSize(f.size) + '</span>' +
-        '<span class="remove" onclick="removeFile(' + i + ')" title="Удалить"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></span>' +
-        '</div>'
-      ).join('');
+      queueDiv.innerHTML = fileQueue.map((item, i) => {
+        if (item._type === 'zip') {
+          let html = '<div class="queue-item queue-zip">' +
+            '<i data-lucide="archive" style="width:16px;height:16px;color:var(--muted);"></i>' +
+            '<span class="name">📦 ' + item.name + '</span>' +
+            '<span class="size">' + formatSize(item.size) + ' (' + item._entries.length + ' файлов)</span>' +
+            '<span class="remove" onclick="removeFile(' + i + ')" title="Удалить"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></span>' +
+            '</div>';
+          if (item._entries) {
+            html += '<div class="queue-sub">';
+            item._entries.forEach(e => {
+              html += '<div class="queue-item">' +
+                '<i data-lucide="file-text" style="width:14px;height:14px;color:var(--muted);"></i>' +
+                '<span class="name">' + e.name + '</span>' +
+                '<span class="size">' + formatSize(e.size) + '</span>' +
+                '</div>';
+            });
+            html += '</div>';
+          }
+          return html;
+        }
+        return '<div class="queue-item">' +
+          '<i data-lucide="file-text" style="width:16px;height:16px;color:var(--muted);"></i>' +
+          '<span class="name">' + item.name + '</span>' +
+          '<span class="size">' + formatSize(item.size) + '</span>' +
+          '<span class="remove" onclick="removeFile(' + i + ')" title="Удалить"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></span>' +
+          '</div>';
+      }).join('');
       lucide.createIcons();
     }
   }
 
-  // Отправка формы: переносим файлы из очереди в скрытый input
   processBtn.addEventListener('click', () => {
     if (fileQueue.length === 0) return;
-
-    // Переносим File объекты в скрытый input
     const dt = new DataTransfer();
-    fileQueue.forEach(f => dt.items.add(f));
+    fileQueue.forEach(item => {
+      if (item.file) dt.items.add(item.file);
+    });
     hiddenInput.files = dt.files;
-
     processBtn.disabled = true;
     processBtn.innerHTML = '<span style="display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;"></span> Обработка...';
     document.getElementById('uploadForm').submit();
   });
 
-  // Анимация спиннера
   const style = document.createElement('style');
   style.textContent = '@keyframes spin { to { transform: rotate(360deg); } }';
   document.head.appendChild(style);