🎉 Improved documentation and logs for better system understanding & maintenance
This commit is contained in:
594
backend/static/js/admin-unified.js
Normal file
594
backend/static/js/admin-unified.js
Normal file
@ -0,0 +1,594 @@
|
||||
/**
|
||||
* Mercedes-Benz MYP Admin Dashboard - Unified JavaScript
|
||||
* Konsolidierte Admin-Funktionalitäten ohne Event-Handler-Konflikte
|
||||
*/
|
||||
|
||||
// Globale Variablen und State-Management
|
||||
class AdminDashboard {
|
||||
constructor() {
|
||||
this.csrfToken = null;
|
||||
this.updateInterval = null;
|
||||
this.eventListenersAttached = false;
|
||||
this.apiBaseUrl = this.detectApiBaseUrl();
|
||||
this.retryCount = 0;
|
||||
this.maxRetries = 3;
|
||||
this.isInitialized = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
detectApiBaseUrl() {
|
||||
const currentHost = window.location.hostname;
|
||||
const currentPort = window.location.port;
|
||||
|
||||
if (currentPort === '5000') {
|
||||
return '';
|
||||
}
|
||||
|
||||
return `http://${currentHost}:5000`;
|
||||
}
|
||||
|
||||
init() {
|
||||
if (this.isInitialized) {
|
||||
console.log('🔄 Admin Dashboard bereits initialisiert, überspringe...');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('🚀 Initialisiere Mercedes-Benz MYP Admin Dashboard');
|
||||
|
||||
// CSRF Token setzen
|
||||
this.csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
||||
|
||||
// Event-Listener nur einmal registrieren
|
||||
this.attachEventListeners();
|
||||
|
||||
// Live-Updates starten
|
||||
this.startLiveUpdates();
|
||||
|
||||
// Initiale Daten laden
|
||||
this.loadInitialData();
|
||||
|
||||
this.isInitialized = true;
|
||||
console.log('✅ Admin Dashboard erfolgreich initialisiert');
|
||||
}
|
||||
|
||||
attachEventListeners() {
|
||||
if (this.eventListenersAttached) {
|
||||
console.log('⚠️ Event-Listener bereits registriert, überspringe...');
|
||||
return;
|
||||
}
|
||||
|
||||
// System-Action-Buttons mit Event-Delegation
|
||||
this.attachSystemButtons();
|
||||
this.attachUserManagement();
|
||||
this.attachPrinterManagement();
|
||||
this.attachJobManagement();
|
||||
this.attachModalEvents();
|
||||
|
||||
this.eventListenersAttached = true;
|
||||
console.log('📌 Event-Listener erfolgreich registriert');
|
||||
}
|
||||
|
||||
attachSystemButtons() {
|
||||
// System Status Button
|
||||
this.addEventListenerSafe('#system-status-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.showSystemStatus();
|
||||
});
|
||||
|
||||
// Analytics Button
|
||||
this.addEventListenerSafe('#analytics-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.showAnalytics();
|
||||
});
|
||||
|
||||
// Maintenance Button
|
||||
this.addEventListenerSafe('#maintenance-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.showMaintenance();
|
||||
});
|
||||
|
||||
// Cache leeren
|
||||
this.addEventListenerSafe('#clear-cache-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.clearSystemCache();
|
||||
});
|
||||
|
||||
// Datenbank optimieren
|
||||
this.addEventListenerSafe('#optimize-db-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.optimizeDatabase();
|
||||
});
|
||||
|
||||
// Backup erstellen
|
||||
this.addEventListenerSafe('#create-backup-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.createSystemBackup();
|
||||
});
|
||||
|
||||
// Drucker-Initialisierung erzwingen
|
||||
this.addEventListenerSafe('#force-init-printers-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.forceInitializePrinters();
|
||||
});
|
||||
}
|
||||
|
||||
attachUserManagement() {
|
||||
// Neuer Benutzer Button
|
||||
this.addEventListenerSafe('#add-user-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.showUserModal();
|
||||
});
|
||||
|
||||
// Event-Delegation für Benutzer-Aktionen
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.edit-user-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const userId = e.target.closest('button').dataset.userId;
|
||||
this.editUser(userId);
|
||||
}
|
||||
|
||||
if (e.target.closest('.delete-user-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const userId = e.target.closest('button').dataset.userId;
|
||||
const userName = e.target.closest('button').dataset.userName;
|
||||
this.deleteUser(userId, userName);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
attachPrinterManagement() {
|
||||
// Drucker hinzufügen Button
|
||||
this.addEventListenerSafe('#add-printer-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.showPrinterModal();
|
||||
});
|
||||
|
||||
// Event-Delegation für Drucker-Aktionen
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.manage-printer-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const printerId = e.target.closest('button').dataset.printerId;
|
||||
this.managePrinter(printerId);
|
||||
}
|
||||
|
||||
if (e.target.closest('.settings-printer-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const printerId = e.target.closest('button').dataset.printerId;
|
||||
this.showPrinterSettings(printerId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
attachJobManagement() {
|
||||
// Event-Delegation für Job-Aktionen
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.job-action-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const action = e.target.closest('button').dataset.action;
|
||||
const jobId = e.target.closest('button').dataset.jobId;
|
||||
this.handleJobAction(action, jobId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
attachModalEvents() {
|
||||
// Error-Alert Buttons
|
||||
this.addEventListenerSafe('#fix-errors-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.fixErrors();
|
||||
});
|
||||
|
||||
this.addEventListenerSafe('#dismiss-errors-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.dismissErrors();
|
||||
});
|
||||
|
||||
this.addEventListenerSafe('#view-error-details-btn', 'click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
window.location.href = '/admin-dashboard?tab=logs';
|
||||
});
|
||||
}
|
||||
|
||||
addEventListenerSafe(selector, event, handler) {
|
||||
const element = document.querySelector(selector);
|
||||
if (element && !element.dataset.listenerAttached) {
|
||||
element.addEventListener(event, handler);
|
||||
element.dataset.listenerAttached = 'true';
|
||||
}
|
||||
}
|
||||
|
||||
startLiveUpdates() {
|
||||
if (this.updateInterval) {
|
||||
clearInterval(this.updateInterval);
|
||||
}
|
||||
|
||||
// Statistiken alle 30 Sekunden aktualisieren
|
||||
this.updateInterval = setInterval(() => {
|
||||
this.loadLiveStats();
|
||||
}, 30000);
|
||||
|
||||
// Live-Zeit jede Sekunde aktualisieren
|
||||
setInterval(() => {
|
||||
this.updateLiveTime();
|
||||
}, 1000);
|
||||
|
||||
// System-Health alle 30 Sekunden prüfen
|
||||
setInterval(() => {
|
||||
this.checkSystemHealth();
|
||||
}, 30000);
|
||||
|
||||
console.log('🔄 Live-Updates gestartet');
|
||||
}
|
||||
|
||||
async loadInitialData() {
|
||||
await this.loadLiveStats();
|
||||
await this.checkSystemHealth();
|
||||
}
|
||||
|
||||
async loadLiveStats() {
|
||||
try {
|
||||
const url = `${this.apiBaseUrl}/api/stats`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
this.updateStatsDisplay(data);
|
||||
this.retryCount = 0;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Live-Statistiken:', error);
|
||||
this.retryCount++;
|
||||
|
||||
if (this.retryCount <= this.maxRetries) {
|
||||
setTimeout(() => this.loadLiveStats(), 5000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateStatsDisplay(data) {
|
||||
// Sichere Updates mit null-Checks
|
||||
this.updateElement('live-users-count', data.total_users || 0);
|
||||
this.updateElement('live-printers-count', data.total_printers || 0);
|
||||
this.updateElement('live-printers-online', `${data.online_printers || 0} online`);
|
||||
this.updateElement('live-jobs-active', data.active_jobs || 0);
|
||||
this.updateElement('live-jobs-queued', `${data.queued_jobs || 0} in Warteschlange`);
|
||||
this.updateElement('live-success-rate', `${data.success_rate || 0}%`);
|
||||
|
||||
// Progress Bars aktualisieren
|
||||
this.updateProgressBar('users-progress', data.total_users, 20);
|
||||
this.updateProgressBar('printers-progress', data.online_printers, data.total_printers);
|
||||
this.updateProgressBar('jobs-progress', data.active_jobs, 10);
|
||||
this.updateProgressBar('success-progress', data.success_rate, 100);
|
||||
|
||||
console.log('📊 Live-Statistiken aktualisiert');
|
||||
}
|
||||
|
||||
updateElement(elementId, value) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (element) {
|
||||
element.textContent = value;
|
||||
}
|
||||
}
|
||||
|
||||
updateProgressBar(progressId, currentValue, maxValue) {
|
||||
const progressEl = document.getElementById(progressId);
|
||||
if (progressEl && currentValue !== undefined && maxValue > 0) {
|
||||
const percentage = Math.min(100, Math.max(0, (currentValue / maxValue) * 100));
|
||||
progressEl.style.width = `${percentage}%`;
|
||||
}
|
||||
}
|
||||
|
||||
updateLiveTime() {
|
||||
const timeElement = document.getElementById('live-time');
|
||||
if (timeElement) {
|
||||
const now = new Date();
|
||||
timeElement.textContent = now.toLocaleTimeString('de-DE');
|
||||
}
|
||||
}
|
||||
|
||||
// System-Funktionen
|
||||
async showSystemStatus() {
|
||||
console.log('🔧 System Status wird angezeigt');
|
||||
this.showNotification('System Status wird geladen...', 'info');
|
||||
}
|
||||
|
||||
async showAnalytics() {
|
||||
console.log('📈 Analytics wird angezeigt');
|
||||
this.showNotification('Analytics werden geladen...', 'info');
|
||||
}
|
||||
|
||||
async showMaintenance() {
|
||||
console.log('🛠️ Wartung wird angezeigt');
|
||||
const systemTab = document.querySelector('a[href*="tab=system"]');
|
||||
if (systemTab) {
|
||||
systemTab.click();
|
||||
}
|
||||
}
|
||||
|
||||
async clearSystemCache() {
|
||||
if (!confirm('🗑️ Möchten Sie wirklich den System-Cache leeren?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.apiBaseUrl}/api/admin/cache/clear`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': this.csrfToken
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.showNotification('✅ Cache erfolgreich geleert!', 'success');
|
||||
setTimeout(() => window.location.reload(), 2000);
|
||||
} else {
|
||||
this.showNotification('❌ Fehler beim Leeren des Cache', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
this.showNotification('❌ Fehler beim Leeren des Cache', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async optimizeDatabase() {
|
||||
if (!confirm('🔧 Möchten Sie die Datenbank optimieren?')) return;
|
||||
|
||||
this.showNotification('🔄 Datenbank wird optimiert...', 'info');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.apiBaseUrl}/api/admin/database/optimize`, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': this.csrfToken }
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.showNotification('✅ Datenbank erfolgreich optimiert!', 'success');
|
||||
} else {
|
||||
this.showNotification('❌ Fehler bei der Datenbank-Optimierung', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
this.showNotification('❌ Fehler bei der Datenbank-Optimierung', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async createSystemBackup() {
|
||||
if (!confirm('💾 Möchten Sie ein System-Backup erstellen?')) return;
|
||||
|
||||
this.showNotification('🔄 Backup wird erstellt...', 'info');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.apiBaseUrl}/api/admin/backup/create`, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': this.csrfToken }
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.showNotification('✅ Backup erfolgreich erstellt!', 'success');
|
||||
} else {
|
||||
this.showNotification('❌ Fehler beim Erstellen des Backups', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
this.showNotification('❌ Fehler beim Erstellen des Backups', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async forceInitializePrinters() {
|
||||
if (!confirm('🔄 Möchten Sie die Drucker-Initialisierung erzwingen?')) return;
|
||||
|
||||
this.showNotification('🔄 Drucker werden initialisiert...', 'info');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.apiBaseUrl}/api/admin/printers/force-init`, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': this.csrfToken }
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.showNotification('✅ Drucker erfolgreich initialisiert!', 'success');
|
||||
setTimeout(() => window.location.reload(), 2000);
|
||||
} else {
|
||||
this.showNotification('❌ Fehler bei der Drucker-Initialisierung', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
this.showNotification('❌ Fehler bei der Drucker-Initialisierung', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// User-Management
|
||||
showUserModal() {
|
||||
console.log('👤 Benutzer-Modal wird angezeigt');
|
||||
this.showNotification('Benutzer-Funktionen werden geladen...', 'info');
|
||||
}
|
||||
|
||||
editUser(userId) {
|
||||
console.log(`✏️ Benutzer ${userId} wird bearbeitet`);
|
||||
this.showNotification(`Benutzer ${userId} wird bearbeitet...`, 'info');
|
||||
}
|
||||
|
||||
async deleteUser(userId, userName) {
|
||||
if (!confirm(`🗑️ Möchten Sie den Benutzer "${userName}" wirklich löschen?`)) return;
|
||||
|
||||
this.showNotification(`🔄 Benutzer "${userName}" wird gelöscht...`, 'info');
|
||||
}
|
||||
|
||||
// Printer-Management
|
||||
showPrinterModal() {
|
||||
console.log('🖨️ Drucker-Modal wird angezeigt');
|
||||
this.showNotification('Drucker-Funktionen werden geladen...', 'info');
|
||||
}
|
||||
|
||||
managePrinter(printerId) {
|
||||
console.log(`🔧 Drucker ${printerId} wird verwaltet`);
|
||||
this.showNotification(`Drucker ${printerId} wird verwaltet...`, 'info');
|
||||
}
|
||||
|
||||
showPrinterSettings(printerId) {
|
||||
console.log(`⚙️ Drucker-Einstellungen ${printerId} werden angezeigt`);
|
||||
this.showNotification(`Drucker-Einstellungen werden geladen...`, 'info');
|
||||
}
|
||||
|
||||
// Job-Management
|
||||
handleJobAction(action, jobId) {
|
||||
console.log(`📋 Job-Aktion "${action}" für Job ${jobId}`);
|
||||
this.showNotification(`Job-Aktion "${action}" wird ausgeführt...`, 'info');
|
||||
}
|
||||
|
||||
// Error-Management
|
||||
async checkSystemHealth() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/system-health');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.updateHealthDisplay(data);
|
||||
this.updateErrorAlerts(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler bei System-Health-Check:', error);
|
||||
}
|
||||
}
|
||||
|
||||
updateHealthDisplay(data) {
|
||||
const statusIndicator = document.getElementById('db-status-indicator');
|
||||
const statusText = document.getElementById('db-status-text');
|
||||
|
||||
if (statusIndicator && statusText) {
|
||||
if (data.health_status === 'critical') {
|
||||
statusIndicator.className = 'w-3 h-3 bg-red-500 rounded-full animate-pulse';
|
||||
statusText.textContent = 'Kritisch';
|
||||
statusText.className = 'text-sm font-medium text-red-600 dark:text-red-400';
|
||||
} else if (data.health_status === 'warning') {
|
||||
statusIndicator.className = 'w-3 h-3 bg-yellow-500 rounded-full animate-pulse';
|
||||
statusText.textContent = 'Warnung';
|
||||
statusText.className = 'text-sm font-medium text-yellow-600 dark:text-yellow-400';
|
||||
} else {
|
||||
statusIndicator.className = 'w-3 h-3 bg-green-400 rounded-full animate-pulse';
|
||||
statusText.textContent = 'Gesund';
|
||||
statusText.className = 'text-sm font-medium text-green-600 dark:text-green-400';
|
||||
}
|
||||
}
|
||||
|
||||
this.updateElement('last-migration', data.last_migration || 'Unbekannt');
|
||||
this.updateElement('schema-integrity', data.schema_integrity || 'Prüfung');
|
||||
this.updateElement('recent-errors-count', data.recent_errors_count || 0);
|
||||
}
|
||||
|
||||
updateErrorAlerts(data) {
|
||||
const alertContainer = document.getElementById('critical-errors-alert');
|
||||
if (!alertContainer) return;
|
||||
|
||||
const allErrors = [...(data.critical_errors || []), ...(data.warnings || [])];
|
||||
|
||||
if (allErrors.length > 0) {
|
||||
alertContainer.classList.remove('hidden');
|
||||
} else {
|
||||
alertContainer.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
async fixErrors() {
|
||||
if (!confirm('🔧 Möchten Sie die automatische Fehlerkorrektur durchführen?')) return;
|
||||
|
||||
this.showNotification('🔄 Fehler werden automatisch behoben...', 'info');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/fix-errors', {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': this.csrfToken }
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.showNotification('✅ Automatische Reparatur erfolgreich!', 'success');
|
||||
setTimeout(() => this.checkSystemHealth(), 2000);
|
||||
} else {
|
||||
this.showNotification('❌ Automatische Reparatur fehlgeschlagen', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
this.showNotification('❌ Fehler bei der automatischen Reparatur', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
dismissErrors() {
|
||||
const alertContainer = document.getElementById('critical-errors-alert');
|
||||
if (alertContainer) {
|
||||
alertContainer.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Notification System
|
||||
showNotification(message, type = 'info') {
|
||||
let notification = document.getElementById('admin-notification');
|
||||
if (!notification) {
|
||||
notification = document.createElement('div');
|
||||
notification.id = 'admin-notification';
|
||||
notification.className = 'fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm transition-all duration-300';
|
||||
document.body.appendChild(notification);
|
||||
}
|
||||
|
||||
const colors = {
|
||||
success: 'bg-green-500 text-white',
|
||||
error: 'bg-red-500 text-white',
|
||||
info: 'bg-blue-500 text-white',
|
||||
warning: 'bg-yellow-500 text-white'
|
||||
};
|
||||
|
||||
notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm transition-all duration-300 ${colors[type]}`;
|
||||
notification.textContent = message;
|
||||
notification.style.transform = 'translateX(0)';
|
||||
|
||||
// Auto-Hide nach 3 Sekunden
|
||||
setTimeout(() => {
|
||||
if (notification) {
|
||||
notification.style.transform = 'translateX(100%)';
|
||||
setTimeout(() => {
|
||||
if (notification && notification.parentNode) {
|
||||
notification.parentNode.removeChild(notification);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
// Sichere Initialisierung - nur einmal ausführen
|
||||
let adminDashboardInstance = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (!adminDashboardInstance) {
|
||||
adminDashboardInstance = new AdminDashboard();
|
||||
window.AdminDashboard = adminDashboardInstance;
|
||||
console.log('🎯 Admin Dashboard erfolgreich initialisiert (unified)');
|
||||
}
|
||||
});
|
||||
|
||||
// Export für globalen Zugriff
|
||||
window.AdminDashboard = AdminDashboard;
|
||||
Reference in New Issue
Block a user