From 763ad2ce07d4738a2f08b274b8c0c14d41268f67 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Thu, 20 Nov 2025 10:19:28 +0300
Subject: [PATCH] Add styled +/- quantity controls to POS cart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented intuitive quantity management in the cart with:
- Minus button (-): Decreases quantity by 1, removes item if qty becomes 0
- Plus button (+): Increases quantity by 1
- Quantity input field: Centered, uniform styling with buttons
- All controls styled with Bootstrap outline-secondary (gray) for cohesive look
- Buttons feature Bootstrap Icons (dash-circle, plus-circle) at 1.2em size
- Auto-save to Redis after each quantity change

Benefits:
✅ Faster quantity adjustments without keyboard input
✅ Consistent gray styling across all quantity controls
✅ Mobile-friendly touch targets
✅ Automatic cart persistence maintained

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 myproject/pos/static/pos/js/terminal.js | 46 +++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/myproject/pos/static/pos/js/terminal.js b/myproject/pos/static/pos/js/terminal.js
index 39905de..e6f6cea 100644
--- a/myproject/pos/static/pos/js/terminal.js
+++ b/myproject/pos/static/pos/js/terminal.js
@@ -677,11 +677,35 @@ function renderCart() {
     const multiplySign = document.createElement('span');
     multiplySign.className = 'multiply-sign';
     multiplySign.textContent = 'x';
-    
+
+    // Контейнер для кнопок количества
+    const qtyControl = document.createElement('div');
+    qtyControl.className = 'd-flex align-items-center';
+    qtyControl.style.gap = '2px';
+
+    // Кнопка минус
+    const minusBtn = document.createElement('button');
+    minusBtn.className = 'btn btn-outline-secondary btn-sm';
+    minusBtn.innerHTML = '<i class="bi bi-dash-circle" style="font-size: 1.2em;"></i>';
+    minusBtn.onclick = (e) => {
+      e.preventDefault();
+      const currentQty = cart.get(cartKey).qty;
+      if (currentQty <= 1) {
+        removeFromCart(cartKey);
+      } else {
+        cart.get(cartKey).qty = currentQty - 1;
+        renderCart();
+        saveCartToRedis();
+      }
+    };
+
     // Поле ввода количества
     const qtyInput = document.createElement('input');
     qtyInput.type = 'number';
-    qtyInput.className = 'qty-input';
+    qtyInput.className = 'qty-input form-control form-control-sm';
+    qtyInput.style.width = '60px';
+    qtyInput.style.textAlign = 'center';
+    qtyInput.style.padding = '0.375rem 0.25rem';
     qtyInput.value = item.qty;
     qtyInput.min = 1;
     qtyInput.onchange = (e) => {
@@ -694,6 +718,22 @@ function renderCart() {
         saveCartToRedis(); // Сохраняем в Redis при изменении количества
       }
     };
+
+    // Кнопка плюс
+    const plusBtn = document.createElement('button');
+    plusBtn.className = 'btn btn-outline-secondary btn-sm';
+    plusBtn.innerHTML = '<i class="bi bi-plus-circle" style="font-size: 1.2em;"></i>';
+    plusBtn.onclick = (e) => {
+      e.preventDefault();
+      cart.get(cartKey).qty += 1;
+      renderCart();
+      saveCartToRedis();
+    };
+
+    // Собираем контейнер
+    qtyControl.appendChild(minusBtn);
+    qtyControl.appendChild(qtyInput);
+    qtyControl.appendChild(plusBtn);
     
     // Сумма за позицию
     const itemTotal = document.createElement('div');
@@ -708,7 +748,7 @@ function renderCart() {
     
     row.appendChild(namePrice);
     row.appendChild(multiplySign);
-    row.appendChild(qtyInput);
+    row.appendChild(qtyControl);
     row.appendChild(itemTotal);
     row.appendChild(deleteBtn);