diff --git a/py_app/app/routes.py b/py_app/app/routes.py index f048527..ed2ff1a 100755 --- a/py_app/app/routes.py +++ b/py_app/app/routes.py @@ -1958,6 +1958,18 @@ def print_module(): flash(f"Error loading orders: {e}", 'error') return render_template('print_module.html', orders=[]) +@bp.route('/print_lost_labels') +def print_lost_labels(): + """Print lost labels module""" + try: + # Get orders data for lost labels (could be different logic than print_module) + orders_data = get_unprinted_orders_data(limit=100) + return render_template('print_lost_labels.html', orders=orders_data) + except Exception as e: + print(f"Error loading print lost labels data: {e}") + flash(f"Error loading orders: {e}", 'error') + return render_template('print_lost_labels.html', orders=[]) + @bp.route('/view_orders') def view_orders(): """View all orders in a table format""" @@ -3469,6 +3481,97 @@ def delete_location(): return jsonify({'success': False, 'error': str(e)}) +# Daily Mirror Route Redirects for Backward Compatibility +@bp.route('/daily_mirror_main') +def daily_mirror_main_route(): + """Redirect to new Daily Mirror main route""" + return redirect(url_for('daily_mirror.daily_mirror_main_route')) + +@bp.route('/daily_mirror') +def daily_mirror_route(): + """Redirect to new Daily Mirror route""" + return redirect(url_for('daily_mirror.daily_mirror_route')) + +@bp.route('/daily_mirror_history') +def daily_mirror_history_route(): + """Redirect to new Daily Mirror history route""" + return redirect(url_for('daily_mirror.daily_mirror_history_route')) + +@bp.route('/daily_mirror_build_database', methods=['GET', 'POST']) +def daily_mirror_build_database(): + """Redirect to new Daily Mirror build database route""" + if request.method == 'POST': + # For POST requests, we need to forward the data + return redirect(url_for('daily_mirror.daily_mirror_build_database'), code=307) + return redirect(url_for('daily_mirror.daily_mirror_build_database')) + +@bp.route('/api/daily_mirror_data', methods=['GET']) +def api_daily_mirror_data(): + """Redirect to new Daily Mirror API data route""" + return redirect(url_for('daily_mirror.api_daily_mirror_data') + '?' + request.query_string.decode()) + +@bp.route('/api/daily_mirror_history_data', methods=['GET']) +def api_daily_mirror_history_data(): + """Redirect to new Daily Mirror API history data route""" + return redirect(url_for('daily_mirror.api_daily_mirror_history_data') + '?' + request.query_string.decode()) + +# Help/Documentation Routes +@bp.route('/help') +@bp.route('/help/') +def help(page='index'): + """Display help documentation from Markdown files""" + import markdown + import os + + # Map page names to markdown files + doc_files = { + 'index': 'index.md', + 'dashboard': 'dashboard.md', + 'print_module': 'print_module.md', + 'upload_data': 'upload_data.md', + 'view_orders': 'view_orders.md', + 'print_lost_labels': 'print_lost_labels.md' + } + + # Get the markdown file path + if page not in doc_files: + return render_template('docs/help_viewer.html', + error=f"Documentația pentru '{page}' nu a fost găsită.") + + doc_path = os.path.join(current_app.static_folder, 'docs', doc_files[page]) + + try: + # Read and convert markdown to HTML + with open(doc_path, 'r', encoding='utf-8') as f: + content = f.read() + + # Convert markdown to HTML with extensions + html_content = markdown.markdown(content, extensions=[ + 'markdown.extensions.tables', + 'markdown.extensions.fenced_code', + 'markdown.extensions.toc' + ]) + + # Fix image paths to work with Flask static files + import re + from flask import url_for + html_content = re.sub( + r'src="images/([^"]+)"', + lambda m: f'src="{url_for("static", filename=f"docs/images/{m.group(1)}")}"', + html_content + ) + + return render_template('docs/help_viewer.html', + content=html_content, + page=page) + + except FileNotFoundError: + return render_template('docs/help_viewer.html', + error=f"Fișierul de documentație '{doc_files[page]}' nu a fost găsit.") + except Exception as e: + return render_template('docs/help_viewer.html', + error=f"Eroare la încărcarea documentației: {str(e)}") + # NOTE for frontend/extension developers: # To print labels, call the Chrome extension and pass the PDF URL: # /generate_labels_pdf/ diff --git a/py_app/app/static/css/base.css b/py_app/app/static/css/base.css index b8575fd..0a38fdf 100644 --- a/py_app/app/static/css/base.css +++ b/py_app/app/static/css/base.css @@ -146,4 +146,111 @@ body.dark-mode header { body.dark-mode .user-info { color: #ccc; +} + +/* ========================================================================== + FLOATING BUTTONS + ========================================================================== */ + +/* Floating Help Button */ +.floating-help-btn { + position: fixed; + top: 80px; /* Position below the header */ + right: 20px; + z-index: 1000; + width: 50px; + height: 50px; + border-radius: 50%; + background: linear-gradient(135deg, #17a2b8, #138496); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.floating-help-btn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0,0,0,0.25); + background: linear-gradient(135deg, #138496, #0f6674); +} + +.floating-help-btn a { + color: white; + text-decoration: none; + font-size: 18px; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + border-radius: 50%; +} + +.floating-help-btn a:hover { + color: white; + text-decoration: none; +} + +/* Floating Back Button */ +.floating-back-btn { + position: fixed; + top: 80px; /* Position below the header */ + left: 20px; + z-index: 1000; + width: 50px; + height: 50px; + border-radius: 50%; + background: linear-gradient(135deg, #6c757d, #545b62); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + cursor: pointer; +} + +.floating-back-btn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0,0,0,0.25); + background: linear-gradient(135deg, #545b62, #495057); +} + +.floating-back-btn a, +.floating-back-btn button { + color: white; + text-decoration: none; + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + border-radius: 50%; + background: none; + border: none; + cursor: pointer; +} + +.floating-back-btn a:hover, +.floating-back-btn button:hover { + color: white; + text-decoration: none; +} + +/* Dark mode styles for floating buttons */ +body.dark-mode .floating-help-btn { + background: linear-gradient(135deg, #0dcaf0, #0aa2c0); +} + +body.dark-mode .floating-help-btn:hover { + background: linear-gradient(135deg, #0aa2c0, #087990); +} + +body.dark-mode .floating-back-btn { + background: linear-gradient(135deg, #495057, #343a40); +} + +body.dark-mode .floating-back-btn:hover { + background: linear-gradient(135deg, #343a40, #212529); } \ No newline at end of file diff --git a/py_app/app/static/css/daily_mirror_tune.css b/py_app/app/static/css/daily_mirror_tune.css new file mode 100644 index 0000000..cddfeb1 --- /dev/null +++ b/py_app/app/static/css/daily_mirror_tune.css @@ -0,0 +1,276 @@ +/* Daily Mirror Tune Pages - Modal Styles */ +/* Fixes for editable modals across tune/production, tune/orders, and tune/delivery pages */ + +/* Force modal width to be extra wide (95% of viewport width) */ +#editModal .modal-dialog { + max-width: 95vw !important; +} + +/* Modal footer button spacing and sizing */ +#editModal .modal-footer { + display: flex; + justify-content: space-between; + align-items: center; +} + +#editModal .modal-footer .btn { + min-width: 100px; +} + +#editModal .modal-footer .btn-danger { + min-width: 150px; + background-color: #dc3545 !important; + border-color: #dc3545 !important; +} + +#editModal .modal-footer .btn-danger:hover { + background-color: #bb2d3b !important; + border-color: #b02a37 !important; +} + +#editModal .modal-footer .btn-primary { + min-width: 150px; +} + +#editModal .modal-footer .btn-secondary { + margin-right: 10px; +} + +/* Force Bootstrap modal to have proper z-index */ +#editModal.modal { + z-index: 9999 !important; +} + +#editModal .modal-backdrop { + z-index: 9998 !important; +} + +/* Ensure modal dialog is interactive */ +#editModal .modal-dialog { + pointer-events: auto !important; + z-index: 10000 !important; +} + +#editModal .modal-content { + pointer-events: auto !important; +} + +/* Make all inputs in the modal fully interactive */ +#editModal .form-control:not([readonly]), +#editModal .form-select:not([readonly]), +#editModal input:not([readonly]):not([type="hidden"]), +#editModal select:not([readonly]), +#editModal textarea:not([readonly]) { + pointer-events: auto !important; + user-select: text !important; + cursor: text !important; + background-color: #ffffff !important; + color: #000000 !important; + opacity: 1 !important; + -webkit-user-select: text !important; + -moz-user-select: text !important; + -ms-user-select: text !important; +} + +#editModal .form-control:focus:not([readonly]), +#editModal input:focus:not([readonly]), +#editModal select:focus:not([readonly]), +#editModal textarea:focus:not([readonly]) { + background-color: #ffffff !important; + color: #000000 !important; + border-color: #007bff !important; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important; + outline: none !important; +} + +/* Dark mode specific overrides for modal inputs */ +body.dark-mode #editModal .form-control:not([readonly]), +body.dark-mode #editModal input:not([readonly]):not([type="hidden"]), +body.dark-mode #editModal select:not([readonly]), +body.dark-mode #editModal textarea:not([readonly]) { + background-color: #ffffff !important; + color: #000000 !important; + opacity: 1 !important; +} + +body.dark-mode #editModal .form-control:focus:not([readonly]), +body.dark-mode #editModal input:focus:not([readonly]), +body.dark-mode #editModal select:focus:not([readonly]), +body.dark-mode #editModal textarea:focus:not([readonly]) { + background-color: #ffffff !important; + color: #000000 !important; + border-color: #007bff !important; +} + +/* Readonly fields should still look readonly */ +#editModal .form-control[readonly], +#editModal input[readonly] { + background-color: #e9ecef !important; + cursor: not-allowed !important; +} + +body.dark-mode #editModal .form-control[readonly], +body.dark-mode #editModal input[readonly] { + background-color: #6c757d !important; + color: #e2e8f0 !important; +} + +/* Dark mode styles for cards and tables */ +body.dark-mode .card { + background-color: #2d3748; + color: #e2e8f0; + border: 1px solid #4a5568; +} + +body.dark-mode .card-header { + background-color: #4a5568; + border-bottom: 1px solid #6b7280; + color: #e2e8f0; +} + +body.dark-mode .form-control { + background-color: #4a5568; + border-color: #6b7280; + color: #e2e8f0; +} + +body.dark-mode .form-control:focus { + background-color: #4a5568; + border-color: #007bff; + color: #e2e8f0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +body.dark-mode .table { + color: #e2e8f0; +} + +body.dark-mode .table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(255, 255, 255, 0.05); +} + +body.dark-mode .table-hover tbody tr:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +body.dark-mode .modal-content { + background-color: #2d3748; + color: #e2e8f0; +} + +body.dark-mode .modal-header { + border-bottom: 1px solid #4a5568; +} + +body.dark-mode .modal-footer { + border-top: 1px solid #4a5568; +} + +body.dark-mode .btn-secondary { + background-color: #4a5568; + border-color: #6b7280; +} + +body.dark-mode .btn-secondary:hover { + background-color: #6b7280; +} + +body.dark-mode .btn-close { + filter: invert(1); +} + +/* Table and button styling */ +.table td { + vertical-align: middle; +} + +.btn-action { + padding: 0.25rem 0.5rem; + margin: 0.1rem; +} + +/* Editable field highlighting */ +.editable { + background-color: #fff3cd; + border: 1px dashed #ffc107; +} + +body.dark-mode .editable { + background-color: #2d2d00; + border: 1px dashed #ffc107; +} + +/* Compact table styling */ +.table-sm th, +.table-sm td { + padding: 0.5rem; + font-size: 0.9rem; +} + +/* Action button styling */ +.btn-sm { + padding: 0.25rem 0.5rem; + font-size: 0.875rem; +} + +/* Pagination styling */ +.pagination { + margin-bottom: 0; +} + +.page-link { + cursor: pointer; +} + +body.dark-mode .pagination .page-link { + background-color: #4a5568; + border: 1px solid #6b7280; + color: #e2e8f0; +} + +body.dark-mode .pagination .page-link:hover { + background-color: #374151; + border-color: #6b7280; + color: #e2e8f0; +} + +body.dark-mode .pagination .page-item.active .page-link { + background-color: #3b82f6; + border-color: #3b82f6; + color: #ffffff; +} + +/* Additional dark mode styles */ +body.dark-mode .container-fluid { + color: #e2e8f0; +} + +body.dark-mode .text-muted { + color: #a0aec0 !important; +} + +body.dark-mode .table-dark th { + background-color: #1a202c; + color: #e2e8f0; + border-color: #4a5568; +} + +body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td { + background-color: #374151; +} + +body.dark-mode .table-hover > tbody > tr:hover > td { + background-color: #4a5568; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .table-responsive { + font-size: 0.875rem; + } + + .btn-sm { + font-size: 0.75rem; + padding: 0.375rem 0.5rem; + } +} diff --git a/py_app/app/static/css/print_module.css b/py_app/app/static/css/print_module.css new file mode 100644 index 0000000..71ecdf2 --- /dev/null +++ b/py_app/app/static/css/print_module.css @@ -0,0 +1,807 @@ +/* ========================================================================== + PRINT MODULE CSS - Dedicated styles for Labels/Printing Module + ========================================================================== + + This file contains all CSS for the printing module pages: + - print_module.html (main printing interface) + - print_lost_labels.html (lost labels printing) + - main_page_etichete.html (labels main page) + - upload_data.html (upload orders) + - view_orders.html (view orders) + + ========================================================================== */ + +/* ========================================================================== + LABEL PREVIEW STYLES + ========================================================================== */ + +#label-preview { + background: #fafafa; + position: relative; + overflow: visible; +} + +/* Label content rectangle styling */ +#label-content { + position: absolute; + top: 65.7px; + left: 11.34px; + width: 227.4px; + height: 321.3px; + border: 1px solid #ddd; + background: white; +} + +/* Barcode frame styling */ +#barcode-frame { + position: absolute; + top: 387px; + left: 50%; + transform: translateX(calc(-50% - 20px)); + width: 220px; + max-width: 220px; + height: 50px; + background: white; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; + border: none; +} + +#barcode-display { + width: 100%; + height: 40px; + max-width: 220px; +} + +#barcode-text { + font-size: 8px; + font-family: 'Courier New', monospace; + margin-top: 2px; + text-align: center; + font-weight: bold; + display: none; +} + +/* Vertical barcode frame styling */ +#vertical-barcode-frame { + 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; + border: none; +} + +#vertical-barcode-display { + width: 100%; + height: 35px; +} + +#vertical-barcode-text { + position: absolute; + bottom: -15px; + font-size: 7px; + font-family: 'Courier New', monospace; + text-align: center; + font-weight: bold; + width: 100%; + display: none; +} + +/* Allow JsBarcode to control SVG colors naturally - removed forced black styling */ + +/* ========================================================================== + PRINT MODULE TABLE STYLES + ========================================================================== */ + +/* Enhanced table styling for print module tables */ +.card.scan-table-card table.print-module-table.scan-table thead th { + border-bottom: 2px solid var(--print-table-border) !important; + background-color: var(--print-table-header-bg) !important; + color: var(--print-table-header-text) !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(--print-table-body-bg) !important; +} + +.card.scan-table-card table.print-module-table.scan-table tbody tr:hover td { + background-color: var(--print-table-hover) !important; + cursor: pointer !important; +} + +.card.scan-table-card table.print-module-table.scan-table tbody td { + background-color: var(--print-table-body-bg) !important; + color: var(--print-table-body-text) !important; + border: 1px solid var(--print-table-border) !important; + padding: 0.25rem 0.4rem !important; +} + +.card.scan-table-card table.print-module-table.scan-table tbody tr.selected td { + background-color: var(--print-table-selected) !important; + color: white !important; +} + +/* ========================================================================== + VIEW ORDERS TABLE STYLES (for print_lost_labels.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: var(--print-table-header-bg) !important; + color: var(--print-table-header-text) !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(--print-table-border) !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 var(--print-table-border) !important; + background-color: var(--print-table-body-bg) !important; + color: var(--print-table-body-text) !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + vertical-align: middle !important; +} + +/* Column width definitions for view orders table */ +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: var(--print-table-hover) !important; +} + +table.view-orders-table.scan-table tbody tr.selected td { + background-color: var(--print-table-selected) !important; + color: white !important; +} + +/* Remove unwanted spacing */ +.report-table-card > * { + margin-top: 0 !important; +} + +.report-table-container { + margin-top: 0 !important; +} + +/* ========================================================================== + PRINT MODULE LAYOUT STYLES + ========================================================================== */ + +/* Scan container layout */ +.scan-container { + display: flex; + flex-direction: row; + gap: 20px; + width: 100%; + align-items: flex-start; +} + +/* Label preview card styling */ +.card.scan-form-card { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + min-height: 700px; + width: 330px; + flex-shrink: 0; + position: relative; + padding: 15px; +} + +/* Data preview card styling */ +.card.scan-table-card { + min-height: 700px; + width: calc(100% - 350px); + margin: 0; +} + +/* View Orders and Upload Orders page specific layout - 25/75 split */ +.card.report-form-card, +.card.scan-form-card { + min-height: 700px; + width: 25%; + flex-shrink: 0; + padding: 15px; + margin-bottom: 0; /* Remove bottom margin for horizontal layout */ +} + +.card.report-table-card, +.card.scan-table-card { + min-height: 700px; + width: 75%; + margin: 0; + padding: 15px; +} + +/* Upload Orders specific table styling */ +.card.scan-table-card table { + margin-bottom: 0; +} + +/* Ensure proper scroll behavior for upload preview */ +.card.scan-table-card[style*="overflow-y: auto"] { + /* Maintain scroll functionality while keeping consistent height */ + max-height: 700px; +} + +/* Label view title */ +.label-view-title { + width: 100%; + text-align: center; + padding: 0 0 15px 0; + font-size: 18px; + font-weight: bold; + letter-spacing: 0.5px; +} + +/* ========================================================================== + SEARCH AND FORM STYLES + ========================================================================== */ + +/* 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; +} + +/* ========================================================================== + BUTTON STYLES + ========================================================================== */ + +.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; +} + +/* ========================================================================== + REPORT TABLE CONTAINER STYLES + ========================================================================== */ + +.report-table-card h3 { + margin: 0 0 15px 0 !important; + padding: 0 !important; +} + +.report-table-card { + padding: 15px !important; +} + +/* ========================================================================== + PRINT MODULE SPECIFIC LAYOUT ADJUSTMENTS + ========================================================================== */ + +/* For print_lost_labels.html - Two-column layout */ +.scan-container.lost-labels { + display: flex; + flex-direction: column; + gap: 0; + width: 100%; +} + +.scan-container.lost-labels .search-card { + width: 100%; + max-height: 100px; + min-height: 70px; + display: flex; + align-items: center; + flex-wrap: wrap; + margin-bottom: 24px; +} + +.scan-container.lost-labels .row-container { + display: flex; + flex-direction: row; + gap: 24px; + width: 100%; + align-items: flex-start; +} + +/* ========================================================================== + PRINT OPTIONS STYLES + ========================================================================== */ + +/* Print method selection */ +.print-method-container { + margin-bottom: 15px; +} + +.print-method-label { + font-size: 12px; + font-weight: 600; + color: #495057; + margin-bottom: 8px; +} + +.form-check { + margin-bottom: 6px; +} + +.form-check-label { + font-size: 11px; + line-height: 1.2; +} + +/* Printer selection styling */ +#qztray-printer-selection { + margin-bottom: 10px; +} + +#qztray-printer-selection label { + font-size: 11px; + font-weight: 600; + color: #495057; + margin-bottom: 3px; + display: block; +} + +#qztray-printer-select { + font-size: 11px; + padding: 3px 6px; +} + +/* Print button styling */ +#print-label-btn { + font-size: 13px; + padding: 8px 24px; + border-radius: 5px; + font-weight: 600; +} + +/* QZ Tray info section */ +#qztray-info { + width: 100%; + margin-top: 15px; + padding-top: 15px; + border-top: 1px solid #e9ecef; +} + +#qztray-info .info-box { + background: #f8f9fa; + border: 1px solid #dee2e6; + border-radius: 6px; + padding: 10px; + text-align: center; +} + +#qztray-info .info-text { + font-size: 10px; + color: #495057; + margin-bottom: 8px; +} + +#qztray-info .download-link { + font-size: 10px; + padding: 4px 16px; +} + +/* ========================================================================== + BADGE AND STATUS STYLES + ========================================================================== */ + +.badge { + font-size: 9px; + padding: 2px 6px; +} + +.badge-success { + background-color: #28a745; + color: white; +} + +.badge-danger { + background-color: #dc3545; + color: white; +} + +.badge-warning { + background-color: #ffc107; + color: #212529; +} + +/* Status indicators */ +#qztray-status { + font-size: 9px; + padding: 2px 6px; +} + +/* ========================================================================== + RESPONSIVE DESIGN + ========================================================================== */ + +@media (max-width: 1200px) { + .scan-container { + flex-direction: column; + gap: 15px; + } + + .card.scan-form-card { + width: 100%; + } + + .card.scan-table-card { + width: 100%; + } + + /* View Orders and Upload Orders page responsive */ + .card.report-form-card, + .card.scan-form-card { + width: 100%; + margin-bottom: 24px; /* Restore bottom margin for stacked layout */ + } + + .card.report-table-card, + .card.scan-table-card { + width: 100%; + } +} + +@media (max-width: 992px) and (min-width: 769px) { + /* Tablet view - adjust proportions for better fit */ + .card.report-form-card, + .card.scan-form-card { + width: 30%; + } + + .card.report-table-card, + .card.scan-table-card { + width: 70%; + } +} + +@media (max-width: 768px) { + .label-view-title { + font-size: 16px; + } + + #label-preview { + width: 280px; + height: 400px; + } + + #label-content { + width: 200px; + height: 290px; + } + + .search-field { + max-width: 300px; + } +} + +/* ========================================================================== + THEME SUPPORT (Light/Dark Mode) + ========================================================================== */ + +/* CSS Custom Properties for Theme Support */ +:root { + /* Light mode colors (default) */ + --print-table-header-bg: #e9ecef; + --print-table-header-text: #000; + --print-table-body-bg: #fff; + --print-table-body-text: #000; + --print-table-border: #ddd; + --print-table-hover: #f8f9fa; + --print-table-selected: #007bff; + --print-card-bg: #fff; + --print-card-border: #ddd; + --print-search-field-bg: #fff; + --print-search-field-text: #000; + --print-search-field-border: #ddd; +} + +/* Light mode theme variables */ +body.light-mode { + --print-table-header-bg: #e9ecef; + --print-table-header-text: #000; + --print-table-body-bg: #fff; + --print-table-body-text: #000; + --print-table-border: #ddd; + --print-table-hover: #f8f9fa; + --print-table-selected: #007bff; + --print-card-bg: #fff; + --print-card-border: #ddd; + --print-search-field-bg: #fff; + --print-search-field-text: #000; + --print-search-field-border: #ddd; +} + +/* Dark mode theme variables */ +body.dark-mode { + --print-table-header-bg: #2a3441; + --print-table-header-text: #ffffff; + --print-table-body-bg: #2a3441; + --print-table-body-text: #ffffff; + --print-table-border: #495057; + --print-table-hover: #3a4451; + --print-table-selected: #007bff; + --print-card-bg: #2a2a2a; + --print-card-border: #555; + --print-search-field-bg: #333; + --print-search-field-text: #fff; + --print-search-field-border: #555; +} + +/* Label Preview Theme Support */ +body.light-mode #label-preview { + background: #fafafa; + border: none; +} + +body.light-mode #label-content { + background: white; + border: 1px solid #ddd; +} + +body.light-mode #barcode-frame, +body.light-mode #vertical-barcode-frame { + background: #ffffff; + border: 1px solid var(--print-card-border); +} + +body.dark-mode #label-preview { + background: #2a2a2a; + border: none; +} + +body.dark-mode #label-content { + background: #f8f9fa; + border: 1px solid #555; +} + +body.dark-mode #barcode-frame, +body.dark-mode #vertical-barcode-frame { + background: #ffffff; + border: 1px solid var(--print-card-border); +} + +/* Card Theme Support */ +body.dark-mode .search-card, +body.dark-mode .card { + background-color: var(--print-card-bg); + border: 1px solid var(--print-card-border); + color: var(--print-table-body-text); +} + +/* Search Field Theme Support */ +body.dark-mode .search-field, +body.dark-mode .quantity-field { + background-color: var(--print-search-field-bg); + border: 1px solid var(--print-search-field-border); + color: var(--print-search-field-text); +} + +/* Button Theme Support */ +body.dark-mode .print-btn { + background-color: #28a745; +} + +body.dark-mode .print-btn:hover { + background-color: #218838; +} + +/* ========================================================================== + UTILITY CLASSES + ========================================================================== */ + +.text-center { + text-align: center; +} + +.font-weight-bold { + font-weight: bold; +} + +.margin-bottom-15 { + margin-bottom: 15px; +} + +.padding-10 { + padding: 10px; +} + +.full-width { + width: 100%; +} + +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +/* ========================================================================== + DEBUG STYLES (can be removed in production) + ========================================================================== */ + +.debug-border { + border: 2px solid red !important; +} + +.debug-bg { + background-color: rgba(255, 0, 0, 0.1) !important; +} + +/* ========================================================================== + PRINT MODULE SPECIFIC STYLES + ========================================================================== */ + +/* Label preview container styling for print_module page */ +.scan-form-card { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + min-height: 700px; + position: relative; + padding: 15px; +} + +/* Label preview section */ +#label-preview { + border: 1px solid #ddd; + padding: 10px; + position: relative; + background: #fafafa; + width: 100%; + max-width: 301px; + height: 434.7px; + margin: 0 auto; +} + +/* Ensure label content scales properly in responsive layout */ +@media (max-width: 1024px) { + #label-preview { + max-width: 280px; + height: 404px; + } + + .scan-form-card { + padding: 10px; + } +} + +@media (max-width: 768px) { + #label-preview { + max-width: 100%; + height: 350px; + } + + .scan-form-card { + padding: 8px; + } +} + +/* ========================================================================== + FORM CONTROLS FIX + ========================================================================== */ + +/* Fix radio button styling to prevent oval display issues */ +.form-check-input[type="radio"] { + width: 1rem !important; + height: 1rem !important; + margin-top: 0.25rem !important; + border: 1px solid #dee2e6 !important; + border-radius: 50% !important; + background-color: #fff !important; + appearance: none !important; + -webkit-appearance: none !important; + -moz-appearance: none !important; +} + +.form-check-input[type="radio"]:checked { + background-color: #007bff !important; + border-color: #007bff !important; + background-image: radial-gradient(circle, #fff 30%, transparent 32%) !important; +} + +.form-check-input[type="radio"]:focus { + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important; + outline: none !important; +} + +.form-check { + display: flex !important; + align-items: flex-start !important; + margin-bottom: 0.5rem !important; +} + +.form-check-label { + margin-left: 0.5rem !important; + cursor: pointer !important; +} \ No newline at end of file diff --git a/py_app/app/static/docs/dashboard.md b/py_app/app/static/docs/dashboard.md new file mode 100644 index 0000000..75a4d9c --- /dev/null +++ b/py_app/app/static/docs/dashboard.md @@ -0,0 +1,131 @@ +# Dashboard - Ghid de utilizare + +## Prezentare generală +Dashboard-ul este pagina principală a aplicației Quality Management System și oferă o vizualizare de ansamblu asupra tuturor modulelor disponibile și funcționalităților sistemului. + +## Structura Dashboard-ului + +### Bara de navigare superioară +În partea de sus a paginii găsiți: +- **Logo-ul companiei** - Quality Management +- **Meniul principal** cu accesul la toate modulele +- **Butonul de profil utilizator** și logout în colțul din dreapta + +![Bara de navigare](images/dashboard_navbar.png) + +### Sectiuni principale +![Poza cu Sectiunile](images/dashboard_main.png) +#### 1. Modulul Quality (Calitate) +Permite gestionarea proceselor de control al calității: +- **Scan FG** - Scanarea produselor finite +- **Scan RM** - Scanarea materiilor prime +- **Reports** - Rapoarte de calitate +- **Quality Settings** - Configurări pentru modulul de calitate + +![Modulul Quality](images/dashboard_quality.png) + +#### 2. Modulul Warehouse (Depozit) +Gestionarea stocurilor și locațiilor din depozit: +- **Create Locations** - Crearea de noi locații în depozit +- **Store Articles** - Depozitarea articolelor +- **Warehouse Reports** - Rapoarte de depozit +- **Inventory Management** - Gestionarea inventarului + +![Modulul Warehouse](images/dashboard_warehouse.png) + +#### 3. Modulul Labels (Etichete) +Pentru generarea și printarea etichetelor: +- **Print Module** - Printarea etichetelor pentru comenzi +- **Print Lost Labels** - Reprintarea etichetelor pierdute +- **View Orders** - Vizualizarea comenzilor +- **Upload Data** - Încărcarea datelor pentru etichete + +![Modulul Labels](images/dashboard_labels.png) + +## Cum să navigați în aplicație + +### Pasul 1: Autentificarea +1. Introduceți username-ul și parola +2. Faceți clic pe "Login" +3. Veți fi redirecționați automat către dashboard + +### Pasul 2: Selectarea modulului +1. În dashboard, faceți clic pe modulul dorit (Quality, Warehouse, Labels) +2. Veți vedea submeniul cu opțiunile disponibile +3. Selectați funcționalitatea dorită + +![Navigare module](images/dashboard_main.png) + +### Pasul 3: Utilizarea funcționalităților +Fiecare modul are propriile sale funcționalități specializate. Consultați ghidurile specifice pentru: +- [Modulul Quality](quality_module.md) +- [Modulul Warehouse](warehouse_module.md) +- [Modulul Labels](labels_module.md) + +## Permisiuni și acces + +### Tipuri de utilizatori +Aplicația suportă diferite niveluri de acces: +- **Superadmin** - Acces complet la toate modulele și setări +- **Admin** - Acces la majoritatea funcționalităților +- **Manager** - Acces la funcționalitățile de management +- **User** - Acces limitat la funcționalitățile de bază +![quick view access](images/quick_access.png) +### Verificarea permisiunilor +- Dacă nu aveți acces la un modul, acesta nu va fi vizibil în dashboard +- Contactați administratorul pentru a obține permisiuni suplimentare +- Permisiunile sunt configurate per utilizator și per modul + +![Niveluri de acces](images/access_management.png) + +## Funcționalități comune + +### Bara de căutare globală +- Folosiți bara de căutare pentru a găsi rapid comenzi, articole sau rapoarte +- Căutarea funcționează pe toate modulele activate + +### Notificări sistem +- Notificările apar în colțul din dreapta sus +- Includ alertele de sistem, confirmări de acțiuni și mesaje de eroare +- Faceți clic pe notificare pentru a o închide + +### Shortcuts tastatura +- **Ctrl + H** - Întoarcere la dashboard +- **Ctrl + L** - Focus pe bara de căutare +- **Escape** - Închiderea modalelor deschise + +## Rezolvarea problemelor comune + +### Nu se încarcă dashboard-ul +1. Verificați conexiunea la internet +2. Reîncărcați pagina (F5) +3. Ștergeți cache-ul browserului +4. Contactați administratorul IT + +### Lipsesc module din dashboard +1. Verificați că sunteți autentificat corect +2. Contactați administratorul pentru verificarea permisiunilor +3. Unele module pot fi temporar dezactivate pentru mentenanță + +### Performanțe lente +1. Închideți tab-urile de browser nefolosite +2. Verificați conexiunea la rețea +3. Raportați problema administratorului IT + +## Contacte și suport + +### Suport tehnic +- **Email**: it-support@recticel.com +- **Telefon intern**: 1234 +- **Program**: L-V, 08:00-17:00 + +### Documentație suplimentară +- [Manual complet utilizator](user_manual.pdf) +- [Ghid rapid](quick_start.md) +- [FAQ - Întrebări frecvente](faq.md) + +### Actualizări sistem +Sistemul este actualizat regulat. Consultați [pagina de changelog](changelog.md) pentru ultimele noutăți și îmbunătățiri. + +--- +*Ultima actualizare: Octombrie 2025* \ No newline at end of file diff --git a/py_app/app/static/docs/images/access_management.png b/py_app/app/static/docs/images/access_management.png new file mode 100644 index 0000000..cb1af65 Binary files /dev/null and b/py_app/app/static/docs/images/access_management.png differ diff --git a/py_app/app/static/docs/images/dashboard_labels.png b/py_app/app/static/docs/images/dashboard_labels.png new file mode 100644 index 0000000..8954ace Binary files /dev/null and b/py_app/app/static/docs/images/dashboard_labels.png differ diff --git a/py_app/app/static/docs/images/dashboard_main.png b/py_app/app/static/docs/images/dashboard_main.png new file mode 100644 index 0000000..29785ff Binary files /dev/null and b/py_app/app/static/docs/images/dashboard_main.png differ diff --git a/py_app/app/static/docs/images/dashboard_navbar.png b/py_app/app/static/docs/images/dashboard_navbar.png new file mode 100644 index 0000000..5fd1027 Binary files /dev/null and b/py_app/app/static/docs/images/dashboard_navbar.png differ diff --git a/py_app/app/static/docs/images/dashboard_quality.png b/py_app/app/static/docs/images/dashboard_quality.png new file mode 100644 index 0000000..5aba5c7 Binary files /dev/null and b/py_app/app/static/docs/images/dashboard_quality.png differ diff --git a/py_app/app/static/docs/images/dashboard_warehouse.png b/py_app/app/static/docs/images/dashboard_warehouse.png new file mode 100644 index 0000000..45f79a3 Binary files /dev/null and b/py_app/app/static/docs/images/dashboard_warehouse.png differ diff --git a/py_app/app/static/docs/images/quick_access.png b/py_app/app/static/docs/images/quick_access.png new file mode 100644 index 0000000..bbc870f Binary files /dev/null and b/py_app/app/static/docs/images/quick_access.png differ diff --git a/py_app/app/static/docs/print_module.md b/py_app/app/static/docs/print_module.md new file mode 100644 index 0000000..df5df88 --- /dev/null +++ b/py_app/app/static/docs/print_module.md @@ -0,0 +1,48 @@ +# Print Module - Ghid de utilizare + +## Prezentare generală +Modulul de printare permite generarea și printarea etichetelor pentru comenzile de producție. + +## Pași pentru printarea etichetelor + +### Pasul 1: Selectarea comenzii +1. Accesați pagina **Print Module** din meniul principal +2. În tabelul din dreapta, căutați comanda dorită +3. Faceți clic pe linia corespunzătoare pentru a o selecta + +![Selectarea comenzii](images/print_module_step1.png) + +### Pasul 2: Verificarea previzualizării +1. În panoul din stânga veți vedea previzualizarea etichetei +2. Verificați că toate informațiile sunt corecte: + - Numele clientului + - Cantitatea comandată + - Data livrării + - Descrierea produsului + +![Previzualizare etichetă](images/print_module_step2.png) + +### Pasul 3: Configurarea printării +1. Selectați metoda de printare: + - **🖨️ Direct Print**: Printare directă prin QZ Tray + - **📄 PDF Export**: Generare fișier PDF +2. Pentru printarea directă, selectați imprimanta dorită din listă + +### Pasul 4: Printarea +1. Faceți clic pe butonul **🖨️ Print Labels** +2. Verificați că eticheta a fost printată corect + +## Rezolvarea problemelor + +### QZ Tray nu este conectat +- Descărcați și instalați QZ Tray din linkul furnizat +- Asigurați-vă că aplicația QZ Tray rulează +- Verificați că imprimanta este conectată și configurată + +### Codul de bare nu se afișează +- Verificați conexiunea la internet +- Reîncărcați pagina +- Contactați administratorul dacă problema persistă + +## Contacte +Pentru probleme tehnice, contactați echipa IT. \ No newline at end of file diff --git a/py_app/app/templates/base.html b/py_app/app/templates/base.html index 414c53d..01359d5 100755 --- a/py_app/app/templates/base.html +++ b/py_app/app/templates/base.html @@ -12,6 +12,10 @@ + + {% if request.endpoint in ['main.etichete', 'main.upload_data', 'main.view_orders', 'main.print_module', 'main.print_lost_labels'] %} + + {% endif %} {% block extra_css %}{% endblock %} {% block head %}{% endblock %} @@ -39,18 +43,18 @@ {% endif %}
- - {% if request.endpoint in ['main.upload_data', 'main.upload_orders', 'main.print_module', 'main.label_templates', 'main.create_template', 'main.print_lost_labels', 'main.view_orders'] %} - Main Page Etichete - {% endif %} - {% if request.endpoint in ['main.quality', 'main.fg_quality'] %} - Main Page Reports - {% endif %} - Go to Dashboard - {% if 'user' in session %} - - Logout - {% endif %} + + {% if request.endpoint.startswith('daily_mirror') %} + Daily Mirror Main + {% endif %} + {% if request.endpoint in ['main.etichete', 'main.upload_data', 'main.view_orders', 'main.print_module', 'main.print_lost_labels'] %} + Labels Module + {% endif %} + Go to Dashboard + {% if 'user' in session %} + + Logout + {% endif %}
diff --git a/py_app/app/templates/dashboard.html b/py_app/app/templates/dashboard.html index fb402e8..8bf89dd 100755 --- a/py_app/app/templates/dashboard.html +++ b/py_app/app/templates/dashboard.html @@ -3,8 +3,14 @@ {% block title %}Dashboard{% endblock %} {% block content %} + +
+ + 📖 + +
+
-

