ske087/quality_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Major UI/UX improvements and help system implementation

Browse Source 
✨ 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
2025-11-03 18:48:56 +02:00
parent b56cccce3f
commit 7fd4b7449d
19 changed files with 1938 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
py_app/app/templates/base.html
View File

@@ -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>

20
py_app/app/templates/dashboard.html
View File

@@ -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
View 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 %}

221
py_app/app/templates/print_lost_labels.html
View File

@@ -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>

250
py_app/app/templates/print_module.html
View File

@@ -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>