feat: implement backend API clients for multi-marketplace integration and frontend service layer

2026-05-12 13:16:14 +03:00
parent 6974af486a
commit ee39a3d83b
65 changed files with 2501 additions and 33 deletions
--- a/frontend/css/styles.css
+++ b/frontend/css/styles.css
@@ -162,3 +162,82 @@ label textarea {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
 }
+
+.tabs-container {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--color-surface);
+  border-bottom: 1px solid hsla(0,0%,100%,0.1);
+}
+
+.tab-btn {
+  background: transparent;
+  color: var(--color-text);
+  border: none;
+  padding: 0.5rem 1rem;
+  font-size: 1.1rem;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.tab-btn:hover {
+  color: var(--color-primary);
+}
+
+.tab-btn.active {
+  color: var(--color-primary);
+  border-bottom: 2px solid var(--color-primary);
+}
+
+.platforms-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.platform-card {
+  background: var(--color-surface);
+  padding: 1.5rem;
+  border-radius: var(--radius);
+  border: 1px solid hsla(0,0%,100%,0.1);
+  transition: transform 0.2s;
+}
+
+.platform-card:hover {
+  transform: translateY(-2px);
+}
+
+.platform-card h3 {
+  color: var(--color-primary);
+  margin-bottom: 0.5rem;
+}
+
+.platform-card .status {
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+}
+
+.active-platform {
+  border-color: var(--color-success);
+}
+
+.active-platform h3 {
+  color: var(--color-success);
+}
+
+.platform-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.platform-form input {
+  padding: 0.5rem;
+  border: 1px solid hsla(0,0%,100%,0.1);
+  border-radius: var(--radius);
+  background: rgba(0,0,0,0.2);
+  color: #fff;
+}
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,22 +3,49 @@
 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OzonGuard – подготовка жалоб</title>
+    <title>AutoMarket – Универсальная панель управления</title>
    <link rel="stylesheet" href="css/styles.css" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
 </head>
 <body>
    <header class="header">
-        <h1>OzonGuard</h1>
-        <p>Быстро создавайте и отправляйте жалобы в поддержку Ozon</p>
+        <h1>AutoMarket</h1>
+        <p>Управление жалобами и интеграциями для 10 маркетплейсов</p>
    </header>

+    <div class="tabs-container">
+        <button class="tab-btn active" data-target="cases-section">Список жалоб</button>
+        <button class="tab-btn" data-target="integrations-section">Настройки интеграций</button>
+    </div>
+
    <main class="container">
+        
+        <!-- Integrations List -->
+        <section id="integrations-section" class="section hidden">
+            <h2>Доступные маркетплейсы</h2>
+            <div id="platforms-grid" class="platforms-grid">
+                <!-- Dynamically populated -->
+            </div>
+        </section>
+
        <!-- Cases list -->
        <section id="cases-section" class="section">
            <h2>Список кейсов</h2>
            <div class="controls">
-                <input type="text" id="search-input" placeholder="Поиск по артикулу или ссылке..." />
+                <input type="text" id="search-input" placeholder="Поиск по артикулу..." />
+                <select id="platform-filter">
+                    <option value="">Все площадки</option>
+                    <option value="ozon">Ozon</option>
+                    <option value="wb">Wildberries</option>
+                    <option value="ym">Yandex Market</option>
+                    <option value="mm">Magnit Market</option>
+                    <option value="mega">MegaMarket</option>
+                    <option value="ae">AliExpress</option>
+                    <option value="avito">Avito</option>
+                    <option value="lamoda">Lamoda</option>
+                    <option value="lemana">Lemana PRO</option>
+                    <option value="flowwow">Flowwow</option>
+                </select>
                <select id="status-filter">
                    <option value="">Все статусы</option>
                    <option value="new">Новый</option>
@@ -32,6 +59,7 @@
                <thead>
                    <tr>
                        <th>ID</th>
+                        <th>Площадка</th>
                        <th>Артикул</th>
                        <th>Статус</th>
                        <th>Создан</th>
@@ -42,10 +70,25 @@
            </table>
        </section>

-        <!-- Case form (hidden by default) -->
+        <!-- Case form -->
        <section id="case-form-section" class="section hidden">
            <h2 id="form-title">Новый кейс</h2>
            <form id="case-form">
+                <label>
+                    Площадка
+                    <select name="platform" id="case-platform" required>
+                        <option value="ozon">Ozon</option>
+                        <option value="wb">Wildberries</option>
+                        <option value="ym">Yandex Market</option>
+                        <option value="mm">Magnit Market</option>
+                        <option value="mega">MegaMarket</option>
+                        <option value="ae">AliExpress</option>
+                        <option value="avito">Avito</option>
+                        <option value="lamoda">Lamoda</option>
+                        <option value="lemana">Lemana PRO</option>
+                        <option value="flowwow">Flowwow</option>
+                    </select>
+                </label>
                <label>
                    Ссылка на карточку нарушителя
                    <input type="url" name="violator_url" required />
@@ -74,7 +117,7 @@
            </form>
        </section>

-        <!-- Case detail (hidden) -->
+        <!-- Case detail -->
        <section id="case-detail-section" class="section hidden">
            <h2>Детали кейса</h2>
            <div id="case-detail"></div>
@@ -82,8 +125,6 @@
        </section>
    </main>

-    <script src="js/api.js"></script>
-    <script src="js/ui.js"></script>
-    <script src="js/app.js"></script>
+    <script type="module" src="js/app.js"></script>
 </body>
 </html>
--- a/frontend/js/api.js
+++ b/frontend/js/api.js
@@ -52,3 +52,18 @@ export async function listFiles(caseId) {
  const res = await fetch(`${API_BASE}/cases/${caseId}/files`);
  return await res.json();
 }
+
+export async function getConfiguredPlatforms() {
+  const res = await fetch(`${API_BASE}/credentials`);
+  const data = await res.json();
+  return data.configured_platforms || [];
+}
+
+export async function saveCredentials(platform, data) {
+  const res = await fetch(`${API_BASE}/credentials/${platform}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+  return await res.json();
+}
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -0,0 +1,215 @@
+// frontend/js/app.js
+import * as api from './api.js';
+
+const PLATFORMS = [
+    { id: 'ozon', name: 'Ozon' },
+    { id: 'wb', name: 'Wildberries' },
+    { id: 'ym', name: 'Yandex Market' },
+    { id: 'mm', name: 'Magnit Market' },
+    { id: 'mega', name: 'MegaMarket' },
+    { id: 'ae', name: 'AliExpress' },
+    { id: 'avito', name: 'Avito' },
+    { id: 'lamoda', name: 'Lamoda' },
+    { id: 'lemana', name: 'Lemana PRO' },
+    { id: 'flowwow', name: 'Flowwow' }
+];
+
+document.addEventListener("DOMContentLoaded", () => {
+    initTabs();
+    initCases();
+    initIntegrations();
+});
+
+function initTabs() {
+    const btns = document.querySelectorAll('.tab-btn');
+    const sections = ['cases-section', 'integrations-section'];
+    
+    btns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            btns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            
+            const target = btn.dataset.target;
+            sections.forEach(s => {
+                document.getElementById(s).classList.add('hidden');
+            });
+            document.getElementById(target).classList.remove('hidden');
+            document.getElementById('case-form-section').classList.add('hidden');
+            document.getElementById('case-detail-section').classList.add('hidden');
+            
+            if(target === 'cases-section') loadCases();
+            if(target === 'integrations-section') loadIntegrations();
+        });
+    });
+}
+
+// ---- INTEGRATIONS ----
+async function loadIntegrations() {
+    const grid = document.getElementById('platforms-grid');
+    grid.innerHTML = 'Загрузка...';
+    
+    try {
+        const configured = await api.getConfiguredPlatforms();
+        grid.innerHTML = '';
+        
+        PLATFORMS.forEach(p => {
+            const isConfigured = configured.includes(p.id);
+            const card = document.createElement('div');
+            card.className = `platform-card ${isConfigured ? 'active-platform' : ''}`;
+            card.innerHTML = `
+                <h3>${p.name}</h3>
+                <p class="status">${isConfigured ? '✅ Подключено' : '❌ Не настроено'}</p>
+                <form class="platform-form" data-id="${p.id}">
+                    <input type="text" name="api_key" placeholder="API Key / Token" />
+                    <input type="text" name="client_id" placeholder="Client ID (если есть)" />
+                    <input type="text" name="client_secret" placeholder="Client Secret (если есть)" />
+                    <button type="submit" class="btn-primary">Сохранить</button>
+                </form>
+            `;
+            
+            card.querySelector('form').addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const formData = new FormData(e.target);
+                const data = Object.fromEntries(formData);
+                await api.saveCredentials(p.id, data);
+                alert(`Настройки для ${p.name} сохранены!`);
+                loadIntegrations();
+            });
+            
+            grid.appendChild(card);
+        });
+    } catch (e) {
+        grid.innerHTML = 'Ошибка загрузки интеграций.';
+        console.error(e);
+    }
+}
+
+// ---- CASES ----
+async function initCases() {
+    document.getElementById('new-case-btn').addEventListener('click', () => {
+        document.getElementById('cases-section').classList.add('hidden');
+        document.getElementById('case-form-section').classList.remove('hidden');
+        document.getElementById('case-form').reset();
+    });
+
+    document.getElementById('cancel-btn').addEventListener('click', () => {
+        document.getElementById('case-form-section').classList.add('hidden');
+        document.getElementById('cases-section').classList.remove('hidden');
+    });
+
+    document.getElementById('back-to-list').addEventListener('click', () => {
+        document.getElementById('case-detail-section').classList.add('hidden');
+        document.getElementById('cases-section').classList.remove('hidden');
+        loadCases();
+    });
+
+    document.getElementById('search-input').addEventListener('input', debounce(loadCases, 500));
+    document.getElementById('status-filter').addEventListener('change', loadCases);
+    document.getElementById('platform-filter').addEventListener('change', loadCases);
+
+    document.getElementById('case-form').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        const data = Object.fromEntries(formData);
+        
+        try {
+            const res = await api.createCase(data);
+            
+            const fileInput = document.getElementById('file-input');
+            if (fileInput.files.length > 0) {
+                await api.uploadFiles(res.id, fileInput.files);
+            }
+            
+            alert('Кейс успешно создан!');
+            document.getElementById('case-form-section').classList.add('hidden');
+            document.getElementById('cases-section').classList.remove('hidden');
+            loadCases();
+        } catch (err) {
+            console.error(err);
+            alert('Ошибка при сохранении');
+        }
+    });
+
+    loadCases();
+}
+
+async function loadCases() {
+    const article = document.getElementById('search-input').value;
+    const status = document.getElementById('status-filter').value;
+    const platform = document.getElementById('platform-filter').value;
+    
+    const tbody = document.querySelector('#cases-table tbody');
+    tbody.innerHTML = '<tr><td colspan="6">Загрузка...</td></tr>';
+    
+    try {
+        const cases = await api.fetchCases({ article, status, platform });
+        tbody.innerHTML = '';
+        if (cases.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="6">Нет жалоб</td></tr>';
+            return;
+        }
+        
+        cases.forEach(c => {
+            const tr = document.createElement('tr');
+            const pName = PLATFORMS.find(p => p.id === c.platform)?.name || c.platform;
+            tr.innerHTML = `
+                <td>${c.id}</td>
+                <td><strong>${pName}</strong></td>
+                <td>${c.violator_article}</td>
+                <td>${c.status}</td>
+                <td>${new Date(c.created_at).toLocaleString()}</td>
+                <td>
+                    <button class="btn-secondary" onclick="window.viewCase(${c.id})">Просмотр</button>
+                    <button class="btn-secondary" onclick="window.deleteCase(${c.id})">Удалить</button>
+                </td>
+            `;
+            tbody.appendChild(tr);
+        });
+    } catch (err) {
+        tbody.innerHTML = '<tr><td colspan="6">Ошибка сети</td></tr>';
+    }
+}
+
+window.viewCase = async function(id) {
+    document.getElementById('cases-section').classList.add('hidden');
+    const detailSection = document.getElementById('case-detail-section');
+    detailSection.classList.remove('hidden');
+    
+    const caseObj = await api.getCase(id);
+    const files = await api.listFiles(id);
+    
+    let html = `
+        <p><strong>Площадка:</strong> ${PLATFORMS.find(p => p.id === caseObj.platform)?.name || caseObj.platform}</p>
+        <p><strong>Артикул нарушителя:</strong> ${caseObj.violator_article}</p>
+        <p><strong>Ссылка:</strong> <a href="${caseObj.violator_url}" target="_blank">${caseObj.violator_url}</a></p>
+        <p><strong>Ваш артикул:</strong> ${caseObj.my_article || '-'}</p>
+        <p><strong>Комментарий:</strong> ${caseObj.comment || '-'}</p>
+        <p><strong>Статус:</strong> ${caseObj.status}</p>
+    `;
+    
+    if (files && files.length > 0) {
+        html += `<h3>Файлы доказательств:</h3><div class="preview">`;
+        files.forEach(f => {
+            const url = `http://localhost:5000/api/uploads/${f.path.split('/').pop()}`;
+            html += `<a href="${url}" target="_blank"><img src="${url}" alt="Док" /></a>`;
+        });
+        html += `</div>`;
+    }
+    
+    document.getElementById('case-detail').innerHTML = html;
+};
+
+window.deleteCase = async function(id) {
+    if(confirm('Удалить этот кейс?')) {
+        await api.deleteCase(id);
+        loadCases();
+    }
+};
+
+function debounce(func, wait) {
+    let timeout;
+    return function(...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+}