325 lines
12 KiB
HTML
325 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% 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>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="scan-container">
|
|
<!-- Upload Orders Card (first, fixed position) -->
|
|
<div class="card scan-form-card" style="margin-bottom: 24px;">
|
|
{% if leftover_description %}
|
|
<h3>Left over orders</h3>
|
|
<div style="color: #dc3545; font-weight: bold; margin-bottom: 10px;">{{ leftover_description }}</div>
|
|
{% else %}
|
|
<h3>Upload Order Data for Labels</h3>
|
|
{% endif %}
|
|
<form method="POST" enctype="multipart/form-data" class="form-centered" id="csv-upload-form">
|
|
<label for="csv_file">Choose CSV file:</label>
|
|
{% if leftover_description %}
|
|
<button type="submit" class="btn btn-danger" name="clear_table" value="1">Clear Table</button>
|
|
{% elif not orders %}
|
|
<input type="file" name="csv_file" accept=".csv" required><br>
|
|
<button type="submit" class="btn">Upload & Review</button>
|
|
{% else %}
|
|
<label style="font-weight: bold;">Selected file: {{ session['csv_filename'] if session['csv_filename'] else 'Unknown' }}</label><br>
|
|
<button type="button" class="btn" onclick="showPopupAndSubmit()">Upload to Database</button>
|
|
{% endif %}
|
|
</form>
|
|
|
|
<!-- Popup Modal -->
|
|
<div id="popup-modal" class="popup" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:var(--app-overlay-bg, rgba(30,41,59,0.85)); z-index:9999; align-items:center; justify-content:center;">
|
|
<div class="popup-content" style="margin:auto; padding:32px; border-radius:8px; box-shadow:0 2px 8px #333; min-width:320px; max-width:400px; text-align:center;">
|
|
<h3 style="color:var(--app-label-text);">Saving orders to database...</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showPopupAndSubmit() {
|
|
document.getElementById('popup-modal').style.display = 'flex';
|
|
// Submit the form after showing popup
|
|
setTimeout(function() {
|
|
var form = document.getElementById('csv-upload-form');
|
|
var input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'save_to_database';
|
|
input.value = '1';
|
|
form.appendChild(input);
|
|
form.submit();
|
|
}, 500);
|
|
}
|
|
window.onload = function() {
|
|
if (window.location.hash === '#saved') {
|
|
document.getElementById('popup-modal').style.display = 'none';
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
|
|
<!-- Preview Table Card (expandable height, scrollable) -->
|
|
<div class="card scan-table-card{% if leftover_description %} leftover-table-card{% endif %}" style="margin-bottom: 24px; max-height: 480px; overflow-y: auto;">
|
|
{% if leftover_description %}
|
|
<h3>Left over orders</h3>
|
|
{% else %}
|
|
<h3>Preview Table</h3>
|
|
{% endif %}
|
|
<table class="scan-table view-orders-table{% if leftover_description %} leftover-table{% endif %}">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</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.<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>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if orders %}
|
|
{% for order in orders %}
|
|
{% if order and (order.get('comanda_productie', '') or order.get('descr_com_prod', '')) %}
|
|
<tr>
|
|
<td>{{ order.get('id', '') }}</td>
|
|
<td><strong>{{ order.get('comanda_productie', '') }}</strong></td>
|
|
<td>{{ order.get('cod_articol', '-') }}</td>
|
|
<td>{{ order.get('descr_com_prod', '') }}</td>
|
|
<td style="text-align: right; font-weight: 600;">{{ order.get('cantitate', '') }}</td>
|
|
<td style="text-align: center;">{{ order.get('data_livrare', '') }}</td>
|
|
<td style="text-align: center;">{{ order.get('dimensiune', '-') }}</td>
|
|
<td>{{ order.get('com_achiz_client', '-') }}</td>
|
|
<td style="text-align: right;">{{ order.get('nr_linie_com_client', '-') }}</td>
|
|
<td>{{ order.get('customer_name', '-') }}</td>
|
|
<td>{{ order.get('customer_article_number', '-') }}</td>
|
|
<td>{{ order.get('open_for_order', '-') }}</td>
|
|
<td style="text-align: right;">{{ order.get('line_number', '-') }}</td>
|
|
<td style="text-align: center;">
|
|
{% if order.get('printed_labels', 0) == 1 %}
|
|
<span style="color: #28a745; font-weight: bold;">✓ Yes</span>
|
|
{% else %}
|
|
<span style="color: #dc3545;">✗ No</span>
|
|
{% endif %}
|
|
</td>
|
|
<td style="font-size: 11px; color: #6c757d;">{{ order.get('created_at', '-') }}</td>
|
|
</tr>
|
|
{% if order.error_message %}
|
|
<tr>
|
|
<td colspan="15" style="color: #dc3545; font-size: 12px; background: #fff3f3;">
|
|
<strong>Error:</strong> {{ order.error_message }}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr><td colspan="15" style="text-align:center;">No CSV file uploaded yet.</td></tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if validation_errors or validation_warnings %}
|
|
{% if not leftover_description %}
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<h4>Validation Results</h4>
|
|
{% if validation_errors %}
|
|
<div style="color: #dc3545; margin-bottom: 16px;">
|
|
<strong>Errors found:</strong>
|
|
<ul>
|
|
{% for error in validation_errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
{% if validation_warnings %}
|
|
<div style="color: #ffc107;">
|
|
<strong>Warnings:</strong>
|
|
<ul>
|
|
{% for warning in validation_warnings %}
|
|
<li>{{ warning }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if report %}
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<h4>Import Report</h4>
|
|
<p>{{ report }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
/* THESE STYLES ONLY APPLY TO OTHER TABLES, NOT UPLOAD ORDERS TABLE */
|
|
.scan-table:not(.upload-orders-table) {
|
|
font-size: 11px !important;
|
|
line-height: 1.2;
|
|
min-width: 800px;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.scan-table:not(.upload-orders-table) th,
|
|
.scan-table:not(.upload-orders-table) td {
|
|
padding: 6px 4px !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.scan-table:not(.upload-orders-table) th {
|
|
font-size: 10px !important;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
/* Column widths for NON-upload-orders tables only */
|
|
.scan-table:not(.upload-orders-table) th:nth-child(1),
|
|
.scan-table:not(.upload-orders-table) td:nth-child(1) {
|
|
max-width: 50px;
|
|
min-width: 30px;
|
|
}
|
|
|
|
.scan-table:not(.upload-orders-table) th:nth-child(2),
|
|
.scan-table:not(.upload-orders-table) td:nth-child(2) {
|
|
max-width: 70px;
|
|
min-width: 70px;
|
|
}
|
|
|
|
.scan-table:not(.upload-orders-table) th:nth-child(3),
|
|
.scan-table:not(.upload-orders-table) td:nth-child(3) {
|
|
max-width: 120px;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.scan-table:not(.upload-orders-table) th:nth-child(4),
|
|
.scan-table:not(.upload-orders-table) td:nth-child(4) {
|
|
max-width: 60px;
|
|
min-width: 60px;
|
|
text-align: right;
|
|
}
|
|
|
|
.scan-table:not(.upload-orders-table) th:nth-child(5),
|
|
.scan-table:not(.upload-orders-table) td:nth-child(5) {
|
|
max-width: 90px;
|
|
min-width: 90px;
|
|
}
|
|
|
|
/* Ensure table container fits */
|
|
.scan-table-card {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Hover effects for NON-upload-orders tables */
|
|
.scan-table:not(.upload-orders-table) tbody tr:hover td {
|
|
background-color: #f8f9fa !important;
|
|
position: relative;
|
|
}
|
|
|
|
.scan-table:not(.upload-orders-table) td {
|
|
cursor: help;
|
|
}
|
|
|
|
.scan-table:not(.upload-orders-table) td:hover {
|
|
overflow: visible;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
z-index: 10;
|
|
position: relative;
|
|
background-color: #fff3cd !important;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
}
|
|
</style>
|
|
<style>
|
|
/* Special style for leftover orders table to match preview table height and appearance */
|
|
.leftover-table-card {
|
|
max-height: 480px !important;
|
|
overflow-y: auto !important;
|
|
border: 2px solid #dc3545 !important;
|
|
background: #fff6f6 !important;
|
|
}
|
|
.leftover-table thead th, .leftover-table td {
|
|
background: #fff6f6 !important;
|
|
}
|
|
</style>
|
|
{% endblock %} |