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:
137
backend/templates/stats.html
Normal file
137
backend/templates/stats.html
Normal file
@ -0,0 +1,137 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Statistiken - MYP API Tester{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-md-12 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="mb-0">Systemstatistiken</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="api-form mb-3" data-url="/api/stats" data-method="GET" data-response="statsResponse">
|
||||
<button type="submit" class="btn btn-primary">Statistiken aktualisieren</button>
|
||||
</form>
|
||||
|
||||
<div class="row" id="statsContainer">
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h6>API-Antwort:</h6>
|
||||
<pre class="api-response" id="statsResponse"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Statistiken laden
|
||||
document.querySelector('form[data-url="/api/stats"]').dispatchEvent(new Event('submit'));
|
||||
|
||||
// Statistiken aktualisieren, wenn API-Antwort geladen wird
|
||||
const statsResponse = document.getElementById('statsResponse');
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
try {
|
||||
const stats = JSON.parse(statsResponse.textContent);
|
||||
updateStatsDisplay(stats);
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Parsen der Statistik-Daten:', e);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(statsResponse, { childList: true, characterData: true, subtree: true });
|
||||
});
|
||||
|
||||
function updateStatsDisplay(stats) {
|
||||
const container = document.getElementById('statsContainer');
|
||||
container.innerHTML = '';
|
||||
|
||||
// Drucker-Statistiken
|
||||
const printerStats = document.createElement('div');
|
||||
printerStats.className = 'col-md-4 mb-3';
|
||||
printerStats.innerHTML = `
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0">Drucker</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Gesamt:</span>
|
||||
<span>${stats.printers.total}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Verfügbar:</span>
|
||||
<span>${stats.printers.available}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Auslastung:</span>
|
||||
<span>${Math.round(stats.printers.utilization_rate * 100)}%</span>
|
||||
</div>
|
||||
<div class="progress mt-3">
|
||||
<div class="progress-bar" role="progressbar"
|
||||
style="width: ${Math.round(stats.printers.utilization_rate * 100)}%">
|
||||
${Math.round(stats.printers.utilization_rate * 100)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Job-Statistiken
|
||||
const jobStats = document.createElement('div');
|
||||
jobStats.className = 'col-md-4 mb-3';
|
||||
jobStats.innerHTML = `
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h5 class="mb-0">Druckaufträge</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Gesamt:</span>
|
||||
<span>${stats.jobs.total}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Aktiv:</span>
|
||||
<span>${stats.jobs.active}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Abgeschlossen:</span>
|
||||
<span>${stats.jobs.completed}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Durchschnittliche Dauer:</span>
|
||||
<span>${stats.jobs.avg_duration} Minuten</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Benutzer-Statistiken
|
||||
const userStats = document.createElement('div');
|
||||
userStats.className = 'col-md-4 mb-3';
|
||||
userStats.innerHTML = `
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="mb-0">Benutzer</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Gesamt:</span>
|
||||
<span>${stats.users.total}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(printerStats);
|
||||
container.appendChild(jobStats);
|
||||
container.appendChild(userStats);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
Reference in New Issue
Block a user