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

myproject/pos/static/pos/css/terminal.css

@@ -32,6 +32,56 @@ body {
   flex-grow: 1;
 }
 
+/* Стили для корзины */
+.cart-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.item-name-price {
+  flex: 1;
+  min-width: 0;
+}
+
+.multiply-sign {
+  font-weight: bold;
+  color: #6c757d;
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.qty-input {
+  width: 50px;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.qty-input::-webkit-outer-spin-button,
+.qty-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.qty-input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.item-total {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #212529;
+  min-width: 60px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
 .product-card {
   cursor: pointer;
   user-select: none;

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';
+    const namePrice = document.createElement('div');
-    nameRow.innerHTML = `
+    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});">
+      <div class="text-muted" style="font-size: 0.75rem;">${formatMoney(item.price)} / шт</div>
-        <i class="bi bi-x"></i>
-      </button>
     `;
     
-    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';
+    const itemTotal = document.createElement('div');
-    minus.innerHTML = '<i class="bi bi-dash"></i>';
+    itemTotal.className = 'item-total';
-    minus.onclick = (e) => { e.stopPropagation(); updateQty(item.id, -1); };
+    itemTotal.textContent = formatMoney(item.price * item.qty);
     
-    const qtySpan = document.createElement('button');
+    // Кнопка удаления
-    qtySpan.className = 'btn btn-outline-secondary disabled';
+    const deleteBtn = document.createElement('button');
-    qtySpan.textContent = item.qty;
+    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');
+    row.appendChild(namePrice);
-    plus.className = 'btn btn-outline-secondary';
+    row.appendChild(multiplySign);
-    plus.innerHTML = '<i class="bi bi-plus"></i>';
+    row.appendChild(qtyInput);
-    plus.onclick = (e) => { e.stopPropagation(); updateQty(item.id, +1); };
+    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;