core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement frontend production deployment and enhance admin dashboard functionality

Browse Source
This commit is contained in:
Till Tomczak
2025-05-26 21:54:13 +02:00
parent c2ea6c34ea
commit 7aa70cf976
59 changed files with 9161 additions and 10894 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
backend/app/templates/printers.html
View File

@@ -36,6 +36,7 @@
<div class="col-span-full text-center py-6 sm:py-12">
<div class="animate-spin rounded-full h-8 w-8 sm:h-12 sm:w-12 border-b-2 border-indigo-600 dark:border-indigo-400 mx-auto"></div>
<p class="mt-3 sm:mt-4 text-sm sm:text-base text-slate-600 dark:text-slate-400">Lade Drucker...</p>
<p class="mt-1 text-xs text-slate-500 dark:text-slate-500">Dies sollte nur wenige Sekunden dauern</p>
</div>
</div>
</div>
@@ -138,11 +139,56 @@
</div>
{% endblock %}
{% block extra_js %}
{% block scripts %}
<script>
// Globale Variablen für die Drucker-Verwaltung
let printers = [];
// Refresh printers mit Status-Check - Make it globally available
function refreshPrinters() {
console.log('refreshPrinters function called');
const grid = document.getElementById('printers-grid');
const refreshBtn = document.querySelector('button[onclick="refreshPrinters()"]');
// Button deaktivieren und Loading-State anzeigen
if (refreshBtn) {
refreshBtn.disabled = true;
refreshBtn.innerHTML = `
<svg class="animate-spin h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle>
<path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" class="opacity-75"></path>
</svg>
Überprüfe Status...
`;
}
// Loading-State im Grid anzeigen
grid.innerHTML = `
<div class="col-span-full text-center py-6 sm:py-12">
<div class="animate-spin rounded-full h-8 w-8 sm:h-12 sm:w-12 border-b-2 border-indigo-600 dark:border-indigo-400 mx-auto"></div>
<p class="mt-3 sm:mt-4 text-sm sm:text-base text-slate-600 dark:text-slate-400">Überprüfe Drucker-Status...</p>
<p class="mt-1 text-xs text-slate-500 dark:text-slate-500">Dies kann bis zu 7 Sekunden dauern</p>
</div>
`;
// Drucker laden mit Status-Check
loadPrintersWithStatusCheck().finally(() => {
// Button wieder aktivieren
if (refreshBtn) {
refreshBtn.disabled = false;
refreshBtn.innerHTML = `
<svg class="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Aktualisieren
`;
}
});
}
// Make function globally available
window.refreshPrinters = refreshPrinters;
// Modal-Funktionen
function showAddPrinterModal() {
document.getElementById('addPrinterModal').classList.remove('hidden');
@@ -153,6 +199,10 @@
document.getElementById('addPrinterForm').reset();
}
// Make modal functions globally available
window.showAddPrinterModal = showAddPrinterModal;
window.hideAddPrinterModal = hideAddPrinterModal;
function showPrinterDetail(printerId) {
const printer = printers.find(p => p.id === printerId);
if (!printer) return;
@@ -223,17 +273,68 @@
// Load printers (schnelles Laden ohne Status-Check)
async function loadPrinters() {
const grid = document.getElementById('printers-grid');
// Loading-State anzeigen
grid.innerHTML = `
<div class="col-span-full text-center py-6 sm:py-12">
<div class="animate-spin rounded-full h-8 w-8 sm:h-12 sm:w-12 border-b-2 border-indigo-600 dark:border-indigo-400 mx-auto"></div>
<p class="mt-3 sm:mt-4 text-sm sm:text-base text-slate-600 dark:text-slate-400">Lade Drucker...</p>
<p class="mt-1 text-xs text-slate-500 dark:text-slate-500">Dies sollte nur wenige Sekunden dauern</p>
</div>
`;
try {
const response = await fetch('/api/printers');
// Erstelle einen AbortController für Timeout
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 Sekunden Timeout
const response = await fetch('/api/printers', {
signal: controller.signal,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error('Fehler beim Laden der Drucker');
if (response.status === 408) {
throw new Error('Timeout beim Laden der Drucker. Bitte versuchen Sie es erneut.');
}
throw new Error(`Server-Fehler: ${response.status} ${response.statusText}`);
}
const data = await response.json();
// Prüfe auf Server-seitige Fehler
if (data.error) {
throw new Error(data.error);
}
// Verwende die korrekten Daten aus der neuen API-Antwort
printers = data.printers || [];
console.log(`Successfully loaded ${printers.length} printers (ohne Status-Check)`);
renderPrinters();
// Zeige Erfolgsmeldung nur wenn Drucker vorhanden sind
if (printers.length > 0) {
showStatusMessage(`${printers.length} Drucker erfolgreich geladen (ohne aktuellen Status)`, 'success');
}
} catch (error) {
console.error('Error loading printers:', error);
showError('Fehler beim Laden der Drucker');
// Spezielle Behandlung für verschiedene Fehlertypen
let errorMessage = 'Fehler beim Laden der Drucker';
if (error.name === 'AbortError') {
errorMessage = 'Timeout beim Laden der Drucker. Die Anfrage dauerte zu lange.';
} else if (error.message) {
errorMessage = error.message;
}
showError(errorMessage);
}
}
@@ -394,10 +495,25 @@
<svg class="h-12 w-12 sm:h-16 sm:w-16 text-red-500 dark:text-red-400 mx-auto mb-3 sm:mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="text-slate-700 dark:text-slate-300 text-base sm:text-lg">${message}</p>
<button onclick="refreshPrinters()" class="mt-3 sm:mt-4 bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-500 text-white px-4 sm:px-6 py-1.5 sm:py-2 rounded-lg transition-all duration-200 text-sm sm:text-base">
Erneut versuchen
</button>
<h3 class="text-lg font-medium text-slate-900 dark:text-white mb-2">Drucker konnten nicht geladen werden</h3>
<p class="text-slate-700 dark:text-slate-300 text-sm sm:text-base mb-4 max-w-md mx-auto">${message}</p>
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center">
<button onclick="loadPrinters()" class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-500 text-white px-4 sm:px-6 py-2 rounded-lg transition-all duration-200 text-sm sm:text-base flex items-center">
<svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Erneut versuchen
</button>
<button onclick="refreshPrinters()" class="bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-500 text-white px-4 sm:px-6 py-2 rounded-lg transition-all duration-200 text-sm sm:text-base flex items-center">
<svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Mit Status-Check
</button>
</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-3">
Tipp: "Mit Status-Check" dauert länger, überprüft aber die Verfügbarkeit aller Drucker
</p>
</div>
`;
}
@@ -444,8 +560,8 @@
</svg>
<span class="text-sm font-medium">${message}</span>
<button onclick="this.parentElement.remove()" class="ml-2 text-current hover:opacity-75">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
`;
@@ -466,38 +582,112 @@
event.preventDefault();
const form = document.getElementById('addPrinterForm');
const submitBtn = form.querySelector('button[type="submit"]');
const formData = new FormData(form);
// Deaktiviere Submit Button während der Verarbeitung
const originalBtnText = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = `
<svg class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle>
<path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" class="opacity-75"></path>
</svg>
Wird hinzugefügt...
`;
// Sammle und validiere Formulardaten
const printerData = {
name: formData.get('name'),
model: formData.get('model'),
location: formData.get('location'),
mac_address: formData.get('mac_address'),
plug_ip: formData.get('plug_ip'),
plug_username: formData.get('plug_username'),
plug_password: formData.get('plug_password')
name: formData.get('name')?.trim(),
model: formData.get('model')?.trim(),
location: formData.get('location')?.trim(),
mac_address: formData.get('mac_address')?.trim().toUpperCase(),
plug_ip: formData.get('plug_ip')?.trim(),
plug_username: formData.get('plug_username')?.trim(),
plug_password: formData.get('plug_password') // Passwort nicht trimmen
};
// Client-seitige Validierung
const errors = [];
if (!printerData.name) errors.push('Name ist erforderlich');
if (!printerData.model) errors.push('Modell ist erforderlich');
if (!printerData.location) errors.push('Standort ist erforderlich');
if (!printerData.mac_address) errors.push('MAC-Adresse ist erforderlich');
if (!printerData.plug_ip) errors.push('Plug IP ist erforderlich');
if (!printerData.plug_username) errors.push('Plug Benutzername ist erforderlich');
if (!printerData.plug_password) errors.push('Plug Passwort ist erforderlich');
// MAC-Adresse Format validieren
if (printerData.mac_address && !/^([0-9A-F]{2}:){5}[0-9A-F]{2}$/.test(printerData.mac_address)) {
// Versuche automatische Formatierung
const cleanMac = printerData.mac_address.replace(/[^0-9A-F]/g, '');
if (cleanMac.length === 12) {
printerData.mac_address = cleanMac.match(/.{2}/g).join(':');
} else {
errors.push('MAC-Adresse muss im Format AA:BB:CC:DD:EE:FF sein');
}
}
// IP-Adresse Format validieren
if (printerData.plug_ip && !/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(printerData.plug_ip)) {
errors.push('IP-Adresse muss im Format 192.168.1.100 sein');
}
if (errors.length > 0) {
showStatusMessage(`Bitte korrigieren Sie folgende Fehler:\n${errors.join('\n')}`, 'error');
// Button wieder aktivieren
submitBtn.disabled = false;
submitBtn.innerHTML = originalBtnText;
return;
}
try {
// Erstelle AbortController für Timeout
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 15000); // 15 Sekunden Timeout
const response = await fetch('/api/printers/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(printerData)
body: JSON.stringify(printerData),
signal: controller.signal
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || 'Fehler beim Hinzufügen des Druckers');
}
clearTimeout(timeoutId);
const result = await response.json();
if (!response.ok) {
throw new Error(result.error || `Server-Fehler: ${response.status}`);
}
// Erfolg!
hideAddPrinterModal();
showStatusMessage(result.message || 'Drucker erfolgreich hinzugefügt', 'success');
loadPrinters();
// Drucker-Liste neu laden
await loadPrinters();
console.log('Printer added successfully:', result.printer);
} catch (error) {
console.error('Error adding printer:', error);
showStatusMessage('Fehler beim Hinzufügen des Druckers: ' + error.message, 'error');
let errorMessage = 'Fehler beim Hinzufügen des Druckers';
if (error.name === 'AbortError') {
errorMessage = 'Timeout beim Hinzufügen des Druckers. Bitte versuchen Sie es erneut.';
} else if (error.message) {
errorMessage = error.message;
}
showStatusMessage(errorMessage, 'error');
} finally {
// Button wieder aktivieren
submitBtn.disabled = false;
submitBtn.innerHTML = originalBtnText;
}
}
@@ -530,66 +720,44 @@
}
}
// Refresh printers mit Status-Check
function refreshPrinters() {
const grid = document.getElementById('printers-grid');
const refreshBtn = document.querySelector('button[onclick="refreshPrinters()"]');
// Button deaktivieren und Loading-State anzeigen
if (refreshBtn) {
refreshBtn.disabled = true;
refreshBtn.innerHTML = `
<svg class="animate-spin h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle>
<path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" class="opacity-75"></path>
</svg>
Überprüfe Status...
`;
}
// Loading-State im Grid anzeigen
grid.innerHTML = `
<div class="col-span-full text-center py-6 sm:py-12">
<div class="animate-spin rounded-full h-8 w-8 sm:h-12 sm:w-12 border-b-2 border-indigo-600 dark:border-indigo-400 mx-auto"></div>
<p class="mt-3 sm:mt-4 text-sm sm:text-base text-slate-600 dark:text-slate-400">Überprüfe Drucker-Status...</p>
<p class="mt-1 text-xs text-slate-500 dark:text-slate-500">Dies kann bis zu 7 Sekunden dauern</p>
</div>
`;
// Drucker laden mit Status-Check
loadPrintersWithStatusCheck().finally(() => {
// Button wieder aktivieren
if (refreshBtn) {
refreshBtn.disabled = false;
refreshBtn.innerHTML = `
<svg class="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Aktualisieren
`;
}
});
}
// Erweiterte Funktion zum Laden der Drucker mit Status-Check
async function loadPrintersWithStatusCheck() {
try {
const response = await fetch('/api/printers/status');
// Erstelle einen AbortController für Timeout
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 Sekunden Timeout für Status-Check
const response = await fetch('/api/printers/status', {
signal: controller.signal,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error('Fehler beim Laden der Drucker-Status');
if (response.status === 408) {
throw new Error('Timeout beim Status-Check der Drucker. Versuchen Sie es später erneut.');
}
throw new Error(`Fehler beim Laden der Drucker-Status: ${response.status} ${response.statusText}`);
}
const statusData = await response.json();
// Prüfe ob statusData ein Array ist
if (!Array.isArray(statusData)) {
throw new Error('Ungültige Antwort vom Server');
console.error('Invalid response from /api/printers/status:', statusData);
throw new Error('Ungültige Antwort vom Server (erwartet Array, erhalten: ' + typeof statusData + ')');
}
// Drucker-Daten mit Status-Informationen anreichern
printers = statusData.map(printer => ({
...printer,
// Status ist bereits korrekt gemappt vom Backend
status: printer.status || 'offline'
status: printer.status || 'offline',
last_checked: printer.last_checked || new Date().toISOString()
}));
renderPrinters();
@@ -670,5 +838,23 @@
}
});
});
// Make all functions globally available for onclick handlers
window.showPrinterDetail = showPrinterDetail;
window.hidePrinterDetailModal = hidePrinterDetailModal;
window.deletePrinter = deletePrinter;
window.loadPrinters = loadPrinters;
window.handleAddPrinter = handleAddPrinter;
// Debug: Log that functions are available
console.log('All printer functions loaded and available globally:', {
refreshPrinters: typeof window.refreshPrinters,
showAddPrinterModal: typeof window.showAddPrinterModal,
hideAddPrinterModal: typeof window.hideAddPrinterModal,
showPrinterDetail: typeof window.showPrinterDetail,
hidePrinterDetailModal: typeof window.hidePrinterDetailModal,
deletePrinter: typeof window.deletePrinter,
loadPrinters: typeof window.loadPrinters
});
</script>
{% endblock %}