183 lines
9.0 KiB
JavaScript
183 lines
9.0 KiB
JavaScript
// Updated handlePDFDownloadReady method with popup functionality
|
|
async handlePDFDownloadReady(pdfResult) {
|
|
try {
|
|
console.log("Handling PDF download ready:", pdfResult);
|
|
|
|
// Hide loading state
|
|
this.isLoading = false;
|
|
this.hideProgress();
|
|
|
|
// Show the beautiful popup modal
|
|
this.showDownloadPopup(pdfResult);
|
|
|
|
// Also show a success message
|
|
this.showSuccess('✅ PDF generated successfully! Click the popup to download.');
|
|
|
|
} catch (error) {
|
|
console.error('Error handling PDF download ready:', error);
|
|
this.showError('Error handling PDF download: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// New method to show download popup
|
|
showDownloadPopup(pdfResult) {
|
|
// Create modal HTML
|
|
const modalHTML = `
|
|
<div class="pdf-download-modal" style="
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
backdrop-filter: blur(5px);
|
|
">
|
|
<div class="modal-content" style="
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
max-width: 600px;
|
|
width: 90%;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
color: white;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
">
|
|
<button class="close-btn" onclick="this.closest('.pdf-download-modal').remove()" style="
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 20px;
|
|
background: none;
|
|
border: none;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
color: white;
|
|
transition: color 0.3s ease;
|
|
" onmouseover="this.style.color='#ff6b6b'" onmouseout="this.style.color='white'">×</button>
|
|
|
|
<div class="modal-header" style="text-align: center; margin-bottom: 25px;">
|
|
<h2 style="color: white; margin-bottom: 10px; font-size: 2rem;">🎉 PDF Ready for Download!</h2>
|
|
<p style="color: rgba(255, 255, 255, 0.9);">Your PDF has been generated successfully</p>
|
|
</div>
|
|
|
|
<div class="download-info" style="
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
">
|
|
<h3 style="color: #4CAF50; margin-bottom: 15px;">📄 Download Information</h3>
|
|
|
|
<div class="file-details" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin: 15px 0;">
|
|
<div class="file-detail" style="text-align: center;">
|
|
<div class="label" style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 5px;">File Name</div>
|
|
<div class="value" style="font-weight: bold; color: white;">${pdfResult.filename || 'Unknown'}</div>
|
|
</div>
|
|
<div class="file-detail" style="text-align: center;">
|
|
<div class="label" style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 5px;">File Size</div>
|
|
<div class="value" style="font-weight: bold; color: #4CAF50;">${pdfResult.file_size_mb ? pdfResult.file_size_mb + ' MB' : 'Unknown'}</div>
|
|
</div>
|
|
<div class="file-detail" style="text-align: center;">
|
|
<div class="label" style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 5px;">Generated</div>
|
|
<div class="value" style="font-weight: bold; color: white;">${this.formatDate(pdfResult.generated_at)}</div>
|
|
</div>
|
|
<div class="file-detail" style="text-align: center;">
|
|
<div class="label" style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 5px;">Expires</div>
|
|
<div class="value" style="font-weight: bold; color: #ffc107;">${this.formatDate(pdfResult.expires_at)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin: 20px 0;">
|
|
<label style="display: block; margin-bottom: 8px; font-weight: bold; color: white;">🔗 Download Link:</label>
|
|
<div class="download-link" style="
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #333;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
word-break: break-all;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
border: 2px solid #4CAF50;
|
|
margin-bottom: 10px;
|
|
">${pdfResult.download_url}</div>
|
|
<button class="copy-btn" onclick="navigator.clipboard.writeText('${pdfResult.download_url}').then(() => { this.textContent = '✅ Copied!'; this.style.background = '#4CAF50'; setTimeout(() => { this.textContent = '📋 Copy Link'; this.style.background = '#ffc107'; }, 2000); })" style="
|
|
background: #ffc107;
|
|
color: #333;
|
|
border: none;
|
|
padding: 8px 15px;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
margin-right: 10px;
|
|
transition: all 0.3s ease;
|
|
">📋 Copy Link</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group" style="text-align: center; margin-top: 25px;">
|
|
<a href="${pdfResult.download_url}" target="_blank" class="download-btn" style="
|
|
background: linear-gradient(45deg, #4CAF50, #45a049);
|
|
color: white;
|
|
padding: 12px 25px;
|
|
border-radius: 25px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
margin-right: 15px;
|
|
display: inline-block;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
|
|
" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(76, 175, 80, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(76, 175, 80, 0.3)'">📥 Download PDF</a>
|
|
<button onclick="window.open('${pdfResult.download_url}', '_blank')" style="
|
|
background: linear-gradient(45deg, #2196F3, #1976D2);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 25px;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
|
|
" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(33, 150, 243, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(33, 150, 243, 0.3)'">🔗 Open in New Tab</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Add modal to page
|
|
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
|
|
|
// Close modal when clicking outside
|
|
const modal = document.querySelector('.pdf-download-modal');
|
|
if (modal) {
|
|
modal.addEventListener('click', function(event) {
|
|
if (event.target === modal) {
|
|
modal.remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Close modal with Escape key
|
|
const escapeHandler = function(event) {
|
|
if (event.key === 'Escape') {
|
|
const modal = document.querySelector('.pdf-download-modal');
|
|
if (modal) {
|
|
modal.remove();
|
|
document.removeEventListener('keydown', escapeHandler);
|
|
}
|
|
}
|
|
};
|
|
document.addEventListener('keydown', escapeHandler);
|
|
}
|
|
|
|
// Helper method to format dates
|
|
formatDate(dateString) {
|
|
if (!dateString) return 'Unknown';
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString();
|
|
}
|