Update app.py

app.py

@@ -132,6 +132,8 @@ def load_data():
     for product in data['products']:
         if 'product_id' not in product:
             product['product_id'] = uuid4().hex
+        if 'pieces_per_box' not in product:
+            product['pieces_per_box'] = 1
             
     if not os.path.exists(DATA_FILE):
         try:
@@ -195,12 +197,16 @@ CATALOG_TEMPLATE = '''
         .product-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 5px 0; }
         .product-title { font-size: 0.95rem; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
         .product-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-        .product-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
+        .product-box-info { font-size: 0.8rem; color: #00b894; margin-top: 4px; font-weight: 600; }
+        .product-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; gap: 10px; }
         .product-price { font-weight: 700; font-size: 1rem; color: var(--primary); }
+        .controls-wrapper { display: flex; gap: 8px; align-items: center; }
         .quantity-control { display: flex; align-items: center; background: var(--bg); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
         .quantity-control button { border: none; background: transparent; width: 32px; height: 32px; font-size: 1.1rem; cursor: pointer; color: var(--primary); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
         .quantity-control button:active { background: #e0e0e0; }
         .quantity-control input { width: 36px; height: 32px; border: none; text-align: center; background: transparent; font-weight: 600; font-size: 0.95rem; pointer-events: none; color: var(--primary); }
+        .box-btn { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 0 10px; height: 32px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
+        .box-btn:active { opacity: 0.8; }
         
         .cart-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--surface); box-shadow: 0 -4px 20px rgba(0,0,0,0.06); padding: 15px 20px calc(15px + env(safe-area-inset-bottom)); display: none; justify-content: space-between; align-items: center; z-index: 100; border-top-left-radius: 20px; border-top-right-radius: 20px; }
         .cart-info { display: flex; flex-direction: column; }
@@ -221,9 +227,15 @@ CATALOG_TEMPLATE = '''
         .customer-form input:focus { border-color: var(--primary); background: var(--surface); }
 
         .cart-item-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
-        .cart-item { display: flex; justify-content: space-between; align-items: center; background: var(--bg); padding: 15px; border-radius: 12px; }
-        .cart-item-name { flex-grow: 1; font-size: 0.95rem; font-weight: 500; line-height: 1.3; margin-right: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-        .cart-item-price { font-weight: 700; white-space: nowrap; color: var(--primary); }
+        .cart-item { display: flex; justify-content: space-between; align-items: center; background: var(--bg); padding: 15px; border-radius: 12px; flex-wrap: wrap; gap: 10px; }
+        .cart-item-name { flex: 1; min-width: 120px; font-size: 0.95rem; font-weight: 500; line-height: 1.3; }
+        .cart-item-controls { display: flex; align-items: center; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); overflow: hidden; }
+        .cart-item-controls button { border: none; background: transparent; width: 30px; height: 30px; font-size: 1rem; cursor: pointer; color: var(--primary); }
+        .cart-item-controls button:active { background: #e0e0e0; }
+        .cart-item-controls span { width: 35px; text-align: center; font-weight: 600; font-size: 0.9rem; }
+        .cart-item-price { font-weight: 700; color: var(--primary); min-width: 70px; text-align: right; }
+        .cart-item-delete { color: #ff7675; background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 5px; }
+        
         .confirm-btn { background: var(--accent); color: #fff; width: 100%; padding: 16px; border: none; border-radius: 14px; font-size: 1.1rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(37,211,102,0.3); }
 
         .gallery-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 300; justify-content: center; align-items: center; flex-direction: column; }
@@ -391,8 +403,19 @@ CATALOG_TEMPLATE = '''
             }
         }
 
+        function formatQtyText(qty, ppb) {
+            ppb = parseInt(ppb) || 1;
+            if (ppb > 1 && qty >= ppb) {
+                let boxes = Math.floor(qty / ppb);
+                let remainder = qty % ppb;
+                return `${boxes} кор.` + (remainder > 0 ? ` ${remainder} шт.` : '');
+            }
+            return `${qty} шт.`;
+        }
+
         function renderProductCard(p, container) {
             const qty = cart[p.product_id] ? cart[p.product_id].quantity : 0;
+            const ppb = parseInt(p.pieces_per_box) || 1;
             const hasPhotos = p.photos && p.photos.length > 0;
             const photoUrl = hasPhotos 
                 ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${p.photos[0]}` 
@@ -401,6 +424,8 @@ CATALOG_TEMPLATE = '''
             const photoIndicator = hasPhotos && p.photos.length > 1 ? `<div class="photo-count"><i class="fas fa-images"></i> ${p.photos.length}</div>` : '';
             const imgClick = hasPhotos ? `onclick="openGallery('${p.product_id}')"` : '';
             const descHtml = p.description ? `<div class="product-desc">${p.description}</div>` : '';
+            const boxInfoHtml = ppb > 1 ? `<div class="product-box-info">В коробке: ${ppb} шт</div>` : '';
+            const addBoxBtn = ppb > 1 ? `<button class="box-btn" onclick="updateCart('${p.product_id}', ${ppb})">+ Коробка</button>` : '';
 
             const div = document.createElement('div');
             div.className = 'product-card';
@@ -413,13 +438,17 @@ CATALOG_TEMPLATE = '''
                     <div>
                         <div class="product-title">${p.name}</div>
                         ${descHtml}
+                        ${boxInfoHtml}
                     </div>
                     <div class="product-bottom">
                         <div class="product-price">${p.price} ${currency}</div>
-                        <div class="quantity-control">
-                            <button onclick="updateCart('${p.product_id}', -1)"><i class="fas fa-minus" style="font-size:0.8rem;"></i></button>
-                            <input type="text" id="qty-${p.product_id}" value="${qty}" readonly>
-                            <button onclick="updateCart('${p.product_id}', 1)"><i class="fas fa-plus" style="font-size:0.8rem;"></i></button>
+                        <div class="controls-wrapper">
+                            ${addBoxBtn}
+                            <div class="quantity-control">
+                                <button onclick="updateCart('${p.product_id}', -1)"><i class="fas fa-minus" style="font-size:0.8rem;"></i></button>
+                                <input type="text" id="qty-${p.product_id}" value="${qty}" readonly>
+                                <button onclick="updateCart('${p.product_id}', 1)"><i class="fas fa-plus" style="font-size:0.8rem;"></i></button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -444,7 +473,7 @@ CATALOG_TEMPLATE = '''
             }
         }
 
