1085 lines
42 KiB
JavaScript
1085 lines
42 KiB
JavaScript
/**
|
|
* Admin Panel JavaScript
|
|
* Handles the functionality of the admin panel interface
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize admin panel
|
|
initializeAdminPanel();
|
|
|
|
// Load initial data
|
|
loadAdminStats();
|
|
|
|
// Initialisiere den aktiven Tab basierend auf der URL oder default
|
|
initializeActiveTab();
|
|
|
|
// Initialize modals and button event handlers
|
|
initializeEventHandlers();
|
|
|
|
// Set up auto-refresh timer (every 30 seconds)
|
|
setInterval(function() {
|
|
if (document.visibilityState === 'visible') {
|
|
refreshActiveTabData();
|
|
}
|
|
}, 30000);
|
|
});
|
|
|
|
// Initialisiere den aktiven Tab
|
|
function initializeActiveTab() {
|
|
// Prüfe URL Hash
|
|
const hash = window.location.hash.substring(1);
|
|
if (hash) {
|
|
activateTab(hash);
|
|
} else {
|
|
// Default Tab laden
|
|
const defaultTab = document.querySelector('.nav-tab');
|
|
if (defaultTab) {
|
|
const tabName = defaultTab.getAttribute('data-tab');
|
|
activateTab(tabName);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Aktiviere einen Tab und lade seine Daten
|
|
function activateTab(tabName) {
|
|
// UI aktualisieren
|
|
const tabs = document.querySelectorAll('.nav-tab');
|
|
tabs.forEach(tab => {
|
|
if (tab.getAttribute('data-tab') === tabName) {
|
|
tab.classList.add('active');
|
|
} else {
|
|
tab.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Inhalte anzeigen/verstecken
|
|
const tabPanes = document.querySelectorAll('.tab-pane');
|
|
tabPanes.forEach(pane => {
|
|
if (pane.id === `${tabName}-tab`) {
|
|
pane.classList.add('active');
|
|
pane.classList.remove('hidden');
|
|
} else {
|
|
pane.classList.remove('active');
|
|
pane.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Daten für den Tab laden
|
|
switch(tabName) {
|
|
case 'users':
|
|
loadUsers();
|
|
break;
|
|
case 'printers':
|
|
loadPrinters();
|
|
break;
|
|
case 'scheduler':
|
|
loadSchedulerStatus();
|
|
break;
|
|
case 'system':
|
|
loadSystemStats();
|
|
break;
|
|
case 'logs':
|
|
loadLogs();
|
|
break;
|
|
}
|
|
|
|
// URL Hash aktualisieren
|
|
window.location.hash = tabName;
|
|
}
|
|
|
|
// Refresh only the data for the active tab
|
|
function refreshActiveTabData() {
|
|
const activeTab = document.querySelector('.nav-tab.active');
|
|
if (!activeTab) return;
|
|
|
|
const tabName = activeTab.getAttribute('data-tab');
|
|
|
|
switch(tabName) {
|
|
case 'users':
|
|
loadUsers();
|
|
break;
|
|
case 'printers':
|
|
loadPrinters();
|
|
break;
|
|
case 'scheduler':
|
|
loadSchedulerStatus();
|
|
break;
|
|
case 'system':
|
|
loadSystemStats();
|
|
break;
|
|
case 'logs':
|
|
loadLogs();
|
|
break;
|
|
}
|
|
|
|
// Always refresh the stats
|
|
loadAdminStats();
|
|
}
|
|
|
|
// Initialize event handlers for buttons that previously used onclick
|
|
function initializeEventHandlers() {
|
|
// Add user button
|
|
const addUserBtn = document.getElementById('add-user-btn');
|
|
if (addUserBtn) {
|
|
addUserBtn.addEventListener('click', showAddUserModal);
|
|
}
|
|
|
|
// Add printer button
|
|
const addPrinterBtn = document.getElementById('add-printer-btn');
|
|
if (addPrinterBtn) {
|
|
addPrinterBtn.addEventListener('click', showAddPrinterModal);
|
|
}
|
|
|
|
// Refresh logs button
|
|
const refreshLogsBtn = document.getElementById('refresh-logs-btn');
|
|
if (refreshLogsBtn) {
|
|
refreshLogsBtn.addEventListener('click', refreshLogs);
|
|
}
|
|
|
|
// Delete modal close buttons
|
|
const closeDeleteModalBtn = document.getElementById('close-delete-modal');
|
|
if (closeDeleteModalBtn) {
|
|
closeDeleteModalBtn.addEventListener('click', closeDeleteModal);
|
|
}
|
|
|
|
const cancelDeleteBtn = document.getElementById('cancel-delete');
|
|
if (cancelDeleteBtn) {
|
|
cancelDeleteBtn.addEventListener('click', closeDeleteModal);
|
|
}
|
|
|
|
// Add user modal handlers
|
|
const closeAddUserBtn = document.getElementById('close-add-user-modal');
|
|
if (closeAddUserBtn) {
|
|
closeAddUserBtn.addEventListener('click', closeAddUserModal);
|
|
}
|
|
|
|
const cancelAddUserBtn = document.getElementById('cancel-add-user');
|
|
if (cancelAddUserBtn) {
|
|
cancelAddUserBtn.addEventListener('click', closeAddUserModal);
|
|
}
|
|
|
|
const confirmAddUserBtn = document.getElementById('confirm-add-user');
|
|
if (confirmAddUserBtn) {
|
|
confirmAddUserBtn.addEventListener('click', addUser);
|
|
}
|
|
|
|
// Add printer modal handlers
|
|
const closeAddPrinterBtn = document.getElementById('close-add-printer-modal');
|
|
if (closeAddPrinterBtn) {
|
|
closeAddPrinterBtn.addEventListener('click', closeAddPrinterModal);
|
|
}
|
|
|
|
const cancelAddPrinterBtn = document.getElementById('cancel-add-printer');
|
|
if (cancelAddPrinterBtn) {
|
|
cancelAddPrinterBtn.addEventListener('click', closeAddPrinterModal);
|
|
}
|
|
|
|
const confirmAddPrinterBtn = document.getElementById('confirm-add-printer');
|
|
if (confirmAddPrinterBtn) {
|
|
confirmAddPrinterBtn.addEventListener('click', addPrinter);
|
|
}
|
|
|
|
// Scheduler buttons
|
|
const startSchedulerBtn = document.getElementById('start-scheduler');
|
|
if (startSchedulerBtn) {
|
|
startSchedulerBtn.addEventListener('click', startScheduler);
|
|
}
|
|
|
|
const stopSchedulerBtn = document.getElementById('stop-scheduler');
|
|
if (stopSchedulerBtn) {
|
|
stopSchedulerBtn.addEventListener('click', stopScheduler);
|
|
}
|
|
|
|
// Global refresh button
|
|
const refreshButton = document.createElement('button');
|
|
refreshButton.id = 'refresh-admin-btn';
|
|
refreshButton.className = 'fixed bottom-8 right-8 p-3 bg-primary text-white rounded-full shadow-lg z-40';
|
|
refreshButton.innerHTML = `
|
|
<svg class="w-6 h-6" 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>
|
|
`;
|
|
refreshButton.title = 'Alle Daten aktualisieren';
|
|
refreshButton.addEventListener('click', refreshAllData);
|
|
|
|
// Füge den Button zum Body hinzu, falls er noch nicht existiert
|
|
if (!document.getElementById('refresh-admin-btn')) {
|
|
document.body.appendChild(refreshButton);
|
|
}
|
|
}
|
|
|
|
// Modal functions
|
|
function showAddUserModal() {
|
|
const modal = document.getElementById('add-user-modal');
|
|
if (modal) {
|
|
// Reset form
|
|
const form = document.getElementById('add-user-form');
|
|
if (form) {
|
|
form.reset();
|
|
}
|
|
|
|
// Show modal
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('show');
|
|
modal.style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
function closeAddUserModal() {
|
|
const modal = document.getElementById('add-user-modal');
|
|
if (modal) {
|
|
modal.classList.remove('show');
|
|
modal.classList.add('hidden');
|
|
modal.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async function addUser() {
|
|
const form = document.getElementById('add-user-form');
|
|
if (!form) return;
|
|
|
|
const userData = {
|
|
email: document.getElementById('user-email').value,
|
|
name: document.getElementById('user-name').value,
|
|
password: document.getElementById('user-password').value,
|
|
role: document.getElementById('user-role').value,
|
|
status: document.getElementById('user-status').value
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/users', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-Token': getCSRFToken()
|
|
},
|
|
body: JSON.stringify(userData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Hinzufügen des Benutzers');
|
|
}
|
|
|
|
// Erfolgsmeldung anzeigen
|
|
showNotification('Benutzer erfolgreich hinzugefügt', 'success');
|
|
|
|
// Modal schließen
|
|
closeAddUserModal();
|
|
|
|
// Benutzerliste aktualisieren
|
|
loadUsers();
|
|
} catch (error) {
|
|
console.error('Error adding user:', error);
|
|
showNotification(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
function showAddPrinterModal() {
|
|
const modal = document.getElementById('add-printer-modal');
|
|
if (modal) {
|
|
// Reset form
|
|
const form = document.getElementById('add-printer-form');
|
|
if (form) {
|
|
form.reset();
|
|
}
|
|
|
|
// Show modal
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('show');
|
|
modal.style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
function closeAddPrinterModal() {
|
|
const modal = document.getElementById('add-printer-modal');
|
|
if (modal) {
|
|
modal.classList.remove('show');
|
|
modal.classList.add('hidden');
|
|
modal.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async function addPrinter() {
|
|
const form = document.getElementById('add-printer-form');
|
|
if (!form) return;
|
|
|
|
const printerData = {
|
|
name: document.getElementById('printer-name').value,
|
|
model: document.getElementById('printer-model').value,
|
|
ip_address: document.getElementById('printer-ip').value,
|
|
location: document.getElementById('printer-location').value,
|
|
status: document.getElementById('printer-status').value
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/printers', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-Token': getCSRFToken()
|
|
},
|
|
body: JSON.stringify(printerData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Hinzufügen des Druckers');
|
|
}
|
|
|
|
// Erfolgsmeldung anzeigen
|
|
showNotification('Drucker erfolgreich hinzugefügt', 'success');
|
|
|
|
// Modal schließen
|
|
closeAddPrinterModal();
|
|
|
|
// Druckerliste aktualisieren
|
|
loadPrinters();
|
|
} catch (error) {
|
|
console.error('Error adding printer:', error);
|
|
showNotification(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
function refreshLogs() {
|
|
loadLogs();
|
|
showNotification('Logs aktualisiert', 'info');
|
|
}
|
|
|
|
function closeDeleteModal() {
|
|
const modal = document.getElementById('delete-confirm-modal');
|
|
if (modal) {
|
|
modal.classList.remove('show');
|
|
modal.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function showDeleteConfirmation(id, type, name, callback) {
|
|
const modal = document.getElementById('delete-confirm-modal');
|
|
const messageEl = document.getElementById('delete-message');
|
|
const idField = document.getElementById('delete-id');
|
|
const typeField = document.getElementById('delete-type');
|
|
const confirmBtn = document.getElementById('confirm-delete');
|
|
|
|
if (modal && messageEl && idField && typeField && confirmBtn) {
|
|
messageEl.textContent = `Möchten Sie ${type === 'user' ? 'den Benutzer' : 'den Drucker'} "${name}" wirklich löschen?`;
|
|
idField.value = id;
|
|
typeField.value = type;
|
|
|
|
confirmBtn.onclick = function() {
|
|
if (typeof callback === 'function') {
|
|
callback(id, name);
|
|
}
|
|
closeDeleteModal();
|
|
};
|
|
|
|
modal.classList.add('show');
|
|
modal.style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
function initializeAdminPanel() {
|
|
// Tab Navigation
|
|
const tabs = document.querySelectorAll('.nav-tab');
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
const tabName = this.getAttribute('data-tab');
|
|
if (!tabName) return;
|
|
|
|
activateTab(tabName);
|
|
});
|
|
});
|
|
|
|
// Log Level Filter
|
|
const logLevelFilter = document.getElementById('log-level-filter');
|
|
if (logLevelFilter) {
|
|
logLevelFilter.addEventListener('change', function() {
|
|
if (window.logsData) {
|
|
const level = this.value;
|
|
if (level === 'all') {
|
|
window.filteredLogs = [...window.logsData];
|
|
} else {
|
|
window.filteredLogs = window.logsData.filter(log => log.level.toLowerCase() === level);
|
|
}
|
|
renderLogs();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Confirm Delete
|
|
const confirmDeleteBtn = document.getElementById('confirm-delete');
|
|
if (confirmDeleteBtn) {
|
|
confirmDeleteBtn.addEventListener('click', function() {
|
|
const id = document.getElementById('delete-id').value;
|
|
const type = document.getElementById('delete-type').value;
|
|
|
|
if (type === 'user') {
|
|
deleteUser(id);
|
|
} else if (type === 'printer') {
|
|
deletePrinter(id);
|
|
}
|
|
|
|
closeDeleteModal();
|
|
});
|
|
}
|
|
}
|
|
|
|
async function loadAdminStats() {
|
|
try {
|
|
const response = await fetch('/api/admin/stats');
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Laden der Admin-Statistiken');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Aktualisiere die Statistik-Karten
|
|
const statsContainer = document.getElementById('admin-stats');
|
|
if (!statsContainer) {
|
|
console.warn('Stats-Container nicht gefunden');
|
|
return;
|
|
}
|
|
|
|
statsContainer.innerHTML = `
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-title">Benutzer</div>
|
|
<div class="stat-value" id="admin-total-users-count">${data.total_users || 0}</div>
|
|
<div class="stat-desc">Registrierte Benutzer</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-title">Drucker</div>
|
|
<div class="stat-value" id="admin-total-printers-count">${data.total_printers || 0}</div>
|
|
<div class="stat-desc">Verbundene Drucker</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-title">Aktive Jobs</div>
|
|
<div class="stat-value" id="admin-active-jobs-count">${data.active_jobs || 0}</div>
|
|
<div class="stat-desc">Laufende Druckaufträge</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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>
|
|
</div>
|
|
<div class="stat-title">Erfolgsrate</div>
|
|
<div class="stat-value" id="admin-success-rate">${data.success_rate || '0%'}</div>
|
|
<div class="stat-desc">Erfolgreiche Druckaufträge</div>
|
|
</div>
|
|
`;
|
|
|
|
console.log('✅ Admin-Statistiken erfolgreich aktualisiert:', data);
|
|
} catch (error) {
|
|
console.error('Error loading admin stats:', error);
|
|
showNotification('Fehler beim Laden der Admin-Statistiken', 'error');
|
|
}
|
|
}
|
|
|
|
// Lade Benutzer für die Benutzerverwaltung
|
|
async function loadUsers() {
|
|
try {
|
|
const response = await fetch('/api/users');
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Laden der Benutzer');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Benutzer in der Tabelle anzeigen
|
|
const userTableBody = document.querySelector('#users-tab table tbody');
|
|
if (!userTableBody) return;
|
|
|
|
let html = '';
|
|
if (data.users && data.users.length > 0) {
|
|
data.users.forEach(user => {
|
|
html += `
|
|
<tr class="border-b border-gray-200 dark:border-gray-700">
|
|
<td class="px-4 py-3">${user.id}</td>
|
|
<td class="px-4 py-3">${user.name || '-'}</td>
|
|
<td class="px-4 py-3">${user.email}</td>
|
|
<td class="px-4 py-3">
|
|
<span class="px-2 py-1 text-xs rounded-full ${user.active ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'}">
|
|
${user.active ? 'Aktiv' : 'Inaktiv'}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3">${user.role || 'Benutzer'}</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex justify-end space-x-2">
|
|
<button onclick="editUser(${user.id})" class="p-1 text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
</button>
|
|
<button onclick="showDeleteConfirmation(${user.id}, 'user', '${user.name || user.email}', deleteUser)" class="p-1 text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-200">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
} else {
|
|
html = `
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-6 text-center text-gray-500 dark:text-gray-400">
|
|
Keine Benutzer gefunden
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
userTableBody.innerHTML = html;
|
|
} catch (error) {
|
|
console.error('Error loading users:', error);
|
|
showNotification('Fehler beim Laden der Benutzer', 'error');
|
|
}
|
|
}
|
|
|
|
// Lade Drucker für die Druckerverwaltung
|
|
async function loadPrinters() {
|
|
try {
|
|
const response = await fetch('/api/printers');
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Laden der Drucker');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Drucker in der Tabelle anzeigen
|
|
const printerTableBody = document.querySelector('#printers-tab table tbody');
|
|
if (!printerTableBody) return;
|
|
|
|
let html = '';
|
|
if (data.printers && data.printers.length > 0) {
|
|
data.printers.forEach(printer => {
|
|
html += `
|
|
<tr class="border-b border-gray-200 dark:border-gray-700">
|
|
<td class="px-4 py-3">${printer.id}</td>
|
|
<td class="px-4 py-3">${printer.name}</td>
|
|
<td class="px-4 py-3">${printer.model || '-'}</td>
|
|
<td class="px-4 py-3">${printer.ip_address || '-'}</td>
|
|
<td class="px-4 py-3">${printer.location || '-'}</td>
|
|
<td class="px-4 py-3">
|
|
<span class="px-2 py-1 text-xs rounded-full ${printer.status === 'online' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'}">
|
|
${printer.status === 'online' ? 'Online' : 'Offline'}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex justify-end space-x-2">
|
|
<button onclick="editPrinter(${printer.id})" class="p-1 text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
</button>
|
|
<button onclick="showDeleteConfirmation(${printer.id}, 'printer', '${printer.name}', deletePrinter)" class="p-1 text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-200">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
} else {
|
|
html = `
|
|
<tr>
|
|
<td colspan="7" class="px-4 py-6 text-center text-gray-500 dark:text-gray-400">
|
|
Keine Drucker gefunden
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
printerTableBody.innerHTML = html;
|
|
} catch (error) {
|
|
console.error('Error loading printers:', error);
|
|
showNotification('Fehler beim Laden der Drucker', 'error');
|
|
}
|
|
}
|
|
|
|
// Lade Scheduler-Status
|
|
async function loadSchedulerStatus() {
|
|
try {
|
|
const response = await fetch('/api/scheduler/status');
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Laden des Scheduler-Status');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Status-Anzeige aktualisieren
|
|
const statusIndicator = document.getElementById('scheduler-status-indicator');
|
|
const statusText = document.getElementById('scheduler-status-text');
|
|
const startSchedulerBtn = document.getElementById('start-scheduler');
|
|
const stopSchedulerBtn = document.getElementById('stop-scheduler');
|
|
|
|
if (statusIndicator && statusText) {
|
|
if (data.active) {
|
|
statusIndicator.classList.remove('bg-red-500');
|
|
statusIndicator.classList.add('bg-green-500');
|
|
statusText.textContent = 'Aktiv';
|
|
|
|
if (startSchedulerBtn && stopSchedulerBtn) {
|
|
startSchedulerBtn.disabled = true;
|
|
stopSchedulerBtn.disabled = false;
|
|
}
|
|
} else {
|
|
statusIndicator.classList.remove('bg-green-500');
|
|
statusIndicator.classList.add('bg-red-500');
|
|
statusText.textContent = 'Inaktiv';
|
|
|
|
if (startSchedulerBtn && stopSchedulerBtn) {
|
|
startSchedulerBtn.disabled = false;
|
|
stopSchedulerBtn.disabled = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Scheduler-Details aktualisieren
|
|
const schedulerDetails = document.getElementById('scheduler-details');
|
|
if (schedulerDetails) {
|
|
schedulerDetails.innerHTML = `
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Letzte Ausführung</h4>
|
|
<p class="text-gray-800 dark:text-gray-100">${data.last_run ? new Date(data.last_run).toLocaleString('de-DE') : 'Nie'}</p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Nächste Ausführung</h4>
|
|
<p class="text-gray-800 dark:text-gray-100">${data.next_run ? new Date(data.next_run).toLocaleString('de-DE') : 'Nicht geplant'}</p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Ausführungsintervall</h4>
|
|
<p class="text-gray-800 dark:text-gray-100">${data.interval || '60'} Sekunden</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Verarbeitete Jobs</h4>
|
|
<p class="text-gray-800 dark:text-gray-100">${data.processed_jobs || 0} Jobs seit dem letzten Neustart</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Job-Warteschlange aktualisieren
|
|
const jobQueueContainer = document.getElementById('job-queue');
|
|
if (jobQueueContainer && data.pending_jobs) {
|
|
let queueHtml = '';
|
|
|
|
if (data.pending_jobs.length > 0) {
|
|
queueHtml = `
|
|
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
|
|
<table class="min-w-full">
|
|
<thead class="bg-gray-50 dark:bg-gray-700">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Job ID</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Geplant für</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
`;
|
|
|
|
data.pending_jobs.forEach(job => {
|
|
queueHtml += `
|
|
<tr>
|
|
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">${job.id}</td>
|
|
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">${job.name}</td>
|
|
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">${new Date(job.start_time).toLocaleString('de-DE')}</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
|
|
Warten
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
queueHtml += `
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`;
|
|
} else {
|
|
queueHtml = `
|
|
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 text-center">
|
|
<p class="text-gray-500 dark:text-gray-400">Keine ausstehenden Jobs in der Warteschlange</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
jobQueueContainer.innerHTML = queueHtml;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading scheduler status:', error);
|
|
showNotification('Fehler beim Laden des Scheduler-Status', 'error');
|
|
}
|
|
}
|
|
|
|
// Lade Systemstatistiken
|
|
async function loadSystemStats() {
|
|
try {
|
|
const response = await fetch('/api/system/stats');
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Laden der Systemstatistiken');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// CPU-Auslastung
|
|
const cpuUsageElement = document.getElementById('cpu-usage');
|
|
if (cpuUsageElement) {
|
|
cpuUsageElement.style.width = `${data.cpu_usage || 0}%`;
|
|
cpuUsageElement.textContent = `${data.cpu_usage || 0}%`;
|
|
}
|
|
|
|
// RAM-Auslastung
|
|
const ramUsageElement = document.getElementById('ram-usage');
|
|
if (ramUsageElement) {
|
|
ramUsageElement.style.width = `${data.ram_usage_percent || 0}%`;
|
|
ramUsageElement.textContent = `${data.ram_usage_percent || 0}%`;
|
|
}
|
|
|
|
// Speichernutzung
|
|
const diskUsageElement = document.getElementById('disk-usage');
|
|
if (diskUsageElement) {
|
|
diskUsageElement.style.width = `${data.disk_usage_percent || 0}%`;
|
|
diskUsageElement.textContent = `${data.disk_usage_percent || 0}%`;
|
|
}
|
|
|
|
// Weitere Systemdetails
|
|
const systemDetailsElement = document.getElementById('system-details');
|
|
if (systemDetailsElement) {
|
|
systemDetailsElement.innerHTML = `
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">System</h4>
|
|
<p class="text-gray-800 dark:text-gray-100">${data.os_name || 'Unbekannt'} ${data.os_version || ''}</p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Laufzeit</h4>
|
|
<p class="text-gray-800 dark:text-gray-100">${data.uptime || 'Unbekannt'}</p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Python-Version</h4>
|
|
<p class="text-gray-800 dark:text-gray-100">${data.python_version || 'Unbekannt'}</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Server-Zeit</h4>
|
|
<p class="text-gray-800 dark:text-gray-100">${data.server_time ? new Date(data.server_time).toLocaleString('de-DE') : 'Unbekannt'}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Systemereignisse anzeigen
|
|
const systemEventsElement = document.getElementById('system-events');
|
|
if (systemEventsElement && data.recent_events) {
|
|
let eventsHtml = '';
|
|
|
|
if (data.recent_events.length > 0) {
|
|
eventsHtml = '<ul class="divide-y divide-gray-200 dark:divide-gray-700">';
|
|
|
|
data.recent_events.forEach(event => {
|
|
let eventTypeClass = 'text-blue-600 dark:text-blue-400';
|
|
|
|
switch (event.type.toLowerCase()) {
|
|
case 'error':
|
|
eventTypeClass = 'text-red-600 dark:text-red-400';
|
|
break;
|
|
case 'warning':
|
|
eventTypeClass = 'text-yellow-600 dark:text-yellow-400';
|
|
break;
|
|
case 'success':
|
|
eventTypeClass = 'text-green-600 dark:text-green-400';
|
|
break;
|
|
}
|
|
|
|
eventsHtml += `
|
|
<li class="py-3">
|
|
<div class="flex items-start">
|
|
<span class="${eventTypeClass} mr-2">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</span>
|
|
<div>
|
|
<p class="text-sm text-gray-800 dark:text-gray-200">${event.message}</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">${new Date(event.timestamp).toLocaleString('de-DE')}</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
`;
|
|
});
|
|
|
|
eventsHtml += '</ul>';
|
|
} else {
|
|
eventsHtml = '<p class="text-center text-gray-500 dark:text-gray-400 py-4">Keine Ereignisse vorhanden</p>';
|
|
}
|
|
|
|
systemEventsElement.innerHTML = eventsHtml;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading system stats:', error);
|
|
showNotification('Fehler beim Laden der Systemstatistiken', 'error');
|
|
}
|
|
}
|
|
|
|
// Lade Logs
|
|
async function loadLogs() {
|
|
try {
|
|
const response = await fetch('/api/logs');
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Laden der Logs');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Logs im globalen Objekt speichern
|
|
window.logsData = data.logs || [];
|
|
window.filteredLogs = [...window.logsData];
|
|
|
|
// Logs rendern
|
|
renderLogs();
|
|
} catch (error) {
|
|
console.error('Error loading logs:', error);
|
|
showNotification('Fehler beim Laden der Logs', 'error');
|
|
}
|
|
}
|
|
|
|
// Hilfsfunktion zum Rendern der Logs
|
|
function renderLogs() {
|
|
const logsContainer = document.getElementById('logs-container');
|
|
if (!logsContainer) return;
|
|
|
|
if (!window.filteredLogs || window.filteredLogs.length === 0) {
|
|
logsContainer.innerHTML = '<div class="p-8 text-center text-gray-500 dark:text-gray-400">Keine Logs gefunden</div>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
window.filteredLogs.forEach(log => {
|
|
let levelClass = '';
|
|
|
|
switch (log.level.toLowerCase()) {
|
|
case 'error':
|
|
levelClass = 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
|
|
break;
|
|
case 'warning':
|
|
levelClass = 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
|
|
break;
|
|
case 'info':
|
|
levelClass = 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
|
|
break;
|
|
case 'debug':
|
|
levelClass = 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
|
|
break;
|
|
default:
|
|
levelClass = 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
|
|
}
|
|
|
|
html += `
|
|
<div class="log-entry border-l-4 border-gray-300 dark:border-gray-600 pl-4 py-3 mb-3">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div>
|
|
<span class="px-2 py-1 text-xs rounded-full ${levelClass} mr-2">
|
|
${log.level}
|
|
</span>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">
|
|
${log.timestamp ? new Date(log.timestamp).toLocaleString('de-DE') : ''}
|
|
</span>
|
|
</div>
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
|
${log.source || 'System'}
|
|
</div>
|
|
</div>
|
|
<div class="text-sm text-gray-800 dark:text-gray-200">
|
|
${log.message}
|
|
</div>
|
|
${log.details ? `
|
|
<div class="mt-1 text-xs text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto">
|
|
<pre>${log.details}</pre>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
logsContainer.innerHTML = html;
|
|
}
|
|
|
|
// Funktionen zum Löschen von Benutzern und Druckern
|
|
async function deleteUser(userId) {
|
|
try {
|
|
const response = await fetch(`/api/users/${userId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-Token': getCSRFToken()
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Löschen des Benutzers');
|
|
}
|
|
|
|
showNotification('Benutzer erfolgreich gelöscht', 'success');
|
|
loadUsers();
|
|
} catch (error) {
|
|
console.error('Error deleting user:', error);
|
|
showNotification(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function deletePrinter(printerId) {
|
|
try {
|
|
const response = await fetch(`/api/printers/${printerId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-Token': getCSRFToken()
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Löschen des Druckers');
|
|
}
|
|
|
|
showNotification('Drucker erfolgreich gelöscht', 'success');
|
|
loadPrinters();
|
|
} catch (error) {
|
|
console.error('Error deleting printer:', error);
|
|
showNotification(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Scheduler-Steuerungsfunktionen
|
|
async function startScheduler() {
|
|
try {
|
|
const response = await fetch('/api/scheduler/start', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': getCSRFToken()
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Starten des Schedulers');
|
|
}
|
|
|
|
showNotification('Scheduler erfolgreich gestartet', 'success');
|
|
loadSchedulerStatus();
|
|
} catch (error) {
|
|
console.error('Error starting scheduler:', error);
|
|
showNotification(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function stopScheduler() {
|
|
try {
|
|
const response = await fetch('/api/scheduler/stop', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': getCSRFToken()
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Stoppen des Schedulers');
|
|
}
|
|
|
|
showNotification('Scheduler erfolgreich gestoppt', 'success');
|
|
loadSchedulerStatus();
|
|
} catch (error) {
|
|
console.error('Error stopping scheduler:', error);
|
|
showNotification(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Hilfs-Funktion, um den CSRF-Token aus den Meta-Tags zu bekommen
|
|
function getCSRFToken() {
|
|
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
|
|
}
|
|
|
|
// Refresh all data
|
|
function refreshAllData() {
|
|
loadAdminStats();
|
|
|
|
const activeTab = document.querySelector('.nav-tab.active');
|
|
if (activeTab) {
|
|
const tabName = activeTab.getAttribute('data-tab');
|
|
activateTab(tabName);
|
|
}
|
|
|
|
showNotification('Daten wurden aktualisiert', 'success');
|
|
}
|
|
|
|
/**
|
|
* Show a notification message
|
|
* @param {string} message - The message to show
|
|
* @param {string} type - The type of notification (success, error, warning, info)
|
|
*/
|
|
function showNotification(message, type = 'info') {
|
|
const notification = document.getElementById('notification');
|
|
const messageEl = document.getElementById('notification-message');
|
|
const iconEl = document.getElementById('notification-icon');
|
|
|
|
if (!notification || !messageEl || !iconEl) return;
|
|
|
|
// Set message
|
|
messageEl.textContent = message;
|
|
|
|
// Remove all previous classes
|
|
notification.classList.remove('notification-success', 'notification-error', 'notification-warning', 'notification-info');
|
|
|
|
// Add appropriate class based on type
|
|
notification.classList.add(`notification-${type}`);
|
|
|
|
// Set appropriate icon
|
|
let icon = '';
|
|
switch(type) {
|
|
case 'success':
|
|
icon = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />';
|
|
break;
|
|
case 'error':
|
|
icon = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />';
|
|
break;
|
|
case 'warning':
|
|
icon = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />';
|
|
break;
|
|
case 'info':
|
|
default:
|
|
icon = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />';
|
|
break;
|
|
}
|
|
|
|
iconEl.innerHTML = icon;
|
|
|
|
// Show notification
|
|
notification.classList.remove('hidden');
|
|
notification.classList.add('show');
|
|
|
|
// Hide after 5 seconds
|
|
setTimeout(() => {
|
|
notification.classList.remove('show');
|
|
setTimeout(() => {
|
|
notification.classList.add('hidden');
|
|
}, 300);
|
|
}, 5000);
|
|
}
|
|
|
|
// Weitere Funktionen aus dem ursprünglichen Code...
|