uploadte to corect preview and print the labels for 1 row

2025-09-20 17:31:20 +03:00
parent beeaa02c35
commit 2c01db9fea
6 changed files with 865 additions and 120 deletions
--- a/py_app/chrome_extension/background.js
+++ b/py_app/chrome_extension/background.js
@@ -33,10 +33,10 @@ async function handlePrintLabel(printData, sendResponse) {
    
    // Check if printing API is available
    if (!chrome.printing || !chrome.printing.getPrinters) {
-      console.error('Chrome printing API not available');
+      console.error('Chrome printing API not available - browser may be Brave, Edge, or older Chrome');
      sendResponse({
        success: false, 
-        error: 'Chrome printing API not available. Please ensure you are using Chrome 85+ and the extension has proper permissions.'
+        error: 'Direct printing API not available in this browser. The extension works best in Google Chrome 85+. Using fallback method instead.'
      });
      return;
    }
@@ -50,13 +50,21 @@ async function handlePrintLabel(printData, sendResponse) {
      return;
    }
    
-    // Find default printer or use first available
-    const defaultPrinter = printers.find(p => p.isDefault) || printers[0];
-    console.log('Using printer:', defaultPrinter);
+    // Find selected printer or use default/first available
+    let selectedPrinter;
+    if (printData.printerId && printData.printerId !== 'default') {
+      selectedPrinter = printers.find(p => p.id === printData.printerId);
+    }
+    
+    if (!selectedPrinter) {
+      selectedPrinter = printers.find(p => p.isDefault) || printers[0];
+    }
+    
+    console.log('Using printer:', selectedPrinter);
    
    // Create print job
    const printJob = {
-      printerId: defaultPrinter.id,
+      printerId: selectedPrinter.id,
      ticket: {
        version: '1.0',
        print: {
@@ -100,7 +108,7 @@ async function handlePrintLabel(printData, sendResponse) {
        lastPrint: {
          timestamp: Date.now(),
          jobId: result.jobId,
-          printer: defaultPrinter.displayName
+          printer: selectedPrinter.displayName
        }
      });
    } else {
@@ -120,7 +128,7 @@ async function getPrinters(sendResponse) {
    if (!chrome.printing || !chrome.printing.getPrinters) {
      sendResponse({
        success: false, 
-        error: 'Chrome printing API not available'
+        error: 'Direct printing API not available in this browser (works in Chrome only)'
      });
      return;
    }
@@ -144,38 +152,108 @@ chrome.runtime.onInstalled.addListener((details) => {
  });
 });

-// Fallback print method using tabs API
+// Fallback print method using tabs API (works in Brave, Edge, Chrome)
 async function handleFallbackPrint(printData, sendResponse) {
  try {
-    console.log('Using fallback print method');
+    console.log('Using fallback print method for Brave/Edge/Chrome');
    
-    // Create a new tab with the print content
+    // Create enhanced HTML with better print styles
+    const enhancedHTML = `
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <title>Quality Recticel Label</title>
+        <style>
+          @page {
+            margin: 10mm;
+            size: A4;
+          }
+          body { 
+            margin: 0; 
+            padding: 0;
+            font-family: Arial, sans-serif; 
+            background: white;
+          }
+          .print-container { 
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+          }
+          .label-wrapper { 
+            transform: scale(1.5); 
+            transform-origin: center;
+            page-break-inside: avoid;
+          }
+          @media print {
+            body { padding: 0; margin: 0; }
+            .print-container { min-height: auto; padding: 20px 0; }
+            .no-print { display: none !important; }
+          }
+          .print-instructions {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: #007bff;
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 14px;
+            z-index: 1000;
+          }
+        </style>
+        <script>
+          window.onload = function() {
+            // Auto-print after 1 second
+            setTimeout(() => {
+              window.print();
+              // Auto-close after printing (or after 10 seconds)
+              setTimeout(() => {
+                window.close();
+              }, 2000);
+            }, 1000);
+          };
+          
+          // Handle print events
+          window.onbeforeprint = function() {
+            console.log('Print dialog opened');
+          };
+          
+          window.onafterprint = function() {
+            console.log('Print dialog closed');
+            setTimeout(() => {
+              window.close();
+            }, 500);
+          };
+        </script>
+      </head>
+      <body>
+        <div class="print-instructions no-print">
+          🖨️ Printing will start automatically...<br>
+          <small>If dialog doesn't appear, press Ctrl+P</small>
+        </div>
+        <div class="print-container">
+          <div class="label-wrapper">
+            ${printData.html.replace(/<!DOCTYPE html>|<html>|<\/html>|<head>.*?<\/head>|<body>|<\/body>/gi, '')}
+          </div>
+        </div>
+      </body>
+      </html>
+    `;
+    
+    // Create a new tab with the enhanced print content
    const tab = await chrome.tabs.create({
-      url: 'data:text/html,' + encodeURIComponent(printData.html),
-      active: false
+      url: 'data:text/html;charset=utf-8,' + encodeURIComponent(enhancedHTML),
+      active: true  // Make active so user can see the print dialog
    });
    
-    // Wait for tab to load, then print
-    setTimeout(async () => {
-      try {
-        await chrome.tabs.executeScript(tab.id, {
-          code: 'window.print();'
-        });
-        
-        // Close the tab after printing
-        setTimeout(() => {
-          chrome.tabs.remove(tab.id);
-        }, 1000);
-        
-        sendResponse({success: true, method: 'fallback'});
-      } catch (error) {
-        sendResponse({success: false, error: 'Fallback print failed: ' + error.message});
-      }
-    }, 1000);
+    console.log('Created print tab:', tab.id);
+    sendResponse({success: true, method: 'fallback_tab', tabId: tab.id});
    
  } catch (error) {
    console.error('Fallback print error:', error);
-    sendResponse({success: false, error: error.message});
+    sendResponse({success: false, error: 'Browser print fallback failed: ' + error.message});
  }
 }

--- a/py_app/chrome_extension/content.js
+++ b/py_app/chrome_extension/content.js
@@ -30,6 +30,9 @@ function initializePrintExtension() {
 }

 function addExtensionStatusIndicator() {
+  // Detect browser type
+  const browserType = getBrowserType();
+  
  // Create status indicator element
  const statusIndicator = document.createElement('div');
  statusIndicator.id = 'extension-status';
@@ -37,24 +40,39 @@ function addExtensionStatusIndicator() {
    position: fixed;
    top: 10px;
    right: 10px;
-    background: #28a745;
-    color: white;
-    padding: 5px 10px;
+    background: ${browserType === 'chrome' ? '#28a745' : '#ffc107'};
+    color: ${browserType === 'chrome' ? 'white' : 'black'};
+    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    max-width: 250px;
  `;
-  statusIndicator.textContent = '🖨️ Print Extension Active';
+  
+  if (browserType === 'chrome') {
+    statusIndicator.textContent = '🖨️ Print Extension Active (Direct Print Available)';
+  } else {
+    statusIndicator.innerHTML = `🖨️ Print Extension Active<br><small>${browserType.toUpperCase()} - Browser Print Mode</small>`;
+  }
  
  document.body.appendChild(statusIndicator);
  
-  // Hide after 3 seconds
+  // Hide after 4 seconds (longer for non-Chrome browsers)
  setTimeout(() => {
    statusIndicator.style.opacity = '0';
    statusIndicator.style.transition = 'opacity 0.5s';
    setTimeout(() => statusIndicator.remove(), 500);
-  }, 3000);
+  }, browserType === 'chrome' ? 3000 : 5000);
+}
+
+// Detect browser type
+function getBrowserType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.includes('edg/')) return 'edge';
+  if (userAgent.includes('brave')) return 'brave';
+  if (userAgent.includes('chrome') && !userAgent.includes('edg/')) return 'chrome';
+  return 'chromium';
 }

 function overridePrintButton() {
@@ -71,9 +89,15 @@ function overridePrintButton() {
    // Add new event listener for extension printing
    newPrintButton.addEventListener('click', handleExtensionPrint);
    
-    // Update button text to indicate direct printing
-    newPrintButton.innerHTML = '🖨️ Print Direct';
-    newPrintButton.title = 'Print directly to default printer (Chrome Extension)';
+    // Update button text based on browser capabilities
+    const browserType = getBrowserType();
+    if (browserType === 'chrome') {
+      newPrintButton.innerHTML = '🖨️ Print Direct';
+      newPrintButton.title = 'Print directly to default printer (Chrome Extension)';
+    } else {
+      newPrintButton.innerHTML = '🖨️ Print Enhanced';
+      newPrintButton.title = `Enhanced printing for ${browserType.toUpperCase()} browser - Opens optimized print dialog`;
+    }
    
    console.log('Print button override complete');
  } else {
@@ -103,12 +127,16 @@ function handleExtensionPrint(event) {
  // Create complete HTML for printing
  const printHTML = createPrintableHTML(labelPreview);
  
+  // Get selected printer from dropdown
+  const selectedPrinterId = window.getSelectedPrinter ? window.getSelectedPrinter() : 'default';
+  
  // Try direct printing first, then fallback
  chrome.runtime.sendMessage({
    action: 'print_label',
    data: {
      html: printHTML,
-      timestamp: Date.now()
+      timestamp: Date.now(),
+      printerId: selectedPrinterId
    }
  }, (response) => {
    if (response && response.success) {
@@ -122,7 +150,8 @@ function handleExtensionPrint(event) {
        action: 'fallback_print',
        data: {
          html: printHTML,
-          timestamp: Date.now()
+          timestamp: Date.now(),
+          printerId: selectedPrinterId
        }
      }, handlePrintResponse);
    }