Quality Module

@@ -34,5 +40,17 @@ Access Settings Page
+
+

📊 Daily Mirror

+

Business Intelligence and Production Reporting - Generate comprehensive daily reports including order quantities, production status, and delivery tracking.

+
+ 📊 Daily Mirror Hub +
+
+ Tracks: Orders quantity • Production launched • Production finished • Orders delivered +
+
+
+ {% endblock %} \ No newline at end of file diff --git a/py_app/app/templates/docs/help_viewer.html b/py_app/app/templates/docs/help_viewer.html new file mode 100644 index 0000000..9c54218 --- /dev/null +++ b/py_app/app/templates/docs/help_viewer.html @@ -0,0 +1,239 @@ +{% extends "base.html" %} + +{% block head %} + +{% endblock %} + +{% block content %} + +
+ +
+ +
+ {% if error %} +
+

Eroare

+

{{ error }}

+
+ {% else %} +
+ Documentație disponibilă: + Dashboard + Print Module + Upload Data + View Orders + Print Lost Labels +
+ +
+ {{ content | safe }} +
+ {% endif %} +
+ + +{% endblock %} \ No newline at end of file diff --git a/py_app/app/templates/print_lost_labels.html b/py_app/app/templates/print_lost_labels.html index 90eea74..e160476 100755 --- a/py_app/app/templates/print_lost_labels.html +++ b/py_app/app/templates/print_lost_labels.html @@ -1,170 +1,31 @@ {% extends "base.html" %} {% block head %} - + {% endblock %} {% block content %} - + +
+ + 📖 + +
-
-
-
- - - +
+
+
+ + +
- -
- -
+ +
+ +
Label View
@@ -175,9 +36,9 @@ table.view-orders-table.scan-table tbody tr.selected td { 🔑 Manage Keys
-
+
-
+
INNOFA ROMANIA SRL
@@ -204,13 +65,13 @@ table.view-orders-table.scan-table tbody tr.selected td {
Prod. order
-
- -
+
+ +
-
- -
+
+ +
@@ -220,17 +81,22 @@ table.view-orders-table.scan-table tbody tr.selected td { -
- - -
- @@ -277,10 +143,9 @@ table.view-orders-table.scan-table tbody tr.selected td {
- -
+ +

Data Preview

-
diff --git a/py_app/app/templates/print_module.html b/py_app/app/templates/print_module.html index dbdb37e..7a7ea93 100755 --- a/py_app/app/templates/print_module.html +++ b/py_app/app/templates/print_module.html @@ -1,57 +1,20 @@ {% extends "base.html" %} {% block head %} - + {% endblock %} {% block content %} -
+ +
+ + 📖 + +
+ +
-
+
Label View
@@ -66,9 +29,9 @@
-
+
-
+
INNOFA ROMANIA SRL @@ -150,9 +113,9 @@
-
+
- + -
+
- + -
- - -
- - @@ -232,7 +198,7 @@
-
+

Data Preview (Unprinted Orders)

@@ -266,7 +232,8 @@ - + + @@ -316,6 +283,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 +343,7 @@ document.getElementById('check-db-btn').addEventListener('click', function() { '❌ No'}
`; @@ -433,6 +401,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 +440,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 +523,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 +1543,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 diff --git a/run/trasabilitate.pid b/run/trasabilitate.pid deleted file mode 100644 index 6d57c22..0000000 --- a/run/trasabilitate.pid +++ /dev/null @@ -1 +0,0 @@ -317525
- ${order.created_at ? new Date(order.created_at).toLocaleString() : '-'} + ${order.created_at ? new Date(order.created_at).toLocaleDateString() : '-'}