128 lines
5.2 KiB
HTML
128 lines
5.2 KiB
HTML
{% macro confirm_modal(id, title, button_class, button_text, onclick_fn) %}
|
|
<div class="modal fade" id="{{ id }}" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ title }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{{ caller() }}
|
|
<div class="d-grid gap-2 mt-3">
|
|
<button class="btn {{ button_class }}" onclick="{{ onclick_fn }}">
|
|
{{ button_text }}
|
|
</button>
|
|
<button class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro scanner_modal() %}
|
|
<div class="modal fade" id="scannerModal" tabindex="-1" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Escanear Código</h5>
|
|
<button type="button" class="btn-close" onclick="stopScanner()" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3 d-flex align-items-end gap-2">
|
|
<div class="flex-grow-1">
|
|
<label class="form-label small text-muted">Seleccionar Cámara:</label>
|
|
<select id="camera-select" class="form-select form-select-sm" onchange="switchCamera(this.value)">
|
|
<option value="">Cargando cámaras...</option>
|
|
</select>
|
|
</div>
|
|
<button id="torch-btn" class="btn btn-outline-secondary btn-sm" onclick="toggleTorch()" style="height: 31px; min-width: 40px; display: none;"></button>
|
|
</div>
|
|
<div id="reader" style="width: 100%; border-radius: 8px; overflow: hidden;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro render_receipt(id_suffix="") %}
|
|
<div id="receipt-print-zone{{ id_suffix }}" class="d-none d-print-block">
|
|
<style>
|
|
@media print {
|
|
/* Tell the browser this is a continuous 80mm thermal roll */
|
|
@page {
|
|
margin: 0;
|
|
size: 80mm auto;
|
|
}
|
|
|
|
/* Nuke the rest of the layout from the document flow so it takes up 0 height */
|
|
nav, .discord-card, .modal, .row {
|
|
display: none !important;
|
|
}
|
|
|
|
body * {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Resurrect the receipt and put it in the top left corner */
|
|
#receipt-print-zone{{ id_suffix }}, #receipt-print-zone{{ id_suffix }} * {
|
|
visibility: visible;
|
|
}
|
|
#receipt-print-zone{{ id_suffix }} {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 80mm;
|
|
padding: 2mm 5mm;
|
|
margin: 0;
|
|
display: block !important;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 10px;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.receipt-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: 12px; }
|
|
.receipt-header { text-align: center; margin-bottom: 10px; border-bottom: 1px dashed #000; padding-bottom: 5px; }
|
|
.receipt-total-row { border-top: 1px dashed #000; margin-top: 5px; padding-top: 5px; font-weight: bold; }
|
|
</style>
|
|
|
|
<div class="receipt-header">
|
|
<h3 style="margin: 0; font-weight: 800;">SekiPOS</h3>
|
|
<div style="font-size: 10px; margin-bottom: 5px;" id="receipt-type{{ id_suffix }}">Comprobante de Venta</div>
|
|
<div style="font-size: 11px; font-weight: bold;">
|
|
Ticket Nº <span id="receipt-ticket-id{{ id_suffix }}"></span>
|
|
</div>
|
|
<div id="receipt-date{{ id_suffix }}" style="font-size: 11px;"></div>
|
|
</div>
|
|
|
|
<table class="receipt-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 15%; text-align: left;">Cant</th>
|
|
<th style="width: 60%; padding-left: 5px; text-align: left;">Desc</th>
|
|
<th style="width: 25%; text-align: right;">Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="receipt-items-print{{ id_suffix }}"></tbody>
|
|
</table>
|
|
|
|
<div class="receipt-total-row d-flex justify-content-between">
|
|
<span>TOTAL:</span>
|
|
<span id="receipt-total-print{{ id_suffix }}"></span>
|
|
</div>
|
|
|
|
<div id="receipt-payment-info{{ id_suffix }}">
|
|
<div class="d-flex justify-content-between">
|
|
<span>RECIBIDO:</span>
|
|
<span id="receipt-paid-print{{ id_suffix }}"></span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>VUELTO:</span>
|
|
<span id="receipt-change-print{{ id_suffix }}"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 20px; font-size: 10px;">¡Gracias por su compra!</div>
|
|
</div>
|
|
{% endmacro %} |