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>
This commit is contained in:
root
parent
3f2be5b17d
commit
a7b8d470e4
@ -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
|
||||
printers.filter(printer => printer.status === 0).forEach(printer => {
|
||||
// Drucker anzeigen (alle, da man jetzt auch für belegte Drucker Jobs erstellen kann)
|
||||
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user