115 lines
4.3 KiB
HTML
115 lines
4.3 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% block title %}POS Terminal{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{% static 'pos/css/terminal.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Main POS Container -->
|
|
<div class="pos-main-container">
|
|
<div class="pos-container">
|
|
<div class="row g-3" style="height: 100%;">
|
|
<!-- Products Grid (Left side - 8/12) -->
|
|
<div class="col-md-8" style="display: flex; flex-direction: column; height: 100%;">
|
|
<!-- Search Box -->
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Поиск по товарам...">
|
|
</div>
|
|
|
|
<!-- Categories -->
|
|
<div class="mb-3">
|
|
<div class="row g-3" id="categoryGrid"></div>
|
|
</div>
|
|
|
|
<!-- Products Grid (Блок товаров) - Прокручиваемая область -->
|
|
<div class="products-scrollable">
|
|
<div class="row g-3" id="productGrid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel (4/12) - Fixed -->
|
|
<div class="col-md-4">
|
|
<div class="right-panel-fixed d-flex flex-column">
|
|
<!-- Cart Panel -->
|
|
<div class="card mb-2 flex-grow-1" style="min-height: 0;">
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">Корзина</h6>
|
|
<button class="btn btn-outline-primary btn-sm" id="customerSelectBtn">
|
|
<i class="bi bi-person"></i> Выбрать клиента
|
|
</button>
|
|
</div>
|
|
<div class="card-body d-flex flex-column" style="min-height: 0;">
|
|
<div id="cartList" class="flex-grow-1 mb-3" style="overflow-y: auto;"></div>
|
|
|
|
<div class="mt-auto">
|
|
<div class="d-flex justify-content-between align-items-center mb-3 pb-3 border-top pt-3">
|
|
<h5 class="mb-0">Итого:</h5>
|
|
<h5 class="mb-0 text-primary" id="cartTotal">0.00</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons Panel -->
|
|
<div class="card action-buttons-panel">
|
|
<div class="card-body p-2">
|
|
<div class="row g-2">
|
|
<div class="col-4">
|
|
<button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
|
|
</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
|
|
</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
|
|
</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
|
|
</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
|
|
</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button class="btn btn-outline-primary rounded-3 w-100" id="scheduleLater" style="height: 60px;">
|
|
<i class="bi bi-calendar2"></i><br>Отложенный заказ
|
|
</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button class="btn btn-outline-secondary rounded-3 w-100" id="clearCart" style="height: 60px;">
|
|
<i class="bi bi-trash"></i><br>Очистить
|
|
</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
|
|
</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button class="btn btn-success rounded-3 w-100" id="checkoutNow" style="height: 60px;">
|
|
<i class="bi bi-check2-circle"></i><br>Продать
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<!-- Hidden data containers for JavaScript -->
|
|
<script id="categoriesData" type="application/json">{{ categories_json|safe }}</script>
|
|
<script id="itemsData" type="application/json">{{ items_json|safe }}</script>
|
|
|
|
<script src="{% static 'pos/js/terminal.js' %}"></script>
|
|
{% endblock %}
|