Создано приложение POS с планшетным интерфейсом терминала продаж

This commit is contained in:
2025-11-16 13:38:28 +03:00
parent a073b1aa77
commit 139ac431ee
14 changed files with 406 additions and 3 deletions

View File

@@ -0,0 +1,122 @@
{% 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 Content -->
<div class="pos-container">
<div class="row g-3">
<!-- Products Grid (Left side - 8/12) -->
<div class="col-md-8">
<!-- Search Box -->
<div class="mb-3">
<input type="text" class="form-control" id="searchInput" placeholder="Поиск по товарам...">
</div>
<div class="row g-3" id="productGrid"></div>
</div>
<!-- Right Panel (4/12) -->
<div class="col-md-4">
<!-- Cart Panel -->
<div class="card mb-3">
<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: 300px;">
<div id="cartList" class="flex-grow-1 mb-3" style="overflow-y: auto; max-height: 300px;"></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 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 class="d-grid gap-2">
<button class="btn btn-success" id="checkoutNow">
<i class="bi bi-check2-circle"></i> Продать
</button>
<button class="btn btn-outline-primary btn-sm" id="scheduleLater">
<i class="bi bi-calendar2"></i> Запланировать
</button>
<button class="btn btn-outline-secondary btn-sm" id="clearCart">
<i class="bi bi-trash"></i> Очистить
</button>
</div>
</div>
</div>
</div>
<!-- Action Buttons Panel -->
<div class="card">
<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-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>
</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="productsData" type="application/json">{{ products_json|safe }}</script>
<script src="{% static 'pos/js/terminal.js' %}"></script>
{% endblock %}