235 lines
9.0 KiB
HTML
235 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>PDF Download Feature Test</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
h1 { color: #333; margin-bottom: 10px; }
|
|
.test-result {
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
border-left: 4px solid #4CAF50;
|
|
background: #f1f8f4;
|
|
}
|
|
.test-result.pass { border-left-color: #4CAF50; }
|
|
.test-result.fail { border-left-color: #f44336; background: #fdeaea; }
|
|
button {
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin: 10px 5px 10px 0;
|
|
}
|
|
button:hover { background: #0056b3; }
|
|
.status {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background: #e3f2fd;
|
|
border-radius: 4px;
|
|
}
|
|
pre {
|
|
background: #f5f5f5;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>📥 PDF Download Feature - Test Suite</h1>
|
|
|
|
<div class="test-result pass">
|
|
<strong>✅ Test 1: Libraries Loaded</strong><br>
|
|
html2pdf.js: <span id="html2pdf-check">Checking...</span><br>
|
|
marked.js: <span id="marked-check">Checking...</span>
|
|
</div>
|
|
|
|
<div class="test-result pass">
|
|
<strong>✅ Test 2: Markdown Rendering</strong><br>
|
|
<button onclick="testMarkdownRendering()">Test Markdown → HTML Conversion</button>
|
|
<div id="render-result"></div>
|
|
</div>
|
|
|
|
<div class="test-result pass">
|
|
<strong>✅ Test 3: PDF Generation</strong><br>
|
|
<button onclick="testPDFGeneration()">Generate Test PDF</button>
|
|
<div id="pdf-result"></div>
|
|
</div>
|
|
|
|
<div class="test-result pass">
|
|
<strong>✅ Test 4: Full Workflow</strong><br>
|
|
<button onclick="testFullWorkflow()">Test Full Download Workflow</button>
|
|
<div id="workflow-result"></div>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<strong>Test Status:</strong><br>
|
|
<div id="status">Ready to run tests...</div>
|
|
</div>
|
|
|
|
<h3>Test Markdown Content:</h3>
|
|
<pre id="markdown-content"># Fișă Întâlnire Grup Sprijin
|
|
|
|
**Data:** Joi, 5 februarie 2026, ora 18:00
|
|
**Tema:** Ancorare emoții pozitive & Oglinda celorlalți
|
|
|
|
## 1. Check-in (15-20 min)
|
|
|
|
**Întrebare de deschidere:**
|
|
- Ce s-a întâmplat în ultimele două săptămâni?
|
|
- Ce emoții ai avut?
|
|
|
|
## 2. Exercițiu principal: Ancorarea emoțiilor
|
|
|
|
**Scop:** Să învățăm să accesăm o emoție pozitivă.
|
|
|
|
### Pași pentru exercițiu:
|
|
|
|
1. **Alege emoția** (2 min)
|
|
- Ce emoție ți-ai dori să poți accesa mai ușor?
|
|
|
|
2. **Găsește momentul** (5 min)
|
|
- Gândește-te la un moment din viața ta
|
|
</pre>
|
|
</div>
|
|
|
|
<script>
|
|
// Test 1: Check if libraries loaded
|
|
window.addEventListener('load', function() {
|
|
// Check html2pdf
|
|
const html2pdfLoaded = typeof html2pdf !== 'undefined';
|
|
document.getElementById('html2pdf-check').innerHTML =
|
|
html2pdfLoaded ? '<span style="color:green">✓ Loaded</span>' : '<span style="color:red">✗ Not loaded</span>';
|
|
|
|
// Check marked
|
|
const markedLoaded = typeof marked !== 'undefined';
|
|
document.getElementById('marked-check').innerHTML =
|
|
markedLoaded ? '<span style="color:green">✓ Loaded</span>' : '<span style="color:red">✗ Not loaded</span>';
|
|
|
|
updateStatus(`Libraries loaded: html2pdf=${html2pdfLoaded}, marked=${markedLoaded}`);
|
|
});
|
|
|
|
function updateStatus(msg) {
|
|
const statusDiv = document.getElementById('status');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
statusDiv.innerHTML += `<br>[${timestamp}] ${msg}`;
|
|
}
|
|
|
|
function testMarkdownRendering() {
|
|
updateStatus('Test 2: Running markdown rendering test...');
|
|
const md = document.getElementById('markdown-content').textContent;
|
|
const html = marked.parse(md);
|
|
const resultDiv = document.getElementById('render-result');
|
|
resultDiv.innerHTML = `<h4>Rendered HTML Preview:</h4><div style="max-height:300px;overflow-y:auto;border:1px solid #ddd;padding:10px;border-radius:4px;">${html}</div>`;
|
|
updateStatus('✓ Markdown rendered successfully (' + html.length + ' bytes)');
|
|
}
|
|
|
|
function testPDFGeneration() {
|
|
updateStatus('Test 3: Starting PDF generation...');
|
|
const md = document.getElementById('markdown-content').textContent;
|
|
const html = marked.parse(md);
|
|
|
|
const element = document.createElement('div');
|
|
element.innerHTML = html;
|
|
element.style.padding = '20px';
|
|
element.style.color = '#333';
|
|
|
|
const options = {
|
|
margin: 10,
|
|
filename: 'test-document.pdf',
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2 },
|
|
jsPDF: { orientation: 'portrait', unit: 'mm', format: 'a4' }
|
|
};
|
|
|
|
html2pdf()
|
|
.set(options)
|
|
.from(element)
|
|
.save()
|
|
.then(() => {
|
|
const resultDiv = document.getElementById('pdf-result');
|
|
resultDiv.innerHTML = '<span style="color:green">✓ PDF generated and downloaded successfully!</span>';
|
|
updateStatus('✓ PDF generated: test-document.pdf');
|
|
})
|
|
.catch(err => {
|
|
const resultDiv = document.getElementById('pdf-result');
|
|
resultDiv.innerHTML = '<span style="color:red">✗ PDF generation failed: ' + err.message + '</span>';
|
|
updateStatus('✗ PDF generation error: ' + err.message);
|
|
});
|
|
}
|
|
|
|
function testFullWorkflow() {
|
|
updateStatus('Test 4: Running full workflow test...');
|
|
|
|
const filename = 'fisa-2026-02-05-ancorare-oglinda.md';
|
|
const md = document.getElementById('markdown-content').textContent;
|
|
|
|
// Simulate the downloadPDF function from files.html
|
|
try {
|
|
// Step 1: Render markdown
|
|
const html = marked.parse(md);
|
|
|
|
// Step 2: Create element
|
|
const previewElement = document.createElement('div');
|
|
previewElement.innerHTML = html;
|
|
const clonedElement = previewElement.cloneNode(true);
|
|
|
|
// Step 3: Style for PDF
|
|
clonedElement.style.color = '#333';
|
|
clonedElement.style.backgroundColor = '#fff';
|
|
clonedElement.style.padding = '20px';
|
|
|
|
// Step 4: Configure options
|
|
const pdfFilename = filename.replace('.md', '.pdf');
|
|
const options = {
|
|
margin: 10,
|
|
filename: pdfFilename,
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2 },
|
|
jsPDF: { orientation: 'portrait', unit: 'mm', format: 'a4' }
|
|
};
|
|
|
|
// Step 5: Generate and download
|
|
html2pdf()
|
|
.set(options)
|
|
.from(clonedElement)
|
|
.save()
|
|
.then(() => {
|
|
const resultDiv = document.getElementById('workflow-result');
|
|
resultDiv.innerHTML = `<span style="color:green">✓ Full workflow successful!<br>Generated: ${pdfFilename}</span>`;
|
|
updateStatus('✓ Full workflow complete: ' + pdfFilename + ' downloaded');
|
|
})
|
|
.catch(err => {
|
|
const resultDiv = document.getElementById('workflow-result');
|
|
resultDiv.innerHTML = `<span style="color:red">✗ Workflow failed: ${err.message}</span>`;
|
|
updateStatus('✗ Workflow error: ' + err.message);
|
|
});
|
|
|
|
updateStatus('Workflow test initiated...');
|
|
} catch (e) {
|
|
updateStatus('✗ Workflow error: ' + e.message);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|