Verbesserte Frontend-Unterstützung für Wartejobs und verbleibende Zeit

- Anzeige der verbleibenden Zeit für Druckaufträge im Frontend
- Neue UI-Komponenten für Wartejobs und deren Freischaltung
- Freischaltungs-Modal für wartende Jobs implementiert
- Drucker-Status wird beim Erstellen eines Auftrags angezeigt
- Checkbox für Warteschlangen-Option beim Erstellen eines Auftrags

🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>

backend/templates/jobs.html

@@ -30,6 +30,12 @@
                             <label for="jobComments" class="form-label">Kommentare</label>
                             <textarea class="form-control" id="jobComments" name="comments" rows="3"></textarea>
                         </div>
+                        <div class="mb-3 form-check">
+                            <input type="checkbox" class="form-check-input" id="allowQueuedJobs" name="allowQueuedJobs" value="true">
+                            <label class="form-check-label" for="allowQueuedJobs">
+                                Auftrag in Warteschlange erlauben (wenn Drucker belegt ist)
+                            </label>
+                        </div>
                         <button type="submit" class="btn btn-success">Auftrag erstellen</button>
                     </form>
                     <div class="mt-3">
@@ -190,6 +196,33 @@
         </div>
     </div>
 </div>
+
+<!-- Job freischalten Modal -->
+<div class="modal fade" id="approveJobModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Druckauftrag freischalten</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Möchten Sie diesen Druckauftrag jetzt freischalten und starten?</p>
+                <p><strong>Hinweis:</strong> Der Drucker muss verfügbar sein, damit der Auftrag gestartet werden kann.</p>
+                <form id="approveJobForm" class="api-form" data-method="POST" data-response="approveJobResponse" data-reload="true">
+                    <input type="hidden" id="approveJobId" name="jobId">
+                </form>
+                <div class="mt-3">
+                    <h6>Antwort:</h6>
+                    <pre class="api-response" id="approveJobResponse"></pre>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button type="submit" form="approveJobForm" class="btn btn-success">Freischalten</button>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block scripts %}
@@ -251,6 +284,15 @@
             document.getElementById('editCommentsForm').setAttribute('data-url', `/api/jobs/${jobId}/comments`);
             document.getElementById('editJobComments').value = comments || '';
         });
+        
+        // Approve-Modal vorbereiten
+        document.getElementById('approveJobModal').addEventListener('show.bs.modal', function(event) {
+            const button = event.relatedTarget;
+            const jobId = button.getAttribute('data-job-id');
+            
+            document.getElementById('approveJobId').value = jobId;
+            document.getElementById('approveJobForm').setAttribute('data-url', `/api/jobs/${jobId}/approve`);
+        });
     });
 
     async function loadPrinters() {
@@ -261,13 +303,45 @@
             const selectElement = document.getElementById('jobPrinterId');
             selectElement.innerHTML = '<option value="">Drucker auswählen...</option>';
             
-            // Nur verfügbare Drucker anzeigen
+            // Drucker anzeigen (alle, da man jetzt auch für belegte Drucker Jobs erstellen kann)
-            printers.filter(printer => printer.status === 0).forEach(printer => {
+            printers.forEach(printer => {
                 const option = document.createElement('option');
                 option.value = printer.id;
-                option.textContent = `${printer.name} - ${printer.description}`;
+                
+                // Status-Information zum Drucker hinzufügen
+                const statusText = printer.status === 0 ? '(Verfügbar)' : '(Belegt)';
+                option.textContent = `${printer.name} - ${printer.description} ${statusText}`;
+                
+                // Belegte Drucker visuell unterscheiden
+                if (printer.status !== 0) {
+                    option.classList.add('text-muted');
+                }
+                
                 selectElement.appendChild(option);
             });
+            
+            // Hinweis auf die Checkbox für Warteschlange anzeigen oder verstecken
+            const allowQueuedJobsCheckbox = document.getElementById('allowQueuedJobs');
+            const queueCheckboxContainer = allowQueuedJobsCheckbox.closest('.form-check');
+            
+            // Prüfen, ob es belegte Drucker gibt
+            const hasBusyPrinters = printers.some(printer => printer.status !== 0);
+            queueCheckboxContainer.style.display = hasBusyPrinters ? 'block' : 'none';
+            
+            // Event-Listener für die Druckerauswahl hinzufügen
+            selectElement.addEventListener('change', function() {
+                const selectedPrinterId = this.value;
+                const selectedPrinter = printers.find(p => p.id === selectedPrinterId);
+                
+                if (selectedPrinter && selectedPrinter.status !== 0) {
+                    // Wenn ein belegter Drucker ausgewählt wird, Checkbox für Warteschlange anzeigen
+                    queueCheckboxContainer.style.display = 'block';
+                    allowQueuedJobsCheckbox.checked = true;
+                } else if (selectedPrinter && selectedPrinter.status === 0) {
+                    // Wenn ein verfügbarer Drucker ausgewählt wird, Checkbox für Warteschlange verstecken
+                    allowQueuedJobsCheckbox.checked = false;
+                }
+            });
         } catch (e) {
             console.error('Fehler beim Laden der Drucker:', e);
         }
@@ -283,7 +357,8 @@
             const startDate = new Date(job.startAt);
             const formattedStart = startDate.toLocaleString();
             
-            const isActive = !job.aborted && job.remainingMinutes > 0;
+            const isActive = !job.aborted && job.remainingMinutes > 0 && !job.waitingApproval;
+            const isWaiting = !job.aborted && job.waitingApproval;
             
             let statusText = '';
             let statusClass = '';
@@ -291,6 +366,9 @@
             if (job.aborted) {
                 statusText = 'Abgebrochen';
                 statusClass = 'text-danger';
+            } else if (job.waitingApproval) {
+                statusText = 'Wartet auf Freischaltung';
+                statusClass = 'text-info';
             } else if (job.remainingMinutes <= 0) {
                 statusText = 'Abgeschlossen';
                 statusClass = 'text-success';
@@ -299,13 +377,16 @@
                 statusClass = 'text-warning';
             }
             
+            // Zeige die verbleibende Zeit an
+            const remainingTime = job.waitingApproval ? '-' : job.remainingMinutes;
+            
             row.innerHTML = `
                 <td>${job.id}</td>
                 <td>${job.printerId}</td>
                 <td>${job.userId}</td>
                 <td>${formattedStart}</td>
                 <td>${job.durationInMinutes}</td>
-                <td>${job.remainingMinutes}</td>
+                <td>${remainingTime}</td>
                 <td><span class="${statusClass}">${statusText}</span></td>
                 <td>${job.comments || '-'}</td>
                 <td>
@@ -329,6 +410,22 @@
                             Verlängern
                         </button>
                     ` : ''}
+                    
+                    ${isWaiting ? `
+                        <button type="button" class="btn btn-sm btn-success mb-1" 
+                            data-bs-toggle="modal" 
+                            data-bs-target="#approveJobModal"
+                            data-job-id="${job.id}">
+                            Freischalten
+                        </button>
+                        <button type="button" class="btn btn-sm btn-danger mb-1" 
+                            data-bs-toggle="modal" 
+                            data-bs-target="#abortJobModal"
+                            data-job-id="${job.id}">
+                            Abbrechen
+                        </button>
+                    ` : ''}
+                    
                     <button type="button" class="btn btn-sm btn-secondary mb-1" 
                         data-bs-toggle="modal" 
                         data-bs-target="#editCommentsModal"