Füge Backend-internes Frontend für API- und Druckertests hinzu
Implementiere eine Weboberfläche zur Verwaltung von Druckern, Druckaufträgen und Benutzern mit folgenden Funktionen: - Login/Registrierungsseiten - Dashboard mit Überblick - Drucker-Verwaltung (Hinzufügen, Bearbeiten, Löschen) - Auftrags-Verwaltung (Erstellen, Abbrechen, Verlängern) - Benutzer-Verwaltung (nur Admin) - Statistik-Dashboard 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
346
backend/templates/jobs.html
Normal file
346
backend/templates/jobs.html
Normal file
@ -0,0 +1,346 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Druckaufträge - MYP API Tester{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-md-12 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h4 class="mb-0">Druckaufträge verwalten</h4>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#newJobForm">
|
||||
Neuen Auftrag erstellen
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapse" id="newJobForm">
|
||||
<div class="card-body border-bottom">
|
||||
<form class="api-form" data-url="/api/jobs" data-method="POST" data-response="createJobResponse" data-reload="true">
|
||||
<div class="mb-3">
|
||||
<label for="jobPrinterId" class="form-label">Drucker</label>
|
||||
<select class="form-control" id="jobPrinterId" name="printerId" required>
|
||||
<option value="">Drucker auswählen...</option>
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="jobDuration" class="form-label">Dauer (Minuten)</label>
|
||||
<input type="number" class="form-control" id="jobDuration" name="durationInMinutes" min="1" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="jobComments" class="form-label">Kommentare</label>
|
||||
<textarea class="form-control" id="jobComments" name="comments" rows="3"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">Auftrag erstellen</button>
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<h6>Antwort:</h6>
|
||||
<pre class="api-response" id="createJobResponse"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="api-form mb-3" data-url="/api/jobs" data-method="GET" data-response="jobsResponse">
|
||||
<button type="submit" class="btn btn-primary">Aufträge aktualisieren</button>
|
||||
</form>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Drucker</th>
|
||||
<th>Benutzer</th>
|
||||
<th>Start</th>
|
||||
<th>Dauer (Min)</th>
|
||||
<th>Verbleibend (Min)</th>
|
||||
<th>Status</th>
|
||||
<th>Kommentare</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="jobsTableBody">
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6>API-Antwort:</h6>
|
||||
<pre class="api-response" id="jobsResponse"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Job abbrechen Modal -->
|
||||
<div class="modal fade" id="abortJobModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Auftrag abbrechen</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Möchten Sie den Auftrag wirklich abbrechen?</p>
|
||||
<form id="abortJobForm" class="api-form" data-method="POST" data-response="abortJobResponse" data-reload="true">
|
||||
<input type="hidden" id="abortJobId" name="jobId">
|
||||
<div class="mb-3">
|
||||
<label for="abortReason" class="form-label">Abbruchgrund</label>
|
||||
<textarea class="form-control" id="abortReason" name="reason" rows="3"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<h6>Antwort:</h6>
|
||||
<pre class="api-response" id="abortJobResponse"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
||||
<button type="submit" form="abortJobForm" class="btn btn-danger">Auftrag abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Job beenden Modal -->
|
||||
<div class="modal fade" id="finishJobModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Auftrag beenden</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Möchten Sie den Auftrag als beendet markieren?</p>
|
||||
<form id="finishJobForm" class="api-form" data-method="POST" data-response="finishJobResponse" data-reload="true">
|
||||
<input type="hidden" id="finishJobId" name="jobId">
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<h6>Antwort:</h6>
|
||||
<pre class="api-response" id="finishJobResponse"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
||||
<button type="submit" form="finishJobForm" class="btn btn-success">Auftrag beenden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Job verlängern Modal -->
|
||||
<div class="modal fade" id="extendJobModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Auftrag verlängern</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="extendJobForm" class="api-form" data-method="POST" data-response="extendJobResponse" data-reload="true">
|
||||
<input type="hidden" id="extendJobId" name="jobId">
|
||||
<div class="mb-3">
|
||||
<label for="extendHours" class="form-label">Stunden</label>
|
||||
<input type="number" class="form-control" id="extendHours" name="hours" min="0" value="0">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="extendMinutes" class="form-label">Minuten</label>
|
||||
<input type="number" class="form-control" id="extendMinutes" name="minutes" min="0" max="59" value="30">
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<h6>Antwort:</h6>
|
||||
<pre class="api-response" id="extendJobResponse"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
||||
<button type="submit" form="extendJobForm" class="btn btn-primary">Auftrag verlängern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Job Kommentare bearbeiten Modal -->
|
||||
<div class="modal fade" id="editCommentsModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Kommentare bearbeiten</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editCommentsForm" class="api-form" data-method="PUT" data-response="editCommentsResponse" data-reload="true">
|
||||
<input type="hidden" id="editCommentsJobId" name="jobId">
|
||||
<div class="mb-3">
|
||||
<label for="editJobComments" class="form-label">Kommentare</label>
|
||||
<textarea class="form-control" id="editJobComments" name="comments" rows="3"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<h6>Antwort:</h6>
|
||||
<pre class="api-response" id="editCommentsResponse"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
||||
<button type="submit" form="editCommentsForm" class="btn btn-primary">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Drucker für Dropdown laden
|
||||
loadPrinters();
|
||||
|
||||
// Aufträge laden
|
||||
document.querySelector('form[data-url="/api/jobs"]').dispatchEvent(new Event('submit'));
|
||||
|
||||
// Tabelle aktualisieren, wenn Aufträge geladen werden
|
||||
const jobsResponse = document.getElementById('jobsResponse');
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
try {
|
||||
const jobs = JSON.parse(jobsResponse.textContent);
|
||||
updateJobsTable(jobs);
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Parsen der Auftrags-Daten:', e);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(jobsResponse, { childList: true, characterData: true, subtree: true });
|
||||
|
||||
// Abort-Modal vorbereiten
|
||||
document.getElementById('abortJobModal').addEventListener('show.bs.modal', function(event) {
|
||||
const button = event.relatedTarget;
|
||||
const jobId = button.getAttribute('data-job-id');
|
||||
|
||||
document.getElementById('abortJobId').value = jobId;
|
||||
document.getElementById('abortJobForm').setAttribute('data-url', `/api/jobs/${jobId}/abort`);
|
||||
});
|
||||
|
||||
// Finish-Modal vorbereiten
|
||||
document.getElementById('finishJobModal').addEventListener('show.bs.modal', function(event) {
|
||||
const button = event.relatedTarget;
|
||||
const jobId = button.getAttribute('data-job-id');
|
||||
|
||||
document.getElementById('finishJobId').value = jobId;
|
||||
document.getElementById('finishJobForm').setAttribute('data-url', `/api/jobs/${jobId}/finish`);
|
||||
});
|
||||
|
||||
// Extend-Modal vorbereiten
|
||||
document.getElementById('extendJobModal').addEventListener('show.bs.modal', function(event) {
|
||||
const button = event.relatedTarget;
|
||||
const jobId = button.getAttribute('data-job-id');
|
||||
|
||||
document.getElementById('extendJobId').value = jobId;
|
||||
document.getElementById('extendJobForm').setAttribute('data-url', `/api/jobs/${jobId}/extend`);
|
||||
});
|
||||
|
||||
// Edit-Comments-Modal vorbereiten
|
||||
document.getElementById('editCommentsModal').addEventListener('show.bs.modal', function(event) {
|
||||
const button = event.relatedTarget;
|
||||
const jobId = button.getAttribute('data-job-id');
|
||||
const comments = button.getAttribute('data-job-comments');
|
||||
|
||||
document.getElementById('editCommentsJobId').value = jobId;
|
||||
document.getElementById('editCommentsForm').setAttribute('data-url', `/api/jobs/${jobId}/comments`);
|
||||
document.getElementById('editJobComments').value = comments || '';
|
||||
});
|
||||
});
|
||||
|
||||
async function loadPrinters() {
|
||||
try {
|
||||
const response = await fetch('/api/printers');
|
||||
const printers = await response.json();
|
||||
|
||||
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 => {
|
||||
const option = document.createElement('option');
|
||||
option.value = printer.id;
|
||||
option.textContent = `${printer.name} - ${printer.description}`;
|
||||
selectElement.appendChild(option);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Laden der Drucker:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function updateJobsTable(jobs) {
|
||||
const tableBody = document.getElementById('jobsTableBody');
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
jobs.forEach(job => {
|
||||
const row = document.createElement('tr');
|
||||
|
||||
const startDate = new Date(job.startAt);
|
||||
const formattedStart = startDate.toLocaleString();
|
||||
|
||||
const isActive = !job.aborted && job.remainingMinutes > 0;
|
||||
|
||||
let statusText = '';
|
||||
let statusClass = '';
|
||||
|
||||
if (job.aborted) {
|
||||
statusText = 'Abgebrochen';
|
||||
statusClass = 'text-danger';
|
||||
} else if (job.remainingMinutes <= 0) {
|
||||
statusText = 'Abgeschlossen';
|
||||
statusClass = 'text-success';
|
||||
} else {
|
||||
statusText = 'Aktiv';
|
||||
statusClass = 'text-warning';
|
||||
}
|
||||
|
||||
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><span class="${statusClass}">${statusText}</span></td>
|
||||
<td>${job.comments || '-'}</td>
|
||||
<td>
|
||||
${isActive ? `
|
||||
<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-success mb-1"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#finishJobModal"
|
||||
data-job-id="${job.id}">
|
||||
Beenden
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-primary mb-1"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#extendJobModal"
|
||||
data-job-id="${job.id}">
|
||||
Verlängern
|
||||
</button>
|
||||
` : ''}
|
||||
<button type="button" class="btn btn-sm btn-secondary mb-1"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#editCommentsModal"
|
||||
data-job-id="${job.id}"
|
||||
data-job-comments="${job.comments || ''}">
|
||||
Kommentare
|
||||
</button>
|
||||
</td>
|
||||
`;
|
||||
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user