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

🎉 Improved backend structure & documentation, added new GLASSMORPHISM_NOTIFICATIONS feature 🎨

Browse Source
This commit is contained in:
Till Tomczak
2025-06-01 04:36:33 +02:00
parent 19eeed46fb
commit f0fe4c29d5
31 changed files with 1349 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
backend/templates/admin.html
View File

@ -575,4 +575,225 @@
</div>
</div>
</div>
<!-- Wartungs-Modal -->
<div id="maintenance-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden">
<div class="flex items-center justify-center h-full p-4">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-2xl max-w-md w-full">
<div class="text-center mb-6">
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 mb-4">
<svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<h3 class="text-lg font-medium text-slate-900 dark:text-white mb-2">System-Wartung</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Wählen Sie eine Wartungsoption:</p>
</div>
<div class="space-y-3 mb-6">
<button id="modal-clear-cache" class="w-full px-4 py-3 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-all duration-300 text-sm font-medium">
🗑️ Cache leeren
</button>
<button id="modal-optimize-db" class="w-full px-4 py-3 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-all duration-300 text-sm font-medium">
🔧 Datenbank optimieren
</button>
<button id="modal-create-backup" class="w-full px-4 py-3 bg-purple-500 text-white rounded-xl hover:bg-purple-600 transition-all duration-300 text-sm font-medium">
💾 Backup erstellen
</button>
<button id="modal-advanced-settings" class="w-full px-4 py-3 bg-slate-500 text-white rounded-xl hover:bg-slate-600 transition-all duration-300 text-sm font-medium">
⚙️ Erweiterte Einstellungen
</button>
</div>
<div class="flex justify-end">
<button id="close-maintenance-modal" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors text-sm font-medium">
Schließen
</button>
</div>
</div>
</div>
</div>
<script>
// ===== WARTUNGS-FUNKTIONALITÄT =====
// Wartung Modal Event Listeners
document.addEventListener('DOMContentLoaded', function() {
const maintenanceBtn = document.getElementById('maintenance-btn');
const maintenanceModal = document.getElementById('maintenance-modal');
const closeModalBtn = document.getElementById('close-maintenance-modal');
// Modal öffnen
if (maintenanceBtn) {
maintenanceBtn.addEventListener('click', function() {
maintenanceModal.classList.remove('hidden');
});
}
// Modal schließen
if (closeModalBtn) {
closeModalBtn.addEventListener('click', function() {
maintenanceModal.classList.add('hidden');
});
}
// Modal schließen beim Klick außerhalb
maintenanceModal.addEventListener('click', function(e) {
if (e.target === maintenanceModal) {
maintenanceModal.classList.add('hidden');
}
});
// Wartungs-Funktionen
document.getElementById('modal-clear-cache').addEventListener('click', clearCache);
document.getElementById('modal-optimize-db').addEventListener('click', optimizeDatabase);
document.getElementById('modal-create-backup').addEventListener('click', createBackup);
document.getElementById('modal-advanced-settings').addEventListener('click', function() {
window.location.href = '{{ url_for("admin_settings") }}';
});
});
// Notification anzeigen
function showNotification(message, type = 'info') {
// Erstelle temporäre Notification
const notification = document.createElement('div');
notification.className = `fixed top-4 right-4 z-50 p-4 rounded-xl shadow-lg max-w-sm transition-all duration-300 ${
type === 'success' ? 'bg-green-500 text-white' :
type === 'error' ? 'bg-red-500 text-white' :
'bg-blue-500 text-white'
}`;
notification.innerHTML = `
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
${type === 'success' ? '✅' : type === 'error' ? '❌' : 'ℹ️'}
</div>
<div class="text-sm font-medium">${message}</div>
</div>
`;
document.body.appendChild(notification);
// Animation einblenden
setTimeout(() => {
notification.style.transform = 'translateX(0)';
notification.style.opacity = '1';
}, 100);
// Automatisch entfernen nach 5 Sekunden
setTimeout(() => {
notification.style.transform = 'translateX(100%)';
notification.style.opacity = '0';
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification);
}
}, 300);
}, 5000);
}
// CSRF Token
function getCsrfToken() {
const token = document.querySelector('meta[name="csrf-token"]');
return token ? token.getAttribute('content') : '';
}
// Cache leeren
async function clearCache() {
if (!confirm('Möchten Sie den Cache wirklich leeren?')) return;
try {
showNotification('Cache wird geleert...', 'info');
const response = await fetch('/api/admin/cache/clear', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCsrfToken()
}
});
const result = await response.json();
if (response.ok && result.success) {
showNotification('Cache erfolgreich geleert', 'success');
// Modal schließen
document.getElementById('maintenance-modal').classList.add('hidden');
} else {
showNotification(result.message || 'Fehler beim Leeren des Cache', 'error');
}
} catch (error) {
showNotification('Netzwerkfehler: ' + error.message, 'error');
}
}
// Datenbank optimieren
async function optimizeDatabase() {
if (!confirm('Möchten Sie die Datenbank optimieren? Dies kann einige Minuten dauern.')) return;
try {
showNotification('Datenbank wird optimiert...', 'info');
const response = await fetch('/api/admin/database/optimize', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCsrfToken()
}
});
const result = await response.json();
if (response.ok && result.success) {
showNotification('Datenbank erfolgreich optimiert', 'success');
// Modal schließen
document.getElementById('maintenance-modal').classList.add('hidden');
} else {
showNotification(result.message || 'Fehler bei der Datenbankoptimierung', 'error');
}
} catch (error) {
showNotification('Netzwerkfehler: ' + error.message, 'error');
}
}
// Backup erstellen
async function createBackup() {
if (!confirm('Möchten Sie ein Backup erstellen?')) return;
try {
showNotification('Backup wird erstellt...', 'info');
const response = await fetch('/api/admin/backup/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCsrfToken()
}
});
const result = await response.json();
if (response.ok && result.success) {
showNotification('Backup erfolgreich erstellt', 'success');
// Modal schließen
document.getElementById('maintenance-modal').classList.add('hidden');
} else {
showNotification(result.message || 'Fehler beim Erstellen des Backups', 'error');
}
} catch (error) {
showNotification('Netzwerkfehler: ' + error.message, 'error');
}
}
// Escape-Taste um Modal zu schließen
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
const modal = document.getElementById('maintenance-modal');
if (!modal.classList.contains('hidden')) {
modal.classList.add('hidden');
}
}
});
</script>
{% endblock %}

5
backend/templates/index.html
View File

@ -1108,10 +1108,7 @@ function setupErrorHandling() {
function setupPerformanceOptimizations() {
// Preload critical resources
const preloadLinks = [
'/api/statistics/public',
'/static/icons/iso-27001.svg',
'/static/icons/mercedes-star.svg',
'/static/icons/gdpr.svg'
'/api/statistics/public'
];
preloadLinks.forEach(href => {