admin/38471-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update date sticker 2

Browse Source
This commit is contained in:
Flatlogic Bot 2026-05-06 13:15:06 +00:00
parent 9975e0a5db
commit b12231e100
2 changed files with 184 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.php
View File

@ -12248,7 +12248,7 @@ document.addEventListener('DOMContentLoaded', function() {
<div id="datedBarcodeContainer" class="p-3 bg-white border mb-3 mx-auto" style="width: fit-content; max-width: 100%;"> <div id="datedBarcodeContainer" class="p-3 bg-white border mb-3 mx-auto" style="width: fit-content; max-width: 100%;">
<div id="datedBarcodeLabelName" class="fw-bold small mb-1"></div> <div id="datedBarcodeLabelName" class="fw-bold small mb-1"></div>
<svg id="datedBarcodeSvg" style="max-width: 100%; height: auto;"></svg> <svg id="datedBarcodeSvg" style="max-width: 100%; height: auto;"></svg>
<div id="datedBarcodeLabelDates" class="small mt-2 text-start mx-auto" style="width: fit-content; min-width: 145px;"></div> <div id="datedBarcodeLabelDates" class="small mt-2 text-center mx-auto" style="width: 100%; max-width: 220px; direction: ltr;"></div>
<div id="datedBarcodeLabelPrice" class="fw-bold small mt-2" style="display: none;"></div> <div id="datedBarcodeLabelPrice" class="fw-bold small mt-2" style="display: none;"></div>
</div> </div>
<div class="row g-2 mb-3 text-start"> <div class="row g-2 mb-3 text-start">

238
pages/barcode_pos_script.php
View File

@ -88,16 +88,75 @@
return lines.join(''); return lines.join('');
} }
function applyBarcodePreviewNameStyles(container, compact) {
if (!container) {
return;
}
const arabicLine = container.querySelector('.label-name-ar');
const englishLine = container.querySelector('.label-name-en');
container.style.width = '100%';
container.style.maxWidth = '100%';
container.style.lineHeight = '1.05';
container.style.marginBottom = '0';
if (arabicLine) {
arabicLine.style.display = 'block';
arabicLine.style.fontWeight = '700';
arabicLine.style.fontSize = compact ? '0.98rem' : '1.10rem';
arabicLine.style.direction = 'rtl';
arabicLine.style.whiteSpace = 'nowrap';
arabicLine.style.overflow = 'hidden';
arabicLine.style.textOverflow = 'ellipsis';
}
if (englishLine) {
englishLine.style.display = 'block';
englishLine.style.fontWeight = '600';
englishLine.style.fontSize = compact ? '0.84rem' : '0.95rem';
englishLine.style.whiteSpace = 'nowrap';
englishLine.style.overflow = 'hidden';
englishLine.style.textOverflow = 'ellipsis';
}
}
function applyBarcodePreviewDateStyles(container, compact) {
if (!container) {
return;
}
container.style.width = '100%';
container.style.maxWidth = '240px';
container.style.direction = 'ltr';
container.style.textAlign = 'center';
container.style.lineHeight = '1.05';
container.style.fontWeight = '600';
container.style.fontSize = compact ? '0.80rem' : '0.92rem';
container.style.marginTop = '0';
const row = container.querySelector('.label-date-row');
if (row) {
row.style.gap = compact ? '10px' : '14px';
}
container.querySelectorAll('.label-date-item').forEach((item) => {
item.style.gap = compact ? '4px' : '6px';
});
}
function buildSingleBarcodeSvgMarkup(sku, labelWidthMm, labelHeightMm) { function buildSingleBarcodeSvgMarkup(sku, labelWidthMm, labelHeightMm) {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const scale = getSingleBarcodeScale(labelWidthMm, labelHeightMm); const scale = getSingleBarcodeScale(labelWidthMm, labelHeightMm);
JsBarcode(svg, sku, getSingleBarcodeOptions(sku, labelWidthMm, labelHeightMm)); JsBarcode(svg, sku, getSingleBarcodeOptions(sku, labelWidthMm, labelHeightMm));
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
svg.setAttribute('shape-rendering', 'crispEdges');
svg.style.width = Math.round(scale * 100) + '%'; svg.style.width = Math.round(scale * 100) + '%';
svg.style.maxWidth = '100%'; svg.style.maxWidth = '100%';
svg.style.height = 'auto'; svg.style.height = 'auto';
svg.style.display = 'block'; svg.style.display = 'block';
svg.style.margin = '0 auto'; svg.style.margin = '0 auto';
svg.style.shapeRendering = 'crispEdges';
return svg.outerHTML; return svg.outerHTML;
} }
@ -111,6 +170,7 @@
const width = dimensions.width; const width = dimensions.width;
const height = dimensions.height; const height = dimensions.height;
const scale = getSingleBarcodeScale(width, height); const scale = getSingleBarcodeScale(width, height);
const compact = width <= 40 || height <= 25;
const nameContainer = document.getElementById('barcodeLabelName'); const nameContainer = document.getElementById('barcodeLabelName');
const priceContainer = document.getElementById('barcodeLabelPrice'); const priceContainer = document.getElementById('barcodeLabelPrice');
const previewContainer = document.getElementById('barcodeContainer'); const previewContainer = document.getElementById('barcodeContainer');
@ -121,19 +181,34 @@
} }
nameContainer.innerHTML = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn); nameContainer.innerHTML = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn);
applyBarcodePreviewNameStyles(nameContainer, compact);
priceContainer.textContent = label.price ? 'OMR ' + label.price : ''; priceContainer.textContent = label.price ? 'OMR ' + label.price : '';
previewContainer.style.width = Math.min(Math.max(width * 3.6, 170), 280) + 'px'; priceContainer.style.display = label.price ? 'block' : 'none';
priceContainer.style.fontWeight = '700';
priceContainer.style.fontSize = compact ? '0.98rem' : '1.08rem';
priceContainer.style.lineHeight = '1';
priceContainer.style.marginTop = '0';
previewContainer.style.display = 'flex';
previewContainer.style.flexDirection = 'column';
previewContainer.style.alignItems = 'center';
previewContainer.style.justifyContent = 'center';
previewContainer.style.gap = compact ? '4px' : '6px';
previewContainer.style.width = Math.min(Math.max(width * 3.8, 185), 310) + 'px';
previewContainer.style.maxWidth = '100%'; previewContainer.style.maxWidth = '100%';
previewContainer.style.padding = height <= 25 ? '12px' : '16px'; previewContainer.style.padding = height <= 25 ? '10px 12px' : '12px 14px';
svg.innerHTML = ''; svg.innerHTML = '';
JsBarcode(svg, label.sku, getSingleBarcodeOptions(label.sku, width, height)); JsBarcode(svg, label.sku, getSingleBarcodeOptions(label.sku, width, height));
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
svg.setAttribute('shape-rendering', 'crispEdges');
svg.style.width = Math.round(scale * 100) + '%'; svg.style.width = Math.round(scale * 100) + '%';
svg.style.maxWidth = '100%'; svg.style.maxWidth = '100%';
svg.style.height = 'auto'; svg.style.height = 'auto';
svg.style.display = 'block'; svg.style.display = 'block';
svg.style.margin = '0 auto'; svg.style.margin = '0 auto';
svg.style.shapeRendering = 'crispEdges';
} }
function initSingleBarcodePreviewControls() { function initSingleBarcodePreviewControls() {
@ -219,19 +294,19 @@
page-break-after: always; page-break-after: always;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
padding: 1.5mm 2mm; padding: 1.1mm 1.8mm 1.2mm;
gap: 0.75mm; gap: 0.45mm;
} }
.label-container:last-child { page-break-after: avoid; } .label-container:last-child { page-break-after: avoid; }
.label-name { .label-name {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
line-height: 1.05; line-height: 1.02;
} }
.label-name-ar, .label-name-ar,
.label-name-en { .label-name-en {
@ -242,38 +317,41 @@
} }
.label-name-ar { .label-name-ar {
font-weight: 700; font-weight: 700;
font-size: 11px; font-size: 12px;
direction: rtl; direction: rtl;
} }
.label-name-en { font-size: 9px; } .label-name-en {
font-size: 10px;
font-weight: 600;
}
.label-price { .label-price {
font-size: 11px; font-size: 12px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
} }
.label-compact { .label-compact {
padding: 1mm 1.5mm; padding: 0.85mm 1.3mm 0.95mm;
gap: 0.5mm; gap: 0.35mm;
} }
.label-compact .label-name-ar { font-size: 10px; } .label-compact .label-name-ar { font-size: 10.5px; }
.label-compact .label-name-en { font-size: 8px; } .label-compact .label-name-en { font-size: 8.75px; }
.label-compact .label-price { font-size: 10px; } .label-compact .label-price { font-size: 10.5px; }
.barcode-wrap { .barcode-wrap {
width: 100%; width: 100%;
flex: 1;
min-height: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 1.5mm; padding: 0 1mm;
overflow: hidden; margin: 0.15mm 0;
overflow: visible;
} }
.barcode-wrap svg { .barcode-wrap svg {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
overflow: visible; overflow: visible;
shape-rendering: crispEdges;
} }
</style> </style>
</head> </head>
@ -307,8 +385,10 @@
const expiryText = formatBarcodeLabelDate(expiryDate) || '--/--/----'; const expiryText = formatBarcodeLabelDate(expiryDate) || '--/--/----';
return ` return `
<div class="label-date-row"><span class="label-date-key">P:</span><span class="label-date-value">${escapeBarcodeLabelHtml(productionText)}</span></div> <div class="label-date-row" style="display:flex;align-items:center;justify-content:center;gap:var(--label-date-row-gap,8px);direction:ltr;text-align:center;white-space:nowrap;">
<div class="label-date-row"><span class="label-date-key">E:</span><span class="label-date-value">${escapeBarcodeLabelHtml(expiryText)}</span></div> <span class="label-date-item" style="display:inline-flex;align-items:center;gap:var(--label-date-item-gap,4px);white-space:nowrap;"><span class="label-date-key">P:</span><span class="label-date-value">${escapeBarcodeLabelHtml(productionText)}</span></span>
<span class="label-date-item" style="display:inline-flex;align-items:center;gap:var(--label-date-item-gap,4px);white-space:nowrap;"><span class="label-date-key">E:</span><span class="label-date-value">${escapeBarcodeLabelHtml(expiryText)}</span></span>
</div>
`; `;
} }
@ -325,28 +405,28 @@
function getDatedBarcodeScale(labelWidthMm, labelHeightMm) { function getDatedBarcodeScale(labelWidthMm, labelHeightMm) {
if (labelWidthMm <= 32 || labelHeightMm <= 24) { if (labelWidthMm <= 32 || labelHeightMm <= 24) {
return 0.88; return 0.96;
} }
if (labelWidthMm <= 40 || labelHeightMm <= 30) { if (labelWidthMm <= 40 || labelHeightMm <= 30) {
return 0.84; return 0.95;
} }
if (labelWidthMm <= 50 || labelHeightMm <= 35) { if (labelWidthMm <= 50 || labelHeightMm <= 35) {
return 0.80; return 0.94;
} }
return 0.76; return 0.90;
} }
function getDatedBarcodeOptions(sku, labelWidthMm, labelHeightMm) { function getDatedBarcodeOptions(sku, labelWidthMm, labelHeightMm) {
const baseOptions = getSingleBarcodeOptions(sku, labelWidthMm, labelHeightMm); const baseOptions = getSingleBarcodeOptions(sku, labelWidthMm, labelHeightMm);
const skuLength = String(sku || '').length; const skuLength = String(sku || '').length;
const showValue = labelHeightMm >= 42 && labelWidthMm >= 50 && skuLength <= 16; const showValue = labelHeightMm >= 46 && labelWidthMm >= 50 && skuLength <= 16;
return { return {
...baseOptions, ...baseOptions,
displayValue: showValue, displayValue: showValue,
fontSize: showValue ? 9 : 8, fontSize: showValue ? 10 : 8,
textMargin: showValue ? 2 : 0, textMargin: showValue ? 2 : 0,
height: Math.max(Math.round(baseOptions.height * (showValue ? 0.78 : 0.86)), 24), height: Math.max(Math.round(baseOptions.height * (showValue ? 0.88 : 0.96)), 28),
margin: Math.max(baseOptions.margin, 6), margin: Math.max(baseOptions.margin, 6),
marginBottom: showValue ? 1 : 0 marginBottom: showValue ? 1 : 0
}; };
@ -357,11 +437,13 @@
const scale = getDatedBarcodeScale(labelWidthMm, labelHeightMm); const scale = getDatedBarcodeScale(labelWidthMm, labelHeightMm);
JsBarcode(svg, sku, getDatedBarcodeOptions(sku, labelWidthMm, labelHeightMm)); JsBarcode(svg, sku, getDatedBarcodeOptions(sku, labelWidthMm, labelHeightMm));
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
svg.setAttribute('shape-rendering', 'crispEdges');
svg.style.width = Math.round(scale * 100) + '%'; svg.style.width = Math.round(scale * 100) + '%';
svg.style.maxWidth = '100%'; svg.style.maxWidth = '100%';
svg.style.height = 'auto'; svg.style.height = 'auto';
svg.style.display = 'block'; svg.style.display = 'block';
svg.style.margin = '0 auto'; svg.style.margin = '0 auto';
svg.style.shapeRendering = 'crispEdges';
return svg.outerHTML; return svg.outerHTML;
} }
@ -375,6 +457,7 @@
const width = dimensions.width; const width = dimensions.width;
const height = dimensions.height; const height = dimensions.height;
const scale = getDatedBarcodeScale(width, height); const scale = getDatedBarcodeScale(width, height);
const compact = width <= 40 || height <= 30;
const nameContainer = document.getElementById('datedBarcodeLabelName'); const nameContainer = document.getElementById('datedBarcodeLabelName');
const datesContainer = document.getElementById('datedBarcodeLabelDates'); const datesContainer = document.getElementById('datedBarcodeLabelDates');
const priceContainer = document.getElementById('datedBarcodeLabelPrice'); const priceContainer = document.getElementById('datedBarcodeLabelPrice');
@ -388,26 +471,42 @@
} }
nameContainer.innerHTML = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn); nameContainer.innerHTML = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn);
applyBarcodePreviewNameStyles(nameContainer, compact);
datesContainer.innerHTML = buildDatedBarcodeDateRowsHtml( datesContainer.innerHTML = buildDatedBarcodeDateRowsHtml(
productionInput ? productionInput.value : '', productionInput ? productionInput.value : '',
expiryInput ? expiryInput.value : '' expiryInput ? expiryInput.value : ''
); );
applyBarcodePreviewDateStyles(datesContainer, compact);
if (priceContainer) { if (priceContainer) {
priceContainer.textContent = label.price ? 'OMR ' + label.price : ''; priceContainer.textContent = label.price ? 'OMR ' + label.price : '';
priceContainer.style.display = label.price ? 'block' : 'none'; priceContainer.style.display = label.price ? 'block' : 'none';
priceContainer.style.fontWeight = '700';
priceContainer.style.fontSize = compact ? '0.90rem' : '1.02rem';
priceContainer.style.lineHeight = '1';
priceContainer.style.marginTop = '0';
} }
previewContainer.style.width = Math.min(Math.max(width * 3.8, 180), 300) + 'px';
previewContainer.style.display = 'flex';
previewContainer.style.flexDirection = 'column';
previewContainer.style.alignItems = 'center';
previewContainer.style.justifyContent = 'center';
previewContainer.style.gap = compact ? '4px' : '5px';
previewContainer.style.width = Math.min(Math.max(width * 4.0, 190), 320) + 'px';
previewContainer.style.maxWidth = '100%'; previewContainer.style.maxWidth = '100%';
previewContainer.style.padding = height <= 30 ? '10px 12px' : '12px 14px'; previewContainer.style.padding = height <= 30 ? '10px 11px' : '11px 13px';
svg.innerHTML = ''; svg.innerHTML = '';
JsBarcode(svg, label.sku, getDatedBarcodeOptions(label.sku, width, height)); JsBarcode(svg, label.sku, getDatedBarcodeOptions(label.sku, width, height));
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
svg.setAttribute('shape-rendering', 'crispEdges');
svg.style.width = Math.round(scale * 100) + '%'; svg.style.width = Math.round(scale * 100) + '%';
svg.style.maxWidth = '100%'; svg.style.maxWidth = '100%';
svg.style.height = 'auto'; svg.style.height = 'auto';
svg.style.display = 'block'; svg.style.display = 'block';
svg.style.margin = '0 auto'; svg.style.margin = '0 auto';
svg.style.shapeRendering = 'crispEdges';
} }
function initDatedBarcodePreviewControls() { function initDatedBarcodePreviewControls() {
@ -497,8 +596,10 @@
<div class="label-container dated-label ${compactClass}"> <div class="label-container dated-label ${compactClass}">
${nameHtml ? `<div class="label-name">${nameHtml}</div>` : ''} ${nameHtml ? `<div class="label-name">${nameHtml}</div>` : ''}
<div class="barcode-wrap">${svg}</div> <div class="barcode-wrap">${svg}</div>
<div class="label-dates">${dateHtml}</div> <div class="label-meta">
${priceHtml} <div class="label-dates">${dateHtml}</div>
${priceHtml}
</div>
</div> </div>
`; `;
} }
@ -516,7 +617,7 @@
page-break-after: always; page-break-after: always;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@ -524,13 +625,13 @@
} }
.label-container:last-child { page-break-after: avoid; } .label-container:last-child { page-break-after: avoid; }
.dated-label { .dated-label {
padding: 1.2mm 2mm; padding: 0.95mm 1.45mm 1mm;
gap: 0.6mm; gap: 0.3mm;
} }
.label-name { .label-name {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
line-height: 1.05; line-height: 1.02;
} }
.label-name-ar, .label-name-ar,
.label-name-en { .label-name-en {
@ -541,57 +642,84 @@
} }
.label-name-ar { .label-name-ar {
font-weight: 700; font-weight: 700;
font-size: 10px; font-size: 11.5px;
direction: rtl; direction: rtl;
} }
.label-name-en { font-size: 8px; } .label-name-en {
.label-dates { font-size: 9.5px;
font-weight: 600;
}
.label-meta {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: center;
gap: 0.35mm; justify-content: center;
font-size: 8px; gap: 0.25mm;
line-height: 1.05; margin-top: 0.1mm;
}
.label-dates {
--label-date-row-gap: 1.2mm;
--label-date-item-gap: 0.55mm;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
direction: ltr;
font-size: 9px;
font-weight: 600;
line-height: 1;
} }
.label-date-row { .label-date-row {
display: flex; display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
max-width: 100%;
}
.label-date-item {
display: inline-flex;
align-items: center; align-items: center;
gap: 1mm;
white-space: nowrap; white-space: nowrap;
} }
.label-date-key { .label-date-key {
font-weight: 700; font-weight: 700;
} }
.label-price { .label-price {
font-size: 9px; font-size: 10px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
} }
.label-compact { .label-compact {
padding: 0.9mm 1.4mm; padding: 0.75mm 1.05mm 0.8mm;
gap: 0.45mm; gap: 0.25mm;
} }
.label-compact .label-name-ar { font-size: 9px; } .label-compact .label-name-ar { font-size: 10px; }
.label-compact .label-name-en { font-size: 7px; } .label-compact .label-name-en { font-size: 8.3px; }
.label-compact .label-dates { font-size: 7px; } .label-compact .label-meta { gap: 0.2mm; }
.label-compact .label-price { font-size: 8px; } .label-compact .label-dates {
--label-date-row-gap: 0.85mm;
--label-date-item-gap: 0.35mm;
font-size: 7.8px;
}
.label-compact .label-price { font-size: 8.8px; }
.barcode-wrap { .barcode-wrap {
width: 100%; width: 100%;
flex: 1;
min-height: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 1.2mm; padding: 0 0.7mm;
overflow: hidden; margin: 0.15mm 0;
overflow: visible;
} }
.barcode-wrap svg { .barcode-wrap svg {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
overflow: visible; overflow: visible;
shape-rendering: crispEdges;
} }
</style> </style>
</head> </head>