Autosave: 20260210-173042
This commit is contained in:
Flatlogic Bot
parent
b30330b17b
commit
1fe85ff3ce
Binary file not shown.
@ -5,7 +5,7 @@
|
||||
<div class="container-fluid mt-4 mb-5 no-print">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2 class="h4 mb-0"><i class="bi bi-upc-scan me-2"></i>Barcode Label Printing</h2>
|
||||
<button onclick="window.print()" class="btn btn-primary">
|
||||
<button id="printQueueBtn" class="btn btn-primary">
|
||||
<i class="bi bi-printer me-2"></i>Print Label Queue
|
||||
</button>
|
||||
</div>
|
||||
@ -41,7 +41,7 @@
|
||||
<td><code>{{ product.sku }}</code></td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-primary add-to-queue"
|
||||
<button type="button" class="btn btn-sm btn-outline-primary add-to-queue-btn"
|
||||
data-id="{{ product.id }}"
|
||||
data-name="{{ product.name_en }}" data-name-ar="{{ product.name_ar }}"
|
||||
data-sku="{{ product.sku }}"
|
||||
@ -49,8 +49,7 @@
|
||||
title="Add to queue">
|
||||
<i class="bi bi-plus"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-success direct-print-btn"
|
||||
onclick="directPrintFromRow(this)"
|
||||
<button type="button" class="btn btn-sm btn-outline-success direct-print-btn"
|
||||
data-id="{{ product.id }}"
|
||||
data-name="{{ product.name_en }}" data-name-ar="{{ product.name_ar }}"
|
||||
data-sku="{{ product.sku }}"
|
||||
@ -84,7 +83,7 @@
|
||||
<option value="small">Small Sticker (38mm x 25mm)</option>
|
||||
<option value="a4-24">A4 Sheet (3x8 = 24 labels)</option>
|
||||
<option value="a4-40">A4 Sheet (4x10 = 40 labels)</option>
|
||||
<option value="l7651">A4 Avery L7651 (5x13 = 65 labels)</option>
|
||||
<option value="l7651" selected>A4 Avery L7651 (5x13 = 65 labels)</option>
|
||||
<option value="l7656">A4 Avery L7656 (4x21 = 84 labels)</option>
|
||||
<option value="l7156">A4 Avery L7156 (3x7 = 21 labels)</option>
|
||||
<option value="price-tag">Jewelry / Price Tag (Small)</option>
|
||||
@ -134,7 +133,7 @@
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title mb-0">3. Live Preview (Single Label)</h5>
|
||||
<button class="btn btn-sm btn-success" onclick="printSingleFromPreview()">
|
||||
<button type="button" class="btn btn-sm btn-success" id="printPreviewBtn">
|
||||
<i class="bi bi-printer me-1"></i>Print This Label
|
||||
</button>
|
||||
</div>
|
||||
@ -166,228 +165,121 @@
|
||||
<style>
|
||||
/* Print Styles */
|
||||
@media screen {
|
||||
.print-only { display: none; }
|
||||
.print-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
#sidebar, .top-navbar, .navbar, footer { display: none !important; }
|
||||
#content, main { margin: 0 !important; padding: 0 !important; width: 100% !important; }
|
||||
.no-print { display: none !important; }
|
||||
.print-only { display: block; }
|
||||
body { margin: 0; padding: 0; background: white; -webkit-print-color-adjust: exact; }
|
||||
/* Force hiding of everything except printArea */
|
||||
body > *:not(#printArea) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Ensure printArea is visible */
|
||||
#printArea {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: visible !important;
|
||||
z-index: 9999;
|
||||
background: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Direct Print Mode: Remove A4 constraints */
|
||||
/* Direct Print Mode */
|
||||
body.direct-print-mode @page {
|
||||
size: auto;
|
||||
margin: 0;
|
||||
}
|
||||
body.direct-print-mode .label-sheet {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body.direct-print-mode .label-item {
|
||||
border: none !important;
|
||||
margin: 0 !important;
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
.label-sheet {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 5mm;
|
||||
position: relative;
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
page-break-after: always;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: 0; /* Remove whitespace between inline-blocks */
|
||||
}
|
||||
|
||||
/* Specific A4 Grid Layouts to ensure alignment */
|
||||
.sheet-a4-24 {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(3, 63.5mm);
|
||||
grid-auto-rows: 33.9mm;
|
||||
padding: 12.9mm 9.75mm !important;
|
||||
gap: 0;
|
||||
.label-item {
|
||||
box-sizing: border-box;
|
||||
display: inline-block; /* More robust than flex for print grids */
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
font-size: initial; /* Reset font size */
|
||||
}
|
||||
|
||||
.sheet-a4-40 {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(4, 48.5mm);
|
||||
grid-auto-rows: 25.4mm;
|
||||
padding: 21.5mm 8mm !important;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* Avery L7651 (5x13) */
|
||||
/* Avery L7651 (5x13 = 65) */
|
||||
.sheet-l7651 {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(5, 38.1mm);
|
||||
grid-auto-rows: 21.2mm;
|
||||
padding: 10.7mm 9.75mm !important;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* Avery L7656 (4x21) */
|
||||
.sheet-l7656 {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(4, 46mm);
|
||||
grid-auto-rows: 11.1mm;
|
||||
padding: 31.95mm 13mm !important;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* Avery L7156 (3x7) */
|
||||
.sheet-l7156 {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(3, 63.5mm);
|
||||
grid-auto-rows: 38.1mm;
|
||||
padding: 15.15mm 9.75mm !important;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* Standard Sticker (50x25) - usually for thermal printers */
|
||||
.label-standard {
|
||||
width: 50mm;
|
||||
height: 25mm;
|
||||
border: 0.1mm solid #eee;
|
||||
margin: 1mm;
|
||||
padding: 2mm;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Small Sticker (38x25) */
|
||||
.label-small {
|
||||
width: 38mm;
|
||||
height: 25mm;
|
||||
border: 0.1mm solid #eee;
|
||||
margin: 1mm;
|
||||
padding: 1.5mm;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* A4 24 Labels (3x8) */
|
||||
.label-a4-24 {
|
||||
width: 63.5mm;
|
||||
height: 33.9mm;
|
||||
padding: 2mm;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* A4 40 Labels (4x10) */
|
||||
.label-a4-40 {
|
||||
width: 48.5mm;
|
||||
height: 25.4mm;
|
||||
padding: 1mm;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Avery L7651 (5x13) */
|
||||
.label-l7651 {
|
||||
width: 38.1mm;
|
||||
height: 21.2mm;
|
||||
width: 38.1mm !important;
|
||||
height: 21.2mm !important;
|
||||
padding: 1mm;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Avery L7656 (4x21) */
|
||||
/* Other layouts ... */
|
||||
.sheet-a4-24 { padding: 0 !important; }
|
||||
.label-a4-24 { width: 70mm; height: 37.125mm; padding: 2mm; }
|
||||
|
||||
.sheet-a4-40 { padding: 0 !important; }
|
||||
.label-a4-40 { width: 52.5mm; height: 29.7mm; padding: 1mm; }
|
||||
|
||||
.sheet-l7656 { padding: 31.95mm 13mm !important; }
|
||||
.label-l7656 {
|
||||
width: 46mm;
|
||||
height: 11.1mm;
|
||||
padding: 0.5mm;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
page-break-inside: avoid;
|
||||
width: 46mm; height: 11.1mm; padding: 0.5mm;
|
||||
}
|
||||
.label-l7656 svg {
|
||||
height: 8mm !important;
|
||||
width: auto;
|
||||
}
|
||||
.label-l7656 .label-text {
|
||||
font-size: 5pt !important;
|
||||
width: auto !important;
|
||||
margin: 0 2px;
|
||||
.label-l7656 .inner-flex {
|
||||
display: flex; flex-direction: row; justify-content: space-around; align-items: center; height: 100%; width: 100%;
|
||||
}
|
||||
.label-l7656 svg { height: 8mm !important; width: auto; }
|
||||
.label-l7656 .label-text { font-size: 5pt !important; width: auto !important; margin: 0 2px; }
|
||||
|
||||
/* Avery L7156 (3x7) */
|
||||
.label-l7156 {
|
||||
width: 63.5mm;
|
||||
height: 38.1mm;
|
||||
padding: 2mm;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Price Tag */
|
||||
.label-price-tag {
|
||||
width: 30mm;
|
||||
height: 15mm;
|
||||
margin: 1mm;
|
||||
padding: 1mm;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.sheet-l7156 { padding: 15.15mm 9.75mm !important; }
|
||||
.label-l7156 { width: 63.5mm; height: 38.1mm; padding: 2mm; }
|
||||
|
||||
.label-item svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: 'Cairo', Arial, sans-serif;
|
||||
font-size: 7pt;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
}
|
||||
.label-price {
|
||||
font-size: 9pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.d-flex-print { display: flex; justify-content: space-between; width: 100%; }
|
||||
}
|
||||
|
||||
#previewBarcode {
|
||||
@ -398,23 +290,59 @@
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const queue = [];
|
||||
const labelQueueBody = document.getElementById('labelQueue');
|
||||
const emptyQueue = document.getElementById('emptyQueue');
|
||||
const printArea = document.getElementById('printArea');
|
||||
let lastAddedProduct = null;
|
||||
|
||||
// Add to Queue
|
||||
document.querySelectorAll('.add-to-queue').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
// Move printArea to body safely
|
||||
if (printArea && printArea.parentElement !== document.body) {
|
||||
document.body.appendChild(printArea);
|
||||
}
|
||||
|
||||
// Check for JsBarcode
|
||||
if (typeof JsBarcode === 'undefined') {
|
||||
console.error("JsBarcode library not loaded!");
|
||||
alert("Barcode library failed to load. Please check your internet connection.");
|
||||
}
|
||||
|
||||
// --- EVENT DELEGATION FOR PRODUCT TABLE ---
|
||||
const productTable = document.getElementById('productTable');
|
||||
if (productTable) {
|
||||
productTable.addEventListener('click', function(e) {
|
||||
// Handle "Add to Queue"
|
||||
const addBtn = e.target.closest('.add-to-queue-btn');
|
||||
if (addBtn) {
|
||||
e.preventDefault();
|
||||
addToQueue(addBtn);
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle "Direct Print"
|
||||
const directBtn = e.target.closest('.direct-print-btn');
|
||||
if (directBtn) {
|
||||
e.preventDefault();
|
||||
directPrintFromRow(directBtn);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- ADD TO QUEUE LOGIC ---
|
||||
function addToQueue(btn) {
|
||||
try {
|
||||
const product = {
|
||||
id: btn.dataset.id,
|
||||
name: btn.dataset.name, nameAr: btn.dataset.nameAr,
|
||||
name: btn.dataset.name,
|
||||
nameAr: btn.dataset.nameAr,
|
||||
sku: btn.dataset.sku,
|
||||
price: btn.dataset.price,
|
||||
qty: 1
|
||||
};
|
||||
lastAddedProduct = product;
|
||||
|
||||
const existing = queue.find(p => p.id === product.id);
|
||||
if (existing) {
|
||||
existing.qty++;
|
||||
@ -423,13 +351,18 @@
|
||||
}
|
||||
renderQueue();
|
||||
updatePreview();
|
||||
});
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Error adding to queue:", err);
|
||||
alert("An error occurred while adding the item.");
|
||||
}
|
||||
}
|
||||
|
||||
// --- RENDER QUEUE ---
|
||||
function renderQueue() {
|
||||
if (queue.length === 0) {
|
||||
labelQueueBody.innerHTML = '';
|
||||
emptyQueue.classList.remove('d-none');
|
||||
printArea.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
emptyQueue.classList.add('d-none');
|
||||
@ -441,44 +374,79 @@
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm qty-input"
|
||||
value="${p.qty}" min="1" onchange="updateQty(${index}, this.value)">
|
||||
value="${p.qty}" min="1" data-index="${index}">
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-link text-danger" onclick="removeFromQueue(${index})">
|
||||
<button type="button" class="btn btn-sm btn-link text-danger remove-btn" data-index="${index}">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
|
||||
// Re-attach listeners for dynamic queue items
|
||||
document.querySelectorAll('.qty-input').forEach(input => {
|
||||
input.addEventListener('change', function() {
|
||||
const idx = parseInt(this.dataset.index);
|
||||
const val = parseInt(this.value);
|
||||
if (val > 0) {
|
||||
queue[idx].qty = val;
|
||||
preparePrint();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.remove-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const idx = parseInt(this.dataset.index);
|
||||
queue.splice(idx, 1);
|
||||
renderQueue();
|
||||
updatePreview();
|
||||
});
|
||||
});
|
||||
|
||||
// Pre-render print area
|
||||
preparePrint();
|
||||
}
|
||||
|
||||
window.updateQty = (index, val) => {
|
||||
queue[index].qty = parseInt(val) || 1;
|
||||
preparePrint();
|
||||
};
|
||||
// --- PRINT HANDLERS ---
|
||||
const printQueueBtn = document.getElementById('printQueueBtn');
|
||||
if (printQueueBtn) {
|
||||
printQueueBtn.addEventListener('click', handlePrintQueue);
|
||||
}
|
||||
|
||||
window.removeFromQueue = (index) => {
|
||||
queue.splice(index, 1);
|
||||
renderQueue();
|
||||
updatePreview();
|
||||
};
|
||||
function handlePrintQueue() {
|
||||
if (queue.length === 0) return;
|
||||
preparePrint();
|
||||
setTimeout(() => {
|
||||
window.print();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const printPreviewBtn = document.getElementById('printPreviewBtn');
|
||||
if (printPreviewBtn) {
|
||||
printPreviewBtn.addEventListener('click', printSingleFromPreview);
|
||||
}
|
||||
|
||||
// Product Search
|
||||
document.getElementById('productSearch').addEventListener('input', function() {
|
||||
const query = this.value.toLowerCase();
|
||||
document.querySelectorAll('.product-row').forEach(row => {
|
||||
const name = row.dataset.name.toLowerCase();
|
||||
const sku = row.dataset.sku.toLowerCase();
|
||||
if (name.includes(query) || sku.includes(query)) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
const searchInput = document.getElementById('productSearch');
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', function() {
|
||||
const query = this.value.toLowerCase();
|
||||
document.querySelectorAll('.product-row').forEach(row => {
|
||||
const name = row.dataset.name.toLowerCase();
|
||||
const nameAr = row.dataset.nameAr ? row.dataset.nameAr.toLowerCase() : '';
|
||||
const sku = row.dataset.sku.toLowerCase();
|
||||
if (name.includes(query) || nameAr.includes(query) || sku.includes(query)) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Preview Logic
|
||||
// --- PREVIEW LOGIC ---
|
||||
function updatePreview() {
|
||||
let product = null;
|
||||
if (queue.length > 0) {
|
||||
@ -489,25 +457,32 @@
|
||||
|
||||
if (!product) return;
|
||||
|
||||
document.querySelector('.preview-name').innerHTML = (product.nameAr ? `<div class='text-end'>${product.nameAr}</div>` : '') + `<div>${product.name}</div>`;
|
||||
document.querySelector('.preview-sku').innerText = product.sku;
|
||||
document.querySelector('.preview-price').innerText = 'OMR ' + parseFloat(product.price).toFixed(3);
|
||||
const previewName = document.querySelector('.preview-name');
|
||||
const previewSku = document.querySelector('.preview-sku');
|
||||
const previewPrice = document.querySelector('.preview-price');
|
||||
|
||||
JsBarcode("#previewBarcode", product.sku, {
|
||||
format: "CODE128",
|
||||
width: 2,
|
||||
height: 40,
|
||||
displayValue: false,
|
||||
margin: 0
|
||||
});
|
||||
if (previewName) previewName.innerHTML = (product.nameAr ? `<div class='text-end'>${product.nameAr}</div>` : '') + `<div>${product.name}</div>`;
|
||||
if (previewSku) previewSku.innerText = product.sku;
|
||||
if (previewPrice) previewPrice.innerText = 'OMR ' + parseFloat(product.price).toFixed(3);
|
||||
|
||||
// Apply visibility toggles
|
||||
document.querySelector('.preview-name').style.display = document.getElementById('showName').checked ? '' : 'none';
|
||||
document.querySelector('.preview-price').style.display = document.getElementById('showPrice').checked ? '' : 'none';
|
||||
document.querySelector('.preview-sku').style.display = document.getElementById('showSKU').checked ? '' : 'none';
|
||||
try {
|
||||
if (typeof JsBarcode !== 'undefined') {
|
||||
JsBarcode("#previewBarcode", product.sku, {
|
||||
format: "CODE128", width: 2, height: 40, displayValue: false, margin: 0
|
||||
});
|
||||
}
|
||||
} catch(e) {}
|
||||
|
||||
const showName = document.getElementById('showName').checked;
|
||||
const showPrice = document.getElementById('showPrice').checked;
|
||||
const showSKU = document.getElementById('showSKU').checked;
|
||||
|
||||
if (previewName) previewName.style.display = showName ? '' : 'none';
|
||||
if (previewPrice) previewPrice.style.display = showPrice ? '' : 'none';
|
||||
if (previewSku) previewSku.style.display = showSKU ? '' : 'none';
|
||||
}
|
||||
|
||||
// Direct Print Logic
|
||||
// --- DIRECT PRINT ---
|
||||
function directPrintFromRow(btn) {
|
||||
const product = {
|
||||
id: btn.dataset.id,
|
||||
@ -539,20 +514,25 @@
|
||||
|
||||
const sheet = document.createElement('div');
|
||||
sheet.className = 'label-sheet';
|
||||
sheet.style.height = 'auto';
|
||||
sheet.style.width = 'auto';
|
||||
sheet.style.display = 'block';
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = `label-item label-${labelType}`;
|
||||
|
||||
let content = '';
|
||||
if (labelType === 'l7656') {
|
||||
if (showName) content += `<div class="label-text" style="max-width: 40px">${product.nameAr ? product.nameAr + " " : ""}${product.name}</div>`;
|
||||
content += `<svg id="direct-barcode"></svg>`;
|
||||
if (showPrice) content += `<div class="label-text label-price">${parseFloat(product.price).toFixed(3)}</div>`;
|
||||
content = `<div class="inner-flex">`;
|
||||
if (showName) content += `<div class="label-text" style="max-width: 40px">${product.nameAr ? product.nameAr + " " : ""}${product.name}</div>`;
|
||||
content += `<svg class="barcode-svg-direct"></svg>`;
|
||||
if (showPrice) content += `<div class="label-text label-price">${parseFloat(product.price).toFixed(3)}</div>`;
|
||||
content += `</div>`;
|
||||
} else {
|
||||
if (showName) { if (product.nameAr) content += `<div class="label-text">${product.nameAr}</div>`; content += `<div class="label-text">${product.name}</div>`; }
|
||||
content += `<svg id="direct-barcode"></svg>`;
|
||||
content += `<svg class="barcode-svg-direct"></svg>`;
|
||||
if (showSKU || showPrice) {
|
||||
content += `<div class="label-text d-flex justify-content-between">`;
|
||||
content += `<div class="label-text d-flex-print">`;
|
||||
if (showSKU) content += `<span>${product.sku}</span>`;
|
||||
if (showPrice) content += `<span class="label-price">OMR ${parseFloat(product.price).toFixed(3)}</span>`;
|
||||
content += `</div>`;
|
||||
@ -570,22 +550,23 @@
|
||||
else if (labelType === 'a4-40') { bWidth = 1.2; bHeight = 25; }
|
||||
else if (labelType === 'price-tag') { bWidth = 1.0; bHeight = 15; }
|
||||
|
||||
JsBarcode("#direct-barcode", product.sku, {
|
||||
format: "CODE128",
|
||||
width: bWidth,
|
||||
height: bHeight,
|
||||
displayValue: false,
|
||||
margin: 0
|
||||
});
|
||||
const svgEl = label.querySelector('.barcode-svg-direct');
|
||||
if (svgEl && typeof JsBarcode !== 'undefined') {
|
||||
try {
|
||||
JsBarcode(svgEl, product.sku, {
|
||||
format: "CODE128", width: bWidth, height: bHeight, displayValue: false, margin: 0
|
||||
});
|
||||
} catch(e){}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
window.print();
|
||||
document.body.classList.remove('direct-print-mode');
|
||||
preparePrint(); // Restore full queue print area
|
||||
}, 100);
|
||||
preparePrint();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Prepare Print Area (Full Queue)
|
||||
// --- PREPARE PRINT (Full Queue) ---
|
||||
function preparePrint() {
|
||||
if (document.body.classList.contains('direct-print-mode')) return;
|
||||
|
||||
@ -595,70 +576,92 @@
|
||||
const showPrice = document.getElementById('showPrice').checked;
|
||||
const showSKU = document.getElementById('showSKU').checked;
|
||||
|
||||
const sheet = document.createElement('div');
|
||||
sheet.className = 'label-sheet';
|
||||
|
||||
if (labelType === 'a4-24') sheet.classList.add('sheet-a4-24');
|
||||
else if (labelType === 'a4-40') sheet.classList.add('sheet-a4-40');
|
||||
else if (labelType === 'l7651') sheet.classList.add('sheet-l7651');
|
||||
else if (labelType === 'l7656') sheet.classList.add('sheet-l7656');
|
||||
else if (labelType === 'l7156') sheet.classList.add('sheet-l7156');
|
||||
let labelsPerSheet = 999999;
|
||||
if (labelType === 'a4-24') labelsPerSheet = 24;
|
||||
else if (labelType === 'a4-40') labelsPerSheet = 40;
|
||||
else if (labelType === 'l7651') labelsPerSheet = 65;
|
||||
else if (labelType === 'l7656') labelsPerSheet = 84;
|
||||
else if (labelType === 'l7156') labelsPerSheet = 21;
|
||||
|
||||
const allLabels = [];
|
||||
queue.forEach(p => {
|
||||
for (let i = 0; i < p.qty; i++) {
|
||||
allLabels.push({ ...p });
|
||||
}
|
||||
});
|
||||
|
||||
if (allLabels.length === 0) return;
|
||||
|
||||
for (let s = 0; s < allLabels.length; s += labelsPerSheet) {
|
||||
const sheetLabels = allLabels.slice(s, s + labelsPerSheet);
|
||||
const sheet = document.createElement('div');
|
||||
sheet.className = `label-sheet sheet-${labelType}`;
|
||||
|
||||
// Add specific classes
|
||||
if (labelType === 'a4-24') sheet.classList.add('sheet-a4-24');
|
||||
else if (labelType === 'a4-40') sheet.classList.add('sheet-a4-40');
|
||||
else if (labelType === 'l7651') sheet.classList.add('sheet-l7651');
|
||||
else if (labelType === 'l7656') sheet.classList.add('sheet-l7656');
|
||||
else if (labelType === 'l7156') sheet.classList.add('sheet-l7156');
|
||||
|
||||
printArea.appendChild(sheet);
|
||||
|
||||
sheetLabels.forEach((p, idx) => {
|
||||
const label = document.createElement('div');
|
||||
label.className = `label-item label-${labelType}`;
|
||||
|
||||
// Construct inner HTML
|
||||
let content = '';
|
||||
if (labelType === 'l7656') {
|
||||
content = `<div class="inner-flex">`;
|
||||
if (showName) content += `<div class="label-text" style="max-width: 40px">${p.nameAr ? p.nameAr + " " : ""}${p.name}</div>`;
|
||||
content += `<svg id="barcode-${p.id}-${i}"></svg>`;
|
||||
content += `<svg class="barcode-item"></svg>`;
|
||||
if (showPrice) content += `<div class="label-text label-price">${parseFloat(p.price).toFixed(3)}</div>`;
|
||||
content += `</div>`;
|
||||
} else {
|
||||
if (showName) { if (p.nameAr) content += `<div class="label-text">${p.nameAr}</div>`; content += `<div class="label-text">${p.name}</div>`; }
|
||||
content += `<svg id="barcode-${p.id}-${i}"></svg>`;
|
||||
if (showName) {
|
||||
if (p.nameAr) content += `<div class="label-text">${p.nameAr}</div>`;
|
||||
content += `<div class="label-text">${p.name}</div>`;
|
||||
}
|
||||
content += `<svg class="barcode-item"></svg>`;
|
||||
if (showSKU || showPrice) {
|
||||
content += `<div class="label-text d-flex justify-content-between">`;
|
||||
content += `<div class="label-text d-flex-print">`;
|
||||
if (showSKU) content += `<span>${p.sku}</span>`;
|
||||
if (showPrice) content += `<span class="label-price">OMR ${parseFloat(p.price).toFixed(3)}</span>`;
|
||||
if (showPrice) content += `<span class="label-price">${parseFloat(p.price).toFixed(3)}</span>`;
|
||||
content += `</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
label.innerHTML = content;
|
||||
sheet.appendChild(label);
|
||||
}
|
||||
});
|
||||
|
||||
printArea.appendChild(sheet);
|
||||
// Render barcode immediately (synchronously)
|
||||
const svgEl = label.querySelector('.barcode-item');
|
||||
if (svgEl && typeof JsBarcode !== 'undefined') {
|
||||
let bWidth = 1.5;
|
||||
let bHeight = 30;
|
||||
if (labelType === 'l7651') { bWidth = 1.0; bHeight = 18; }
|
||||
else if (labelType === 'l7656') { bWidth = 0.8; bHeight = 8; }
|
||||
else if (labelType === 'a4-40') { bWidth = 1.1; bHeight = 22; }
|
||||
else if (labelType === 'price-tag') { bWidth = 1.0; bHeight = 12; }
|
||||
|
||||
queue.forEach(p => {
|
||||
for (let i = 0; i < p.qty; i++) {
|
||||
const svgId = `barcode-${p.id}-${i}`;
|
||||
let bWidth = 1.5;
|
||||
let bHeight = 30;
|
||||
|
||||
if (labelType === 'l7651') { bWidth = 1.0; bHeight = 20; }
|
||||
else if (labelType === 'l7656') { bWidth = 0.8; bHeight = 8; }
|
||||
else if (labelType === 'a4-40') { bWidth = 1.2; bHeight = 25; }
|
||||
else if (labelType === 'price-tag') { bWidth = 1.0; bHeight = 15; }
|
||||
|
||||
JsBarcode(`#${svgId}`, p.sku, {
|
||||
format: "CODE128",
|
||||
width: bWidth,
|
||||
height: bHeight,
|
||||
displayValue: false,
|
||||
margin: 0
|
||||
});
|
||||
}
|
||||
});
|
||||
try {
|
||||
JsBarcode(svgEl, p.sku, {
|
||||
format: "CODE128", width: bWidth, height: bHeight, displayValue: false, margin: 0
|
||||
});
|
||||
} catch(e) { console.error(e); }
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('labelType').addEventListener('change', preparePrint);
|
||||
// --- SETUP LISTENERS ---
|
||||
document.getElementById('labelType').addEventListener('change', () => preparePrint());
|
||||
document.getElementById('showName').addEventListener('change', () => { updatePreview(); preparePrint(); });
|
||||
document.getElementById('showPrice').addEventListener('change', () => { updatePreview(); preparePrint(); });
|
||||
document.getElementById('showSKU').addEventListener('change', () => { updatePreview(); preparePrint(); });
|
||||
|
||||
updatePreview();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -102,7 +102,7 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-bold">{% trans "Payment Method" %}</label>
|
||||
<select name="payment_method_id" class="form-select rounded-3 shadow-none">
|
||||
<select name="payment_method" class="form-select rounded-3 shadow-none">
|
||||
{% for method in payment_methods %}
|
||||
<option value="{{ method.id }}">{% if LANGUAGE_CODE == 'ar' %}{{ method.name_ar }}{% else %}{{ method.name_en }}{% endif %}</option>
|
||||
{% endfor %}
|
||||
|
||||
107
core/views.py
107
core/views.py
@ -487,10 +487,19 @@ def add_sale_payment(request, pk):
|
||||
amount = decimal.Decimal(request.POST.get('amount', 0))
|
||||
payment_method_id = request.POST.get('payment_method')
|
||||
|
||||
pm_name = "Cash"
|
||||
if payment_method_id:
|
||||
try:
|
||||
pm = PaymentMethod.objects.get(id=payment_method_id)
|
||||
pm_name = pm.name_en
|
||||
except PaymentMethod.DoesNotExist:
|
||||
pass
|
||||
|
||||
SalePayment.objects.create(
|
||||
sale=sale,
|
||||
amount=amount,
|
||||
payment_method_id=payment_method_id,
|
||||
payment_method_name=pm_name,
|
||||
created_by=request.user,
|
||||
notes=request.POST.get('notes', '')
|
||||
)
|
||||
@ -631,10 +640,20 @@ def delete_sale_return(request, pk):
|
||||
|
||||
# --- Purchases ---
|
||||
|
||||
@login_required
|
||||
@login_required
|
||||
def purchases(request):
|
||||
purchases = Purchase.objects.all().order_by('-created_at')
|
||||
return render(request, 'core/purchases.html', {'purchases': purchases})
|
||||
payment_methods = PaymentMethod.objects.filter(is_active=True)
|
||||
site_settings = SystemSetting.objects.first()
|
||||
if not site_settings:
|
||||
site_settings = SystemSetting.objects.create()
|
||||
|
||||
return render(request, 'core/purchases.html', {
|
||||
'purchases': purchases,
|
||||
'payment_methods': payment_methods,
|
||||
'site_settings': site_settings
|
||||
})
|
||||
|
||||
@login_required
|
||||
@login_required
|
||||
@ -658,8 +677,43 @@ def purchase_detail(request, pk):
|
||||
@login_required
|
||||
def edit_purchase(request, pk):
|
||||
purchase = get_object_or_404(Purchase, pk=pk)
|
||||
# Simplified edit view
|
||||
return render(request, 'core/purchase_edit.html', {'purchase': purchase})
|
||||
suppliers = Supplier.objects.all()
|
||||
products = Product.objects.filter(is_active=True)
|
||||
payment_methods = PaymentMethod.objects.filter(is_active=True)
|
||||
site_settings = SystemSetting.objects.first()
|
||||
if not site_settings:
|
||||
site_settings = SystemSetting.objects.create()
|
||||
|
||||
decimal_places = site_settings.decimal_places or 2
|
||||
|
||||
cart_items = []
|
||||
for item in purchase.items.all().select_related('product'):
|
||||
cart_items.append({
|
||||
'id': item.product.id,
|
||||
'name_en': item.product.name_en,
|
||||
'name_ar': item.product.name_ar,
|
||||
'sku': item.product.sku,
|
||||
'cost_price': float(item.unit_price),
|
||||
'quantity': float(item.quantity)
|
||||
})
|
||||
|
||||
cart_json = json.dumps(cart_items)
|
||||
|
||||
payment_method_id = ""
|
||||
first_payment = purchase.payments.first()
|
||||
if first_payment and first_payment.payment_method:
|
||||
payment_method_id = first_payment.payment_method.id
|
||||
|
||||
return render(request, 'core/purchase_edit.html', {
|
||||
'purchase': purchase,
|
||||
'suppliers': suppliers,
|
||||
'products': products,
|
||||
'payment_methods': payment_methods,
|
||||
'site_settings': site_settings,
|
||||
'cart_json': cart_json,
|
||||
'payment_method_id': payment_method_id,
|
||||
'decimal_places': decimal_places
|
||||
})
|
||||
|
||||
@login_required
|
||||
def add_purchase_payment(request, pk):
|
||||
@ -668,10 +722,19 @@ def add_purchase_payment(request, pk):
|
||||
amount = decimal.Decimal(request.POST.get('amount', 0))
|
||||
payment_method_id = request.POST.get('payment_method')
|
||||
|
||||
pm_name = "Cash"
|
||||
if payment_method_id:
|
||||
try:
|
||||
pm = PaymentMethod.objects.get(id=payment_method_id)
|
||||
pm_name = pm.name_en
|
||||
except PaymentMethod.DoesNotExist:
|
||||
pass
|
||||
|
||||
PurchasePayment.objects.create(
|
||||
purchase=purchase,
|
||||
amount=amount,
|
||||
payment_method_id=payment_method_id,
|
||||
payment_method_name=pm_name,
|
||||
created_by=request.user,
|
||||
notes=request.POST.get('notes', '')
|
||||
)
|
||||
@ -731,8 +794,39 @@ def delete_purchase_return(request, pk):
|
||||
|
||||
@login_required
|
||||
def expenses_view(request):
|
||||
expenses = Expense.objects.all().order_by('-date')
|
||||
return render(request, 'core/expenses.html', {'expenses': expenses})
|
||||
expenses = Expense.objects.select_related('category', 'payment_method').all().order_by('-date')
|
||||
|
||||
start_date = request.GET.get('start_date')
|
||||
end_date = request.GET.get('end_date')
|
||||
category_id = request.GET.get('category')
|
||||
|
||||
if start_date:
|
||||
expenses = expenses.filter(date__gte=start_date)
|
||||
if end_date:
|
||||
expenses = expenses.filter(date__lte=end_date)
|
||||
if category_id:
|
||||
expenses = expenses.filter(category_id=category_id)
|
||||
|
||||
total_expenses = expenses.aggregate(total=Sum('amount'))['total'] or 0
|
||||
|
||||
site_settings = SystemSetting.objects.first()
|
||||
if not site_settings:
|
||||
site_settings = SystemSetting.objects.create()
|
||||
|
||||
categories = ExpenseCategory.objects.all()
|
||||
payment_methods = PaymentMethod.objects.filter(is_active=True)
|
||||
|
||||
paginator = Paginator(expenses, 20)
|
||||
page_number = request.GET.get('page')
|
||||
page_obj = paginator.get_page(page_number)
|
||||
|
||||
return render(request, 'core/expenses.html', {
|
||||
'expenses': page_obj,
|
||||
'categories': categories,
|
||||
'payment_methods': payment_methods,
|
||||
'site_settings': site_settings,
|
||||
'total_expenses': total_expenses
|
||||
})
|
||||
|
||||
@login_required
|
||||
def expense_create_view(request):
|
||||
@ -921,7 +1015,8 @@ def delete_product(request, pk):
|
||||
|
||||
@login_required
|
||||
def barcode_labels(request):
|
||||
return render(request, 'core/barcode_labels.html')
|
||||
products = Product.objects.all().order_by('name_en')
|
||||
return render(request, 'core/barcode_labels.html', {'products': products})
|
||||
|
||||
@login_required
|
||||
def suggest_sku(request):
|
||||
|
||||
2
static/js/JsBarcode.all.min.js
vendored
Normal file
2
static/js/JsBarcode.all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user