-        function updateCart(productId, change) {
+        function updateCart(productId, change, exactValue = null) {
             const product = products.find(p => p.product_id === productId);
             if (!product) return;
 
@@ -452,13 +481,19 @@ CATALOG_TEMPLATE = '''
                 cart[productId] = { ...product, quantity: 0 };
             }
 
-            cart[productId].quantity += change;
+            if (exactValue !== null) {
+                cart[productId].quantity = exactValue;
+            } else {
+                cart[productId].quantity += change;
+            }
 
             if (cart[productId].quantity <= 0) {
                 delete cart[productId];
-                document.getElementById(`qty-${productId}`).value = 0;
+                const qtyInput = document.getElementById(`qty-${productId}`);
+                if (qtyInput) qtyInput.value = 0;
             } else {
-                document.getElementById(`qty-${productId}`).value = cart[productId].quantity;
+                const qtyInput = document.getElementById(`qty-${productId}`);
+                if (qtyInput) qtyInput.value = cart[productId].quantity;
             }
 
             updateCartUI();
@@ -478,21 +513,43 @@ CATALOG_TEMPLATE = '''
                 cartBar.style.display = 'none';
                 closeCartModal();
             }
+
+            if (document.getElementById('cartModal').classList.contains('active')) {
+                renderCartModalItems();
+            }
         }
 
