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="datedBarcodeLabelName" class="fw-bold small mb-1"></div>
<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>
<div class="row g-2 mb-3 text-start">

238
pages/barcode_pos_script.php
View File

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