Major UI/UX improvements and help system implementation
✨ New Features: - Implemented comprehensive help/documentation system with Markdown support - Added floating help buttons throughout the application - Created modular CSS architecture for better maintainability - Added theme-aware help pages (light/dark mode support) 🎨 UI/UX Improvements: - Implemented 25%/75% card layout consistency across printing module pages - Fixed barcode display issues (removed black rectangles, proper barcode patterns) - Enhanced print method selection with horizontal layout (space-saving) - Added floating back button in help pages - Improved form controls styling (radio buttons, dropdowns) 🔧 Technical Enhancements: - Modularized CSS: Created print_module.css with 779 lines of specialized styles - Enhanced base.css with floating button components and dark mode support - Updated routes.py with help system endpoints and Markdown processing - Fixed JsBarcode integration with proper CDN fallback - Removed conflicting inline styles from templates 📚 Documentation: - Created dashboard.md with comprehensive user guide - Added help viewer template with theme synchronization - Set up documentation image system with proper Flask static serving - Implemented docs/images/ folder structure 🐛 Bug Fixes: - Fixed barcode positioning issues (horizontal/vertical alignment) - Resolved CSS conflicts between inline styles and modular CSS - Fixed radio button oval display issues - Removed borders from barcode frames while preserving label info borders - Fixed theme synchronization between main app and help pages 📱 Responsive Design: - Applied consistent 25%/75% layout across print_module, print_lost_labels, upload_data, view_orders - Added responsive breakpoints for tablet (30%/70%) and mobile (stacked) layouts - Improved mobile-friendly form layouts and button sizing The application now features a professional, consistent UI with comprehensive help system and improved printing module functionality.
This commit is contained in:
Quality System Admin
@@ -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/<page>')
|
||||
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/<order_id>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
276
py_app/app/static/css/daily_mirror_tune.css
Normal file
276
py_app/app/static/css/daily_mirror_tune.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
807
py_app/app/static/css/print_module.css
Normal file
807
py_app/app/static/css/print_module.css
Normal file
@@ -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;
|
||||
}
|
||||
131
py_app/app/static/docs/dashboard.md
Normal file
131
py_app/app/static/docs/dashboard.md
Normal file
@@ -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
|
||||
|
||||
|
||||
|
||||
### Sectiuni principale
|
||||
|
||||
#### 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
|
||||
|
||||
|
||||
|
||||
#### 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
|
||||
|
||||
|
||||
|
||||
#### 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
|
||||
|
||||
|
||||
|
||||
## 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ă
|
||||
|
||||
|
||||
|
||||
### 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ă
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
## 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*
|
||||
BIN
py_app/app/static/docs/images/access_management.png
Normal file
BIN
py_app/app/static/docs/images/access_management.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
py_app/app/static/docs/images/dashboard_labels.png
Normal file
BIN
py_app/app/static/docs/images/dashboard_labels.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
py_app/app/static/docs/images/dashboard_main.png
Normal file
BIN
py_app/app/static/docs/images/dashboard_main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
py_app/app/static/docs/images/dashboard_navbar.png
Normal file
BIN
py_app/app/static/docs/images/dashboard_navbar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
py_app/app/static/docs/images/dashboard_quality.png
Normal file
BIN
py_app/app/static/docs/images/dashboard_quality.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
py_app/app/static/docs/images/dashboard_warehouse.png
Normal file
BIN
py_app/app/static/docs/images/dashboard_warehouse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
py_app/app/static/docs/images/quick_access.png
Normal file
BIN
py_app/app/static/docs/images/quick_access.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
48
py_app/app/static/docs/print_module.md
Normal file
48
py_app/app/static/docs/print_module.md
Normal file
@@ -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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
### 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.
|
||||
@@ -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 %}
|
||||
@@ -39,18 +43,18 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="right-header">
|
||||
<button id="theme-toggle" class="theme-toggle">Change to dark theme</button>
|
||||
{% 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'] %}
|
||||
<a href="{{ url_for('main.etichete') }}" class="btn go-to-main-etichete-btn">Main Page Etichete</a>
|
||||
{% endif %}
|
||||
{% if request.endpoint in ['main.quality', 'main.fg_quality'] %}
|
||||
<a href="{{ url_for('main.reports') }}" class="btn go-to-main-reports-btn">Main Page Reports</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('main.dashboard') }}" class="btn go-to-dashboard-btn">Go to Dashboard</a>
|
||||
{% if 'user' in session %}
|
||||
<span class="user-info">You are logged in as {{ session['user'] }}</span>
|
||||
<a href="{{ url_for('main.logout') }}" class="logout-button">Logout</a>
|
||||
{% endif %}
|
||||
<button id="theme-toggle" class="theme-toggle">Change to dark theme</button>
|
||||
{% 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>
|
||||
<a href="{{ url_for('main.logout') }}" class="logout-button ms-2">Logout</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -3,8 +3,14 @@
|
||||
{% block title %}Dashboard{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Floating Help Button -->
|
||||
<div class="floating-help-btn">
|
||||
<a href="{{ url_for('main.help', page='dashboard') }}" target="_blank" title="Dashboard Help">
|
||||
📖
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-container">
|
||||
|
||||
<!-- Row of evenly distributed cards -->
|
||||
<div class="dashboard-card">
|
||||
<h3>Quality Module</h3>
|
||||
@@ -34,5 +40,17 @@
|
||||
<a href="{{ url_for('main.settings') }}" class="btn">Access Settings Page</a>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-card">
|
||||
<h3>📊 Daily Mirror</h3>
|
||||
<p>Business Intelligence and Production Reporting - Generate comprehensive daily reports including order quantities, production status, and delivery tracking.</p>
|
||||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||||
<a href="{{ url_for('daily_mirror.daily_mirror_main_route') }}" class="btn">📊 Daily Mirror Hub</a>
|
||||
</div>
|
||||
<div style="margin-top: 8px; font-size: 12px; color: #666;">
|
||||
<strong>Tracks:</strong> Orders quantity • Production launched • Production finished • Orders delivered
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
239
py_app/app/templates/docs/help_viewer.html
Normal file
239
py_app/app/templates/docs/help_viewer.html
Normal file
@@ -0,0 +1,239 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
/* Light Mode Styles (default) */
|
||||
.help-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.help-content h1 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 3px solid #3498db;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.help-content h2 {
|
||||
color: #34495e;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.help-content h3 {
|
||||
color: #7f8c8d;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.help-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.help-content code {
|
||||
background: #f8f9fa;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.help-content pre {
|
||||
background: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
border-left: 4px solid #3498db;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.help-content ul, .help-content ol {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.help-content li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.help-navigation {
|
||||
background: #ecf0f1;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.help-navigation a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.help-navigation a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Dark Mode Styles */
|
||||
body.dark-mode .help-container {
|
||||
background: #2d3748;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark-mode .help-content {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark-mode .help-content h1 {
|
||||
color: #90cdf4;
|
||||
border-bottom: 3px solid #4299e1;
|
||||
}
|
||||
|
||||
body.dark-mode .help-content h2 {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark-mode .help-content h3 {
|
||||
color: #718096;
|
||||
}
|
||||
|
||||
body.dark-mode .help-content img {
|
||||
border: 1px solid #4a5568;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
body.dark-mode .help-content code {
|
||||
background: #1a202c;
|
||||
color: #f56565;
|
||||
border: 1px solid #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .help-content pre {
|
||||
background: #1a202c;
|
||||
border-left: 4px solid #4299e1;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark-mode .help-navigation {
|
||||
background: #1a202c;
|
||||
border: 1px solid #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .help-navigation a {
|
||||
color: #90cdf4;
|
||||
}
|
||||
|
||||
body.dark-mode .help-navigation a:hover {
|
||||
color: #63b3ed;
|
||||
}
|
||||
|
||||
body.dark-mode .alert-danger {
|
||||
background-color: #742a2a;
|
||||
border-color: #e53e3e;
|
||||
color: #feb2b2;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Floating Back Button -->
|
||||
<div class="floating-back-btn">
|
||||
<button onclick="history.back()" title="Înapoi">
|
||||
←
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="help-container">
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">
|
||||
<h4>Eroare</h4>
|
||||
<p>{{ error }}</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="help-navigation">
|
||||
<strong>Documentație disponibilă:</strong>
|
||||
<a href="{{ url_for('main.help', page='dashboard') }}">Dashboard</a>
|
||||
<a href="{{ url_for('main.help', page='print_module') }}">Print Module</a>
|
||||
<a href="{{ url_for('main.help', page='upload_data') }}">Upload Data</a>
|
||||
<a href="{{ url_for('main.help', page='view_orders') }}">View Orders</a>
|
||||
<a href="{{ url_for('main.help', page='print_lost_labels') }}">Print Lost Labels</a>
|
||||
</div>
|
||||
|
||||
<div class="help-content">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Theme Detection and Application
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check if theme is stored in localStorage (same as main app)
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
// Apply theme based on saved preference or system preference
|
||||
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
||||
document.body.classList.add('dark-mode');
|
||||
} else {
|
||||
document.body.classList.remove('dark-mode');
|
||||
}
|
||||
|
||||
// Listen for theme changes (if user changes theme in main app)
|
||||
window.addEventListener('storage', function(e) {
|
||||
if (e.key === 'theme') {
|
||||
if (e.newValue === 'dark') {
|
||||
document.body.classList.add('dark-mode');
|
||||
} else {
|
||||
document.body.classList.remove('dark-mode');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Also check opener window theme if available (when opened from main app)
|
||||
if (window.opener && window.opener.document) {
|
||||
try {
|
||||
const openerHasDarkMode = window.opener.document.body.classList.contains('dark-mode');
|
||||
if (openerHasDarkMode) {
|
||||
document.body.classList.add('dark-mode');
|
||||
} else {
|
||||
document.body.classList.remove('dark-mode');
|
||||
}
|
||||
} catch (e) {
|
||||
// Cross-origin access denied, fallback to localStorage
|
||||
console.log('Using localStorage theme fallback');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth scrolling pentru linkurile din documentație
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -1,170 +1,31 @@
|
||||
{% 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 %}
|
||||
|
||||
<!-- Floating Help Button -->
|
||||
<div class="floating-help-btn">
|
||||
<a href="{{ url_for('main.help', page='print_lost_labels') }}" target="_blank" title="Print Lost Labels Help">
|
||||
📖
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 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 +36,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 +65,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 +81,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 +143,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,20 @@
|
||||
{% 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;">
|
||||
<!-- Floating Help Button -->
|
||||
<div class="floating-help-btn">
|
||||
<a href="{{ url_for('main.help', page='print_module') }}" target="_blank" title="Print Module Help">
|
||||
📖
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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 +29,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 +113,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 +124,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 +143,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 +198,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 +232,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 +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() {
|
||||
'<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 +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
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
317525
|
||||
Reference in New Issue
Block a user