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
+39 -19
+39 -19
View File
@@ -1305,14 +1305,24 @@ def jobs():
try { try {
const jobDiv = document.createElement('div'); const jobDiv = document.createElement('div');
jobDiv.className = 'job'; jobDiv.className = 'job';
jobDiv.innerHTML = `
// Build the HTML step by step to avoid syntax errors
let jobHTML = `
<h3>Job ${jobId.substring(0, 8)}</h3> <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> <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> // Add progress if processing
${job.zip_contents ? ` if (job.status === 'processing' && job.progress) {
<p><strong>ZIP Contents:</strong></p> jobHTML += `<p><strong>Progress:</strong> <span class="progress-text">${job.progress}</span></p>`;
${Object.entries(job.zip_contents).map(([zipName, pdfFiles]) => ` }
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-content">
<div class="zip-toggle" onclick="toggleZipDetails(this)"> <div class="zip-toggle" onclick="toggleZipDetails(this)">
<strong>${zipName}</strong> (${pdfFiles.length} files) ▶ <strong>${zipName}</strong> (${pdfFiles.length} files) ▶
@@ -1322,21 +1332,29 @@ def jobs():
${pdfFiles.map(pdfFile => `<li>${pdfFile}</li>`).join('')} ${pdfFiles.map(pdfFile => `<li>${pdfFile}</li>`).join('')}
</ul> </ul>
</div> </div>
</div> </div>`;
`).join('')} });
` : ''} }
${job.status === 'completed' ? (job.zip_name ? `
// 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> <p><a href="/download/${job.zip_name}" class="download-btn">Download ZIP</a>
<form method="post" action="/delete/${jobId}" style="display: inline;"> <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> <button type="submit" class="delete-btn" onclick="return confirm('Are you sure you want to delete this job?')">Delete Job</button>
</form></p> </form></p>`;
` : ` } else {
jobHTML += `
<p><em>No files were successfully processed to create a ZIP archive.</em> <p><em>No files were successfully processed to create a ZIP archive.</em>
<form method="post" action="/delete/${jobId}" style="display: inline;"> <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> <button type="submit" class="delete-btn" onclick="return confirm('Are you sure you want to delete this job?')">Delete Job</button>
</form></p> </form></p>`;
` : ''} }
${job.skipped ? `
// Add skipped files section if any
if (job.skipped && job.skipped.length > 0) {
jobHTML += `
<div class="skipped-section"> <div class="skipped-section">
<div class="skipped-toggle" onclick="toggleSkippedDetails(this)"> <div class="skipped-toggle" onclick="toggleSkippedDetails(this)">
⚠️ Skipped Files (${job.skipped.length}) ▶ ⚠️ Skipped Files (${job.skipped.length}) ▶
@@ -1346,9 +1364,11 @@ def jobs():
${job.skipped.map(skipInfo => `<li><strong>${skipInfo[0]}</strong>: ${skipInfo[1]}</li>`).join('')} ${job.skipped.map(skipInfo => `<li><strong>${skipInfo[0]}</strong>: ${skipInfo[1]}</li>`).join('')}
</ul> </ul>
</div> </div>
</div> </div>`;
` : ''} }
`; }
jobDiv.innerHTML = jobHTML;
console.log(`[updateJobs] HTML created for job ${jobId}`); console.log(`[updateJobs] HTML created for job ${jobId}`);
// Insert job before the script tag // Insert job before the script tag