This commit is contained in:
Thomas Peterson 2025-12-17 19:53:54 +01:00
parent 1ff03906c2
commit 6d6241576d

View File

@ -126,7 +126,7 @@
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">2-Seitig</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">2-Seitig</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">OCR Bereich</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">OCR Bereich</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Nummer (OCR)</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Nummer (OCR)</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">In Rot</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Farbe</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">OCR</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">OCR</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Löschen</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Löschen</th>
</tr> </tr>
@ -249,7 +249,7 @@
uuid: fileData.uuid, uuid: fileData.uuid,
fileName: fileData.fileName, fileName: fileData.fileName,
ocrNumber: fileData.ocrNumber || '', ocrNumber: fileData.ocrNumber || '',
inRed: fileData.inRed || false, color: fileData.color || 'black',
numPages: fileData.numPages || 0, numPages: fileData.numPages || 0,
isDuplex: fileData.isDuplex || false isDuplex: fileData.isDuplex || false
}; };
@ -275,7 +275,7 @@
numPages: fileData.numPages, numPages: fileData.numPages,
isDuplex: fileData.isDuplex, isDuplex: fileData.isDuplex,
ocrNumber: fileData.ocrNumber, ocrNumber: fileData.ocrNumber,
inRed: fileData.inRed, color: fileData.color,
processed: fileData.ocrNumber ? true : false, processed: fileData.ocrNumber ? true : false,
uploadedUuid: fileData.uuid, uploadedUuid: fileData.uuid,
isAlreadyUploaded: true // Mark as already uploaded isAlreadyUploaded: true // Mark as already uploaded
@ -307,12 +307,12 @@
if (currentStep === 2 && pdfData.length > 0) { if (currentStep === 2 && pdfData.length > 0) {
pdfData.forEach((pdf, index) => { pdfData.forEach((pdf, index) => {
const input = document.getElementById(`ocr-input-${index}`); const input = document.getElementById(`ocr-input-${index}`);
const checkbox = document.getElementById(`red-checkbox-${index}`); const colorSelect = document.getElementById(`color-select-${index}`);
if (input) { if (input) {
pdf.ocrNumber = input.value; pdf.ocrNumber = input.value;
} }
if (checkbox) { if (colorSelect) {
pdf.inRed = checkbox.checked; pdf.color = colorSelect.value;
} }
}); });
} }
@ -422,7 +422,7 @@
numPages: numPages, numPages: numPages,
isDuplex: numPages % 2 === 0 && numPages > 1, isDuplex: numPages % 2 === 0 && numPages > 1,
ocrNumber: '', ocrNumber: '',
inRed: false, color: 'black',
processed: false, processed: false,
isAlreadyUploaded: false // Mark as NOT uploaded yet isAlreadyUploaded: false // Mark as NOT uploaded yet
}); });
@ -556,7 +556,7 @@
numPages: numPages, numPages: numPages,
isDuplex: numPages % 2 === 0 && numPages > 1, isDuplex: numPages % 2 === 0 && numPages > 1,
ocrNumber: '', ocrNumber: '',
inRed: false, color: 'black',
processed: false, processed: false,
isAlreadyUploaded: false // New files need to be uploaded isAlreadyUploaded: false // New files need to be uploaded
}); });
@ -682,10 +682,16 @@
onchange="updateOCRNumber(${index}, this.value)" /> onchange="updateOCRNumber(${index}, this.value)" />
</td> </td>
<td class="px-4 py-3 whitespace-nowrap text-center" onclick="event.stopPropagation()"> <td class="px-4 py-3 whitespace-nowrap text-center" onclick="event.stopPropagation()">
<input type="checkbox" class="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500" <select class="px-2 py-1 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
id="red-checkbox-${index}" id="color-select-${index}"
${pdf.inRed ? 'checked' : ''} onchange="updateColor(${index}, this.value)"
onchange="updateInRed(${index}, this.checked)" /> style="color: ${pdf.color || 'black'};">
<option value="black" ${(!pdf.color || pdf.color === 'black') ? 'selected' : ''} style="color: black;">Schwarz</option>
<option value="red" ${pdf.color === 'red' ? 'selected' : ''} style="color: red;">Rot</option>
<option value="green" ${pdf.color === 'green' ? 'selected' : ''} style="color: green;">Grün</option>
<option value="blue" ${pdf.color === 'blue' ? 'selected' : ''} style="color: blue;">Blau</option>
<option value="yellow" ${pdf.color === 'yellow' ? 'selected' : ''} style="color: #997700;">Gelb</option>
</select>
</td> </td>
<td class="px-4 py-3 whitespace-nowrap text-center" onclick="event.stopPropagation()"> <td class="px-4 py-3 whitespace-nowrap text-center" onclick="event.stopPropagation()">
<button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600" onclick="processOCR(${index})"> <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600" onclick="processOCR(${index})">
@ -712,10 +718,15 @@
} }
} }
// Update "In Rot" checkbox // Update color selection
function updateInRed(index, checked) { function updateColor(index, color) {
pdfData[index].inRed = checked; pdfData[index].color = color;
console.log(`PDF ${index}: In Rot = ${checked}`); // Update the select element color
const select = document.getElementById(`color-select-${index}`);
if (select) {
select.style.color = color;
}
console.log(`PDF ${index}: Color = ${color}`);
} }
// Remove PDF from Step 2 // Remove PDF from Step 2
@ -1061,15 +1072,15 @@
} }
document.getElementById('finishBtn').addEventListener('click', async () => { document.getElementById('finishBtn').addEventListener('click', async () => {
// Collect all OCR numbers and checkbox states from input fields // Collect all OCR numbers and color selections from input fields
pdfData.forEach((pdf, index) => { pdfData.forEach((pdf, index) => {
const input = document.getElementById(`ocr-input-${index}`); const input = document.getElementById(`ocr-input-${index}`);
const checkbox = document.getElementById(`red-checkbox-${index}`); const colorSelect = document.getElementById(`color-select-${index}`);
if (input) { if (input) {
pdf.ocrNumber = input.value; pdf.ocrNumber = input.value;
} }
if (checkbox) { if (colorSelect) {
pdf.inRed = checkbox.checked; pdf.color = colorSelect.value;
} }
}); });
@ -1106,7 +1117,7 @@
uuid: uploadUuid, uuid: uploadUuid,
fileName: pdfData[i].fileName, fileName: pdfData[i].fileName,
ocrNumber: pdfData[i].ocrNumber, ocrNumber: pdfData[i].ocrNumber,
inRed: pdfData[i].inRed, color: pdfData[i].color,
numPages: pdfData[i].numPages, numPages: pdfData[i].numPages,
isDuplex: pdfData[i].isDuplex isDuplex: pdfData[i].isDuplex
}); });
@ -1208,22 +1219,29 @@
<th class="px-4 py-3 text-center text-xs font-medium uppercase">Seiten</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase">Seiten</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase">2-Seitig</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase">2-Seitig</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase">OCR Nummer</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase">OCR Nummer</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase">In Rot</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase">Farbe</th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white divide-y divide-gray-200"> <tbody class="bg-white divide-y divide-gray-200">
`; `;
pdfData.forEach((pdf, index) => { pdfData.forEach((pdf, index) => {
const numberColor = pdf.inRed ? 'text-red-600' : 'text-blue-600'; const colorNames = {
'black': 'Schwarz',
'red': 'Rot',
'green': 'Grün',
'blue': 'Blau',
'yellow': 'Gelb'
};
const colorName = colorNames[pdf.color] || 'Schwarz';
tableHtml += ` tableHtml += `
<tr class="hover:bg-gray-50"> <tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm">${index + 1}</td> <td class="px-4 py-3 text-sm">${index + 1}</td>
<td class="px-4 py-3 text-sm">${pdf.fileName}</td> <td class="px-4 py-3 text-sm">${pdf.fileName}</td>
<td class="px-4 py-3 text-sm text-center">${pdf.numPages}</td> <td class="px-4 py-3 text-sm text-center">${pdf.numPages}</td>
<td class="px-4 py-3 text-sm text-center">${pdf.isDuplex ? 'Ja' : 'Nein'}</td> <td class="px-4 py-3 text-sm text-center">${pdf.isDuplex ? 'Ja' : 'Nein'}</td>
<td class="px-4 py-3 text-sm text-center"><strong class="${numberColor}">${pdf.ocrNumber || '-'}</strong></td> <td class="px-4 py-3 text-sm text-center"><strong style="color: ${pdf.color || 'black'};">${pdf.ocrNumber || '-'}</strong></td>
<td class="px-4 py-3 text-sm text-center">${pdf.inRed ? '✓' : '-'}</td> <td class="px-4 py-3 text-sm text-center"><span style="color: ${pdf.color || 'black'};">${colorName}</span></td>
</tr> </tr>
`; `;
}); });