upfdated to ptint plugin
This commit is contained in:
144
py_app/app/templates/download_extension.html
Normal file
144
py_app/app/templates/download_extension.html
Normal file
@@ -0,0 +1,144 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Chrome Extension Download{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="mb-0">🖨️ Quality Recticel Print Helper - Chrome Extension</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info">
|
||||
<strong>Direct Printing Solution:</strong> This Chrome extension enables direct printing from the Print Module to your default printer without browser dialogs.
|
||||
</div>
|
||||
|
||||
<h4>Features:</h4>
|
||||
<ul>
|
||||
<li>✅ Print labels directly to default printer</li>
|
||||
<li>✅ No browser print dialogs</li>
|
||||
<li>✅ Automatic printer detection</li>
|
||||
<li>✅ Print status notifications</li>
|
||||
<li>✅ Enhanced print button with visual feedback</li>
|
||||
</ul>
|
||||
|
||||
<h4>Installation Instructions:</h4>
|
||||
<ol>
|
||||
<li><strong>Download Extension Files:</strong>
|
||||
<div class="mt-2 mb-3">
|
||||
<button class="btn btn-primary" id="download-extension-btn">
|
||||
📥 Download Chrome Extension (.zip)
|
||||
</button>
|
||||
<br><br>
|
||||
<div class="alert alert-info" style="font-size: 12px;">
|
||||
<strong>Alternative:</strong> Download individual files:
|
||||
<br>
|
||||
<a href="{{ url_for('main.extension_files', filename='manifest.json') }}" target="_blank">manifest.json</a> |
|
||||
<a href="{{ url_for('main.extension_files', filename='background.js') }}" target="_blank">background.js</a> |
|
||||
<a href="{{ url_for('main.extension_files', filename='content.js') }}" target="_blank">content.js</a> |
|
||||
<a href="{{ url_for('main.extension_files', filename='popup.html') }}" target="_blank">popup.html</a> |
|
||||
<a href="{{ url_for('main.extension_files', filename='popup.js') }}" target="_blank">popup.js</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li><strong>Extract Files:</strong>
|
||||
<p>Extract the downloaded ZIP file to a folder on your computer (e.g., Desktop/print_extension)</p>
|
||||
</li>
|
||||
|
||||
<li><strong>Open Chrome Extensions:</strong>
|
||||
<p>In Google Chrome, go to: <code>chrome://extensions/</code></p>
|
||||
</li>
|
||||
|
||||
<li><strong>Enable Developer Mode:</strong>
|
||||
<p>Toggle the "Developer mode" switch in the top-right corner</p>
|
||||
</li>
|
||||
|
||||
<li><strong>Load Extension:</strong>
|
||||
<p>Click "Load unpacked" and select the folder where you extracted the files</p>
|
||||
</li>
|
||||
|
||||
<li><strong>Verify Installation:</strong>
|
||||
<p>The extension icon 🖨️ should appear in your Chrome toolbar</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h4>Usage:</h4>
|
||||
<ol>
|
||||
<li>Navigate to the <a href="{{ url_for('main.print_module') }}" target="_blank">Print Module</a></li>
|
||||
<li>Select an order from the table</li>
|
||||
<li>Click the enhanced "🖨️ Print Direct" button</li>
|
||||
<li>The label will print automatically to your default printer</li>
|
||||
</ol>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<strong>System Requirements:</strong>
|
||||
<ul class="mb-0">
|
||||
<li>Google Chrome browser (version 88 or higher)</li>
|
||||
<li>Default printer configured on your system</li>
|
||||
<li>Printer drivers installed and working</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<strong>Troubleshooting:</strong>
|
||||
<ul class="mb-0">
|
||||
<li>Click the extension icon 🖨️ to test printer connection</li>
|
||||
<li>Check Chrome's printer settings: <code>chrome://settings/printing</code></li>
|
||||
<li>Ensure your default printer is set correctly</li>
|
||||
<li>Reload the Print Module page after installing the extension</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<a href="{{ url_for('main.print_module') }}" class="btn btn-success">
|
||||
🖨️ Go to Print Module
|
||||
</a>
|
||||
<button class="btn btn-secondary" onclick="window.close()">
|
||||
✖️ Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Create ZIP file dynamically when download is requested
|
||||
document.getElementById('download-extension-btn').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Show loading state
|
||||
this.innerHTML = '⏳ Preparing Download...';
|
||||
this.disabled = true;
|
||||
|
||||
// Create the extension package
|
||||
fetch('/create_extension_package', {method: 'POST'})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Start download
|
||||
window.location.href = data.download_url;
|
||||
|
||||
// Reset button
|
||||
setTimeout(() => {
|
||||
this.innerHTML = '📥 Download Chrome Extension (.zip)';
|
||||
this.disabled = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
alert('Error creating extension package: ' + data.error);
|
||||
this.innerHTML = '📥 Download Chrome Extension (.zip)';
|
||||
this.disabled = false;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('Error: ' + error.message);
|
||||
this.innerHTML = '📥 Download Chrome Extension (.zip)';
|
||||
this.disabled = false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -239,6 +239,11 @@ table tbody tr.selected td {
|
||||
<label for="print-label-btn" style="font-size: 14px; font-weight: 500; color: var(--app-card-text); margin-bottom: 0;">Print selected order</label>
|
||||
<button id="print-label-btn" class="btn btn-primary" style="font-size: 14px; padding: 6px 24px;">Print</button>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: center; margin-top: 12px;">
|
||||
<a href="{{ url_for('main.download_extension') }}" target="_blank" style="font-size: 12px; color: #007bff; text-decoration: none;">
|
||||
🔗 Install Direct Print Extension
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Preview Card -->
|
||||
@@ -349,6 +354,9 @@ document.getElementById('check-db-btn').addEventListener('click', function() {
|
||||
if (data.length > 0) {
|
||||
updateLabelPreview(data[0]);
|
||||
|
||||
// Add fallback print functionality if extension is not available
|
||||
addFallbackPrintHandler();
|
||||
|
||||
// Auto-select first row
|
||||
setTimeout(() => {
|
||||
const firstRow = document.querySelector('.print-module-table tbody tr');
|
||||
@@ -428,5 +436,81 @@ function updateLabelPreview(order) {
|
||||
// Update barcode with the same prod order data
|
||||
document.getElementById('barcode-text').textContent = prodOrder;
|
||||
}
|
||||
|
||||
// Fallback print handler for when Chrome extension is not available
|
||||
function addFallbackPrintHandler() {
|
||||
// Check if Chrome extension modified the button
|
||||
setTimeout(() => {
|
||||
const printButton = document.getElementById('print-label-btn');
|
||||
|
||||
// If button text hasn't changed, extension is not active
|
||||
if (printButton && !printButton.innerHTML.includes('🖨️ Print Direct')) {
|
||||
console.log('Chrome extension not detected, adding fallback print handler');
|
||||
|
||||
// Add fallback event listener
|
||||
printButton.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const labelPreview = document.getElementById('label-preview');
|
||||
if (!labelPreview) {
|
||||
alert('Please select an order first.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a new window for printing
|
||||
const printWindow = window.open('', '_blank');
|
||||
const printContent = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Quality Recticel Label</title>
|
||||
<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.2);
|
||||
transform-origin: top left;
|
||||
}
|
||||
@media print {
|
||||
body { padding: 0; }
|
||||
.print-container { margin: 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="print-container">
|
||||
<div class="label-wrapper">
|
||||
${labelPreview.outerHTML}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
printWindow.document.write(printContent);
|
||||
printWindow.document.close();
|
||||
|
||||
// Wait for content to load, then print
|
||||
printWindow.onload = function() {
|
||||
printWindow.focus();
|
||||
printWindow.print();
|
||||
printWindow.close();
|
||||
};
|
||||
});
|
||||
|
||||
// Update button text to indicate fallback mode
|
||||
printButton.innerHTML = '🖨️ Print (Browser)';
|
||||
printButton.title = 'Print using browser dialog - Install Chrome Extension for direct printing';
|
||||
}
|
||||
}, 2000); // Wait 2 seconds for extension to load
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user