upfdated to ptint plugin
This commit is contained in:
272
py_app/chrome_extension/content.js
Normal file
272
py_app/chrome_extension/content.js
Normal file
@@ -0,0 +1,272 @@
|
||||
// Content script for Quality Recticel Print Helper
|
||||
console.log('Quality Recticel Print Helper - Content script loaded');
|
||||
|
||||
// Check if we're on the print module page
|
||||
if (window.location.pathname.includes('print_module')) {
|
||||
console.log('Print module page detected, initializing extension features');
|
||||
|
||||
// Wait for DOM to be ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initializePrintExtension);
|
||||
} else {
|
||||
initializePrintExtension();
|
||||
}
|
||||
}
|
||||
|
||||
function initializePrintExtension() {
|
||||
console.log('Initializing print extension features');
|
||||
|
||||
// Add extension status indicator
|
||||
addExtensionStatusIndicator();
|
||||
|
||||
// Override the print button functionality
|
||||
overridePrintButton();
|
||||
|
||||
// Add printer selection dropdown
|
||||
addPrinterSelection();
|
||||
|
||||
// Check extension status
|
||||
checkExtensionStatus();
|
||||
}
|
||||
|
||||
function addExtensionStatusIndicator() {
|
||||
// Create status indicator element
|
||||
const statusIndicator = document.createElement('div');
|
||||
statusIndicator.id = 'extension-status';
|
||||
statusIndicator.style.cssText = `
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
z-index: 9999;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
`;
|
||||
statusIndicator.textContent = '🖨️ Print Extension Active';
|
||||
|
||||
document.body.appendChild(statusIndicator);
|
||||
|
||||
// Hide after 3 seconds
|
||||
setTimeout(() => {
|
||||
statusIndicator.style.opacity = '0';
|
||||
statusIndicator.style.transition = 'opacity 0.5s';
|
||||
setTimeout(() => statusIndicator.remove(), 500);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function overridePrintButton() {
|
||||
// Find the print button
|
||||
const printButton = document.getElementById('print-label-btn');
|
||||
|
||||
if (printButton) {
|
||||
console.log('Found print button, overriding functionality');
|
||||
|
||||
// Remove existing event listeners by cloning the element
|
||||
const newPrintButton = printButton.cloneNode(true);
|
||||
printButton.parentNode.replaceChild(newPrintButton, printButton);
|
||||
|
||||
// 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)';
|
||||
|
||||
console.log('Print button override complete');
|
||||
} else {
|
||||
console.log('Print button not found, will retry...');
|
||||
// Retry after 1 second if button not found yet
|
||||
setTimeout(overridePrintButton, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function handleExtensionPrint(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
console.log('Extension print button clicked');
|
||||
|
||||
// Get the label preview element
|
||||
const labelPreview = document.getElementById('label-preview');
|
||||
|
||||
if (!labelPreview) {
|
||||
alert('Label preview not found. Please select an order first.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show printing status
|
||||
showPrintStatus('Preparing to print...', 'info');
|
||||
|
||||
// Create complete HTML for printing
|
||||
const printHTML = createPrintableHTML(labelPreview);
|
||||
|
||||
// Try direct printing first, then fallback
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'print_label',
|
||||
data: {
|
||||
html: printHTML,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
}, (response) => {
|
||||
if (response && response.success) {
|
||||
handlePrintResponse(response);
|
||||
} else {
|
||||
console.log('Direct printing failed, trying fallback method');
|
||||
showPrintStatus('Direct printing unavailable, using browser print...', 'info');
|
||||
|
||||
// Try fallback method
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'fallback_print',
|
||||
data: {
|
||||
html: printHTML,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
}, handlePrintResponse);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createPrintableHTML(labelElement) {
|
||||
// Get the computed styles and create a complete HTML document
|
||||
const styles = `
|
||||
<style>
|
||||
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
|
||||
.print-container { width: 210mm; height: 297mm; margin: 0 auto; }
|
||||
.label-wrapper { transform: scale(1); transform-origin: top left; }
|
||||
</style>
|
||||
`;
|
||||
|
||||
const bodyContent = `
|
||||
<div class="print-container">
|
||||
<div class="label-wrapper">
|
||||
${labelElement.outerHTML}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Quality Recticel Label</title>
|
||||
${styles}
|
||||
</head>
|
||||
<body>
|
||||
${bodyContent}
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
function handlePrintResponse(response) {
|
||||
console.log('Print response:', response);
|
||||
|
||||
if (response && response.success) {
|
||||
showPrintStatus('✅ Label sent to printer successfully!', 'success');
|
||||
|
||||
// Update the order status in the table if possible
|
||||
updateOrderPrintStatus();
|
||||
|
||||
} else {
|
||||
const errorMsg = response?.error || 'Unknown error occurred';
|
||||
showPrintStatus(`❌ Print failed: ${errorMsg}`, 'error');
|
||||
|
||||
// Fallback to browser print dialog
|
||||
setTimeout(() => {
|
||||
if (confirm('Direct printing failed. Open browser print dialog?')) {
|
||||
window.print();
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
function showPrintStatus(message, type) {
|
||||
// Remove existing status messages
|
||||
const existingStatus = document.getElementById('print-status-message');
|
||||
if (existingStatus) {
|
||||
existingStatus.remove();
|
||||
}
|
||||
|
||||
// Create status message
|
||||
const statusDiv = document.createElement('div');
|
||||
statusDiv.id = 'print-status-message';
|
||||
statusDiv.style.cssText = `
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: ${type === 'success' ? '#28a745' : type === 'error' ? '#dc3545' : '#17a2b8'};
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
z-index: 10000;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
min-width: 300px;
|
||||
`;
|
||||
statusDiv.textContent = message;
|
||||
|
||||
document.body.appendChild(statusDiv);
|
||||
|
||||
// Auto-remove after 3 seconds for success/info, 5 seconds for errors
|
||||
const timeout = type === 'error' ? 5000 : 3000;
|
||||
setTimeout(() => {
|
||||
statusDiv.style.opacity = '0';
|
||||
statusDiv.style.transition = 'opacity 0.5s';
|
||||
setTimeout(() => statusDiv.remove(), 500);
|
||||
}, timeout);
|
||||
}
|
||||
|
||||
function addPrinterSelection() {
|
||||
// Get available printers and add selection dropdown
|
||||
chrome.runtime.sendMessage({action: 'get_printers'}, (response) => {
|
||||
if (response && response.success && response.printers.length > 0) {
|
||||
console.log('Available printers:', response.printers);
|
||||
// Could add printer selection UI here if needed
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateOrderPrintStatus() {
|
||||
// Find selected row in table and update print status
|
||||
const selectedRow = document.querySelector('.print-module-table tbody tr.selected');
|
||||
if (selectedRow) {
|
||||
const printStatusCell = selectedRow.querySelector('td:nth-last-child(2)'); // Second to last column
|
||||
if (printStatusCell) {
|
||||
printStatusCell.innerHTML = '<span style="color: #28a745; font-weight: bold;">✓ Yes</span>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function checkExtensionStatus() {
|
||||
// Verify extension is working
|
||||
chrome.runtime.sendMessage({action: 'check_extension'}, (response) => {
|
||||
if (response) {
|
||||
console.log('Extension status:', response);
|
||||
} else {
|
||||
console.error('Extension communication failed');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add CSS for extension-specific styling
|
||||
const extensionStyles = document.createElement('style');
|
||||
extensionStyles.textContent = `
|
||||
#print-label-btn {
|
||||
background: linear-gradient(45deg, #28a745, #20c997) !important;
|
||||
border: none !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
#print-label-btn:hover {
|
||||
background: linear-gradient(45deg, #218838, #1ea97c) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(extensionStyles);
|
||||
Reference in New Issue
Block a user