From bb51a72f4c43a8a3d4fa127f37153c35818fcf99 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Sun, 16 Nov 2025 14:09:59 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=B1=D0=BB=D0=BE=D0=BA=20=D0=BA=D0=B0=D1=82=D0=B5?=
 =?UTF-8?q?=D0=B3=D0=BE=D1=80=D0=B8=D0=B9=20=D0=B2=20POS-=D1=82=D0=B5?=
 =?UTF-8?q?=D1=80=D0=BC=D0=B8=D0=BD=D0=B0=D0=BB:=20=D0=BA=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BF=D0=B0=D0=BA=D1=82=D0=BD=D1=8B=D0=B5=20=D0=BA=D0=B0=D1=80?=
 =?UTF-8?q?=D1=82=D0=BE=D1=87=D0=BA=D0=B8=20=D1=81=20=D1=84=D0=B8=D0=BB?=
 =?UTF-8?q?=D1=8C=D1=82=D1=80=D0=B0=D1=86=D0=B8=D0=B5=D0=B9=20=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=80=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 myproject/pos/static/pos/css/terminal.css | 58 +++++++++++++++++++++--
 myproject/pos/static/pos/js/terminal.js   | 54 ++++++++++++++++++++-
 myproject/pos/templates/pos/terminal.html | 22 ++++-----
 3 files changed, 115 insertions(+), 19 deletions(-)

diff --git a/myproject/pos/static/pos/css/terminal.css b/myproject/pos/static/pos/css/terminal.css
index 52669a3..549e024 100644
--- a/myproject/pos/static/pos/css/terminal.css
+++ b/myproject/pos/static/pos/css/terminal.css
@@ -4,9 +4,22 @@ body {
   background-color: #e9ecef;
 }
 
+/* Основной контейнер POS */
+.pos-main-container {
+  position: fixed;
+  top: 56px; /* высота navbar */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  box-shadow: 0 0 20px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
 .pos-container {
   max-width: 100%;
-  padding: 0 1rem;
+  padding: 1rem;
+  height: 100%;
 }
 
 .product-card {
@@ -52,17 +65,54 @@ body {
   font-style: italic;
 }
 
+/* Карточки категорий */
+.category-card {
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s;
+  border-radius: 12px;
+  border: 2px solid #dee2e6;
+  background: white;
+  height: 100%;
+  min-height: 40px;
+}
+
+.category-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  border-color: #0d6efd;
+}
+
+.category-card.active {
+  background: #0d6efd;
+  border-color: #0d6efd;
+  color: white;
+}
+
+.category-card .card-body {
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.category-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
 /* Фиксация правой панели (корзина + кнопки) */
 .right-panel-fixed {
-  position: fixed;
-  top: 56px; /* высота navbar */
+  position: absolute;
+  top: 0;
   right: 0;
   bottom: 0;
   width: 33.333%; /* 4/12 колонок */
   overflow-y: auto;
   padding: 1rem;
   padding-right: 1.5rem;
-  z-index: 100;
+  z-index: 10;
   display: flex;
   flex-direction: column;
 }
diff --git a/myproject/pos/static/pos/js/terminal.js b/myproject/pos/static/pos/js/terminal.js
index 3bc0efc..234be72 100644
--- a/myproject/pos/static/pos/js/terminal.js
+++ b/myproject/pos/static/pos/js/terminal.js
@@ -10,6 +10,57 @@ function formatMoney(v) {
   return (Number(v)).toFixed(2);
 }
 
+function renderCategories() {
+  const grid = document.getElementById('categoryGrid');
+  grid.innerHTML = '';
+  
+  // Кнопка "Все"
+  const allCol = document.createElement('div');
+  allCol.className = 'col-6 col-sm-4 col-md-3 col-lg-2';
+  const allCard = document.createElement('div');
+  allCard.className = 'card category-card' + (currentCategoryId === null ? ' active' : '');
+  allCard.onclick = () => {
+    currentCategoryId = null;
+    renderCategories();
+    renderProducts();
+  };
+  const allBody = document.createElement('div');
+  allBody.className = 'card-body';
+  const allName = document.createElement('div');
+  allName.className = 'category-name';
+  allName.textContent = 'Все товары';
+  allBody.appendChild(allName);
+  allCard.appendChild(allBody);
+  allCol.appendChild(allCard);
+  grid.appendChild(allCol);
+  
+  // Категории
+  CATEGORIES.forEach(cat => {
+    const col = document.createElement('div');
+    col.className = 'col-6 col-sm-4 col-md-3 col-lg-2';
+    
+    const card = document.createElement('div');
+    card.className = 'card category-card' + (currentCategoryId === cat.id ? ' active' : '');
+    card.onclick = () => {
+      currentCategoryId = cat.id;
+      renderCategories();
+      renderProducts();
+    };
+    
+    const body = document.createElement('div');
+    body.className = 'card-body';
+    
+    const name = document.createElement('div');
+    name.className = 'category-name';
+    name.textContent = cat.name;
+    
+    body.appendChild(name);
+    card.appendChild(body);
+    col.appendChild(card);
+    grid.appendChild(col);
+  });
+}
+
 function renderProducts() {
   const grid = document.getElementById('productGrid');
   grid.innerHTML = '';
@@ -153,8 +204,6 @@ document.getElementById('scheduleLater').onclick = async () => {
   alert('Функционал будет подключен позже: создание заказа на доставку/самовывоз.');
 };
 
-// Categories removed from this view - can be added as filter dropdown later if needed
-
 // Search functionality
 document.getElementById('searchInput').addEventListener('input', () => {
   renderProducts();
@@ -166,5 +215,6 @@ document.getElementById('customerSelectBtn').addEventListener('click', () => {
 });
 
 // Инициализация
+renderCategories();
 renderProducts();
 renderCart();
diff --git a/myproject/pos/templates/pos/terminal.html b/myproject/pos/templates/pos/terminal.html
index 3eef208..aa28295 100644
--- a/myproject/pos/templates/pos/terminal.html
+++ b/myproject/pos/templates/pos/terminal.html
@@ -7,8 +7,9 @@
 {% endblock %}
 
 {% block content %}
-<!-- Main Content -->
-<div class="pos-container">
+<!-- Main POS Container -->
+<div class="pos-main-container">
+  <div class="pos-container">
   <div class="row g-3">
     <!-- Products Grid (Left side - 8/12) -->
     <div class="col-md-8">
@@ -17,6 +18,11 @@
         <input type="text" class="form-control" id="searchInput" placeholder="Поиск по товарам...">
       </div>
       
+      <!-- Categories -->
+      <div class="mb-3">
+        <div class="row g-3" id="categoryGrid"></div>
+      </div>
+      
       <div class="row g-3" id="productGrid"></div>
     </div>
     
@@ -39,16 +45,6 @@
               <h5 class="mb-0">Итого:</h5>
               <h5 class="mb-0 text-primary" id="cartTotal">0.00</h5>
             </div>
-            
-            <div class="mb-3">
-              <label class="form-label small">Способ оплаты</label>
-              <select class="form-select form-select-sm" id="paymentMethod">
-                <option value="cash_to_courier">Наличные</option>
-                <option value="card_to_courier">Карта</option>
-                <option value="online">Онлайн</option>
-                <option value="bank_transfer">Банк. перевод</option>
-              </select>
-            </div>
           </div>
         </div>
       </div>
@@ -102,8 +98,8 @@
       </div>
     </div>
   </div>
+  </div>
 </div>
-
 {% endblock %}
 
 {% block extra_js %}