From c8772d97ed38410c176f2d78098e6fc8fa9a69e6 Mon Sep 17 00:00:00 2001
From: Mikhail Chusavitin <mchusavitin@mchusmbp.local>
Date: Wed, 4 Feb 2026 09:39:04 +0300
Subject: [PATCH] feat(ui): add archive/api data source switch

---
 web/static/css/style.css | 38 ++++++++++++++++++++++++++++++++++++++
 web/static/js/app.js     | 27 +++++++++++++++++++++++++++
 web/templates/index.html | 25 ++++++++++++++++++-------
 3 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index b6a91cc..a65bf9e 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -40,6 +40,35 @@ main {
 }
 
 /* Upload section */
+.source-switch {
+    display: inline-flex;
+    gap: 0.25rem;
+    background: #e9ecef;
+    border-radius: 8px;
+    padding: 0.25rem;
+    margin-bottom: 1rem;
+}
+
+.source-switch-btn {
+    border: none;
+    background: transparent;
+    color: #495057;
+    padding: 0.45rem 0.9rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.source-switch-btn:hover {
+    background: #dee2e6;
+}
+
+.source-switch-btn.active {
+    background: #3498db;
+    color: #fff;
+}
+
 .upload-area {
     border: 2px dashed #ccc;
     border-radius: 8px;
@@ -74,6 +103,15 @@ main {
     color: #888;
 }
 
+.api-placeholder {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 2rem;
+    text-align: center;
+    color: #555;
+}
+
 #upload-status {
     margin-top: 1rem;
     text-align: center;
diff --git a/web/static/js/app.js b/web/static/js/app.js
index 3ae4d5c..23ebeec 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -1,12 +1,39 @@
 // LOGPile Frontend Application
 
 document.addEventListener('DOMContentLoaded', () => {
+    initSourceType();
     initUpload();
     initTabs();
     initFilters();
     loadParsersInfo();
 });
 
+let sourceType = 'archive';
+
+function initSourceType() {
+    const sourceButtons = document.querySelectorAll('.source-switch-btn');
+    sourceButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            setSourceType(button.dataset.sourceType);
+        });
+    });
+
+    setSourceType(sourceType);
+}
+
+function setSourceType(nextType) {
+    sourceType = nextType === 'api' ? 'api' : 'archive';
+
+    document.querySelectorAll('.source-switch-btn').forEach(button => {
+        button.classList.toggle('active', button.dataset.sourceType === sourceType);
+    });
+
+    const archiveContent = document.getElementById('archive-source-content');
+    const apiPlaceholder = document.getElementById('api-source-placeholder');
+    archiveContent.classList.toggle('hidden', sourceType !== 'archive');
+    apiPlaceholder.classList.toggle('hidden', sourceType !== 'api');
+}
+
 // Load and display available parsers
 async function loadParsersInfo() {
     try {
diff --git a/web/templates/index.html b/web/templates/index.html
index ddcf179..85b439d 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -14,14 +14,25 @@
 
     <main>
         <section id="upload-section">
-            <div class="upload-area" id="drop-zone">
-                <p>Перетащите архив сюда или</p>
-                <input type="file" id="file-input" accept="application/gzip,application/x-gzip,application/x-tar,application/zip" hidden>
-                <button type="button" onclick="document.getElementById('file-input').click()">Выберите файл</button>
-                <p class="hint">Поддерживаемые форматы: tar.gz, zip</p>
+            <div class="source-switch" role="tablist" aria-label="Источник данных">
+                <button type="button" class="source-switch-btn active" data-source-type="archive">Архив</button>
+                <button type="button" class="source-switch-btn" data-source-type="api">API</button>
+            </div>
+
+            <div id="archive-source-content">
+                <div class="upload-area" id="drop-zone">
+                    <p>Перетащите архив сюда или</p>
+                    <input type="file" id="file-input" accept="application/gzip,application/x-gzip,application/x-tar,application/zip" hidden>
+                    <button type="button" onclick="document.getElementById('file-input').click()">Выберите файл</button>
+                    <p class="hint">Поддерживаемые форматы: tar.gz, zip</p>
+                </div>
+                <div id="upload-status"></div>
+                <div id="parsers-info" class="parsers-info"></div>
+            </div>
+
+            <div id="api-source-placeholder" class="api-placeholder hidden">
+                <p>Подключение по API будет реализовано на следующих шагах.</p>
             </div>
-            <div id="upload-status"></div>
-            <div id="parsers-info" class="parsers-info"></div>
         </section>
 
         <section id="data-section" class="hidden">