updated printing solutions

2025-10-05 09:29:37 +03:00
parent f105da2012
commit 16641193de
11 changed files with 1072 additions and 22 deletions
--- a/py_app/app/templates/create_locations.html
+++ b/py_app/app/templates/create_locations.html
@@ -1,5 +1,57 @@
 {% extends "base.html" %}
 {% block title %}Create Warehouse Locations{% endblock %}
+
+{% block head %}
+<style>
+/* Barcode label preview */
+#barcode-label-preview {
+    width: 4cm;
+    height: 8cm;
+    border: 2px solid #333;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 10px auto;
+    position: relative;
+}
+
+#barcode-label-preview .location-text {
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+#barcode-label-preview #location-barcode {
+    max-width: 90%;
+    max-height: 60%;
+}
+
+.print-section {
+    margin-top: 24px;
+    padding: 16px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+}
+
+.location-row.selected {
+    background-color: #007bff !important;
+    color: white !important;
+}
+
+.location-row {
+    cursor: pointer;
+}
+
+.location-row:hover {
+    background-color: #f8f9fa;
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="scan-container">
    <!-- Add Warehouse Location Card -->
@@ -25,6 +77,38 @@
                <a href="{{ url_for('warehouse.import_locations_csv') }}" class="btn" style="padding: 4px 12px; font-size: 0.95em;">Go to Import Page</a>
            </div>
        </div>
+        
+        <!-- Print Barcode Section -->
+        <div class="print-section">
+            <h3 style="font-size: 1.1em; margin-bottom: 12px;">Print Location Barcode</h3>
+            
+            <!-- Label Preview -->
+            <div id="barcode-label-preview">
+                <div class="location-text">
+                    <div id="location-code-display">Select a location</div>
+                </div>
+                <canvas id="location-barcode" style="display: none;"></canvas>
+                <div id="barcode-placeholder" style="color: #999; font-style: italic;">No location selected</div>
+            </div>
+            
+            <!-- Print Controls -->
+            <div style="text-align: center; margin-top: 15px;">
+                <div style="margin-bottom: 10px;">
+                    <label for="printer-select" style="font-size: 11px; font-weight: 600;">Select Printer:</label>
+                    <select id="printer-select" class="form-control form-control-sm" style="width: 200px; margin: 5px auto; font-size: 11px;">
+                        <option value="">Loading printers...</option>
+                    </select>
+                </div>
+                <button id="print-barcode-btn" class="btn btn-success" style="font-size: 12px; padding: 6px 20px;" disabled>
+                    🖨️ Print Location Barcode
+                </button>
+                <button onclick="testQZConnection()" class="btn btn-info" style="font-size: 11px; padding: 4px 12px; margin-left: 8px;">
+                    🔧 Test QZ Tray
+                </button>
+                <div id="print-status" style="margin-top: 8px; font-size: 11px;"></div>
+            </div>
+        </div>
+        
        <!-- Delete Location Area -->
        {% if session['role'] in ['administrator', 'management'] %}
        <div style="margin-top: 32px; padding: 12px; border-top: 1px solid #eee;">
@@ -45,7 +129,10 @@
    <!-- Locations Table Card -->
    <div class="card scan-table-card">
        <h3>Warehouse Locations</h3>
-        <table class="scan-table">
+        <div id="location-selection-hint" style="margin-bottom: 10px; font-size: 11px; color: #666; text-align: center;">
+            Click on a row to select a location for printing
+        </div>
+        <table class="scan-table" id="locations-table">
            <thead>
                <tr>
                    <th>ID</th>
@@ -56,7 +143,7 @@
            </thead>
            <tbody>
                {% for loc in locations %}
-                <tr>
+                <tr class="location-row" data-location-code="{{ loc[1] }}">
                    <td>{{ loc[0] }}</td>
                    <td>{{ loc[1] }}</td>
                    <td>{{ loc[2] }}</td>
@@ -67,4 +154,356 @@
        </table>
    </div>
 </div>
+
+<!-- Include required JS libraries -->
+<script src="{{ url_for('static', filename='JsBarcode.all.min.js') }}"></script>
+<script src="{{ url_for('static', filename='qz-tray.js') }}"></script>
+<script src="{{ url_for('static', filename='html2canvas.min.js') }}"></script>
+
+<script>
+// Simplified notification system (matching print module)
+function showNotification(message, type = 'info') {
+    const existingNotifications = document.querySelectorAll('.notification');
+    existingNotifications.forEach(n => n.remove());
+    
+    const notification = document.createElement('div');
+    notification.className = `notification alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : type === 'warning' ? 'warning' : 'info'}`;
+    notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        z-index: 9999;
+        max-width: 450px;
+        padding: 15px;
+        border-radius: 5px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    `;
+    
+    const formattedMessage = message.replace(/\n/g, '<br>');
+    
+    notification.innerHTML = `
+        <div style="display: flex; align-items: flex-start; justify-content: space-between;">
+            <span style="flex: 1; padding-right: 10px; white-space: pre-wrap; font-family: monospace; font-size: 12px;">${formattedMessage}</span>
+            <button type="button" onclick="this.parentElement.parentElement.remove()" style="background: none; border: none; font-size: 20px; cursor: pointer; flex-shrink: 0;">&times;</button>
+        </div>
+    `;
+    
+    document.body.appendChild(notification);
+    
+    const timeout = type === 'error' ? 15000 : 5000;
+    setTimeout(() => {
+        if (notification.parentNode) {
+            notification.remove();
+        }
+    }, timeout);
+}
+
+let selectedLocationCode = null;
+let qzTray = null;
+let availablePrinters = [];
+
+// Initialize QZ Tray connection (matching print module implementation)
+async function initializeQZTray() {
+    try {
+        console.log('🔍 Checking for QZ Tray...');
+        
+        // Check if QZ Tray library is loaded
+        if (typeof qz === 'undefined') {
+            console.error('❌ QZ Tray library not loaded');
+            const errorMsg = '❌ QZ Tray Library Not Loaded\n\n' +
+                           'The QZ Tray JavaScript library failed to load.\n' +
+                           'Check the browser console for errors and refresh the page.\n\n' +
+                           'Path: /static/qz-tray.js';
+            document.getElementById('print-status').textContent = 'Library Error';
+            showNotification(errorMsg, 'error');
+            return false;
+        }
+        
+        console.log('✅ QZ Tray library loaded');
+        console.log('🔒 Using patched qz-tray.js for pairing-key authentication...');
+        
+        console.log('🔌 Attempting to connect to QZ Tray on client PC...');
+
+        // Set connection closed callback
+        qz.websocket.setClosedCallbacks(function() {
+            console.warn('⚠️ QZ Tray connection closed');
+            document.getElementById('print-status').textContent = 'QZ Tray Disconnected';
+        });
+
+        // Connect to QZ Tray running on client PC
+        console.log('⏳ Connecting...');
+        await qz.websocket.connect();
+        qzTray = qz;
+        
+        const version = await qz.api.getVersion();
+        console.log('✅ QZ Tray connected successfully');
+        console.log('📋 QZ Tray Version:', version);
+        
+        document.getElementById('print-status').textContent = 'QZ Tray Connected';
+        
+        // Load printers
+        await loadQZTrayPrinters();
+        
+        return true;
+        
+    } catch (error) {
+        console.error('❌ QZ Tray connection failed:', error);
+        
+        let errorMsg = '❌ QZ Tray Connection Failed\n\n';
+        let statusText = 'Connection Failed';
+        
+        if (error.message && error.message.includes('certificate')) {
+            errorMsg += '🔒 Certificate Trust Required\n\n';
+            errorMsg += 'QZ Tray requires you to trust its certificate:\n';
+            errorMsg += '1. Open: https://localhost:8182\n';
+            errorMsg += '2. Accept/Trust the security certificate\n';
+            errorMsg += '3. Refresh this page and try again\n\n';
+            errorMsg += '🔍 This is normal and safe for QZ Tray';
+            statusText = 'Certificate Error';
+        } else {
+            errorMsg += '⚠️ Troubleshooting:\n';
+            errorMsg += '1. Make sure QZ Tray is running\n';
+            errorMsg += '2. Check firewall settings\n';
+            errorMsg += '3. Try restarting QZ Tray\n';
+            errorMsg += '4. Restart your browser\n\n';
+            errorMsg += 'Error: ' + error.message;
+        }
+        
+        document.getElementById('print-status').textContent = statusText;
+        showNotification(errorMsg, 'error');
+        return false;
+    }
+}
+
+// Load available printers from QZ Tray (matching print module)
+async function loadQZTrayPrinters() {
+    try {
+        if (!qzTray) return;
+        
+        const printers = await qzTray.printers.find();
+        availablePrinters = printers;
+        
+        const printerSelect = document.getElementById('printer-select');
+        printerSelect.innerHTML = '<option value="">Select a printer...</option>';
+        
+        printers.forEach(printer => {
+            const option = document.createElement('option');
+            option.value = printer;
+            option.textContent = printer;
+            printerSelect.appendChild(option);
+        });
+        
+        console.log(`📄 Found ${printers.length} printers:`, printers);
+        
+        // Auto-select first thermal printer if available
+        const thermalPrinter = printers.find(p => 
+            p.toLowerCase().includes('thermal') || 
+            p.toLowerCase().includes('label') ||
+            p.toLowerCase().includes('zebra') ||
+            p.toLowerCase().includes('epson')
+        );
+        
+        if (thermalPrinter) {
+            printerSelect.value = thermalPrinter;
+            console.log('🏷️ Auto-selected thermal printer:', thermalPrinter);
+        } else if (printers.length > 0) {
+            printerSelect.value = printers[0];
+            console.log('🖨️ Auto-selected first printer:', printers[0]);
+        }
+        
+        showNotification(`✅ Found ${printers.length} printer(s)`, 'success');
+        
+    } catch (error) {
+        console.error('Error loading printers:', error);
+        document.getElementById('printer-select').innerHTML = '<option value="">Failed to load printers</option>';
+        showNotification('⚠️ Failed to load printers: ' + error.message, 'warning');
+    }
+}
+
+// Generate barcode for location
+function generateLocationBarcode(locationCode) {
+    const canvas = document.getElementById('location-barcode');
+    const placeholder = document.getElementById('barcode-placeholder');
+    
+    if (locationCode) {
+        try {
+            JsBarcode(canvas, locationCode, {
+                format: "CODE128",
+                width: 2,
+                height: 80,
+                displayValue: true,
+                fontSize: 12,
+                margin: 5
+            });
+            canvas.style.display = 'block';
+            placeholder.style.display = 'none';
+        } catch (error) {
+            console.error('Error generating barcode:', error);
+            canvas.style.display = 'none';
+            placeholder.style.display = 'block';
+            placeholder.textContent = 'Barcode generation failed';
+        }
+    } else {
+        canvas.style.display = 'none';
+        placeholder.style.display = 'block';
+        placeholder.textContent = 'No location selected';
+    }
+}
+
+// Handle location row selection
+document.addEventListener('DOMContentLoaded', function() {
+    const locationRows = document.querySelectorAll('.location-row');
+    const locationCodeDisplay = document.getElementById('location-code-display');
+    const printButton = document.getElementById('print-barcode-btn');
+    
+    locationRows.forEach(row => {
+        row.addEventListener('click', function() {
+            // Remove selection from other rows
+            locationRows.forEach(r => r.classList.remove('selected'));
+            
+            // Select this row
+            this.classList.add('selected');
+            
+            // Get location code
+            selectedLocationCode = this.dataset.locationCode;
+            
+            // Update display
+            locationCodeDisplay.textContent = selectedLocationCode;
+            
+            // Generate barcode
+            generateLocationBarcode(selectedLocationCode);
+            
+            // Enable print button
+            printButton.disabled = false;
+            
+            showNotification(`📍 Selected location: ${selectedLocationCode}`, 'info');
+        });
+    });
+    
+    // Initialize QZ Tray
+    initializeQZTray();
+});
+
+// Print barcode function with enhanced QZ Tray support
+async function printLocationBarcode() {
+    if (!selectedLocationCode) {
+        showNotification('❌ Please select a location first', 'error');
+        return;
+    }
+    
+    const selectedPrinter = document.getElementById('printer-select').value;
+    if (!selectedPrinter) {
+        showNotification('❌ Please select a printer', 'error');
+        return;
+    }
+    
+    const printButton = document.getElementById('print-barcode-btn');
+    const printStatus = document.getElementById('print-status');
+    
+    try {
+        printButton.disabled = true;
+        printStatus.textContent = 'Generating label...';
+        
+        // Generate PDF for the 4x8cm label
+        const response = await fetch('/generate_location_label_pdf', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                location_code: selectedLocationCode
+            })
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to generate PDF');
+        }
+        
+        const pdfBlob = await response.blob();
+        const pdfArrayBuffer = await pdfBlob.arrayBuffer();
+        const pdfBase64 = btoa(String.fromCharCode(...new Uint8Array(pdfArrayBuffer)));
+        
+        printStatus.textContent = 'Sending to printer...';
+        
+        // Configure QZ Tray for PDF printing with 4x8cm size
+        const config = qzTray.configs.create(selectedPrinter, {
+            size: { width: 4, height: 8, units: 'cm' },
+            margins: { top: 0, right: 0, bottom: 0, left: 0 },
+            orientation: 'portrait'
+        });
+        
+        const data = [{
+            type: 'pdf',
+            format: 'base64',
+            data: pdfBase64
+        }];
+        
+        await qzTray.print(config, data);
+        
+        printStatus.textContent = 'Label printed successfully!';
+        showNotification(`✅ Location barcode printed successfully!\n📍 Location: ${selectedLocationCode}\n🖨️ Printer: ${selectedPrinter}`, 'success');
+        
+        setTimeout(() => {
+            printStatus.textContent = '';
+        }, 3000);
+        
+    } catch (error) {
+        console.error('Print error:', error);
+        printStatus.textContent = 'Print failed: ' + error.message;
+        showNotification('❌ Print failed: ' + error.message, 'error');
+    } finally {
+        printButton.disabled = false;
+    }
+}
+
+// Add event listener for print button
+document.getElementById('print-barcode-btn').addEventListener('click', printLocationBarcode);
+
+// Test QZ Tray connection function (for debugging)
+async function testQZConnection() {
+    console.log('🔍 ========== QZ TRAY CONNECTION TEST ==========');
+    
+    const printStatus = document.getElementById('print-status');
+    const originalStatus = printStatus.textContent;
+    printStatus.textContent = 'Testing QZ Tray...';
+    
+    let testResults = [];
+    
+    try {
+        // Test 1: Check if library is loaded
+        if (typeof qz === 'undefined') {
+            testResults.push('❌ Test 1: Library NOT loaded');
+            throw new Error('QZ Tray library not loaded');
+        }
+        testResults.push('✅ Test 1: Library loaded successfully');
+        
+        // Test 2: Test connection
+        if (!qzTray) {
+            await initializeQZTray();
+        }
+        testResults.push('✅ Test 2: Connection successful');
+        
+        // Test 3: Test printer discovery
+        await loadQZTrayPrinters();
+        testResults.push(`✅ Test 3: Found ${availablePrinters.length} printers`);
+        
+        const resultMsg = 'QZ Tray Connection Test Results:\n\n' + testResults.join('\n');
+        showNotification(resultMsg, 'success');
+        printStatus.textContent = 'Test completed successfully';
+        
+    } catch (error) {
+        testResults.push(`❌ Test failed: ${error.message}`);
+        const resultMsg = 'QZ Tray Connection Test Results:\n\n' + testResults.join('\n');
+        showNotification(resultMsg, 'error');
+        printStatus.textContent = 'Test failed';
+    }
+    
+    setTimeout(() => {
+        printStatus.textContent = originalStatus;
+    }, 3000);
+}
+
+// Add test button functionality (for debugging - can be removed in production)
+console.log('🔧 QZ Tray test function available: testQZConnection()');
+</script>
 {% endblock %}