QZ Tray thermal printing: PDF workflow, barcode fixes, margin adjustments, and layout improvements
This commit is contained in:
36
backup/db_test.html
Normal file
36
backup/db_test.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Database Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Database Connection Test</h2>
|
||||
<button id="test-btn">Test Database</button>
|
||||
<div id="result"></div>
|
||||
|
||||
<script>
|
||||
document.getElementById('test-btn').addEventListener('click', function() {
|
||||
const resultDiv = document.getElementById('result');
|
||||
resultDiv.innerHTML = 'Loading...';
|
||||
|
||||
fetch('/get_unprinted_orders')
|
||||
.then(response => {
|
||||
console.log('Response status:', response.status);
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
} else {
|
||||
throw new Error('HTTP ' + response.status);
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Data received:', data);
|
||||
resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
resultDiv.innerHTML = 'Error: ' + error.message;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1085
backup/print_module copy.html
Normal file
1085
backup/print_module copy.html
Normal file
File diff suppressed because it is too large
Load Diff
1346
backup/print_module_backup.html
Normal file
1346
backup/print_module_backup.html
Normal file
File diff suppressed because it is too large
Load Diff
487
backup/print_module_clean.html
Normal file
487
backup/print_module_clean.html
Normal file
@@ -0,0 +1,487 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
#label-preview {
|
||||
background: #fafafa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Enhanced table styling */
|
||||
.card.scan-table-card table.print-module-table.scan-table thead th {
|
||||
border-bottom: 2px solid #dee2e6 !important;
|
||||
background-color: #f8f9fa !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;
|
||||
}
|
||||
|
||||
.card.scan-table-card table.print-module-table.scan-table tbody tr:hover td {
|
||||
background-color: #f8f9fa !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.card.scan-table-card table.print-module-table.scan-table tbody tr.selected td {
|
||||
background-color: #007bff !important;
|
||||
color: white !important;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="scan-container" style="display: flex; flex-direction: row; gap: 20px; width: 100%; align-items: flex-start;">
|
||||
<!-- 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="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>
|
||||
|
||||
<!-- Label Preview Section -->
|
||||
<div id="label-preview" style="border: 1px solid #ddd; 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;">
|
||||
<!-- 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
|
||||
</div>
|
||||
|
||||
<!-- Row 2 content: Customer Name -->
|
||||
<div id="customer-name-row" style="position: absolute; top: 32.13px; left: 0; right: 0; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #000;">
|
||||
<!-- Customer name will be populated here -->
|
||||
</div>
|
||||
|
||||
<!-- Horizontal dividing lines -->
|
||||
<div style="position: absolute; top: 32.13px; left: 0; right: 0; height: 1px; background: #999;"></div>
|
||||
<div style="position: absolute; top: 64.26px; left: 0; right: 0; height: 1px; background: #999;"></div>
|
||||
<div style="position: absolute; top: 96.39px; left: 0; right: 0; height: 1px; background: #999;"></div>
|
||||
<div style="position: absolute; top: 128.52px; left: 0; right: 0; height: 1px; background: #999;"></div>
|
||||
<div style="position: absolute; top: 160.65px; left: 0; right: 0; height: 1px; background: #999;"></div>
|
||||
<div style="position: absolute; top: 224.91px; left: 0; right: 0; height: 1px; background: #999;"></div>
|
||||
<div style="position: absolute; top: 257.04px; left: 0; right: 0; height: 1px; background: #999;"></div>
|
||||
<div style="position: absolute; top: 289.17px; left: 0; right: 0; height: 1px; background: #999;"></div>
|
||||
|
||||
<!-- Vertical dividing line -->
|
||||
<div style="position: absolute; left: 90.96px; top: 64.26px; width: 1px; height: 257.04px; background: #999;"></div>
|
||||
|
||||
<!-- Row 3: Quantity ordered -->
|
||||
<div style="position: absolute; top: 64.26px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
|
||||
Quantity ordered
|
||||
</div>
|
||||
<div id="quantity-ordered-value" style="position: absolute; top: 64.26px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; color: #000;">
|
||||
<!-- Quantity value will be populated here -->
|
||||
</div>
|
||||
|
||||
<!-- Row 4: Customer order -->
|
||||
<div style="position: absolute; top: 96.39px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
|
||||
Customer order
|
||||
</div>
|
||||
<div id="client-order-info" style="position: absolute; top: 96.39px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #000;">
|
||||
<!-- Client order info will be populated here -->
|
||||
</div>
|
||||
|
||||
<!-- Row 5: Delivery date -->
|
||||
<div style="position: absolute; top: 128.52px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
|
||||
Delivery date
|
||||
</div>
|
||||
<div id="delivery-date-value" style="position: absolute; top: 128.52px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #000;">
|
||||
<!-- Delivery date value will be populated here -->
|
||||
</div>
|
||||
|
||||
<!-- Row 6: Description (double height) -->
|
||||
<div style="position: absolute; top: 160.65px; left: 0; width: 90.96px; height: 64.26px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
|
||||
Product description
|
||||
</div>
|
||||
<div id="description-value" style="position: absolute; top: 160.65px; left: 90.96px; width: 136.44px; height: 64.26px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #000; text-align: center; padding: 2px; overflow: hidden;">
|
||||
<!-- Description will be populated here -->
|
||||
</div>
|
||||
|
||||
<!-- Row 7: Size -->
|
||||
<div style="position: absolute; top: 224.91px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
|
||||
Size
|
||||
</div>
|
||||
<div id="size-value" style="position: absolute; top: 224.91px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #000;">
|
||||
<!-- Size value will be populated here -->
|
||||
</div>
|
||||
|
||||
<!-- Row 8: Article Code -->
|
||||
<div style="position: absolute; top: 257.04px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
|
||||
Article code
|
||||
</div>
|
||||
<div id="article-code-value" style="position: absolute; top: 257.04px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; color: #000;">
|
||||
<!-- Article code will be populated here -->
|
||||
</div>
|
||||
|
||||
<!-- Row 9: Production Order -->
|
||||
<div style="position: absolute; top: 289.17px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
|
||||
Prod. order
|
||||
</div>
|
||||
<div id="prod-order-value" style="position: absolute; top: 289.17px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #000;">
|
||||
<!-- Production order will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom barcode section -->
|
||||
<div style="position: absolute; bottom: 28.35px; left: 11.34px; width: 227.4px; height: 28.35px; border: 2px solid #333; background: white; display: flex; align-items: center; justify-content: center;">
|
||||
<div id="barcode-text" style="font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; letter-spacing: 1px; color: #000;">
|
||||
<!-- Barcode text will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vertical barcode (right side) -->
|
||||
<div style="position: absolute; right: 11.34px; top: 65.7px; width: 28.35px; height: 321.3px; border: 2px solid #333; background: white; writing-mode: vertical-lr; text-orientation: sideways; display: flex; align-items: center; justify-content: center;">
|
||||
<div id="vertical-barcode-text" style="font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; letter-spacing: 1px; color: #000; transform: rotate(180deg);">
|
||||
<!-- Vertical barcode text will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Print Options -->
|
||||
<div style="width: 100%; margin-top: 20px;">
|
||||
<!-- Print Method Selection -->
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label style="font-size: 12px; font-weight: 600; color: #495057; margin-bottom: 8px; display: block;">
|
||||
📄 Print Method:
|
||||
</label>
|
||||
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="radio" name="printMethod" id="pdfGenerate" value="pdf" checked>
|
||||
<label class="form-check-label" for="pdfGenerate" style="font-size: 11px; line-height: 1.3;">
|
||||
<strong>Generate PDF</strong><br>
|
||||
<span class="text-muted">Create PDF for manual printing (recommended)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Print Button -->
|
||||
<div style="width: 100%; text-align: center; margin-bottom: 15px;">
|
||||
<button id="print-label-btn" class="btn btn-success" style="font-size: 14px; padding: 10px 30px; border-radius: 6px; font-weight: 600;">
|
||||
📄 Generate PDF Labels
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Print Information -->
|
||||
<div style="width: 100%; text-align: center; color: #6c757d; font-size: 11px; line-height: 1.4;">
|
||||
<div style="margin-bottom: 5px;">Creates sequential labels based on quantity</div>
|
||||
<small>(e.g., CP00000711-001 to CP00000711-063)</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Preview Card -->
|
||||
<div class="card scan-table-card" style="min-height: 700px; width: calc(100% - 350px); margin: 0;">
|
||||
<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">
|
||||
<table class="scan-table print-module-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Comanda Productie</th>
|
||||
<th>Cod Articol</th>
|
||||
<th>Descr. Com. Prod</th>
|
||||
<th>Cantitate</th>
|
||||
<th>Data Livrare</th>
|
||||
<th>Dimensiune</th>
|
||||
<th>Com. Achiz. Client</th>
|
||||
<th>Nr. Linie</th>
|
||||
<th>Customer Name</th>
|
||||
<th>Customer Art. Nr.</th>
|
||||
<th>Open Order</th>
|
||||
<th>Line</th>
|
||||
<th>Printed</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="unprinted-orders-table">
|
||||
<!-- Data will be dynamically loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Simplified notification system
|
||||
function showNotification(message, type = 'info') {
|
||||
const existingNotifications = document.querySelectorAll('.notification');
|
||||
existingNotifications.forEach(n => n.remove());
|
||||
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `notification alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : type === 'warning' ? 'warning' : 'info'}`;
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
max-width: 350px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
`;
|
||||
notification.innerHTML = `
|
||||
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<span style="flex: 1; padding-right: 10px;">${message}</span>
|
||||
<button type="button" onclick="this.parentElement.parentElement.remove()" style="background: none; border: none; font-size: 20px; cursor: pointer;">×</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
if (notification.parentElement) {
|
||||
notification.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Database loading functionality
|
||||
document.getElementById('check-db-btn').addEventListener('click', function() {
|
||||
const button = this;
|
||||
const originalText = button.textContent;
|
||||
button.textContent = 'Loading...';
|
||||
button.disabled = true;
|
||||
|
||||
fetch('/get_unprinted_orders')
|
||||
.then(response => {
|
||||
if (response.status === 403) {
|
||||
return response.json().then(errorData => {
|
||||
throw new Error(`Access Denied: ${errorData.error}`);
|
||||
});
|
||||
} else if (!response.ok) {
|
||||
return response.text().then(text => {
|
||||
throw new Error(`HTTP ${response.status}: ${text}`);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Received data:', data);
|
||||
const tbody = document.getElementById('unprinted-orders-table');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (data.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="15" style="text-align: center; padding: 20px; color: #28a745;"><strong>✅ All orders have been printed!</strong><br><small>No unprinted orders remaining.</small></td></tr>';
|
||||
clearLabelPreview();
|
||||
return;
|
||||
}
|
||||
|
||||
data.forEach((order, index) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.dataset.orderId = order.id;
|
||||
tr.dataset.orderIndex = index;
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `
|
||||
<td style="font-size: 9px;">${order.id}</td>
|
||||
<td style="font-size: 9px;"><strong>${order.comanda_productie}</strong></td>
|
||||
<td style="font-size: 9px;">${order.cod_articol || '-'}</td>
|
||||
<td style="font-size: 9px;">${order.descr_com_prod}</td>
|
||||
<td style="text-align: right; font-weight: 600; font-size: 9px;">${order.cantitate}</td>
|
||||
<td style="text-align: center; font-size: 9px;">
|
||||
${order.data_livrare ? new Date(order.data_livrare).toLocaleDateString() : '-'}
|
||||
</td>
|
||||
<td style="text-align: center; font-size: 9px;">${order.dimensiune || '-'}</td>
|
||||
<td style="font-size: 9px;">${order.com_achiz_client || '-'}</td>
|
||||
<td style="text-align: right; font-size: 9px;">${order.nr_linie_com_client || '-'}</td>
|
||||
<td style="font-size: 9px;">${order.customer_name || '-'}</td>
|
||||
<td style="font-size: 9px;">${order.customer_article_number || '-'}</td>
|
||||
<td style="font-size: 9px;">${order.open_for_order || '-'}</td>
|
||||
<td style="text-align: right; font-size: 9px;">${order.line_number || '-'}</td>
|
||||
<td style="text-align: center; font-size: 9px;">
|
||||
${order.printed_labels == 1 ?
|
||||
'<span style="color: #28a745; font-weight: bold;">✅ Yes</span>' :
|
||||
'<span style="color: #dc3545;">❌ No</span>'}
|
||||
</td>
|
||||
<td style="font-size: 9px; color: #6c757d;">
|
||||
${order.created_at ? new Date(order.created_at).toLocaleString() : '-'}
|
||||
</td>
|
||||
`;
|
||||
|
||||
tr.addEventListener('click', function() {
|
||||
console.log('Row clicked:', order.id);
|
||||
|
||||
// Remove selection from other rows
|
||||
document.querySelectorAll('.print-module-table tbody tr').forEach(row => {
|
||||
row.classList.remove('selected');
|
||||
const cells = row.querySelectorAll('td');
|
||||
cells.forEach(cell => {
|
||||
cell.style.backgroundColor = '';
|
||||
cell.style.color = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Select this row
|
||||
this.classList.add('selected');
|
||||
const cells = this.querySelectorAll('td');
|
||||
cells.forEach(cell => {
|
||||
cell.style.backgroundColor = '#007bff';
|
||||
cell.style.color = 'white';
|
||||
});
|
||||
|
||||
// Update label preview with selected order data
|
||||
updateLabelPreview(order);
|
||||
});
|
||||
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
// Auto-select first row
|
||||
setTimeout(() => {
|
||||
const firstRow = document.querySelector('.print-module-table tbody tr');
|
||||
if (firstRow && !firstRow.querySelector('td[colspan]')) {
|
||||
firstRow.click();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
showNotification(`✅ Loaded ${data.length} unprinted orders`, 'success');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading orders:', error);
|
||||
const tbody = document.getElementById('unprinted-orders-table');
|
||||
tbody.innerHTML = '<tr><td colspan="15" style="text-align: center; padding: 20px; color: #dc3545;"><strong>❌ Failed to load data</strong><br><small>' + error.message + '</small></td></tr>';
|
||||
showNotification('❌ Failed to load orders: ' + error.message, 'error');
|
||||
})
|
||||
.finally(() => {
|
||||
button.textContent = originalText;
|
||||
button.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
// Update label preview with order data
|
||||
function updateLabelPreview(order) {
|
||||
document.getElementById('customer-name-row').textContent = order.customer_name || 'N/A';
|
||||
document.getElementById('quantity-ordered-value').textContent = order.cantitate || '0';
|
||||
document.getElementById('client-order-info').textContent =
|
||||
`${order.com_achiz_client || 'N/A'}-${order.nr_linie_com_client || '00'}`;
|
||||
document.getElementById('delivery-date-value').textContent =
|
||||
order.data_livrare ? new Date(order.data_livrare).toLocaleDateString() : 'N/A';
|
||||
document.getElementById('description-value').textContent = order.descr_com_prod || 'N/A';
|
||||
document.getElementById('size-value').textContent = order.dimensiune || 'N/A';
|
||||
document.getElementById('article-code-value').textContent = order.cod_articol || 'N/A';
|
||||
document.getElementById('prod-order-value').textContent = order.comanda_productie || 'N/A';
|
||||
document.getElementById('barcode-text').textContent = order.comanda_productie || 'N/A';
|
||||
document.getElementById('vertical-barcode-text').textContent =
|
||||
`${order.comanda_productie || '000000'}-${order.nr_linie_com_client ? String(order.nr_linie_com_client).padStart(2, '0') : '00'}`;
|
||||
}
|
||||
|
||||
// Clear label preview when no orders are available
|
||||
function clearLabelPreview() {
|
||||
document.getElementById('customer-name-row').textContent = 'No orders available';
|
||||
document.getElementById('quantity-ordered-value').textContent = '0';
|
||||
document.getElementById('client-order-info').textContent = 'N/A';
|
||||
document.getElementById('delivery-date-value').textContent = 'N/A';
|
||||
document.getElementById('size-value').textContent = 'N/A';
|
||||
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';
|
||||
}
|
||||
|
||||
// PDF Generation Handler
|
||||
document.getElementById('print-label-btn').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get selected order
|
||||
const selectedRow = document.querySelector('.print-module-table tbody tr.selected');
|
||||
if (!selectedRow) {
|
||||
showNotification('⚠️ Please select an order first from the table below.', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
handlePDFGeneration(selectedRow);
|
||||
});
|
||||
|
||||
// Handle PDF generation
|
||||
function handlePDFGeneration(selectedRow) {
|
||||
const orderId = selectedRow.dataset.orderId;
|
||||
const quantityCell = selectedRow.querySelector('td:nth-child(5)');
|
||||
const quantity = quantityCell ? parseInt(quantityCell.textContent) : 1;
|
||||
const prodOrderCell = selectedRow.querySelector('td:nth-child(2)');
|
||||
const prodOrder = prodOrderCell ? prodOrderCell.textContent.trim() : 'N/A';
|
||||
|
||||
const button = document.getElementById('print-label-btn');
|
||||
const originalText = button.textContent;
|
||||
button.textContent = 'Generating PDF...';
|
||||
button.disabled = true;
|
||||
|
||||
console.log(`Generating PDF for order ${orderId} with ${quantity} labels`);
|
||||
|
||||
// Generate PDF with paper-saving mode enabled (optimized for thermal printers)
|
||||
fetch(`/generate_labels_pdf/${orderId}/true`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
// Create blob URL for PDF
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
|
||||
// Create download link for PDF
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `labels_${prodOrder}_${quantity}pcs.pdf`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
|
||||
// Also open PDF in new tab for printing
|
||||
const printWindow = window.open(url, '_blank');
|
||||
if (printWindow) {
|
||||
printWindow.focus();
|
||||
|
||||
// Wait for PDF to load, then show print dialog
|
||||
setTimeout(() => {
|
||||
printWindow.print();
|
||||
|
||||
// Clean up blob URL after print dialog is shown
|
||||
setTimeout(() => {
|
||||
window.URL.revokeObjectURL(url);
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
} else {
|
||||
// If popup was blocked, clean up immediately
|
||||
setTimeout(() => {
|
||||
window.URL.revokeObjectURL(url);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Show success message
|
||||
showNotification(`✅ PDF generated successfully!\n📊 Order: ${prodOrder}\n📦 Labels: ${quantity} pieces`, 'success');
|
||||
|
||||
// Refresh the orders table to reflect printed status
|
||||
setTimeout(() => {
|
||||
document.getElementById('check-db-btn').click();
|
||||
}, 1000);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error generating PDF:', error);
|
||||
showNotification('❌ Failed to generate PDF labels. Error: ' + error.message, 'error');
|
||||
})
|
||||
.finally(() => {
|
||||
// Reset button state
|
||||
button.textContent = originalText;
|
||||
button.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
// Load orders on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(() => {
|
||||
document.getElementById('check-db-btn').click();
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user