Merge pull request 'Рефакторинг структуры проекта: шаблоны, статика и модули приложения' (#1) from refactor/templates-structure into main

Reviewed-on: #1

.gitignore

@@ -3,13 +3,3 @@ __pycache__/
 .venv/
 CONTEXT.md
 CONTEXT.local.md
-backups/
-infra1
-infra2
-infra3
-infra4
-иб1
-иб2
-иб3
-иб4
-Z-card_РФ.xlsx

CONTEXT.md

@@ -6,23 +6,13 @@
 - в двух режимах: `Инфраструктура` и `ИБ`.
 
 ## Основные файлы
-- `main.py` - минимальный entrypoint Flask-приложения (запуск `app`).
+- `main.py` - Flask-приложение (главная страница, API, админка, инициализация/миграция БД, импорт ИБ при необходимости).
-- `zkart_app/__init__.py` - фабрика/инициализация приложения (`create_app`, регистрация роутов, `init_db`).
-- `zkart_app/config.py` - конфиг и константы (пути, `ADMIN_PATH`, логин/пароль, env-флаги).
-- `zkart_app/routes.py` - HTTP-роуты (`/`, `/api/data`, `/health`, админка, `/assets/mont-logo`).
-- `zkart_app/db.py` - работа с SQLite, схемы, сидинг, импорт из `infra1-4`, загрузка матриц из XLSX.
-- `templates/index.html` - шаблон главной страницы.
-- `templates/admin.html` - шаблон админки.
-- `templates/login.html` - шаблон логина в админку.
-- `static/css/*` - стили интерфейса (главная/админка/логин).
-- `static/js/*` - клиентские скрипты (главная/админка).
 - `requirements.txt` - зависимости Python.
 - `matrix.db` - SQLite-база со всеми сущностями по двум режимам.
 - `Dockerfile` - контейнеризация приложения.
 - `docker-compose.yml` - запуск сервиса в Docker.
 - `.dockerignore` - исключения для docker build context.
 - `mont_logo.png` - логотип, используется на главной.
-- `favicon.png` - favicon сайта.
 
 ## Роуты
 - `/` - основной интерфейс с фильтрами.

Dockerfile

@@ -12,4 +12,4 @@ COPY . .
 
 EXPOSE 8000
 
-CMD ["sh", "-c", "gunicorn -w ${WEB_CONCURRENCY:-4} --threads ${GUNICORN_THREADS:-5} -b 0.0.0.0:8000 main:app --timeout 60"]
+CMD ["gunicorn", "-w", "3", "-b", "0.0.0.0:8000", "main:app", "--timeout", "60"]

README.md

@@ -1,49 +1,31 @@
 # MONT Vendor Maps
 
 Flask-приложение для визуализации и редактирования матрицы:
-- `вендор -> продукты -> категории`
+- вендор -> продукты -> категории
-- два контура: `Инфраструктура` и `ИБ`
+- в двух режимах: Инфраструктура и ИБ
 
 ## Возможности
-- фильтрация по вендорам и категориям на главной
+- фильтрация по вендорам и категориям
 - отображение продуктов по выбранным фильтрам
-- переключение контура `Инфраструктура / ИБ`
+- переключение контуров `Инфраструктура / ИБ`
-- админ-панель:
+- отдельный визуальный стиль для ИБ
-- добавление/удаление вендоров
+- админ-панель с редактированием:
-- добавление/удаление категорий
+  - вендоров
-- добавление/удаление продуктов
+  - категорий
-- редактирование матрицы `продукт × категория` (автосохранение по чекбоксам)
+  - продуктов
-- удобная прокрутка матрицы (вертикальная + горизонтальная)
+  - матрицы `продукт × категория`
-
-## Текущая структура проекта
-- `main.py` - минимальный entrypoint
-- `zkart_app/__init__.py` - `create_app`, регистрация роутов, `init_db`
-- `zkart_app/config.py` - конфиг/константы (`ADMIN_PATH`, env, пути)
-- `zkart_app/routes.py` - HTTP-роуты
-- `zkart_app/db.py` - работа с SQLite, импорт и bootstrap
-- `templates/` - HTML-шаблоны (`index.html`, `admin.html`, `login.html`)
-- `static/css/` - CSS
-- `static/js/` - JS
-- `matrix.db` - рабочая SQLite БД
-
-## Роуты
-- `/` - главная страница
-- `/api/data?scope=infra|ib` - API данных матрицы
-- `/health` - healthcheck
-- `/assets/mont-logo` - логотип
-- `/{ADMIN_PATH}` - админка (секретный путь в `zkart_app/config.py`)
 
 ## API
 `GET /api/data?scope=infra|ib`
 
-Возвращает:
+Возвращает JSON:
 - `vendors`
 - `categories`
 - `products`
 - `product_links`
-- `links`
+- `links` (агрегированные vendor-category, для совместимости)
 
-## Запуск локально
+## Локальный запуск
 ```bash
 python3 -m venv .venv
 .venv/bin/python -m ensurepip --upgrade
@@ -56,19 +38,17 @@ python3 -m venv .venv
 docker compose up -d --build
 ```
 
-Порт: `5000`.
+Приложение доступно на порту `5000`.
 
 ## Переменные окружения
-- `SECRET_KEY` - секрет Flask-сессии
+- `SECRET_KEY` — секрет Flask-сессии.
-- `ENABLE_BOOTSTRAP`:
+- `ENABLE_BOOTSTRAP` — управление стартовым наполнением данных:
-- `0` (по умолчанию) - не выполнять автосидинг/автоимпорт
+  - `0` (по умолчанию): не выполнять автосидинг/автоимпорт;
-- `1` - разрешить bootstrap (seed + импорт)
+  - `1`: разрешить bootstrap (seed + импорт из `infra1..infra4` при подходящих условиях).
-- `WEB_CONCURRENCY` - число gunicorn worker-процессов (по умолчанию `4`)
-- `GUNICORN_THREADS` - число потоков на worker (по умолчанию `5`)
 
-По умолчанию Gunicorn дает минимум `20` параллельных обработок (`4 x 5`).
+## База данных
+SQLite: `matrix.db`.
 
-## Данные
+Содержит данные по двум контурам (`infra` и `ib`), включая продукты и связи категорий.
-- Инфраструктурные пакеты импорта: `infra1..infra4`
+
-- ИБ-пакеты импорта: `иб1..иб4` (используются для массового заполнения `ib_*` таблиц)
+Если `matrix.db` уже заполнена, запускайте с `ENABLE_BOOTSTRAP=0` (дефолт), чтобы не выполнять лишнюю инициализацию.
-- Бэкапы БД: директория `backups/`

docker-compose.yml

@@ -4,8 +4,6 @@ services:
     container_name: zkart-app
     environment:
       SECRET_KEY: ${SECRET_KEY:-change-me-please}
-      WEB_CONCURRENCY: ${WEB_CONCURRENCY:-4}
-      GUNICORN_THREADS: ${GUNICORN_THREADS:-5}
     volumes:
       - ./matrix.db:/app/matrix.db
     restart: unless-stopped

static/css/admin.css

@@ -1,7 +1,7 @@
     :root { --b:#1f4ea3; --line:#cfe0ff; }
     * { box-sizing: border-box; }
     body { margin:0; font-family:Manrope,sans-serif; background:#f0f5ff; color:#1a2746; }
-    body.ib { background:#eefaf3; }
+    body.ib { background:#fff1f1; }
     .wrap { width:min(1600px, calc(100% - 24px)); margin:12px auto 24px; }
     .top {
       background: linear-gradient(130deg, #1f4ea3, #3977df);
@@ -13,7 +13,7 @@
       align-items:center;
       gap:10px;
     }
-    body.ib .top { background: linear-gradient(130deg, #1f7a4a, #37a96b); }
+    body.ib .top { background: linear-gradient(130deg, #9b2f3a, #c24a56); }
     .scope-switch { display:flex; gap:8px; }
     .scope-chip {
       display:inline-block;
@@ -75,88 +75,3 @@
     th:first-child { z-index: 3; }
     td input { transform: scale(1.05); }
     .matrix-tip { margin:0 0 6px; font-size:12px; color:#37507d; }
-
-    @media (max-width: 980px) {
-      .wrap {
-        width: calc(100% - 16px);
-        margin: 8px auto 16px;
-      }
-      .top {
-        flex-direction: column;
-        align-items: stretch;
-        padding: 12px;
-      }
-      .top > div:last-child {
-        width: 100%;
-        display: grid !important;
-        grid-template-columns: 1fr 1fr;
-      }
-      .top > div:last-child a,
-      .top > div:last-child form,
-      .top > div:last-child button {
-        width: 100%;
-      }
-      .scope-switch {
-        flex-wrap: wrap;
-      }
-      .scope-chip {
-        flex: 1 1 auto;
-        text-align: center;
-      }
-      .grid {
-        grid-template-columns: 1fr;
-      }
-      .lists {
-        grid-template-columns: 1fr;
-      }
-      .list-box {
-        max-height: 300px;
-      }
-      .list-item {
-        align-items: flex-start;
-        flex-wrap: wrap;
-      }
-      .matrix-wrap {
-        padding: 8px;
-      }
-      .matrix-scroll {
-        max-height: 62vh;
-      }
-      th, td {
-        font-size: 11px;
-        padding: 5px;
-      }
-      th:first-child,
-      td:first-child {
-        min-width: 170px;
-      }
-      input[type="text"],
-      select,
-      button {
-        min-height: 40px;
-      }
-    }
-
-    @media (max-width: 600px) {
-      .top > div:last-child {
-        grid-template-columns: 1fr;
-      }
-      .inline-product {
-        grid-template-columns: 1fr;
-      }
-      .matrix-h-scroll {
-        height: 24px;
-      }
-      .matrix-scroll::-webkit-scrollbar,
-      .matrix-h-scroll::-webkit-scrollbar {
-        height: 18px;
-        width: 12px;
-      }
-      th:first-child,
-      td:first-child {
-        min-width: 145px;
-      }
-      .matrix-tip {
-        font-size: 11px;
-      }
-    }

static/css/index.css

@@ -26,26 +26,26 @@
     }
     body.scope-ib {
       background:
-        radial-gradient(1200px 700px at -10% -10%, #b8f3cf 0%, transparent 58%),
+        radial-gradient(1200px 700px at -10% -10%, #ffb3b3 0%, transparent 58%),
-        radial-gradient(900px 500px at 110% -20%, #b2efd6 0%, transparent 52%),
+        radial-gradient(900px 500px at 110% -20%, #ffbeb3 0%, transparent 52%),
-        linear-gradient(160deg, #daf8e8 0%, #bdeecf 100%);
+        linear-gradient(160deg, #ffd7d7 0%, #ffb8b8 100%);
     }
     body.scope-ib .hero {
       background:
         linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,0) 45%),
-        linear-gradient(125deg, #1f7a4a 0%, #2f9c61 55%, #47b879 100%);
+        linear-gradient(125deg, #7a1f2a 0%, #b43444 55%, #d34d57 100%);
     }
     body.scope-ib .hero::after {
-      background-color: rgba(10, 74, 45, .42);
+      background-color: rgba(90, 15, 28, .45);
     }
     body.scope-ib .hero::before {
       background:
         linear-gradient(to top, rgba(255,255,255,.9) 0 2px, rgba(255,255,255,0) 2px),
-        rgba(10, 61, 38, .40);
+        rgba(74, 9, 24, .42);
     }
     body.scope-ib .mode-btn.active {
-      background: linear-gradient(140deg, #1d8d54, #2fac6d);
+      background: linear-gradient(140deg, #9a2331, #c03d4c);
-      box-shadow: 0 8px 18px rgba(24, 124, 72, .35);
+      box-shadow: 0 8px 18px rgba(158, 33, 51, .35);
     }
 
     .wrap {
@@ -283,53 +283,6 @@
       font-size: 17px;
       color: #1f3f77;
     }
-    .active-filters {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin: 0 0 12px;
-      padding: 9px;
-      border-radius: 12px;
-      border: 1px solid #c9dafd;
-      background: linear-gradient(145deg, #e8f0ff, #dbe8ff);
-      box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
-    }
-    .active-filter {
-      display: inline-flex;
-      align-items: center;
-      gap: 7px;
-      border-radius: 999px;
-      padding: 6px 8px 6px 10px;
-      border: 1px solid #cfe0ff;
-      background: linear-gradient(145deg, #f8fbff, #edf4ff);
-      color: #21457f;
-      font-size: 12px;
-      font-weight: 700;
-    }
-    .active-filter .kind {
-      opacity: .7;
-      font-weight: 600;
-      letter-spacing: .2px;
-    }
-    .active-filter .remove {
-      display: inline-grid;
-      place-items: center;
-      width: 20px;
-      height: 20px;
-      border: 0;
-      border-radius: 999px;
-      background: #dbe9ff;
-      color: #1f4a8f;
-      font-size: 14px;
-      line-height: 1;
-      cursor: pointer;
-      padding: 0;
-      transition: .16s ease;
-    }
-    .active-filter .remove:hover {
-      background: #c4dbff;
-      transform: scale(1.05);
-    }
 
     .rows {
       display: grid;
@@ -394,99 +347,3 @@
       .credit .name { font-size: 8px; }
       .credit a { font-size: 6px; }
     }
-
-    @media (max-width: 768px) {
-      .wrap {
-        width: calc(100% - 16px);
-        margin: 10px auto 18px;
-      }
-      .brand-strip {
-        margin-bottom: 8px;
-      }
-      .brand-logo {
-        width: clamp(132px, 42vw, 190px);
-      }
-      .hero {
-        padding: 16px 14px 20px;
-        border-radius: 16px;
-      }
-      .hero h1 {
-        font-size: clamp(22px, 7vw, 32px);
-        line-height: 1.06;
-      }
-      .hero p {
-        font-size: 14px;
-      }
-      .mode-switch {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-      }
-      .mode-btn {
-        width: 100%;
-        min-height: 42px;
-      }
-      .card {
-        min-height: 0;
-        padding: 12px;
-      }
-      .chip-grid {
-        max-height: 260px;
-      }
-      .chip {
-        font-size: 12px;
-        padding: 8px 10px;
-      }
-      .footer-bar {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 8px;
-        background: rgba(255, 255, 255, .78);
-        border: 1px solid #dbe7ff;
-        border-radius: 12px;
-        padding: 10px;
-      }
-      button.action {
-        width: 100%;
-        min-height: 42px;
-      }
-      .result {
-        margin-top: 12px;
-        padding: 12px;
-      }
-      .active-filters {
-        margin-bottom: 10px;
-      }
-      .active-filter {
-        width: 100%;
-        justify-content: space-between;
-      }
-      .result-head h3 {
-        font-size: 15px;
-      }
-      .rows {
-        grid-template-columns: 1fr;
-        gap: 10px;
-      }
-      .credit {
-        right: 8px;
-        bottom: 8px;
-        background: rgba(255, 255, 255, .86);
-        border: 1px solid #dbe6ff;
-        border-radius: 10px;
-        padding: 4px 6px;
-      }
-    }
-
-    @media (max-width: 420px) {
-      .hero::before,
-      .hero::after {
-        opacity: .72;
-      }
-      .search {
-        padding: 10px 11px;
-      }
-      .tag {
-        font-size: 11px;
-      }
-    }

static/js/index.js

@@ -17,9 +17,6 @@
     clearBtn: document.getElementById("clearBtn"),
     modeInfra: document.getElementById("modeInfra"),
     modeIb: document.getElementById("modeIb"),
-    resultSection: document.querySelector(".result"),
-    filtersSection: document.querySelector(".board"),
-    activeFilters: document.getElementById("activeFilters"),
   };
 
   let clickAudioCtx = null;
@@ -133,12 +130,9 @@
       else if (!allowedVendors.has(vendor.id)) node.classList.add("dim");
       node.textContent = vendor.name;
       node.addEventListener("click", () => {
-        const wasSelected = state.selectedVendors.has(vendor.id);
+        if (state.selectedVendors.has(vendor.id)) state.selectedVendors.delete(vendor.id);
-        if (wasSelected) state.selectedVendors.delete(vendor.id);
         else state.selectedVendors.add(vendor.id);
         render();
-        if (wasSelected) scrollAfterDeselect();
-        else scrollToResultsSmooth();
       });
       el.vendorList.appendChild(node);
     }
@@ -154,12 +148,9 @@
       else if (!allowedCategories.has(category.id)) node.classList.add("dim");
       node.textContent = category.name;
       node.addEventListener("click", () => {
-        const wasSelected = state.selectedCategories.has(category.id);
+        if (state.selectedCategories.has(category.id)) state.selectedCategories.delete(category.id);
-        if (wasSelected) state.selectedCategories.delete(category.id);
         else state.selectedCategories.add(category.id);
         render();
-        if (wasSelected) scrollAfterDeselect();
-        else scrollToResultsSmooth();
       });
       el.categoryList.appendChild(node);
     }
@@ -222,82 +213,9 @@
     el.modeIb.classList.toggle("active", state.scope === "ib");
     document.body.classList.toggle("scope-ib", state.scope === "ib");
     renderChips();
-    renderActiveFilters();
     renderResults();
   }
 
-  function scrollToResultsSmooth() {
-    if (!el.resultSection) return;
-    const top = Math.max(el.resultSection.getBoundingClientRect().top + window.scrollY - 10, 0);
-    window.scrollTo({ top, behavior: "smooth" });
-  }
-
-  function scrollToFiltersSmooth() {
-    if (!el.filtersSection) return;
-    const top = Math.max(el.filtersSection.getBoundingClientRect().top + window.scrollY - 8, 0);
-    window.scrollTo({ top, behavior: "smooth" });
-  }
-
-  function scrollToTopSmooth() {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  }
-
-  function scrollAfterDeselect() {
-    if (window.innerWidth > 980) {
-      scrollToTopSmooth();
-      return;
-    }
-    scrollToFiltersSmooth();
-  }
-
-  function renderActiveFilters() {
-    if (!el.activeFilters) return;
-    el.activeFilters.innerHTML = "";
-
-    const vendorsById = new Map(state.data.vendors.map(v => [v.id, v.name]));
-    const categoriesById = new Map(state.data.categories.map(c => [c.id, c.name]));
-
-    const items = [];
-    for (const id of state.selectedVendors) {
-      const name = vendorsById.get(id);
-      if (name) items.push({ kind: "Вендор", name, id, type: "vendor" });
-    }
-    for (const id of state.selectedCategories) {
-      const name = categoriesById.get(id);
-      if (name) items.push({ kind: "Категория", name, id, type: "category" });
-    }
-
-    if (items.length === 0) {
-      el.activeFilters.style.display = "none";
-      return;
-    }
-    el.activeFilters.style.display = "flex";
-
-    for (const item of items) {
-      const node = document.createElement("div");
-      node.className = "active-filter";
-
-      const text = document.createElement("span");
-      text.innerHTML = `<span class="kind">${item.kind}:</span> ${item.name}`;
-      node.appendChild(text);
-
-      const remove = document.createElement("button");
-      remove.className = "remove";
-      remove.type = "button";
-      remove.setAttribute("aria-label", `Убрать фильтр ${item.name}`);
-      remove.textContent = "×";
-      remove.addEventListener("click", () => {
-        if (item.type === "vendor") state.selectedVendors.delete(item.id);
-        else state.selectedCategories.delete(item.id);
-        render();
-        scrollToFiltersSmooth();
-      });
-      node.appendChild(remove);
-
-      el.activeFilters.appendChild(node);
-    }
-  }
-
   async function loadScopeData(scope) {
     const res = await fetch(`/api/data?scope=${encodeURIComponent(scope)}`);
     state.data = await res.json();
@@ -340,7 +258,6 @@
     el.vendorSearch.value = "";
     el.categorySearch.value = "";
     render();
-    scrollAfterDeselect();
   });
 
   el.modeInfra.addEventListener("click", () => {

templates/index.html

@@ -54,7 +54,6 @@
       <div class="result-head">
         <h3>Вендоры и продукты (после фильтрации)</h3>
       </div>
-      <div id="activeFilters" class="active-filters"></div>
       <div id="resultRows" class="rows"></div>
     </section>
     <div class="credit">