From b12231e10084676d723031c912d230462cd7a989 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Wed, 6 May 2026 13:15:06 +0000 Subject: [PATCH] update date sticker 2 --- index.php | 2 +- pages/barcode_pos_script.php | 238 +++++++++++++++++++++++++++-------- 2 files changed, 184 insertions(+), 56 deletions(-) diff --git a/index.php b/index.php index 6934201..0d55a39 100644 --- a/index.php +++ b/index.php @@ -12248,7 +12248,7 @@ document.addEventListener('DOMContentLoaded', function() {
-
+
diff --git a/pages/barcode_pos_script.php b/pages/barcode_pos_script.php index df434fe..7b4cf13 100644 --- a/pages/barcode_pos_script.php +++ b/pages/barcode_pos_script.php @@ -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; } @@ -307,8 +385,10 @@ const expiryText = formatBarcodeLabelDate(expiryDate) || '--/--/----'; return ` -
P:${escapeBarcodeLabelHtml(productionText)}
-
E:${escapeBarcodeLabelHtml(expiryText)}
+
+ P:${escapeBarcodeLabelHtml(productionText)} + E:${escapeBarcodeLabelHtml(expiryText)} +
`; } @@ -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 @@
${nameHtml ? `
${nameHtml}
` : ''}
${svg}
-
${dateHtml}
- ${priceHtml} +
+
${dateHtml}
+ ${priceHtml} +
`; } @@ -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; }