updated to preview orders
This commit is contained in:
@@ -7,13 +7,120 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Enhanced table styling to match view_orders.html with higher specificity */
|
||||
.card.scan-table-card table.print-module-table.scan-table {
|
||||
width: 100% !important;
|
||||
margin-bottom: 1rem !important;
|
||||
color: #212529 !important;
|
||||
border-collapse: collapse !important;
|
||||
}
|
||||
|
||||
.card.scan-table-card table.print-module-table.scan-table thead th {
|
||||
vertical-align: bottom !important;
|
||||
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 tbody td {
|
||||
padding: 0.25rem 0.4rem !important;
|
||||
vertical-align: middle !important;
|
||||
border-top: 1px solid #dee2e6 !important;
|
||||
font-size: 9px !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
/* HOVER EFFECTS - Higher specificity */
|
||||
.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:not(.selected):hover td {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
/* ROW SELECTION STYLES - Maximum specificity */
|
||||
.card.scan-table-card table.print-module-table.scan-table tbody tr.selected td {
|
||||
background-color: #007bff !important;
|
||||
background: #007bff !important;
|
||||
color: white !important;
|
||||
border-color: #0056b3 !important;
|
||||
}
|
||||
|
||||
.card.scan-table-card table.print-module-table.scan-table tbody tr.selected:hover td {
|
||||
background-color: #0056b3 !important;
|
||||
background: #0056b3 !important;
|
||||
color: white !important;
|
||||
border-color: #004085 !important;
|
||||
}
|
||||
|
||||
.card.scan-table-card table.print-module-table.scan-table tbody tr.selected td span {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Additional universal overrides for selection */
|
||||
tr.selected td {
|
||||
background-color: #007bff !important;
|
||||
background: #007bff !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
tbody tr.selected td {
|
||||
background-color: #007bff !important;
|
||||
background: #007bff !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
table tbody tr.selected td {
|
||||
background-color: #007bff !important;
|
||||
background: #007bff !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* COLUMN WIDTH SPECIFICATIONS - Higher specificity */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(1),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(1) { width: 50px !important; } /* ID */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(2),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(2) { width: 80px !important; } /* Comanda Productie */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(3),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(3) { width: 80px !important; } /* Cod Articol */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(4),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(4) { width: 150px !important; } /* Descr Com Prod */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(5),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(5) { width: 70px !important; } /* Cantitate */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(6),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(6) { width: 80px !important; } /* Data Livrare */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(7),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(7) { width: 75px !important; } /* Dimensiune */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(8),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(8) { width: 90px !important; } /* Com Achiz Client */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(9),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(9) { width: 70px !important; } /* Nr Linie */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(10),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(10) { width: 100px !important; } /* Customer Name */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(11),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(11) { width: 90px !important; } /* Customer Art Nr */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(12),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(12) { width: 70px !important; } /* Open Order */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(13),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(13) { width: 50px !important; } /* Line */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(14),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(14) { width: 70px !important; } /* Printed */
|
||||
.card.scan-table-card table.print-module-table.scan-table th:nth-child(15),
|
||||
.card.scan-table-card table.print-module-table.scan-table td:nth-child(15) { width: 100px !important; } /* Created */
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="scan-container">
|
||||
<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; justify-content: center; align-items: center; min-height: 400px;">
|
||||
<div class="card scan-form-card" style="display: flex; justify-content: center; align-items: center; min-height: 320px; width: 330px; flex-shrink: 0;">
|
||||
<h3 style="position: absolute; top: 15px; left: 15px;">Label Preview</h3>
|
||||
<div id="label-preview" style="border: 1px solid #ddd; padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
|
||||
<!-- Label content rectangle -->
|
||||
@@ -106,9 +213,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Barcode Frame - positioned 10px below rectangle with 2mm side margins -->
|
||||
<div id="barcode-frame" style="position: absolute; top: 395px; left: 7.56px; width: 295.44px; height: 50 px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<div id="barcode-frame" style="position: absolute; top: 395px; left: 7.56px; width: 295.44px; height: 50px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<!-- Code 128 Barcode representation -->
|
||||
<div id="barcode-display" style="width: 100%; height: 50px; background: linear-gradient(90deg, #000 1px, transparent 1px, transparent 2px, #000 2px, transparent 3px, #000 4px, transparent 5px, #000 6px, transparent 7px, #000 8px, transparent 9px, #000 10px, transparent 11px, #000 12px, transparent 13px); background-size: 15px 100%; background-repeat: repeat-x;">
|
||||
<div id="barcode-display" style="width: 100%; height: 45px; background: linear-gradient(90deg, #000 1px, transparent 1px, transparent 2px, #000 2px, transparent 3px, #000 4px, transparent 5px, #000 6px, transparent 7px, #000 8px, transparent 9px, #000 10px, transparent 11px, #000 12px, transparent 13px); background-size: 15px 100%; background-repeat: repeat-x;">
|
||||
</div>
|
||||
<!-- Barcode text below the bars -->
|
||||
<div id="barcode-text" style="font-size: 8px; font-family: 'Courier New', monospace; margin-top: 2px; text-align: center; font-weight: bold;">
|
||||
@@ -130,25 +237,25 @@
|
||||
</div>
|
||||
|
||||
<!-- Data Preview Card -->
|
||||
<div class="card scan-table-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">Check Database</button>
|
||||
<div class="report-table-container">
|
||||
<table class="scan-table">
|
||||
<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>Comanda<br>Productie</th>
|
||||
<th>Cod<br>Articol</th>
|
||||
<th>Descr. Com.<br>Prod</th>
|
||||
<th>Cantitate</th>
|
||||
<th>Data<br>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>Com.Achiz.<br>Client</th>
|
||||
<th>Nr.<br>Linie</th>
|
||||
<th>Customer<br>Name</th>
|
||||
<th>Customer<br>Art. Nr.</th>
|
||||
<th>Open<br>Order</th>
|
||||
<th>Line</th>
|
||||
<th>Printed</th>
|
||||
<th>Created</th>
|
||||
@@ -169,79 +276,81 @@ document.getElementById('check-db-btn').addEventListener('click', function() {
|
||||
.then(data => {
|
||||
const tbody = document.getElementById('unprinted-orders-table');
|
||||
tbody.innerHTML = '';
|
||||
data.forEach(order => {
|
||||
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>${order.id}</td>
|
||||
<td><strong>${order.comanda_productie}</strong></td>
|
||||
<td>${order.cod_articol || '-'}</td>
|
||||
<td>${order.descr_com_prod}</td>
|
||||
<td style="text-align: right; font-weight: 600;">${order.cantitate}</td>
|
||||
<td style="text-align: center;">
|
||||
<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;">${order.dimensiune || '-'}</td>
|
||||
<td>${order.com_achiz_client || '-'}</td>
|
||||
<td style="text-align: right;">${order.nr_linie_com_client || '-'}</td>
|
||||
<td>${order.customer_name || '-'}</td>
|
||||
<td>${order.customer_article_number || '-'}</td>
|
||||
<td>${order.open_for_order || '-'}</td>
|
||||
<td style="text-align: right;">${order.line_number || '-'}</td>
|
||||
<td style="text-align: center;">
|
||||
<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: 11px; color: #6c757d;">
|
||||
<td style="font-size: 9px; color: #6c757d;">
|
||||
${order.created_at ? new Date(order.created_at).toLocaleString() : '-'}
|
||||
</td>
|
||||
`;
|
||||
|
||||
// Add click event for row selection
|
||||
tr.addEventListener('click', function() {
|
||||
console.log('Row clicked:', order.order_number);
|
||||
|
||||
// Remove selection from other rows
|
||||
document.querySelectorAll('.print-module-table tbody tr').forEach(row => {
|
||||
row.classList.remove('selected');
|
||||
// Clear inline styles
|
||||
const cells = row.querySelectorAll('td');
|
||||
cells.forEach(cell => {
|
||||
cell.style.backgroundColor = '';
|
||||
cell.style.color = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Select this row
|
||||
this.classList.add('selected');
|
||||
console.log('Row selected, classes:', this.className);
|
||||
|
||||
// Force visual selection with inline styles
|
||||
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);
|
||||
});
|
||||
|
||||
// Update the label preview with customer name from first row
|
||||
// Update the label preview with first row by default
|
||||
if (data.length > 0) {
|
||||
const customerName = data[0].customer_name || 'N/A';
|
||||
document.getElementById('customer-name-row').textContent = customerName;
|
||||
updateLabelPreview(data[0]);
|
||||
|
||||
// Update quantity ordered value
|
||||
const quantity = data[0].cantitate || '0';
|
||||
document.getElementById('quantity-ordered-value').textContent = quantity;
|
||||
|
||||
// Update client order info (Com.Achiz.Client - Nr. Linie)
|
||||
const comAchizClient = data[0].com_achiz_client || '';
|
||||
const nrLinie = data[0].nr_linie_com_client || '';
|
||||
const clientOrderInfo = comAchizClient && nrLinie ? `${comAchizClient}-${nrLinie}` : 'N/A';
|
||||
document.getElementById('client-order-info').textContent = clientOrderInfo;
|
||||
|
||||
// Update vertical barcode with client order info or default
|
||||
const verticalBarcodeData = clientOrderInfo !== 'N/A' ? clientOrderInfo : '000000-00';
|
||||
document.getElementById('vertical-barcode-text').textContent = verticalBarcodeData;
|
||||
|
||||
// Update delivery date (using data_livrare column)
|
||||
const deliveryDate = data[0].data_livrare ? new Date(data[0].data_livrare).toLocaleDateString() : 'N/A';
|
||||
document.getElementById('delivery-date-value').textContent = deliveryDate;
|
||||
|
||||
// Update size (using dimensiune column)
|
||||
const size = data[0].dimensiune || 'N/A';
|
||||
document.getElementById('size-value').textContent = size;
|
||||
|
||||
// Update description (Descr. Com. Prod)
|
||||
const description = data[0].descr_com_prod || 'N/A';
|
||||
document.getElementById('description-value').textContent = description;
|
||||
|
||||
// Update article code (using customer_article_number column)
|
||||
const articleCode = data[0].customer_article_number || 'N/A';
|
||||
document.getElementById('article-code-value').textContent = articleCode;
|
||||
|
||||
// Update prod order (comanda_productie - cantitate)
|
||||
const comandaProductie = data[0].comanda_productie || '';
|
||||
const cantitate = data[0].cantitate || '';
|
||||
const prodOrder = comandaProductie && cantitate ? `${comandaProductie}-${cantitate}` : 'N/A';
|
||||
document.getElementById('prod-order-value').textContent = prodOrder;
|
||||
|
||||
// Update barcode with the same prod order data
|
||||
document.getElementById('barcode-text').textContent = prodOrder;
|
||||
// Auto-select first row
|
||||
setTimeout(() => {
|
||||
const firstRow = document.querySelector('.print-module-table tbody tr');
|
||||
if (firstRow) {
|
||||
firstRow.classList.add('selected');
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
document.getElementById('customer-name-row').textContent = 'No data available';
|
||||
document.getElementById('quantity-ordered-value').textContent = '0';
|
||||
@@ -269,5 +378,50 @@ document.getElementById('check-db-btn').addEventListener('click', function() {
|
||||
document.getElementById('vertical-barcode-text').textContent = '000000-00';
|
||||
});
|
||||
});
|
||||
|
||||
// Function to update label preview with selected order data
|
||||
function updateLabelPreview(order) {
|
||||
const customerName = order.customer_name || 'N/A';
|
||||
document.getElementById('customer-name-row').textContent = customerName;
|
||||
|
||||
// Update quantity ordered value
|
||||
const quantity = order.cantitate || '0';
|
||||
document.getElementById('quantity-ordered-value').textContent = quantity;
|
||||
|
||||
// Update client order info (Com.Achiz.Client - Nr. Linie)
|
||||
const comAchizClient = order.com_achiz_client || '';
|
||||
const nrLinie = order.nr_linie_com_client || '';
|
||||
const clientOrderInfo = comAchizClient && nrLinie ? `${comAchizClient}-${nrLinie}` : 'N/A';
|
||||
document.getElementById('client-order-info').textContent = clientOrderInfo;
|
||||
|
||||
// Update vertical barcode with client order info or default
|
||||
const verticalBarcodeData = clientOrderInfo !== 'N/A' ? clientOrderInfo : '000000-00';
|
||||
document.getElementById('vertical-barcode-text').textContent = verticalBarcodeData;
|
||||
|
||||
// Update delivery date (using data_livrare column)
|
||||
const deliveryDate = order.data_livrare ? new Date(order.data_livrare).toLocaleDateString() : 'N/A';
|
||||
document.getElementById('delivery-date-value').textContent = deliveryDate;
|
||||
|
||||
// Update size (using dimensiune column)
|
||||
const size = order.dimensiune || 'N/A';
|
||||
document.getElementById('size-value').textContent = size;
|
||||
|
||||
// Update description (Descr. Com. Prod)
|
||||
const description = order.descr_com_prod || 'N/A';
|
||||
document.getElementById('description-value').textContent = description;
|
||||
|
||||
// Update article code (using customer_article_number column)
|
||||
const articleCode = order.customer_article_number || 'N/A';
|
||||
document.getElementById('article-code-value').textContent = articleCode;
|
||||
|
||||
// Update prod order (comanda_productie - cantitate)
|
||||
const comandaProductie = order.comanda_productie || '';
|
||||
const cantitate = order.cantitate || '';
|
||||
const prodOrder = comandaProductie && cantitate ? `${comandaProductie}-${cantitate}` : 'N/A';
|
||||
document.getElementById('prod-order-value').textContent = prodOrder;
|
||||
|
||||
// Update barcode with the same prod order data
|
||||
document.getElementById('barcode-text').textContent = prodOrder;
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user