430 lines
22 KiB
HTML
430 lines
22 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
/* TABLE STYLING - Same as view_orders.html */
|
|
table.view-orders-table.scan-table {
|
|
margin: 0 !important;
|
|
border-spacing: 0 !important;
|
|
border-collapse: collapse !important;
|
|
width: 100% !important;
|
|
table-layout: fixed !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
table.view-orders-table.scan-table thead th {
|
|
height: 85px !important;
|
|
min-height: 85px !important;
|
|
max-height: 85px !important;
|
|
vertical-align: middle !important;
|
|
text-align: center !important;
|
|
white-space: normal !important;
|
|
word-wrap: break-word !important;
|
|
line-height: 1.3 !important;
|
|
padding: 6px 3px !important;
|
|
font-size: 11px !important;
|
|
background-color: #e9ecef !important;
|
|
font-weight: bold !important;
|
|
text-transform: none !important;
|
|
letter-spacing: 0 !important;
|
|
overflow: visible !important;
|
|
box-sizing: border-box !important;
|
|
border: 1px solid #ddd !important;
|
|
text-overflow: clip !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
table.view-orders-table.scan-table tbody td {
|
|
padding: 4px 2px !important;
|
|
font-size: 10px !important;
|
|
text-align: center !important;
|
|
border: 1px solid #ddd !important;
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
table.view-orders-table.scan-table td:nth-child(1) { width: 50px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(2) { width: 80px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(3) { width: 80px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(4) { width: 150px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(5) { width: 70px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(6) { width: 80px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(7) { width: 75px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(8) { width: 90px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(9) { width: 70px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(10) { width: 100px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(11) { width: 90px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(12) { width: 70px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(13) { width: 50px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(14) { width: 70px !important; }
|
|
table.view-orders-table.scan-table td:nth-child(15) { width: 100px !important; }
|
|
|
|
table.view-orders-table.scan-table tbody tr:hover td {
|
|
background-color: #f8f9fa !important;
|
|
}
|
|
|
|
table.view-orders-table.scan-table tbody tr.selected td {
|
|
background-color: #007bff !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.report-table-card h3 {
|
|
margin: 0 0 15px 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.report-table-card {
|
|
padding: 15px !important;
|
|
}
|
|
|
|
/* Search card styling */
|
|
.search-card {
|
|
margin-bottom: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.search-field {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.quantity-field {
|
|
width: 100px;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.search-result-table {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.print-btn {
|
|
background-color: #28a745;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.print-btn:hover {
|
|
background-color: #218838;
|
|
}
|
|
|
|
.print-btn:disabled {
|
|
background-color: #6c757d;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
|
|
<!-- ROW 1: Search Card (full width) -->
|
|
<div class="scan-container" style="display: flex; flex-direction: column; gap: 0; width: 100%;">
|
|
<div class="card search-card" style="width: 100%; max-height: 100px; min-height: 70px; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 24px;">
|
|
<div style="flex: 1 1 300px; min-width: 250px;">
|
|
<label for="search-input" style="font-weight: bold;">Search Order (CP...):</label>
|
|
<input type="text" id="search-input" class="search-field" placeholder="Type to search..." oninput="searchOrder()" style="margin-left: 10px; max-width: 250px;">
|
|
<button id="fetch-matching-btn" class="btn btn-secondary" style="margin-left: 10px; padding: 7px 16px; font-size: 14px;" onclick="fetchMatchingOrders()">Find All</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ROW 2: Two cards side by side -->
|
|
<div style="display: flex; flex-direction: row; gap: 24px; width: 100%; align-items: flex-start;">
|
|
<!-- Print Preview Card (left, with all print_module.html controls) -->
|
|
<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>
|
|
<!-- Pairing Keys Section -->
|
|
<div style="width: 100%; text-align: center; margin-bottom: 15px;">
|
|
<div id="client-select-container" style="display: none; margin-bottom: 8px;">
|
|
<label for="client-select" style="font-size: 11px; font-weight: 600; display: block; margin-bottom: 4px;">Select Printer/Client:</label>
|
|
<select id="client-select" class="form-control form-control-sm" style="width: 85%; margin: 0 auto; font-size: 11px;"></select>
|
|
</div>
|
|
<a href="{{ url_for('main.download_extension') }}" class="btn btn-info btn-sm" target="_blank" style="font-size: 11px; padding: 4px 12px;">🔑 Manage Keys</a>
|
|
</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 and barcode frames as in print_module.html... -->
|
|
<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 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>
|
|
<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;"></div>
|
|
<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>
|
|
<div style="position: absolute; left: 90.96px; top: 64.26px; width: 1px; height: 257.04px; background: #999;"></div>
|
|
<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;"></div>
|
|
<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;"></div>
|
|
<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;"></div>
|
|
<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;"></div>
|
|
<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;"></div>
|
|
<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;"></div>
|
|
<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;"></div>
|
|
</div>
|
|
<div id="barcode-frame" style="position: absolute; top: 395px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 270px; height: 50px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
<svg id="barcode-display" style="width: 100%; height: 40px;"></svg>
|
|
<div id="barcode-text" style="font-size: 8px; font-family: 'Courier New', monospace; margin-top: 2px; text-align: center; font-weight: bold;"></div>
|
|
</div>
|
|
<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;">
|
|
<svg id="vertical-barcode-display" style="width: 100%; height: 35px;"></svg>
|
|
<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%;"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Print Options removed as requested -->
|
|
</div>
|
|
<!-- Orders Table Card (right, with load button and notification system) -->
|
|
<div class="card scan-table-card" style="min-height: 700px; width: calc(100% - 350px); margin: 0;">
|
|
<h3>Data Preview</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>
|
|
<th>Qty to Print</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="unprinted-orders-table">
|
|
<!-- Data will be dynamically loaded here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Store all orders data for searching
|
|
const allOrders = {{ orders|tojson|safe }};
|
|
let selectedOrderData = null;
|
|
|
|
function searchOrder() {
|
|
const searchValue = document.getElementById('search-input').value.trim().toLowerCase();
|
|
if (!searchValue) {
|
|
selectedOrderData = null;
|
|
return;
|
|
}
|
|
// Search for matching order
|
|
const matchedOrder = allOrders.find(order =>
|
|
order.comanda_productie && order.comanda_productie.toLowerCase().includes(searchValue)
|
|
);
|
|
if (matchedOrder) {
|
|
selectedOrderData = matchedOrder;
|
|
} else {
|
|
selectedOrderData = null;
|
|
}
|
|
}
|
|
|
|
// Fetch all matching orders and populate preview table
|
|
function fetchMatchingOrders() {
|
|
const searchValue = document.getElementById('search-input').value.trim().toLowerCase();
|
|
if (!searchValue) {
|
|
alert('Please enter an order code to search.');
|
|
return;
|
|
}
|
|
// Find all matching orders
|
|
const matchingOrders = allOrders.filter(order =>
|
|
order.comanda_productie && order.comanda_productie.toLowerCase().includes(searchValue)
|
|
);
|
|
const tbody = document.getElementById('unprinted-orders-table');
|
|
tbody.innerHTML = '';
|
|
if (matchingOrders.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="16" style="text-align:center; color:#dc3545;">No matching orders found.</td></tr>';
|
|
// Clear preview card
|
|
updatePreviewCard(null);
|
|
return;
|
|
}
|
|
matchingOrders.forEach((order, idx) => {
|
|
const tr = document.createElement('tr');
|
|
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;">${order.data_livrare || '-'}</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;">${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;">${order.created_at || '-'}</td>
|
|
<td>1</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
// Update preview card with the first matching order
|
|
if (idx === 0) updatePreviewCard(order);
|
|
});
|
|
}
|
|
|
|
// Update the preview card with order data (as in print_module.html)
|
|
function updatePreviewCard(order) {
|
|
function set(id, value) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.textContent = value || '';
|
|
}
|
|
// Always clear barcode SVGs before updating
|
|
const barcode = document.getElementById('barcode-display');
|
|
if (barcode) barcode.innerHTML = '';
|
|
const vbarcode = document.getElementById('vertical-barcode-display');
|
|
if (vbarcode) vbarcode.innerHTML = '';
|
|
if (!order) {
|
|
set('customer-name-row', '');
|
|
set('quantity-ordered-value', '');
|
|
set('client-order-info', '');
|
|
set('delivery-date-value', '');
|
|
set('description-value', '');
|
|
set('size-value', '');
|
|
set('article-code-value', '');
|
|
set('prod-order-value', '');
|
|
set('barcode-text', '');
|
|
set('vertical-barcode-text', '');
|
|
return;
|
|
}
|
|
set('customer-name-row', order.customer_name || '');
|
|
set('quantity-ordered-value', order.cantitate || '');
|
|
set('client-order-info', (order.com_achiz_client && order.nr_linie_com_client) ? `${order.com_achiz_client}-${order.nr_linie_com_client}` : '');
|
|
set('delivery-date-value', order.data_livrare || '');
|
|
set('description-value', order.descr_com_prod || '');
|
|
set('size-value', order.dimensiune || '');
|
|
set('article-code-value', order.cod_articol || '');
|
|
set('prod-order-value', (order.comanda_productie && order.cantitate) ? `${order.comanda_productie}-${order.cantitate}` : '');
|
|
set('barcode-text', order.comanda_productie ? `${order.comanda_productie}/001` : '');
|
|
set('vertical-barcode-text', (order.com_achiz_client && order.nr_linie_com_client) ? `${order.com_achiz_client}/${order.nr_linie_com_client}` : '');
|
|
// Generate barcodes if JsBarcode is available
|
|
if (typeof JsBarcode !== 'undefined') {
|
|
try {
|
|
JsBarcode("#barcode-display", order.comanda_productie ? `${order.comanda_productie}/001` : ' ', { format: "CODE128", width: 2, height: 40, displayValue: false, margin: 2 });
|
|
} catch (e) {}
|
|
try {
|
|
JsBarcode("#vertical-barcode-display", (order.com_achiz_client && order.nr_linie_com_client) ? `${order.com_achiz_client}/${order.nr_linie_com_client}` : ' ', { format: "CODE128", width: 1.5, height: 35, displayValue: false, margin: 2 });
|
|
} catch (e) {}
|
|
}
|
|
}
|
|
|
|
function selectOrder(orderId) {
|
|
// Find order by ID
|
|
const order = allOrders.find(o => o.id === orderId);
|
|
if (order) {
|
|
// Populate search field
|
|
document.getElementById('search-input').value = order.comanda_productie;
|
|
|
|
// Display in search result
|
|
displaySelectedOrder(order);
|
|
|
|
// Highlight selected row
|
|
document.querySelectorAll('#orders-table tr').forEach(row => {
|
|
row.classList.remove('selected');
|
|
});
|
|
event.currentTarget.classList.add('selected');
|
|
|
|
// Scroll to top
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
}
|
|
|
|
function displaySelectedOrder(order) {
|
|
selectedOrderData = order;
|
|
|
|
const resultDiv = document.getElementById('search-result');
|
|
const tbody = document.getElementById('selected-order-row');
|
|
|
|
// Format date
|
|
let dateStr = '-';
|
|
if (order.data_livrare) {
|
|
dateStr = order.data_livrare;
|
|
}
|
|
|
|
// Format created_at
|
|
let createdStr = '-';
|
|
if (order.created_at) {
|
|
createdStr = order.created_at;
|
|
}
|
|
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<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;">${dateStr}</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;">
|
|
${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;">${createdStr}</td>
|
|
</tr>
|
|
`;
|
|
|
|
resultDiv.style.display = 'block';
|
|
document.getElementById('print-button').disabled = false;
|
|
}
|
|
|
|
function printLabels() {
|
|
if (!selectedOrderData) {
|
|
alert('Please select an order first');
|
|
return;
|
|
}
|
|
|
|
const quantity = parseInt(document.getElementById('quantity-input').value);
|
|
if (!quantity || quantity < 1) {
|
|
alert('Please enter a valid quantity');
|
|
return;
|
|
}
|
|
|
|
// Redirect to print module with order data
|
|
const orderIds = [selectedOrderData.id];
|
|
const url = `/print_module?order_ids=${orderIds.join(',')}&quantity=${quantity}`;
|
|
window.location.href = url;
|
|
}
|
|
</script>
|
|
{% endblock %}
|