quality_recticel/windows_print_service/chrome_extension/popup.js

/**
 * Quality Label Printing Service - Popup Script
 * Manages the extension popup interface
 */

document.addEventListener('DOMContentLoaded', async () => {
    console.log('Popup loaded');
    
    // Get elements
    const elements = {
        loading: document.getElementById('loading'),
        content: document.getElementById('content'),
        serviceStatus: document.getElementById('service-status'),
        statusMessage: document.getElementById('status-message'),
        statusDetail: document.getElementById('status-detail'),
        refreshBtn: document.getElementById('refresh-btn'),
        testPrintBtn: document.getElementById('test-print-btn'),
        getPrintersBtn: document.getElementById('get-printers-btn'),
        printersContainer: document.getElementById('printers-container'),
        printersList: document.getElementById('printers-list'),
        helpLink: document.getElementById('help-link')
    };
    
    // Initialize popup
    await initializePopup();
    
    // Event listeners
    elements.refreshBtn.addEventListener('click', checkServiceStatus);
    elements.testPrintBtn.addEventListener('click', testPrint);
    elements.getPrintersBtn.addEventListener('click', getPrinters);
    elements.helpLink.addEventListener('click', showHelp);
    
    /**
     * Initialize popup
     */
    async function initializePopup() {
        try {
            await checkServiceStatus();
            
            // Show content, hide loading
            elements.loading.classList.add('hidden');
            elements.content.classList.remove('hidden');
            
        } catch (error) {
            console.error('Initialization error:', error);
            showError('Failed to initialize popup');
        }
    }
    
    /**
     * Check service status
     */
    async function checkServiceStatus() {
        try {
            elements.refreshBtn.disabled = true;
            elements.refreshBtn.textContent = 'Checking...';
            
            // Send message to background script
            const result = await new Promise((resolve) => {
                chrome.runtime.sendMessage({ action: 'check_service' }, resolve);
            });
            
            updateServiceStatus(result);
            
        } catch (error) {
            console.error('Service check error:', error);
            showError('Failed to check service status');
        } finally {
            elements.refreshBtn.disabled = false;
            elements.refreshBtn.textContent = 'Refresh Status';
        }
    }
    
    /**
     * Update service status display
     */
    function updateServiceStatus(result) {
        const statusCard = elements.serviceStatus;
        const message = elements.statusMessage;
        const detail = elements.statusDetail;
        
        if (result && result.success) {
            // Service is available
            statusCard.className = 'status-card';
            message.textContent = 'Service is running normally';
            detail.textContent = `Last checked: ${new Date().toLocaleTimeString()}`;
            
            // Enable buttons
            elements.testPrintBtn.disabled = false;
            elements.getPrintersBtn.disabled = false;
            
        } else {
            // Service is not available
            statusCard.className = 'status-card error';
            message.textContent = 'Service is not available';
            detail.textContent = result ? result.error : 'Unknown error';
            
            // Disable buttons
            elements.testPrintBtn.disabled = true;
            elements.getPrintersBtn.disabled = false; // Keep enabled for diagnostics
        }
    }
    
    /**
     * Test print functionality
     */
    async function testPrint() {
        try {
            elements.testPrintBtn.disabled = true;
            elements.testPrintBtn.textContent = 'Testing...';
            
            // Create test PDF data
            const testPrintData = {
                pdf_url: 'data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iago8PAovVGl0bGUgKFRlc3QgUGFnZSkKL0NyZWF0b3IgKFF1YWxpdHkgUmVjdGljZWwgUHJpbnQgU2VydmljZSkKL1Byb2R1Y2VyIChRdWFsaXR5IFJlY3RpY2VsKQovQ3JlYXRpb25EYXRlIChEOjIwMjMwMTAxMTIwMDAwKQo+PgplbmRvYmoKMiAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMyAwIFIKPj4KZW5kb2JqCjMgMCBvYmoKPDwKL1R5cGUgL1BhZ2VzCi9LaWRzIFs0IDAgUl0KL0NvdW50IDEKPJ4KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL1BhcmVudCAzIDAgUgovTWVkaWFCb3ggWzAgMCA2MTIgNzkyXQovQ29udGVudHMgNSAwIFIKL1Jlc291cmNlcyA8PAovRm9udCA8PAovRjEgNiAwIFIKPj4KPj4KPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0xlbmd0aCA0NAo+PgpzdHJlYW0KQlQKL0YxIDEyIFRmCjEwMCA3MDAgVGQKKFRlc3QgUHJpbnQgUGFnZSkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iago2IDAgb2JqCjw8Ci9UeXBlIC9Gb250Ci9TdWJ0eXBlIC9UeXBlMQovQmFzZUZvbnQgL0hlbHZldGljYQo+PgplbmRvYmoKeHJlZgowIDcKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAxNDggMDAwMDAgbiAKMDAwMDAwMDE5NSAwMDAwMCBuIAowMDAwMDAwMjUyIDAwMDAwIG4gCjAwMDAwMDA0MTQgMDAwMDAgbiAKMDAwMDAwMDUwOCAwMDAwMCBuIAp0cmFpbGVyCjw8Ci9TaXplIDcKL1Jvb3QgMiAwIFIKL0luZm8gMSAwIFIKPj4Kc3RhcnR4cmVmCjU2NQolJUVPRgo=',
                printer_name: 'default',
                copies: 1
            };
            
            // Send test print request
            const result = await new Promise((resolve) => {
                chrome.runtime.sendMessage({
                    action: 'print_pdf',
                    data: testPrintData
                }, resolve);
            });
            
            if (result && result.success) {
                showSuccess('Test print sent successfully');
            } else {
                showError(result ? result.error : 'Test print failed');
            }
            
        } catch (error) {
            console.error('Test print error:', error);
            showError('Test print failed: ' + error.message);
        } finally {
            elements.testPrintBtn.disabled = false;
            elements.testPrintBtn.textContent = 'Test Print';
        }
    }
    
    /**
     * Get available printers
     */
    async function getPrinters() {
        try {
            elements.getPrintersBtn.disabled = true;
            elements.getPrintersBtn.textContent = 'Loading...';
            
            // Get printers from background script
            const result = await new Promise((resolve) => {
                chrome.runtime.sendMessage({ action: 'get_printers' }, resolve);
            });
            
            if (result && result.success && result.printers) {
                displayPrinters(result.printers);
            } else {
                showError(result ? result.error : 'Failed to get printers');
            }
            
        } catch (error) {
            console.error('Get printers error:', error);
            showError('Failed to get printers: ' + error.message);
        } finally {
            elements.getPrintersBtn.disabled = false;
            elements.getPrintersBtn.textContent = 'Get Printers';
        }
    }
    
    /**
     * Display printers list
     */
    function displayPrinters(printers) {
        if (!printers || printers.length === 0) {
            elements.printersList.innerHTML = '<div style="color: #666; font-style: italic;">No printers found</div>';
        } else {
            elements.printersList.innerHTML = printers.map(printer => `
                <div class="printer-item">
                    <div class="printer-name">${escapeHtml(printer.name)}</div>
                    <div class="printer-details">
                        Driver: ${escapeHtml(printer.driver || 'Unknown')}<br>
                        Port: ${escapeHtml(printer.port || 'Unknown')}
                    </div>
                </div>
            `).join('');
        }
        
        elements.printersContainer.classList.remove('hidden');
    }
    
    /**
     * Show success message
     */
    function showSuccess(message) {
        const statusCard = elements.serviceStatus;
        const statusMessage = elements.statusMessage;
        const statusDetail = elements.statusDetail;
        
        statusCard.className = 'status-card';
        statusMessage.textContent = message;
        statusDetail.textContent = new Date().toLocaleTimeString();
        
        // Reset after 3 seconds
        setTimeout(() => {
            checkServiceStatus();
        }, 3000);
    }
    
    /**
     * Show error message
     */
    function showError(message) {
        const statusCard = elements.serviceStatus;
        const statusMessage = elements.statusMessage;
        const statusDetail = elements.statusDetail;
        
        statusCard.className = 'status-card error';
        statusMessage.textContent = 'Error: ' + message;
        statusDetail.textContent = new Date().toLocaleTimeString();
    }
    
    /**
     * Show help information
     */
    function showHelp() {
        const helpText = `
Quality Label Printing Service Help
==================================

Installation:
1. Install the Windows Print Service using install_service.bat
2. Install this Chrome extension
3. Configure your application to use localhost:8765

API Endpoints:
• http://localhost:8765/health - Service health check
• http://localhost:8765/print/pdf - Print PDF files
• http://localhost:8765/print/silent - Silent printing
• http://localhost:8765/printers - Get available printers

Troubleshooting:
• Ensure Windows service is running
• Check firewall settings (port 8765)
• Verify Chrome extension permissions
• Check service logs: print_service.log

For support, contact the Quality Label Printing development team.
        `;
        
        alert(helpText.trim());
    }
    
    /**
     * Escape HTML to prevent XSS
     */
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
});