Update app.py

app.py

@@ -150,11 +150,10 @@ def load_data():
         if 'categories' not in data: data['categories'] = []
         if 'orders' not in data: data['orders'] = {}
 
-        # 1. Ensure categories are in dictionary format with subcategories (Migration)
         if 'categories' in data:
             new_categories = []
             for cat in data['categories']:
-                if isinstance(cat, str): # Old flat structure migration
+                if isinstance(cat, str):
                     new_categories.append({'name': cat, 'subcategories': []})
                 elif isinstance(cat, dict) and 'name' in cat:
                     if 'subcategories' not in cat or not isinstance(cat['subcategories'], list):
@@ -166,13 +165,12 @@ def load_data():
         else:
              data['categories'] = []
 
-        # 2. Ensure products have 'prices' and 'subcategory' field
         for product in data['products']:
              if 'subcategory' not in product:
                   product['subcategory'] = 'Без подкатегории'
 
              if 'prices' not in product or not isinstance(product['prices'], list):
-                  if 'price' in product: # Convert old 'price' to new 'prices' structure
+                  if 'price' in product:
                       product['prices'] = [{'type': 'шт', 'value': product.pop('price')}]
                   else:
                       product['prices'] = []
@@ -205,7 +203,6 @@ def load_data():
             if 'categories' not in data: data['categories'] = []
             if 'orders' not in data: data['orders'] = {}
 
-            # Apply same structure fixes after download
             if 'categories' in data:
                 new_categories = []
                 for cat in data['categories']:
@@ -293,13 +290,36 @@ CATALOG_TEMPLATE = '''
             .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #e0e0e0; }
             .header h1 { font-size: 1.8rem; font-weight: 600; color: #e3a84f; }
             .store-address { padding: 15px; text-align: center; background-color: #f9f9f9; margin: 20px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); font-size: 1rem; color: #666; }
-            .filters-container { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
+            .filters-container { margin: 20px 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }
+            #main-category-filters, #subcategory-filters {
+                width: 100%; 
+                max-width: 1000px; 
+                display: flex; 
+                flex-wrap: wrap; 
+                gap: 10px; 
+                justify-content: center;
+            }
+            #main-category-filters {
+                padding-bottom: 10px;
+                border-bottom: 1px solid #e0e0e0;
+            }
+            #subcategory-filters {
+                padding-top: 10px;
+            }
+            .subcategory-group {
+                display: flex; 
+                flex-wrap: wrap;
+                gap: 10px;
+                justify-content: center;
+            }
             .search-container { margin: 20px 0; text-align: center; }
             #search-input { width: 90%; max-width: 600px; padding: 12px 18px; font-size: 1rem; border: 1px solid #e0e0e0; border-radius: 25px; outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.03); transition: all 0.3s ease; }
             #search-input:focus { border-color: #e3a84f; box-shadow: 0 0 0 3px rgba(227, 168, 79, 0.15); }
             .category-filter { padding: 8px 16px; border: 1px solid #e0e0e0; border-radius: 20px; background-color: #fff; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9rem; font-weight: 400; color: #c89345; white-space: nowrap;}
-            .category-filter.subcategory-filter { font-size: 0.8rem; padding: 6px 12px; }
+            .category-filter.main-cat-btn { font-weight: 600; }
+            .category-filter.subcategory-filter { font-size: 0.8rem; padding: 6px 12px; background-color: #f5f5f5; color: #666; border-color: #f5f5f5; }
             .category-filter.active, .category-filter:hover { background-color: #e3a84f; color: white; border-color: #e3a84f; box-shadow: 0 2px 10px rgba(227, 168, 79, 0.2); }
+            .category-filter.subcategory-filter.active, .category-filter.subcategory-filter:hover { background-color: #e3a84f; color: white; border-color: #e3a84f; }
             .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; padding: 10px; }
             @media (min-width: 600px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
             @media (min-width: 900px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
@@ -367,13 +387,25 @@ CATALOG_TEMPLATE = '''
             <div class="store-address">Наш адрес: {{ store_address }}</div>
 
             <div class="filters-container">
-                <button class="category-filter active" data-category="all" data-subcategory="all">Все категории</button>
-                {% for category_obj in categories_data %}
-                    <button class="category-filter" data-category="{{ category_obj.name }}" data-subcategory="all">{{ category_obj.name }}</button>
-                    {% for subcategory in category_obj.subcategories %}
-                         <button class="category-filter subcategory-filter" data-category="{{ category_obj.name }}" data-subcategory="{{ subcategory }}">{{ subcategory }}</button>
+                <div id="main-category-filters">
+                    <button class="category-filter active" data-category="all" data-subcategory="all">Все категории</button>
+                    {% for category_obj in categories_data %}
+                        <button class="category-filter main-cat-btn" data-category="{{ category_obj.name }}" data-subcategory="all">{{ category_obj.name }}</button>
                     {% endfor %}
