Переработана корзина: компактный однострочный формат с полем ввода количества

myproject/pos/static/pos/js/terminal.js

@@ -175,50 +175,54 @@ function renderCart() {
   
   cart.forEach(item => {
     const row = document.createElement('div');
-    row.className = 'mb-2 pb-2 border-bottom';
+    row.className = 'cart-item mb-2';
     
-    const nameRow = document.createElement('div');
-    nameRow.className = 'd-flex justify-content-between align-items-start mb-1';
-    nameRow.innerHTML = `
+    // Левая часть: Название и цена единицы
+    const namePrice = document.createElement('div');
+    namePrice.className = 'item-name-price';
+    namePrice.innerHTML = `
       <div class="fw-semibold small">${item.name}</div>
-      <button class="btn btn-sm btn-link text-danger p-0 ms-2" onclick="event.stopPropagation(); removeFromCart(${item.id});">
-        <i class="bi bi-x"></i>
-      </button>
+      <div class="text-muted" style="font-size: 0.75rem;">${formatMoney(item.price)} / шт</div>
     `;
     
-    const controlsRow = document.createElement('div');
-    controlsRow.className = 'd-flex justify-content-between align-items-center';
+    // Знак умножения
+    const multiplySign = document.createElement('span');
+    multiplySign.className = 'multiply-sign';
+    multiplySign.textContent = 'x';
     
-    const controls = document.createElement('div');
-    controls.className = 'btn-group btn-group-sm';
+    // Поле ввода количества
+    const qtyInput = document.createElement('input');
+    qtyInput.type = 'number';
+    qtyInput.className = 'qty-input';
+    qtyInput.value = item.qty;
+    qtyInput.min = 1;
+    qtyInput.onchange = (e) => {
+      const newQty = parseInt(e.target.value) || 1;
+      if (newQty <= 0) {
+        removeFromCart(item.id);
+      } else {
+        cart.get(item.id).qty = newQty;
+        renderCart();
+      }
+    };
     
-    const minus = document.createElement('button');
-    minus.className = 'btn btn-outline-secondary';
-    minus.innerHTML = '<i class="bi bi-dash"></i>';
-    minus.onclick = (e) => { e.stopPropagation(); updateQty(item.id, -1); };
+    // Сумма за позицию
+    const itemTotal = document.createElement('div');
+    itemTotal.className = 'item-total';
+    itemTotal.textContent = formatMoney(item.price * item.qty);
     
-    const qtySpan = document.createElement('button');
-    qtySpan.className = 'btn btn-outline-secondary disabled';
-    qtySpan.textContent = item.qty;
+    // Кнопка удаления
+    const deleteBtn = document.createElement('button');
+    deleteBtn.className = 'btn btn-sm btn-link text-danger p-0';
+    deleteBtn.innerHTML = '<i class="bi bi-x"></i>';
+    deleteBtn.onclick = () => removeFromCart(item.id);
     
-    const plus = document.createElement('button');
-    plus.className = 'btn btn-outline-secondary';
-    plus.innerHTML = '<i class="bi bi-plus"></i>';
-    plus.onclick = (e) => { e.stopPropagation(); updateQty(item.id, +1); };
+    row.appendChild(namePrice);
+    row.appendChild(multiplySign);
+    row.appendChild(qtyInput);
+    row.appendChild(itemTotal);
+    row.appendChild(deleteBtn);
     
-    controls.appendChild(minus);
-    controls.appendChild(qtySpan);
-    controls.appendChild(plus);
-    
-    const priceDiv = document.createElement('div');
-    priceDiv.className = 'text-end small';
-    priceDiv.innerHTML = `<strong>${formatMoney(item.price * item.qty)}</strong>`;
-    
-    controlsRow.appendChild(controls);
-    controlsRow.appendChild(priceDiv);
-    
-    row.appendChild(nameRow);
-    row.appendChild(controlsRow);
     list.appendChild(row);
     
     total += item.qty * item.price;