-        function openCartModal() {
+        function renderCartModalItems() {
             const list = document.getElementById('cartItemList');
             list.innerHTML = '';
             
             for (let id in cart) {
                 const item = cart[id];
+                const ppb = parseInt(item.pieces_per_box) || 1;
+                const formattedQty = formatQtyText(item.quantity, ppb);
+                
                 list.innerHTML += `
                     <div class="cart-item">
-                        <div class="cart-item-name">${item.name}</div>
-                        <div class="cart-item-price">${item.quantity} x ${item.price} ${currency}</div>
+                        <div class="cart-item-name">
+                            ${item.name}
+                            <div style="font-size: 0.8rem; color: #00b894; margin-top:2px;">${formattedQty}</div>
+                        </div>
+                        <div style="display:flex; align-items:center; gap: 10px;">
+                            <div class="cart-item-controls">
+                                <button onclick="updateCart('${id}', -1)"><i class="fas fa-minus" style="font-size:0.8rem;"></i></button>
+                                <span>${item.quantity}</span>
+                                <button onclick="updateCart('${id}', 1)"><i class="fas fa-plus" style="font-size:0.8rem;"></i></button>
+                            </div>
+                            <button class="cart-item-delete" onclick="updateCart('${id}', 0, 0)"><i class="fas fa-trash-alt"></i></button>
+                        </div>
+                        <div class="cart-item-price">${item.price * item.quantity} ${currency}</div>
                     </div>
                 `;
             }
+        }
+
+        function openCartModal() {
+            renderCartModalItems();
             const modal = document.getElementById('cartModal');
             modal.style.display = 'flex';
             setTimeout(() => modal.classList.add('active'), 10);
@@ -617,7 +674,7 @@ ORDER_TEMPLATE = '''
     <title>Накладная №{{ order.id }}</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
-        :root { --bg: #f4f6f8; --surface: #ffffff; --text: #2d3436; --border: #dfe6e9; --wa: #25D366; --print: #1e272e; }
+        :root { --bg: #f4f6f8; --surface: #ffffff; --text: #2d3436; --border: #dfe6e9; --wa: #25D366; --print: #1e272e; --primary: #1a1a1a; }
         * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
         body { margin: 0; padding: max(20px, env(safe-area-inset-top)) 20px calc(100px + env(safe-area-inset-bottom)); background: var(--bg); display: flex; flex-direction: column; align-items: center; color: var(--text); }
         .invoice-box { background: var(--surface); width: 100%; max-width: 900px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border-radius: 16px; }
@@ -628,13 +685,20 @@ ORDER_TEMPLATE = '''
         .customer-details span { font-weight: 600; color: #1a1a1a; }
         
         .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; border-radius: 8px; border: 1px solid var(--border); }
-        table { width: 100%; border-collapse: collapse; min-width: 500px; }
+        table { width: 100%; border-collapse: collapse; min-width: 600px; }
         th, td { border-bottom: 1px solid var(--border); padding: 12px; text-align: center; font-size: 0.95rem; }
         th { background: #fafafa; font-weight: 700; color: #636e72; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; }
         .img-cell img { width: 45px; height: 45px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; }
         .total-row { background: #fafafa; font-weight: 800; }
         .total-row td { font-size: 1.1rem; border-bottom: none; }
         
+        .qty-info { font-size: 0.8rem; color: #00b894; font-weight: 600; margin-top: 4px; display: block; }
+        
+        .action-btns { display: flex; align-items: center; justify-content: center; gap: 5px; }
+        .edit-btn { background: #f1f2f6; border: 1px solid var(--border); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--primary); display: flex; align-items: center; justify-content: center; }
+        .edit-btn:active { background: #dfe6e9; }
+        .delete-btn { color: #ff7675; }
+        
         .action-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--surface); box-shadow: 0 -4px 20px rgba(0,0,0,0.08); padding: 15px 20px calc(15px + env(safe-area-inset-bottom)); display: flex; gap: 15px; z-index: 100; justify-content: center; border-top-left-radius: 20px; border-top-right-radius: 20px; }
         .action-bar-inner { display: flex; gap: 15px; width: 100%; max-width: 900px; }
         .btn { flex: 1; padding: 15px 10px; border-radius: 12px; border: none; font-size: 1rem; font-weight: 700; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.2s; white-space: nowrap; }
@@ -643,13 +707,15 @@ ORDER_TEMPLATE = '''
         .btn-print { background: var(--print); }
         .btn-home { background: #0984e3; box-shadow: 0 4px 15px rgba(9,132,227,0.3); flex: 0 0 auto; padding: 15px 20px; }
         
+        #loadingOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 999; justify-content: center; align-items: center; font-size: 2rem; color: var(--primary); }
+
         @media print {
             body { background: #fff; padding: 0; }
             .invoice-box { box-shadow: none; padding: 0; max-width: 100%; border-radius: 0; }
             .table-responsive { border: none; overflow: visible; }
             table { min-width: 100%; }
             th, td { border: 1px solid #000; }
-            .action-bar { display: none; }
+            .action-bar, .no-print { display: none !important; }
         }
         @media (max-width: 600px) {
             .header h1 { font-size: 1.4rem; }
@@ -661,6 +727,7 @@ ORDER_TEMPLATE = '''
     </style>
 </head>
 <body>
+    <div id="loadingOverlay"><i class="fas fa-spinner fa-spin"></i></div>
     <div class="invoice-box">
         <div style="text-align: center; margin-bottom: 25px;">
             <img src="{{ logo_url }}" style="max-height: 80px; max-width: 100%; object-fit: contain;">
@@ -691,23 +758,43 @@ ORDER_TEMPLATE = '''
                         <th style="text-align: left;">Наименование</th>
                         <th>Фото</th>
                         <th>Кол-во</th>
+                        <th class="no-print">Действия</th>
                         <th>Цена</th>
                         <th>Сумма</th>
                     </tr>
                 </thead>
                 <tbody>
                     {% for item in order.cart %}
+                    {% set ppb = item.pieces_per_box|default(1)|int %}
+                    {% set boxes = (item.quantity / ppb)|round(0, 'floor')|int %}
+                    {% set remainder = item.quantity % ppb %}
                     <tr>
                         <td>{{ loop.index }}</td>
-                        <td style="text-align: left; font-weight: 500;">{{ item.name }}</td>
+                        <td style="text-align: left; font-weight: 500;">
+                            {{ item.name }}
+                            <span class="qty-info">
+                            {% if ppb > 1 and boxes > 0 %}
+                                {{ boxes }} кор.{% if remainder > 0 %} {{ remainder }} шт.{% endif %}
+                            {% else %}
+                                {{ item.quantity }} шт.
+                            {% endif %}
+                            </span>
+                        </td>
                         <td class="img-cell"><img src="{{ item.photo_url }}" alt="img"></td>
-                        <td>{{ item.quantity }}</td>
+                        <td style="font-weight: bold;">{{ item.quantity }}</td>
+                        <td class="no-print">
+                            <div class="action-btns">
+                                <button class="edit-btn" onclick="updateItem('{{ item.product_id }}', -1)"><i class="fas fa-minus" style="font-size:0.7rem;"></i></button>
+                                <button class="edit-btn" onclick="updateItem('{{ item.product_id }}', 1)"><i class="fas fa-plus" style="font-size:0.7rem;"></i></button>
+                                <button class="edit-btn delete-btn" onclick="updateItem('{{ item.product_id }}', 0, true)"><i class="fas fa-trash"></i></button>
+                            </div>
+                        </td>
                         <td>{{ item.price }}</td>
                         <td>{{ item.price * item.quantity }}</td>
                     </tr>
                     {% endfor %}
                     <tr class="total-row">
-                        <td colspan="5" style="text-align: right; padding-right: 20px;">Итого:</td>
+                        <td colspan="6" style="text-align: right; padding-right: 20px;">Итого:</td>
                         <td>{{ order.total_price }} {{ currency_code }}</td>
                     </tr>
                 </tbody>
@@ -728,6 +815,28 @@ ORDER_TEMPLATE = '''
             let msg = `Здравствуйте! Мой заказ №{{ order.id }}\nНакладная: ${window.location.href}`;
             window.open(`https://api.whatsapp.com/send?phone={{ whatsapp_number }}&text=${encodeURIComponent(msg)}`, '_blank');
         }
+
+        function updateItem(productId, change, isRemove = false) {
+            document.getElementById('loadingOverlay').style.display = 'flex';
+            fetch(`/edit_order/{{ order.id }}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ product_id: productId, change: change, remove: isRemove })
+            })
+            .then(r => r.json())
+            .then(data => {
+                if(data.success) {
+                    window.location.reload();
+                } else {
+                    alert('Ошибка обновления');
+                    document.getElementById('loadingOverlay').style.display = 'none';
+                }
+            })
+            .catch(() => {
+                alert('Произошла ошибка');
+                document.getElementById('loadingOverlay').style.display = 'none';
+            });
+        }
     </script>
 </body>
 </html>
@@ -870,6 +979,7 @@ ADMIN_TEMPLATE = '''
                         <div class="form-row">
                             <input type="text" name="name" placeholder="Название товара" required autocomplete="off" style="flex:2;">
                             <input type="number" name="price" placeholder="Цена" required step="0.01" style="flex:1;">
+                            <input type="number" name="pieces_per_box" placeholder="В коробке (шт)" value="1" min="1" required style="flex:1;">
                         </div>
                         <textarea name="description" placeholder="Описание товара (необязательно)"></textarea>
                         <div class="file-input-wrapper">
@@ -894,7 +1004,7 @@ ADMIN_TEMPLATE = '''
                                 {% if product.description %}
                                 <span class="product-desc">{{ product.description[:50] }}{{ '...' if product.description|length > 50 else '' }}</span>
                                 {% endif %}
-                                <span class="product-meta">{{ product.price }} {{ currency_code }} • Фото: {{ product.photos|length if product.photos else 0 }}/10</span>
+                                <span class="product-meta">{{ product.price }} {{ currency_code }} • В коробке: {{ product.pieces_per_box|default(1) }} шт • Фото: {{ product.photos|length if product.photos else 0 }}/10</span>
                             </div>
                         </div>
                         <div class="product-actions">
@@ -914,6 +1024,7 @@ ADMIN_TEMPLATE = '''
                                 <div class="form-row">
                                     <input type="text" name="name" value="{{ product.name }}" required autocomplete="off" style="flex:2;">
                                     <input type="number" name="price" value="{{ product.price }}" required step="0.01" style="flex:1;">
+                                    <input type="number" name="pieces_per_box" value="{{ product.pieces_per_box|default(1) }}" min="1" required style="flex:1;">
                                 </div>
                                 <textarea name="description">{{ product.description }}</textarea>
                                 <div class="file-input-wrapper">
@@ -1034,9 +1145,11 @@ def create_order():
     processed_cart = []
     for item in cart_items:
         processed_cart.append({
+            "product_id": item.get('product_id'),
             "name": item['name'],
             "price": float(item['price']),
             "quantity": int(item['quantity']),
+            "pieces_per_box": int(item.get('pieces_per_box', 1)),
             "photo_url": f"https://huggingface.co/datasets/{REPO_ID}/resolve/main/photos/{item['photos'][0]}" if item.get('photos') else "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjBmMHcwIi8+PC9zdmc+"
         })
 
@@ -1073,6 +1186,33 @@ def view_order(order_id):
         logo_url=LOGO_URL
     )
 
+@app.route('/edit_order/<order_id>', methods=['POST'])
+def edit_order(order_id):
+    data = load_data()
+    order = data.get('orders', {}).get(order_id)
+    if not order:
+        return jsonify({"success": False, "error": "Order not found"}), 404
+
+    req_data = request.get_json()
+    product_id = req_data.get('product_id')
+    change = req_data.get('change', 0)
+    remove = req_data.get('remove', False)
+
+    for item in order['cart']:
+        if item.get('product_id') == product_id:
+            if remove:
+                order['cart'].remove(item)
+            else:
+                item['quantity'] += change
+                if item['quantity'] <= 0:
+                    order['cart'].remove(item)
+            break
+
+    order['total_price'] = sum(float(i['price']) * int(i['quantity']) for i in order['cart'])
+    save_data(data)
+    
+    return jsonify({"success": True, "total_price": order['total_price']})
+
 @app.route('/admin', methods=['GET', 'POST'])
 def admin():
     data = load_data()
@@ -1100,6 +1240,7 @@ def admin():
         elif action == 'add_product':
             name = request.form.get('name', '').strip()
             price = float(request.form.get('price', 0))
+            pieces_per_box = int(request.form.get('pieces_per_box', 1))
             description = request.form.get('description', '').strip()
             category = request.form.get('category')
             uploaded_photos = request.files.getlist('photos')[:10]
@@ -1136,6 +1277,7 @@ def admin():
                 'product_id': uuid4().hex,
                 'name': name,
                 'price': price,
+                'pieces_per_box': pieces_per_box,
                 'description': description,
                 'category': category,
                 'photos': photos_list
@@ -1148,6 +1290,7 @@ def admin():
             pid = request.form.get('product_id')
             name = request.form.get('name', '').strip()
             price = float(request.form.get('price', 0))
+            pieces_per_box = int(request.form.get('pieces_per_box', 1))
             description = request.form.get('description', '').strip()
             uploaded_photos = request.files.getlist('photos')[:10]
 
@@ -1183,6 +1326,7 @@ def admin():
                 if p.get('product_id') == pid:
                     p['name'] = name
                     p['price'] = price
+                    p['pieces_per_box'] = pieces_per_box
                     p['description'] = description
                     if photos_list:
                         p['photos'] = photos_list
@@ -1223,4 +1367,4 @@ if __name__ == '__main__':
         threading.Thread(target=periodic_backup, daemon=True).start()
 
     port = int(os.environ.get('PORT', 7860))
-    app.run(host='0.0.0.0', port=port)
+    app.run(host='0.0.0.0', port=port)