-                {% endfor %}
+                </div>
+
+                <div id="subcategory-filters" style="display: none;">
+                    {% for category_obj in categories_data %}
+                        {% if category_obj.subcategories %}
+                            <div class="subcategory-group" data-parent-category="{{ category_obj.name }}" style="display: none;">
+                                <span style="font-size: 0.9rem; color: #999; margin-right: 10px; padding: 6px 0;">Подкатегории {{ category_obj.name }}:</span>
+                                {% for subcategory in category_obj.subcategories %}
+                                     <button class="category-filter subcategory-filter" data-category="{{ category_obj.name }}" data-subcategory="{{ subcategory }}">{{ subcategory }}</button>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+                </div>
             </div>
 
             <div class="search-container">
@@ -826,8 +858,35 @@ CATALOG_TEMPLATE = '''
                      grid.appendChild(p);
                  }
             }
+            
+            function updateSubcategoryVisibility(activeCategory) {
+                const subcategoryContainer = document.getElementById('subcategory-filters');
+                
+                if (activeCategory === 'all') {
+                    subcategoryContainer.style.display = 'none';
+                    document.querySelectorAll('.subcategory-group').forEach(group => group.style.display = 'none');
+                    return;
+                }
+
+                let found = false;
+                document.querySelectorAll('.subcategory-group').forEach(group => {
+                    if (group.dataset.parentCategory === activeCategory) {
+                        group.style.display = 'flex'; 
+                        found = true;
+                    } else {
+                        group.style.display = 'none';
+                    }
+                });
+                
+                if (found) {
+                     subcategoryContainer.style.display = 'flex';
+                } else {
+                     subcategoryContainer.style.display = 'none';
+                }
+            }
+
 
-             function setupFilters() {
+            function setupFilters() {
                  const searchInput = document.getElementById('search-input');
                  const categoryFilters = document.querySelectorAll('.category-filter');
 
@@ -837,9 +896,15 @@ CATALOG_TEMPLATE = '''
                      filter.addEventListener('click', function() {
                          categoryFilters.forEach(f => f.classList.remove('active'));
                          this.classList.add('active');
+                         
+                         const activeCategory = this.dataset.category;
+                         updateSubcategoryVisibility(activeCategory);
+                         
                          filterProducts();
                      });
                  });
+                 
+                 updateSubcategoryVisibility('all');
                  filterProducts();
              }
 
@@ -949,9 +1014,8 @@ PRODUCT_DETAIL_TEMPLATE = '''
         </div>
     </div>
     <style>
-        /* Add Swiper Modal Specific Styles if needed */
          #productModal .swiper-button-next, #productModal .swiper-button-prev {
-             color: #e3a84f; /* Ensure modal navigation buttons match new color */
+             color: #e3a84f;
          }
     </style>
 '''
@@ -1486,15 +1550,12 @@ ADMIN_TEMPLATE = '''
                 const selectedCategory = categorySelect.value;
                 const subcategories = categorySubcategoryMap[selectedCategory] || [];
                 
-                // Determine the initial subcategory value for edit forms
                 let currentSubcategory = 'Без подкатегории';
                 if (categorySelect.dataset.initialSubcategory) {
                      currentSubcategory = categorySelect.dataset.initialSubcategory;
-                     // Clear the data attribute after using it once, so manual changes don't get overwritten
                      delete categorySelect.dataset.initialSubcategory; 
                 }
                 
-                // If the main category changed, reset the current subcategory selection check
                 if (categorySelect.value !== selectedCategory) {
                     currentSubcategory = 'Без подкатегории';
                 }
@@ -1517,14 +1578,11 @@ ADMIN_TEMPLATE = '''
                 if (formContainer) {
                     formContainer.style.display = formContainer.style.display === 'none' || formContainer.style.display === '' ? 'block' : 'none';
                     if (formContainer.style.display === 'block') {
-                        // Re-initialize subcategory select on opening the edit form
                         const index = formId.split('-').pop();
                         const catSelect = document.getElementById(`edit_category_${index}`);
                         if (catSelect) {
-                             // Use the data attribute to restore the saved subcategory
-                             const initialSubcategory = catSelect.getAttribute('data-initial-subcategory');
-                             updateSubcategorySelect(`edit_category_${index}`, `edit_subcategory_${index}`, initialSubcategory);
-                             // Re-attach listener if not already done via onchange attribute
+                            const initialSubcategory = catSelect.getAttribute('data-initial-subcategory');
+                            updateSubcategorySelect(`edit_category_${index}`, `edit_subcategory_${index}`, initialSubcategory);
                         }
                     }
                 }
@@ -1597,14 +1655,12 @@ ADMIN_TEMPLATE = '''
                      addPriceInput('add-price-inputs');
                  }
                  
-                 // Setup for ADD form
                  const addCatSelect = document.getElementById('add_category');
                  if (addCatSelect) {
                      updateSubcategorySelect('add_category', 'add_subcategory');
                      addCatSelect.addEventListener('change', () => updateSubcategorySelect('add_category', 'add_subcategory'));
                  }
                  
-                 // Initial setup for all EDIT forms (only run if the form is already open, otherwise done when opening via toggleEditForm)
                  document.querySelectorAll('[id^="edit-form-"]').forEach(formContainer => {
                      if (formContainer.style.display === 'block') {
                         const index = formContainer.id.split('-').pop();