ske087/quality_recticel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated view in label preview

Browse Source
This commit is contained in:
Quality System Admin
2025-10-27 20:25:31 +02:00
parent d142129de6
commit a960285d59
15 changed files with 1889 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
py_app/app/templates/print_module.html
View File

@@ -1,57 +1,13 @@
{% extends "base.html" %}
{% block head %}
<style>
#label-preview {
background: #fafafa;
position: relative;
overflow: visible;
}
/* Enhanced table styling */
.card.scan-table-card table.print-module-table.scan-table thead th {
border-bottom: 2px solid var(--app-border-color, #dee2e6) !important;
background-color: var(--app-table-header-bg, #2a3441) !important;
color: var(--app-text-color, #ffffff) !important;
padding: 0.25rem 0.4rem !important;
text-align: left !important;
font-weight: 600 !important;
font-size: 10px !important;
line-height: 1.2 !important;
}
.card.scan-table-card table.print-module-table.scan-table {
width: 100% !important;
border-collapse: collapse !important;
background-color: var(--app-card-bg, #2a3441) !important;
}
.card.scan-table-card table.print-module-table.scan-table tbody tr:hover td {
background-color: var(--app-hover-bg, #3a4451) !important;
cursor: pointer !important;
}
.card.scan-table-card table.print-module-table.scan-table tbody td {
background-color: var(--app-card-bg, #2a3441) !important;
color: var(--app-text-color, #ffffff) !important;
border: 1px solid var(--app-border-color, #495057) !important;
padding: 0.25rem 0.4rem !important;
}
.card.scan-table-card table.print-module-table.scan-table tbody tr.selected td {
background-color: #007bff !important;
color: white !important;
}
/* Print Progress Modal Styles */
</style>
<!-- Print Module CSS is now loaded via base.html for all printing pages -->
{% endblock %}
{% block content %}
<div class="scan-container" style="display: flex; flex-direction: row; gap: 20px; width: 100%; align-items: flex-start;">
<div class="scan-container">
<!-- Label Preview Card -->
<div class="card scan-form-card" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 700px; width: 330px; flex-shrink: 0; position: relative; padding: 15px;">
<div class="card scan-form-card">
<div class="label-view-title" style="width: 100%; text-align: center; padding: 0 0 15px 0; font-size: 18px; font-weight: bold; letter-spacing: 0.5px;">Label View</div>
<!-- Pairing Keys Section - Only show dropdown if multiple keys exist -->
@@ -66,9 +22,9 @@
</div>
<!-- Label Preview Section -->
<div id="label-preview" style="border: 1px solid #ddd; padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
<div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
<!-- Label content rectangle -->
<div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; border: 2px solid #333; background: white;">
<div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; background: white;">
<!-- Top row content: Company name -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 32.13px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; color: #000; z-index: 10;">
INNOFA ROMANIA SRL
@@ -150,9 +106,9 @@
</div>
<!-- Barcode Frame - positioned 10px below rectangle, centered, constrained to label width -->
<div id="barcode-frame" style="position: absolute; top: 395px; left: 50%; transform: translateX(-50%); width: 220px; max-width: 220px; height: 50px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;">
<div id="barcode-frame">
<!-- Code 128 Barcode representation -->
<svg id="barcode-display" style="width: 100%; height: 40px; max-width: 220px;"></svg>
<svg id="barcode-display"></svg>
<!-- Barcode text below the bars (hidden in preview) -->
<div id="barcode-text" style="font-size: 8px; font-family: 'Courier New', monospace; margin-top: 2px; text-align: center; font-weight: bold; display: none;">
@@ -161,9 +117,9 @@
</div>
<!-- Vertical Barcode Frame - positioned on the right side, rotated 90 degrees, spans the height of main rectangle -->
<div id="vertical-barcode-frame" style="position: absolute; top: 50px; left: 270px; width: 321.3px; height: 40px; background: white; display: flex; align-items: center; justify-content: center; transform: rotate(90deg); transform-origin: left center;">
<div id="vertical-barcode-frame">
<!-- Vertical Code 128 Barcode representation -->
<svg id="vertical-barcode-display" style="width: 100%; height: 35px;"></svg>
<svg id="vertical-barcode-display"></svg>
<!-- Vertical barcode text (hidden in preview) -->
<div id="vertical-barcode-text" style="position: absolute; bottom: -15px; font-size: 7px; font-family: 'Courier New', monospace; text-align: center; font-weight: bold; width: 100%; display: none;">
@@ -180,18 +136,21 @@
📄 Print Method:
</div>
<div class="form-check" style="margin-bottom: 6px;">
<input class="form-check-input" type="radio" name="printMethod" id="qzTrayPrint" value="qztray" checked>
<label class="form-check-label" for="qzTrayPrint" style="font-size: 11px; line-height: 1.2;">
<strong>🖨️ Direct Print</strong> <span id="qztray-status" class="badge badge-success" style="font-size: 9px; padding: 2px 6px;">Ready</span>
</label>
</div>
<div class="form-check" id="pdf-option-container" style="display: none; margin-bottom: 6px;">
<input class="form-check-input" type="radio" name="printMethod" id="pdfGenerate" value="pdf">
<label class="form-check-label" for="pdfGenerate" style="font-size: 11px; line-height: 1.2;">
<strong>📄 PDF Export</strong> <span class="text-muted" style="font-size: 10px;">(fallback)</span>
</label>
<!-- Print method options in horizontal layout -->
<div style="display: flex; gap: 15px; flex-wrap: wrap;">
<div class="form-check" style="margin-bottom: 6px;">
<input class="form-check-input" type="radio" name="printMethod" id="qzTrayPrint" value="qztray" checked>
<label class="form-check-label" for="qzTrayPrint" style="font-size: 11px; line-height: 1.2;">
<strong>🖨️ Direct Print</strong> <span id="qztray-status" class="badge badge-success" style="font-size: 9px; padding: 2px 6px;">Ready</span>
</label>
</div>
<div class="form-check" id="pdf-option-container" style="display: none; margin-bottom: 6px;">
<input class="form-check-input" type="radio" name="printMethod" id="pdfGenerate" value="pdf">
<label class="form-check-label" for="pdfGenerate" style="font-size: 11px; line-height: 1.2;">
<strong>📄 PDF Export</strong> <span class="text-muted" style="font-size: 10px;">(fallback)</span>
</label>
</div>
</div>
</div>
@@ -232,7 +191,7 @@
</div>
<!-- Data Preview Card -->
<div class="card scan-table-card" style="min-height: 700px; width: calc(100% - 350px); margin: 0;">
<div class="card scan-table-card">
<h3>Data Preview (Unprinted Orders)</h3>
<button id="check-db-btn" class="btn btn-primary mb-3">Load Orders</button>
<div class="report-table-container">
@@ -266,7 +225,8 @@
<!-- JavaScript Libraries -->
<!-- JsBarcode library for real barcode generation -->
<script src="{{ url_for('static', filename='JsBarcode.all.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<!-- Backup local version: <script src="{{ url_for('static', filename='JsBarcode.all.min.js') }}"></script> -->
<!-- Add html2canvas library for capturing preview as image -->
<script src="{{ url_for('static', filename='html2canvas.min.js') }}"></script>
<!-- PATCHED QZ Tray library - works with custom server using pairing key authentication -->
@@ -316,6 +276,7 @@ function showNotification(message, type = 'info') {
// Wait for DOM to be ready before attaching event listeners
document.addEventListener('DOMContentLoaded', function() {
console.log('🚀 DOM Content Loaded - Initializing page...');
console.log('🔍 Checking JsBarcode library:', typeof JsBarcode !== 'undefined' ? 'LOADED' : 'NOT LOADED');
// Database loading functionality
document.getElementById('check-db-btn').addEventListener('click', function() {
@@ -375,7 +336,7 @@ document.getElementById('check-db-btn').addEventListener('click', function() {
'<span style="color: #dc3545;">❌ No</span>'}
</td>
<td style="font-size: 9px; color: #6c757d;">
${order.created_at ? new Date(order.created_at).toLocaleString() : '-'}
${order.created_at ? new Date(order.created_at).toLocaleDateString() : '-'}
</td>
`;
@@ -433,6 +394,8 @@ document.getElementById('check-db-btn').addEventListener('click', function() {
// Update label preview with order data
function updateLabelPreview(order) {
console.log('🔍 Updating label preview with order:', order);
const customerName = order.customer_name || 'N/A';
document.getElementById('customer-name-row').textContent = customerName;
@@ -470,58 +433,72 @@ function updateLabelPreview(order) {
// Update horizontal barcode with CP format (e.g., CP00000711/001)
// Show the first piece number (001) in preview
const horizontalBarcodeData = comandaProductie ? `${comandaProductie}/001` : 'N/A';
const horizontalBarcodeData = comandaProductie ? `${comandaProductie}/001` : 'SAMPLE001';
document.getElementById('barcode-text').textContent = horizontalBarcodeData;
// Generate horizontal barcode visual using JsBarcode
console.log('🔍 Attempting to generate horizontal barcode:', horizontalBarcodeData);
console.log('🔍 JsBarcode available?', typeof JsBarcode !== 'undefined');
if (horizontalBarcodeData !== 'N/A' && typeof JsBarcode !== 'undefined') {
if (typeof JsBarcode !== 'undefined') {
try {
const barcodeElement = document.querySelector("#barcode-display");
const barcodeElement = document.getElementById("barcode-display");
console.log('🔍 Horizontal barcode element:', barcodeElement);
JsBarcode("#barcode-display", horizontalBarcodeData, {
format: "CODE128",
width: 1.2,
height: 40,
displayValue: false,
margin: 0,
fontSize: 0,
textMargin: 0
});
console.log('✅ Horizontal barcode generated successfully');
if (barcodeElement) {
barcodeElement.innerHTML = ''; // Clear existing content
JsBarcode(barcodeElement, horizontalBarcodeData, {
format: "CODE128",
width: 2,
height: 50,
displayValue: false,
margin: 5,
background: "#ffffff",
lineColor: "#000000"
});
console.log('✅ Horizontal barcode generated successfully for:', horizontalBarcodeData);
} else {
console.error('❌ Horizontal barcode element not found');
}
} catch (e) {
console.error('❌ Failed to generate horizontal barcode:', e);
console.error('Error details:', e.message);
}
} else {
console.warn('⚠️ Skipping horizontal barcode generation:',
horizontalBarcodeData === 'N/A' ? 'No data' : 'JsBarcode not loaded');
}
// Update vertical barcode with client order format (e.g., Abcderd/65)
const verticalBarcodeData = comAchizClient && nrLinie ? `${comAchizClient}/${nrLinie}` : '000000/00';
// Update vertical barcode with client order format (e.g., Abcderd65)
const verticalBarcodeData = comAchizClient && nrLinie ? `${comAchizClient}${nrLinie}` : 'SAMPLE00';
document.getElementById('vertical-barcode-text').textContent = verticalBarcodeData;
// Generate vertical barcode visual using JsBarcode (will be rotated by CSS)
console.log('🔍 Attempting to generate vertical barcode:', verticalBarcodeData);
if (verticalBarcodeData !== '000000/00' && typeof JsBarcode !== 'undefined') {
if (typeof JsBarcode !== 'undefined') {
try {
const verticalElement = document.querySelector("#vertical-barcode-display");
const verticalElement = document.getElementById("vertical-barcode-display");
console.log('🔍 Vertical barcode element:', verticalElement);
JsBarcode("#vertical-barcode-display", verticalBarcodeData, {
format: "CODE128",
width: 1.5,
height: 35,
displayValue: false,
margin: 2
});
console.log('✅ Vertical barcode generated successfully');
if (verticalElement) {
verticalElement.innerHTML = ''; // Clear existing content
JsBarcode(verticalElement, verticalBarcodeData, {
format: "CODE128",
width: 2,
height: 40,
displayValue: false,
margin: 5,
background: "#ffffff",
lineColor: "#000000"
});
console.log('✅ Vertical barcode generated successfully for:', verticalBarcodeData);
} else {
console.error('❌ Vertical barcode element not found');
}
} catch (e) {
console.error('❌ Failed to generate vertical barcode:', e);
console.error('Error details:', e.message);
}
} else {
console.warn('⚠️ Skipping vertical barcode generation:',
@@ -539,14 +516,72 @@ function clearLabelPreview() {
document.getElementById('description-value').textContent = 'N/A';
document.getElementById('article-code-value').textContent = 'N/A';
document.getElementById('prod-order-value').textContent = 'N/A';
document.getElementById('barcode-text').textContent = 'N/A';
document.getElementById('vertical-barcode-text').textContent = '000000/00';
document.getElementById('barcode-text').textContent = 'SAMPLE001';
document.getElementById('vertical-barcode-text').textContent = 'SAMPLE00';
// Clear barcode SVGs
const horizontalBarcode = document.getElementById('barcode-display');
const verticalBarcode = document.getElementById('vertical-barcode-display');
if (horizontalBarcode) horizontalBarcode.innerHTML = '';
if (verticalBarcode) verticalBarcode.innerHTML = '';
// Generate sample barcodes instead of clearing
generateSampleBarcodes();
}
// Generate sample barcodes for preview
function generateSampleBarcodes() {
console.log('🔍 Generating sample barcodes...');
console.log('🔍 JsBarcode available:', typeof JsBarcode !== 'undefined');
if (typeof JsBarcode !== 'undefined') {
try {
// Clear any existing content first
const horizontalElement = document.getElementById('barcode-display');
const verticalElement = document.getElementById('vertical-barcode-display');
console.log('🔍 Horizontal element:', horizontalElement);
console.log('🔍 Vertical element:', verticalElement);
if (horizontalElement) {
horizontalElement.innerHTML = '';
console.log('🔍 Horizontal element cleared, generating barcode...');
// Generate horizontal sample barcode with simpler parameters first
JsBarcode(horizontalElement, "SAMPLE001", {
format: "CODE128",
width: 1,
height: 40,
displayValue: false,
margin: 2
});
console.log('✅ Horizontal sample barcode generated');
console.log('🔍 Horizontal SVG content:', horizontalElement.innerHTML);
} else {
console.error('❌ Horizontal barcode element not found');
}
if (verticalElement) {
verticalElement.innerHTML = '';
console.log('🔍 Vertical element cleared, generating barcode...');
// Generate vertical sample barcode
JsBarcode(verticalElement, "SAMPLE00", {
format: "CODE128",
width: 1,
height: 35,
displayValue: false,
margin: 2
});
console.log('✅ Vertical sample barcode generated');
console.log('🔍 Vertical SVG content:', verticalElement.innerHTML);
} else {
console.error('❌ Vertical barcode element not found');
}
console.log('✅ All sample barcodes generated successfully');
} catch (e) {
console.error('❌ Failed to generate sample barcodes:', e);
console.error('Error details:', e.message, e.stack);
}
} else {
console.warn('⚠️ JsBarcode not loaded, cannot generate sample barcodes');
console.warn('🔍 Available objects:', Object.keys(window));
}
}
// QZ Tray Integration
@@ -1501,13 +1536,19 @@ function updatePrintMethodUI() {
// Initialize UI
updatePrintMethodUI();
// Initialize sample barcodes on page load
setTimeout(() => {
console.log('🔍 Initializing sample barcodes...');
generateSampleBarcodes();
}, 1000);
// Initialize QZ Tray
setTimeout(initializeQZTray, 1000);
// Load orders
setTimeout(() => {
document.getElementById('check-db-btn').click();
}, 500);
}, 1500);
}); // End DOMContentLoaded
</script>