updated view in label preview
This commit is contained in:
Quality System Admin
@@ -12,6 +12,10 @@
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
|
||||
<!-- Legacy CSS for backward compatibility (temporarily) -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<!-- Print Module CSS for Labels/Printing pages -->
|
||||
{% if request.endpoint in ['main.etichete', 'main.upload_data', 'main.view_orders', 'main.print_module', 'main.print_lost_labels'] %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/print_module.css') }}">
|
||||
{% endif %}
|
||||
<!-- Page-specific CSS -->
|
||||
{% block extra_css %}{% endblock %}
|
||||
{% block head %}{% endblock %}
|
||||
@@ -43,6 +47,9 @@
|
||||
{% if request.endpoint.startswith('daily_mirror') %}
|
||||
<a href="{{ url_for('daily_mirror.daily_mirror_main_route') }}" class="btn btn-info btn-sm ms-2"> <i class="fas fa-home"></i> Daily Mirror Main</a>
|
||||
{% endif %}
|
||||
{% if request.endpoint in ['main.etichete', 'main.upload_data', 'main.view_orders', 'main.print_module', 'main.print_lost_labels'] %}
|
||||
<a href="{{ url_for('main.etichete') }}" class="btn btn-success btn-sm ms-2"> <i class="fas fa-tags"></i> Labels Module</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('main.dashboard') }}" class="btn go-to-dashboard-btn ms-2">Go to Dashboard</a>
|
||||
{% if 'user' in session %}
|
||||
<span class="user-info ms-2">You are logged in as {{ session['user'] }}</span>
|
||||
|
||||
@@ -4,6 +4,47 @@
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/daily_mirror_tune.css') }}">
|
||||
<style>
|
||||
/* Force modal width - using viewport width for maximum responsiveness */
|
||||
.modal#editModal .modal-dialog {
|
||||
max-width: 95vw !important;
|
||||
width: 95vw !important;
|
||||
margin: 1.75rem auto !important;
|
||||
}
|
||||
|
||||
.modal#editModal .modal-dialog.modal-xl {
|
||||
max-width: 95vw !important;
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
/* Override ALL Bootstrap media queries */
|
||||
@media (min-width: 576px) {
|
||||
.modal#editModal .modal-dialog {
|
||||
max-width: 95vw !important;
|
||||
width: 95vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.modal#editModal .modal-dialog {
|
||||
max-width: 95vw !important;
|
||||
width: 95vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.modal#editModal .modal-dialog,
|
||||
.modal#editModal .modal-dialog.modal-xl {
|
||||
max-width: 95vw !important;
|
||||
width: 95vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure pointer events work */
|
||||
.modal#editModal .modal-dialog {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
@@ -102,9 +143,9 @@
|
||||
<table class="table table-striped table-hover" id="ordersTable">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Order ID</th>
|
||||
<th>Order Line</th>
|
||||
<th>Customer</th>
|
||||
<th>Client Order</th>
|
||||
<th>Client Order Line</th>
|
||||
<th>Article Code</th>
|
||||
<th>Description</th>
|
||||
<th>Quantity</th>
|
||||
@@ -149,8 +190,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable" style="max-width: 95vw !important; width: 95vw !important;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editModalLabel">Edit Customer Order</h5>
|
||||
@@ -161,91 +202,148 @@
|
||||
<input type="hidden" id="editRecordId">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editOrderId" class="form-label">Order ID</label>
|
||||
<input type="text" class="form-control" id="editOrderId" readonly>
|
||||
<!-- Column 1: Order Information -->
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editOrderLine" class="form-label">Order Line</label>
|
||||
<input type="text" class="form-control" id="editOrderLine" readonly>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editOrderId" class="form-label">Order ID</label>
|
||||
<input type="text" class="form-control" id="editOrderId">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editLineNumber" class="form-label">Line Number</label>
|
||||
<input type="text" class="form-control" id="editLineNumber">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editClientOrderLine" class="form-label">Client Order Line</label>
|
||||
<input type="text" class="form-control" id="editClientOrderLine" readonly>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editOrderDate" class="form-label">Order Date</label>
|
||||
<input type="date" class="form-control" id="editOrderDate">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editDeliveryDate" class="form-label">Delivery Date</label>
|
||||
<input type="date" class="form-control" id="editDeliveryDate">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editOrderStatus" class="form-label">Order Status</label>
|
||||
<select class="form-control" id="editOrderStatus">
|
||||
<option value="PENDING">Pending</option>
|
||||
<option value="CONFIRMED">Confirmed</option>
|
||||
<option value="Confirmat">Confirmat</option>
|
||||
<option value="IN_PROGRESS">In Progress</option>
|
||||
<option value="FINISHED">Finished</option>
|
||||
<option value="DELIVERED">Delivered</option>
|
||||
<option value="CANCELLED">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editPriority" class="form-label">Priority</label>
|
||||
<select class="form-control" id="editPriority">
|
||||
<option value="LOW">Low</option>
|
||||
<option value="NORMAL">Normal</option>
|
||||
<option value="HIGH">High</option>
|
||||
<option value="URGENT">Urgent</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editCustomerCode" class="form-label">Customer Code</label>
|
||||
<input type="text" class="form-control" id="editCustomerCode">
|
||||
|
||||
<!-- Column 2: Customer and Article Information -->
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editCustomerCode" class="form-label">Customer Code</label>
|
||||
<input type="text" class="form-control" id="editCustomerCode">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editCustomerName" class="form-label">Customer Name</label>
|
||||
<input type="text" class="form-control" id="editCustomerName">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editArticleCode" class="form-label">Article Code</label>
|
||||
<input type="text" class="form-control" id="editArticleCode">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editDescription" class="form-label">Article Description</label>
|
||||
<textarea class="form-control" id="editDescription" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editQuantity" class="form-label">Quantity Requested</label>
|
||||
<input type="number" class="form-control" id="editQuantity">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editBalance" class="form-label">Balance</label>
|
||||
<input type="number" step="0.01" class="form-control" id="editBalance">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editUnitOfMeasure" class="form-label">Unit of Measure</label>
|
||||
<input type="text" class="form-control" id="editUnitOfMeasure">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editArticleStatus" class="form-label">Article Status</label>
|
||||
<input type="text" class="form-control" id="editArticleStatus">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editCustomerName" class="form-label">Customer Name</label>
|
||||
<input type="text" class="form-control" id="editCustomerName">
|
||||
|
||||
<!-- Column 3: Production Information -->
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editProductGroup" class="form-label">Product Group</label>
|
||||
<input type="text" class="form-control" id="editProductGroup">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editModel" class="form-label">Model</label>
|
||||
<input type="text" class="form-control" id="editModel">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editProductionOrder" class="form-label">Production Order</label>
|
||||
<input type="text" class="form-control" id="editProductionOrder">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editProductionStatus" class="form-label">Production Status</label>
|
||||
<input type="text" class="form-control" id="editProductionStatus">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editClosed" class="form-label">Closed</label>
|
||||
<input type="text" class="form-control" id="editClosed">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editClientOrder" class="form-label">Client Order</label>
|
||||
<input type="text" class="form-control" id="editClientOrder">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editArticleCode" class="form-label">Article Code</label>
|
||||
<input type="text" class="form-control" id="editArticleCode">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editQuantity" class="form-label">Quantity</label>
|
||||
<input type="number" class="form-control" id="editQuantity">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editDescription" class="form-label">Article Description</label>
|
||||
<textarea class="form-control" id="editDescription" rows="2"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editDeliveryDate" class="form-label">Delivery Date</label>
|
||||
<input type="date" class="form-control" id="editDeliveryDate">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editOrderStatus" class="form-label">Order Status</label>
|
||||
<select class="form-control" id="editOrderStatus">
|
||||
<option value="PENDING">Pending</option>
|
||||
<option value="CONFIRMED">Confirmed</option>
|
||||
<option value="Confirmat">Confirmat</option>
|
||||
<option value="IN_PROGRESS">In Progress</option>
|
||||
<option value="FINISHED">Finished</option>
|
||||
<option value="DELIVERED">Delivered</option>
|
||||
<option value="CANCELLED">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editPriority" class="form-label">Priority</label>
|
||||
<select class="form-control" id="editPriority">
|
||||
<option value="LOW">Low</option>
|
||||
<option value="NORMAL">Normal</option>
|
||||
<option value="HIGH">High</option>
|
||||
<option value="URGENT">Urgent</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editProductGroup" class="form-label">Product Group</label>
|
||||
<input type="text" class="form-control" id="editProductGroup">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editOrderDate" class="form-label">Order Date</label>
|
||||
<input type="date" class="form-control" id="editOrderDate">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
<i class="fas fa-times"></i> Cancel
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveRecord()">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
<div class="modal-footer d-flex justify-content-between">
|
||||
<button type="button" class="btn btn-danger" onclick="deleteRecord()" style="min-width: 150px;">
|
||||
<i class="fas fa-trash"></i> Delete Record
|
||||
</button>
|
||||
<div>
|
||||
<button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal" style="min-width: 100px;">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveRecord()" style="min-width: 150px;">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -335,12 +433,12 @@ function displayOrdersData(data) {
|
||||
data.forEach(record => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td><strong>${record.order_id}</strong></td>
|
||||
<td><strong>${record.order_line}</strong></td>
|
||||
<td>
|
||||
<small class="text-muted d-block">${record.customer_code}</small>
|
||||
${record.customer_name}
|
||||
</td>
|
||||
<td>${record.client_order || '-'}</td>
|
||||
<td>${record.client_order_line || '-'}</td>
|
||||
<td><code>${record.article_code}</code></td>
|
||||
<td><small>${record.article_description || '-'}</small></td>
|
||||
<td><span class="badge bg-info">${record.quantity_requested}</span></td>
|
||||
@@ -448,8 +546,43 @@ function editRecord(recordId) {
|
||||
recordData = data.data.find(record => record.id === recordId);
|
||||
if (recordData) {
|
||||
populateEditModal(recordData);
|
||||
const editModal = new bootstrap.Modal(document.getElementById('editModal'));
|
||||
editModal.show();
|
||||
|
||||
// Get modal elements
|
||||
const modalElement = document.getElementById('editModal');
|
||||
const modalDialog = modalElement.querySelector('.modal-dialog');
|
||||
|
||||
// Remove any existing modal instances to prevent conflicts
|
||||
const existingModal = bootstrap.Modal.getInstance(modalElement);
|
||||
if (existingModal) {
|
||||
existingModal.dispose();
|
||||
}
|
||||
|
||||
const modal = new bootstrap.Modal(modalElement, {
|
||||
backdrop: true,
|
||||
keyboard: true,
|
||||
focus: true
|
||||
});
|
||||
|
||||
// Show the modal first
|
||||
modal.show();
|
||||
|
||||
// Force the modal dialog width AFTER modal is shown - using 95% of viewport width
|
||||
setTimeout(() => {
|
||||
if (modalDialog) {
|
||||
console.log('Applying width after modal shown');
|
||||
modalDialog.style.setProperty('max-width', '95vw', 'important');
|
||||
modalDialog.style.setProperty('width', '95vw', 'important');
|
||||
modalDialog.style.setProperty('margin', '1.75rem auto', 'important');
|
||||
|
||||
// Also apply to modal content for good measure
|
||||
const modalContent = modalDialog.querySelector('.modal-content');
|
||||
if (modalContent) {
|
||||
modalContent.style.setProperty('width', '100%', 'important');
|
||||
}
|
||||
|
||||
console.log('Modal dialog computed width:', window.getComputedStyle(modalDialog).width);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -461,34 +594,53 @@ function editRecord(recordId) {
|
||||
|
||||
function populateEditModal(record) {
|
||||
document.getElementById('editRecordId').value = record.id;
|
||||
document.getElementById('editOrderLine').value = record.order_line;
|
||||
document.getElementById('editOrderId').value = record.order_id;
|
||||
document.getElementById('editLineNumber').value = record.line_number || '';
|
||||
document.getElementById('editCustomerCode').value = record.customer_code;
|
||||
document.getElementById('editCustomerName').value = record.customer_name;
|
||||
document.getElementById('editClientOrder').value = record.client_order || '';
|
||||
document.getElementById('editClientOrderLine').value = record.client_order_line || '';
|
||||
document.getElementById('editArticleCode').value = record.article_code;
|
||||
document.getElementById('editDescription').value = record.article_description || '';
|
||||
document.getElementById('editQuantity').value = record.quantity_requested;
|
||||
document.getElementById('editBalance').value = record.balance || '';
|
||||
document.getElementById('editUnitOfMeasure').value = record.unit_of_measure || '';
|
||||
document.getElementById('editDeliveryDate').value = record.delivery_date;
|
||||
document.getElementById('editOrderDate').value = record.order_date;
|
||||
document.getElementById('editOrderStatus').value = record.order_status;
|
||||
document.getElementById('editArticleStatus').value = record.article_status || '';
|
||||
document.getElementById('editPriority').value = record.priority || 'NORMAL';
|
||||
document.getElementById('editProductGroup').value = record.product_group || '';
|
||||
document.getElementById('editOrderDate').value = record.order_date;
|
||||
document.getElementById('editProductionOrder').value = record.production_order || '';
|
||||
document.getElementById('editProductionStatus').value = record.production_status || '';
|
||||
document.getElementById('editModel').value = record.model || '';
|
||||
document.getElementById('editClosed').value = record.closed || '';
|
||||
}
|
||||
|
||||
function saveRecord() {
|
||||
const recordId = document.getElementById('editRecordId').value;
|
||||
const data = {
|
||||
order_line: document.getElementById('editOrderLine').value,
|
||||
order_id: document.getElementById('editOrderId').value,
|
||||
line_number: document.getElementById('editLineNumber').value,
|
||||
customer_code: document.getElementById('editCustomerCode').value,
|
||||
customer_name: document.getElementById('editCustomerName').value,
|
||||
client_order: document.getElementById('editClientOrder').value,
|
||||
client_order_line: document.getElementById('editClientOrderLine').value,
|
||||
article_code: document.getElementById('editArticleCode').value,
|
||||
article_description: document.getElementById('editDescription').value,
|
||||
quantity_requested: parseInt(document.getElementById('editQuantity').value) || 0,
|
||||
balance: parseFloat(document.getElementById('editBalance').value) || null,
|
||||
unit_of_measure: document.getElementById('editUnitOfMeasure').value,
|
||||
delivery_date: document.getElementById('editDeliveryDate').value,
|
||||
order_date: document.getElementById('editOrderDate').value,
|
||||
order_status: document.getElementById('editOrderStatus').value,
|
||||
article_status: document.getElementById('editArticleStatus').value,
|
||||
priority: document.getElementById('editPriority').value,
|
||||
product_group: document.getElementById('editProductGroup').value,
|
||||
order_date: document.getElementById('editOrderDate').value
|
||||
production_order: document.getElementById('editProductionOrder').value,
|
||||
production_status: document.getElementById('editProductionStatus').value,
|
||||
model: document.getElementById('editModel').value,
|
||||
closed: document.getElementById('editClosed').value
|
||||
};
|
||||
|
||||
fetch(`/daily_mirror/api/tune/orders_data/${recordId}`, {
|
||||
@@ -520,6 +672,39 @@ function saveRecord() {
|
||||
});
|
||||
}
|
||||
|
||||
function deleteRecord() {
|
||||
const recordId = document.getElementById('editRecordId').value;
|
||||
const orderLine = document.getElementById('editOrderLine').value;
|
||||
|
||||
if (!confirm(`⚠️ Are you sure you want to delete order line "${orderLine}"?\n\nThis action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/daily_mirror/api/tune/orders_data/${recordId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
|
||||
// Close modal and reload data
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
|
||||
modal.hide();
|
||||
|
||||
alert('Record deleted successfully!');
|
||||
loadOrdersData(currentPage);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error deleting record:', error);
|
||||
alert('Error deleting record: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
function saveAllChanges() {
|
||||
alert('Save All Changes functionality will be implemented for bulk operations.');
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<p>Access the print module to print labels.</p>
|
||||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||||
<a href="{{ url_for('main.print_module') }}" class="btn">Launch Printing Module</a>
|
||||
<a href="{{ url_for('main.print_module') }}" class="btn">Launch lost labels printing module</a>
|
||||
<a href="{{ url_for('main.print_lost_labels') }}" class="btn">Launch lost labels printing module</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,170 +1,26 @@
|
||||
{% 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;
|
||||
}
|
||||
|
||||
/* Force barcode SVG elements to be black */
|
||||
#barcode-display rect,
|
||||
#vertical-barcode-display rect {
|
||||
fill: #000000 !important;
|
||||
stroke: #000000 !important;
|
||||
}
|
||||
|
||||
#barcode-display path,
|
||||
#vertical-barcode-display path {
|
||||
fill: #000000 !important;
|
||||
stroke: #000000 !important;
|
||||
}
|
||||
|
||||
/* Ensure barcode frames have proper contrast */
|
||||
#barcode-frame,
|
||||
#vertical-barcode-frame {
|
||||
background: #ffffff !important;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
</style>
|
||||
<!-- Print Module CSS is now loaded via base.html for all printing pages -->
|
||||
{% 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 class="scan-container lost-labels">
|
||||
<div class="card search-card">
|
||||
<div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
|
||||
<label for="search-input" style="font-weight: bold; white-space: nowrap;">Search Order (CP...):</label>
|
||||
<input type="text" id="search-input" class="search-field" placeholder="Type to search..." oninput="searchOrder()" style="flex: 1; min-width: 200px; max-width: 300px;">
|
||||
<button id="fetch-matching-btn" class="btn btn-secondary" style="padding: 7px 16px; font-size: 14px; white-space: nowrap;" 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;">
|
||||
<!-- ROW 2: Two cards side by side (25% / 75% layout) -->
|
||||
<div class="row-container">
|
||||
<!-- Print Preview Card (left, 25% width) -->
|
||||
<div class="card scan-form-card" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 700px; flex: 0 0 25%; 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;">
|
||||
@@ -175,9 +31,9 @@ table.view-orders-table.scan-table tbody tr.selected td {
|
||||
<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;">
|
||||
<div id="label-preview" style="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 id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; 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>
|
||||
@@ -204,13 +60,13 @@ table.view-orders-table.scan-table tbody tr.selected td {
|
||||
<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 id="barcode-frame">
|
||||
<svg id="barcode-display"></svg>
|
||||
<div id="barcode-text"></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 id="vertical-barcode-frame">
|
||||
<svg id="vertical-barcode-display"></svg>
|
||||
<div id="vertical-barcode-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Print Options (copied from print_module.html) -->
|
||||
@@ -220,17 +76,22 @@ table.view-orders-table.scan-table tbody tr.selected td {
|
||||
<div id="print-method-label" style="font-size: 12px; font-weight: 600; color: #495057; margin-bottom: 8px;">
|
||||
📄 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>
|
||||
<!-- Printer Selection for QZ Tray (Compact) -->
|
||||
@@ -277,10 +138,9 @@ table.view-orders-table.scan-table tbody tr.selected td {
|
||||
</div>
|
||||
</div>
|
||||
</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;">
|
||||
<!-- Orders Table Card (right, 75% width) -->
|
||||
<div class="card scan-table-card" style="min-height: 700px; flex: 0 0 75%; 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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -2,79 +2,13 @@
|
||||
{% block title %}Upload Order Data for Labels{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
/* VIEW ORDERS TABLE - Specific styling (copied from 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;
|
||||
}
|
||||
.report-table-card h3 {
|
||||
margin: 0 0 15px 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.report-table-card {
|
||||
padding: 15px !important;
|
||||
}
|
||||
</style>
|
||||
<!-- Print Module CSS is now loaded via base.html for all printing pages -->
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="scan-container">
|
||||
<!-- Upload Orders Card (first, fixed position) -->
|
||||
<div class="card scan-form-card" style="margin-bottom: 24px;">
|
||||
<!-- Upload Orders Card (first, 25% width) -->
|
||||
<div class="card scan-form-card">
|
||||
{% if leftover_description %}
|
||||
<h3>Left over orders</h3>
|
||||
<div style="color: #dc3545; font-weight: bold; margin-bottom: 10px;">{{ leftover_description }}</div>
|
||||
@@ -143,8 +77,8 @@ table.view-orders-table.scan-table tbody tr:hover td {
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Preview Table Card (expandable height, scrollable) -->
|
||||
<div class="card scan-table-card" style="margin-bottom: 24px; max-height: 480px; overflow-y: auto;">
|
||||
<!-- Preview Table Card (75% width, scrollable) -->
|
||||
<div class="card scan-table-card" style="max-height: 600px; overflow-y: auto;">
|
||||
{% if show_preview %}
|
||||
<h3>CSV Data Preview - {{ filename }}</h3>
|
||||
<table class="scan-table">
|
||||
|
||||
@@ -2,95 +2,7 @@
|
||||
{% block title %}View Uploaded Orders{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
/* VIEW ORDERS TABLE - Specific styling */
|
||||
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;
|
||||
}
|
||||
|
||||
/* HEADER STYLES for 2-line text */
|
||||
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: var(--header-bg-color) !important;
|
||||
color: var(--header-text-color) !important;
|
||||
font-weight: bold !important;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0 !important;
|
||||
overflow: visible !important;
|
||||
box-sizing: border-box !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
text-overflow: clip !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* BODY CELL STYLES */
|
||||
table.view-orders-table.scan-table tbody td {
|
||||
padding: 4px 2px !important;
|
||||
font-size: 10px !important;
|
||||
text-align: center !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
background-color: var(--card-bg-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
/* REMOVE UNWANTED SPACING */
|
||||
.report-table-card h3 {
|
||||
margin: 0 0 15px 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.report-table-card {
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
.report-table-card > * {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.report-table-container {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* HOVER EFFECTS */
|
||||
table.view-orders-table.scan-table tbody tr:hover td {
|
||||
background-color: var(--hover-color) !important;
|
||||
}
|
||||
|
||||
/* COLUMN WIDTH SPECIFICATIONS */
|
||||
table.view-orders-table.scan-table td:nth-child(1) { width: 50px !important; } /* ID */
|
||||
table.view-orders-table.scan-table td:nth-child(2) { width: 80px !important; } /* Comanda Productie */
|
||||
table.view-orders-table.scan-table td:nth-child(3) { width: 80px !important; } /* Cod Articol */
|
||||
table.view-orders-table.scan-table td:nth-child(4) { width: 150px !important; } /* Descr Com Prod */
|
||||
table.view-orders-table.scan-table td:nth-child(5) { width: 70px !important; } /* Cantitate */
|
||||
table.view-orders-table.scan-table td:nth-child(6) { width: 80px !important; } /* Data Livrare */
|
||||
table.view-orders-table.scan-table td:nth-child(7) { width: 75px !important; } /* Dimensiune */
|
||||
table.view-orders-table.scan-table td:nth-child(8) { width: 90px !important; } /* Com Achiz Client */
|
||||
table.view-orders-table.scan-table td:nth-child(9) { width: 70px !important; } /* Nr Linie */
|
||||
table.view-orders-table.scan-table td:nth-child(10) { width: 100px !important; } /* Customer Name */
|
||||
table.view-orders-table.scan-table td:nth-child(11) { width: 90px !important; } /* Customer Art Nr */
|
||||
table.view-orders-table.scan-table td:nth-child(12) { width: 70px !important; } /* Open Order */
|
||||
table.view-orders-table.scan-table td:nth-child(13) { width: 50px !important; } /* Line */
|
||||
table.view-orders-table.scan-table td:nth-child(14) { width: 70px !important; } /* Printed */
|
||||
table.view-orders-table.scan-table td:nth-child(15) { width: 100px !important; } /* Created */
|
||||
</style>
|
||||
<!-- Print Module CSS is now loaded via base.html for all printing pages -->
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
Reference in New Issue
Block a user