Fix JavaScript syntax error by building HTML incrementally instead of nested template literals

This commit is contained in:
nmemmert committed 2025-11-07 10:33:05 -05:00
1 parent ce34482373
commit 54ed7aaffd
1 file changed
+54 -34
+54 -34
View File
@@ -1305,14 +1305,24 @@ def jobs():
try {
const jobDiv = document.createElement('div');
jobDiv.className = 'job';
jobDiv.innerHTML = `
// Build the HTML step by step to avoid syntax errors
let jobHTML = `
<h3>Job ${jobId.substring(0, 8)}</h3>
<p><strong>Status:</strong> <span class="status ${job.status}">${job.status.charAt(0).toUpperCase() + job.status.slice(1)}</span></p>
${job.status === 'processing' && job.progress ? `<p><strong>Progress:</strong> <span class="progress-text">${job.progress}</span></p>` : ''}
<p><strong>Files:</strong> ${job.files ? job.files.length : 0}</p>
${job.zip_contents ? `
<p><strong>ZIP Contents:</strong></p>
${Object.entries(job.zip_contents).map(([zipName, pdfFiles]) => `
<p><strong>Status:</strong> <span class="status ${job.status}">${job.status.charAt(0).toUpperCase() + job.status.slice(1)}</span></p>`;
// Add progress if processing
if (job.status === 'processing' && job.progress) {
jobHTML += `<p><strong>Progress:</strong> <span class="progress-text">${job.progress}</span></p>`;
}
jobHTML += `<p><strong>Files:</strong> ${job.files ? job.files.length : 0}</p>`;
// Add ZIP contents if available
if (job.zip_contents) {
jobHTML += `<p><strong>ZIP Contents:</strong></p>`;
Object.entries(job.zip_contents).forEach(([zipName, pdfFiles]) => {
jobHTML += `
<div class="zip-content">
<div class="zip-toggle" onclick="toggleZipDetails(this)">
<strong>${zipName}</strong> (${pdfFiles.length} files) ▶
@@ -1322,33 +1332,43 @@ def jobs():
${pdfFiles.map(pdfFile => `<li>${pdfFile}</li>`).join('')}
</ul>
</div>
</div>
`).join('')}
` : ''}
${job.status === 'completed' ? (job.zip_name ? `
<p><a href="/download/${job.zip_name}" class="download-btn">Download ZIP</a>
<form method="post" action="/delete/${jobId}" style="display: inline;">
<button type="submit" class="delete-btn" onclick="return confirm('Are you sure you want to delete this job?')">Delete Job</button>
</form></p>
` : `
<p><em>No files were successfully processed to create a ZIP archive.</em>
<form method="post" action="/delete/${jobId}" style="display: inline;">
<button type="submit" class="delete-btn" onclick="return confirm('Are you sure you want to delete this job?')">Delete Job</button>
</form></p>
` : ''}
${job.skipped ? `
<div class="skipped-section">
<div class="skipped-toggle" onclick="toggleSkippedDetails(this)">
⚠️ Skipped Files (${job.skipped.length}) ▶
</div>
<div class="skipped-details">
<ul>
${job.skipped.map(skipInfo => `<li><strong>${skipInfo[0]}</strong>: ${skipInfo[1]}</li>`).join('')}
</ul>
</div>
</div>
` : ''}
`;
</div>`;
});
}
// Add download/delete buttons if completed
if (job.status === 'completed') {
if (job.zip_name) {
jobHTML += `
<p><a href="/download/${job.zip_name}" class="download-btn">Download ZIP</a>
<form method="post" action="/delete/${jobId}" style="display: inline;">
<button type="submit" class="delete-btn" onclick="return confirm('Are you sure you want to delete this job?')">Delete Job</button>
</form></p>`;
} else {
jobHTML += `
<p><em>No files were successfully processed to create a ZIP archive.</em>
<form method="post" action="/delete/${jobId}" style="display: inline;">
<button type="submit" class="delete-btn" onclick="return confirm('Are you sure you want to delete this job?')">Delete Job</button>
</form></p>`;
}
// Add skipped files section if any
if (job.skipped && job.skipped.length > 0) {
jobHTML += `
<div class="skipped-section">
<div class="skipped-toggle" onclick="toggleSkippedDetails(this)">
⚠️ Skipped Files (${job.skipped.length}) ▶
</div>
<div class="skipped-details">
<ul>
${job.skipped.map(skipInfo => `<li><strong>${skipInfo[0]}</strong>: ${skipInfo[1]}</li>`).join('')}
</ul>
</div>
</div>`;
}
}
jobDiv.innerHTML = jobHTML;
console.log(`[updateJobs] HTML created for job ${jobId}`);
// Insert job before the script tag