981 lines
46 KiB
HTML
981 lines
46 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Erweiterte Einstellungen - Mercedes-Benz TBA Marienfelde{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
<!-- CSRF Token für AJAX-Anfragen -->
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<style>
|
|
:root {
|
|
/* Mercedes-Benz Corporate Colors */
|
|
--mb-silver: #c4c4c4;
|
|
--mb-dark-silver: #a0a0a0;
|
|
--mb-black: #000000;
|
|
--mb-white: #ffffff;
|
|
--mb-blue: #0f4c75;
|
|
--mb-light-blue: #3282b8;
|
|
--mb-accent: #00adef;
|
|
--mb-success: #00d4aa;
|
|
--mb-warning: #ffb800;
|
|
--mb-error: #e74c3c;
|
|
|
|
/* Gradients */
|
|
--mb-gradient-primary: linear-gradient(135deg, var(--mb-blue) 0%, var(--mb-light-blue) 100%);
|
|
--mb-gradient-silver: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
--mb-gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
|
|
|
/* Shadows */
|
|
--mb-shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--mb-shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
--mb-shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.mb-card {
|
|
background: var(--mb-gradient-silver);
|
|
border: 1px solid rgba(196, 196, 196, 0.3);
|
|
border-radius: 20px;
|
|
box-shadow: var(--mb-shadow-medium);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mb-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--mb-gradient-primary);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.mb-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dark .mb-card {
|
|
background: var(--mb-gradient-dark);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.mb-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--mb-shadow-large);
|
|
}
|
|
|
|
.dark .mb-card:hover {
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.mb-stat-card {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid rgba(196, 196, 196, 0.2);
|
|
border-radius: 16px;
|
|
padding: 1.5rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.dark .mb-stat-card {
|
|
background: rgba(26, 26, 26, 0.9);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.mb-stat-card:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: var(--mb-shadow-medium);
|
|
}
|
|
|
|
.mb-stat-card .stat-icon {
|
|
background: var(--mb-gradient-primary);
|
|
border-radius: 12px;
|
|
padding: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--mb-shadow-light);
|
|
}
|
|
|
|
.mb-toggle {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 64px;
|
|
height: 36px;
|
|
}
|
|
|
|
.mb-toggle input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.mb-toggle-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--mb-silver);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-radius: 36px;
|
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.mb-toggle-slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 28px;
|
|
width: 28px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background: var(--mb-white);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-radius: 50%;
|
|
box-shadow: var(--mb-shadow-light);
|
|
}
|
|
|
|
.mb-toggle input:checked + .mb-toggle-slider {
|
|
background: var(--mb-gradient-primary);
|
|
}
|
|
|
|
.mb-toggle input:checked + .mb-toggle-slider:before {
|
|
transform: translateX(28px);
|
|
box-shadow: var(--mb-shadow-medium);
|
|
}
|
|
|
|
.mb-btn {
|
|
background: var(--mb-gradient-primary);
|
|
color: var(--mb-white);
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 0.875rem 1.5rem;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: var(--mb-shadow-light);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mb-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.mb-btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.mb-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--mb-shadow-medium);
|
|
}
|
|
|
|
.mb-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.mb-btn-success {
|
|
background: linear-gradient(135deg, var(--mb-success) 0%, #00b894 100%);
|
|
}
|
|
|
|
.mb-btn-warning {
|
|
background: linear-gradient(135deg, var(--mb-warning) 0%, #f39c12 100%);
|
|
}
|
|
|
|
.mb-btn-error {
|
|
background: linear-gradient(135deg, var(--mb-error) 0%, #c0392b 100%);
|
|
}
|
|
|
|
.mb-btn-secondary {
|
|
background: linear-gradient(135deg, var(--mb-silver) 0%, var(--mb-dark-silver) 100%);
|
|
color: var(--mb-black);
|
|
}
|
|
|
|
.dark .mb-btn-secondary {
|
|
color: var(--mb-white);
|
|
}
|
|
|
|
.mb-input {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 2px solid rgba(196, 196, 196, 0.3);
|
|
border-radius: 12px;
|
|
padding: 0.875rem 1rem;
|
|
font-size: 0.875rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.dark .mb-input {
|
|
background: rgba(26, 26, 26, 0.9);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
color: var(--mb-white);
|
|
}
|
|
|
|
.mb-input:focus {
|
|
outline: none;
|
|
border-color: var(--mb-accent);
|
|
box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.mb-select {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 2px solid rgba(196, 196, 196, 0.3);
|
|
border-radius: 12px;
|
|
padding: 0.875rem 1rem;
|
|
font-size: 0.875rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
backdrop-filter: blur(10px);
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
background-position: right 0.5rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1.5em 1.5em;
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
.dark .mb-select {
|
|
background: rgba(26, 26, 26, 0.9);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
color: var(--mb-white);
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.mb-select:focus {
|
|
outline: none;
|
|
border-color: var(--mb-accent);
|
|
box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.1);
|
|
}
|
|
|
|
.mb-status-indicator {
|
|
background: rgba(0, 212, 170, 0.1);
|
|
border: 1px solid rgba(0, 212, 170, 0.3);
|
|
border-radius: 12px;
|
|
padding: 0.75rem 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.mb-status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--mb-success);
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.mb-header-gradient {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(196, 196, 196, 0.2);
|
|
}
|
|
|
|
.dark .mb-header-gradient {
|
|
background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
|
|
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.mb-page-background {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.dark .mb-page-background {
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
|
|
}
|
|
|
|
.mb-loading-overlay {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.mb-loading-card {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
box-shadow: var(--mb-shadow-large);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.dark .mb-loading-card {
|
|
background: rgba(26, 26, 26, 0.95);
|
|
}
|
|
|
|
.mb-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid rgba(0, 173, 239, 0.3);
|
|
border-top: 3px solid var(--mb-accent);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div>
|
|
|
|
<!-- Header -->
|
|
<div class="mb-header-gradient sticky top-0 z-40 rounded-t-3xl rounded-b-3xl">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<a href="{{ url_for('admin_page') }}" class="p-3 hover:bg-black/5 dark:hover:bg-white/5 rounded-2xl transition-all duration-300 group">
|
|
<svg class="w-6 h-6 text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
|
</svg>
|
|
</a>
|
|
<div>
|
|
<h1 class="text-3xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">
|
|
Erweiterte Einstellungen
|
|
</h1>
|
|
<p class="text-slate-600 dark:text-slate-400 mt-1 font-medium">System-Optimierung und Wartungsoptionen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Indicator -->
|
|
<div class="mb-status-indicator rounded-2xl">
|
|
<div class="mb-status-dot"></div>
|
|
<span class="text-green-700 dark:text-green-400 font-semibold">System Online</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
<!-- System-Übersicht -->
|
|
<div class="mb-card p-8 mb-8">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="p-3 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">System-Übersicht</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="mb-stat-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 font-medium">Registrierte Benutzer</p>
|
|
<p class="text-3xl font-bold text-slate-900 dark:text-white mt-1">{{ stats.total_users }}</p>
|
|
</div>
|
|
<div class="stat-icon">
|
|
<svg class="w-6 h-6 text-white" 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>
|
|
</div>
|
|
|
|
<div class="mb-stat-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 font-medium">Aktive Drucker</p>
|
|
<p class="text-3xl font-bold text-slate-900 dark:text-white mt-1">{{ stats.active_printers }}/{{ stats.total_printers }}</p>
|
|
</div>
|
|
<div class="stat-icon">
|
|
<svg class="w-6 h-6 text-white" 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 2m2 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>
|
|
</div>
|
|
|
|
<div class="mb-stat-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 font-medium">Warteschlange</p>
|
|
<p class="text-3xl font-bold text-slate-900 dark:text-white mt-1">{{ stats.pending_jobs }}</p>
|
|
</div>
|
|
<div class="stat-icon">
|
|
<svg class="w-6 h-6 text-white" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
|
|
<!-- Optimierungs-Einstellungen -->
|
|
<div class="mb-card p-8">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="p-3 bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl">
|
|
<svg class="w-6 h-6 text-white" 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>
|
|
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Optimierungs-Einstellungen</h2>
|
|
</div>
|
|
|
|
<form id="optimization-form" class="space-y-6">
|
|
<!-- Algorithmus-Auswahl -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Optimierungs-Algorithmus</label>
|
|
<select name="algorithm" id="algorithm" class="mb-select w-full">
|
|
<option value="round_robin" {{ 'selected' if optimization_settings.algorithm == 'round_robin' else '' }}>Round Robin (Gleichmäßige Verteilung)</option>
|
|
<option value="load_balance" {{ 'selected' if optimization_settings.algorithm == 'load_balance' else '' }}>Load Balancing (Lastverteilung)</option>
|
|
<option value="priority_based" {{ 'selected' if optimization_settings.algorithm == 'priority_based' else '' }}>Prioritätsbasiert</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Toggle-Optionen -->
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between p-4 bg-slate-50/50 dark:bg-slate-800/50 rounded-xl">
|
|
<div>
|
|
<label class="text-sm font-semibold text-slate-700 dark:text-slate-300">Entfernung berücksichtigen</label>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Drucker-Standort bei Optimierung einbeziehen</p>
|
|
</div>
|
|
<label class="mb-toggle">
|
|
<input type="checkbox" name="consider_distance" {{ 'checked' if optimization_settings.consider_distance else '' }}>
|
|
<span class="mb-toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-4 bg-slate-50/50 dark:bg-slate-800/50 rounded-xl">
|
|
<div>
|
|
<label class="text-sm font-semibold text-slate-700 dark:text-slate-300">Rüstzeiten minimieren</label>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Materialwechsel-Zeiten reduzieren</p>
|
|
</div>
|
|
<label class="mb-toggle">
|
|
<input type="checkbox" name="minimize_changeover" {{ 'checked' if optimization_settings.minimize_changeover else '' }}>
|
|
<span class="mb-toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-4 bg-slate-50/50 dark:bg-slate-800/50 rounded-xl">
|
|
<div>
|
|
<label class="text-sm font-semibold text-slate-700 dark:text-slate-300">Auto-Optimierung</label>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Automatische Optimierung alle 30 Minuten</p>
|
|
</div>
|
|
<label class="mb-toggle">
|
|
<input type="checkbox" name="auto_optimization_enabled" {{ 'checked' if optimization_settings.auto_optimization_enabled else '' }}>
|
|
<span class="mb-toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Numerische Einstellungen -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Max. Batch-Größe</label>
|
|
<input type="number" name="max_batch_size" value="{{ optimization_settings.max_batch_size }}" min="1" max="50" class="mb-input w-full">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Zeitfenster (Stunden)</label>
|
|
<input type="number" name="time_window" value="{{ optimization_settings.time_window }}" min="1" max="168" class="mb-input w-full">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Speichern Button -->
|
|
<button type="submit" class="mb-btn w-full">
|
|
<span class="flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
|
|
</svg>
|
|
<span>Einstellungen speichern</span>
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Wartungs-Aktionen -->
|
|
<div class="mb-card p-8">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="p-3 bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl">
|
|
<svg class="w-6 h-6 text-white" 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>
|
|
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Wartungs-Aktionen</h2>
|
|
</div>
|
|
|
|
<!-- Wartungs-Informationen -->
|
|
<div class="bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700 rounded-xl p-6 mb-6 border border-slate-200 dark:border-slate-600">
|
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-4">Wartungs-Status</h3>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-slate-600 dark:text-slate-400 font-medium">Letztes Backup:</span>
|
|
<span class="text-slate-900 dark:text-white font-semibold">{{ maintenance_info.last_backup }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-slate-600 dark:text-slate-400 font-medium">Log-Dateien:</span>
|
|
<span class="text-slate-900 dark:text-white font-semibold">{{ maintenance_info.log_files_count }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-slate-600 dark:text-slate-400 font-medium">Cache-Größe:</span>
|
|
<span class="text-slate-900 dark:text-white font-semibold">{{ maintenance_info.cache_size }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wartungs-Buttons -->
|
|
<div class="space-y-3">
|
|
<button id="advanced-clear-cache" class="mb-btn mb-btn-secondary w-full">
|
|
<span class="flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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>
|
|
<span>System-Cache leeren</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button id="advanced-optimize-db" class="mb-btn mb-btn-success w-full">
|
|
<span class="flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
|
|
</svg>
|
|
<span>Datenbank optimieren</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button id="advanced-create-backup" class="mb-btn w-full">
|
|
<span class="flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
|
|
</svg>
|
|
<span>Vollständiges Backup erstellen</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button id="advanced-cleanup-logs" class="mb-btn mb-btn-warning w-full">
|
|
<span class="flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
<span>Log-Dateien bereinigen</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button id="advanced-system-check" class="mb-btn w-full" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);">
|
|
<span class="flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" 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>
|
|
<span>System-Integritätsprüfung</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Erweiterte Optionen -->
|
|
<div class="mb-card p-8 mt-8">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="p-3 bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-xl">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Erweiterte Optionen</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Debug-Modus -->
|
|
<div class="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700 rounded-xl p-6 border border-slate-200 dark:border-slate-600 transition-all duration-300 hover:shadow-lg">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="p-2 bg-red-500 rounded-lg">
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Debug-Modus</h3>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Erweiterte Protokollierung für Fehlerdiagnose aktivieren</p>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-slate-700 dark:text-slate-300">Status</span>
|
|
<label class="mb-toggle">
|
|
<input type="checkbox" id="debug-mode">
|
|
<span class="mb-toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wartungsmodus -->
|
|
<div class="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700 rounded-xl p-6 border border-slate-200 dark:border-slate-600 transition-all duration-300 hover:shadow-lg">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="p-2 bg-yellow-500 rounded-lg">
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Wartungsmodus</h3>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">System für Wartungsarbeiten temporär sperren</p>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-slate-700 dark:text-slate-300">Status</span>
|
|
<label class="mb-toggle">
|
|
<input type="checkbox" id="maintenance-mode">
|
|
<span class="mb-toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Performance-Monitoring -->
|
|
<div class="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700 rounded-xl p-6 border border-slate-200 dark:border-slate-600 transition-all duration-300 hover:shadow-lg">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="p-2 bg-green-500 rounded-lg">
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Performance-Monitoring</h3>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Detaillierte Leistungsüberwachung und Metriken</p>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-slate-700 dark:text-slate-300">Status</span>
|
|
<label class="mb-toggle">
|
|
<input type="checkbox" id="performance-monitoring">
|
|
<span class="mb-toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="loading-overlay" class="fixed inset-0 mb-loading-overlay z-50 hidden">
|
|
<div class="flex items-center justify-center h-full">
|
|
<div class="mb-loading-card">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="mb-spinner"></div>
|
|
<span class="text-slate-900 dark:text-white font-semibold text-lg">Wird verarbeitet...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ===== ERWEITERTE EINSTELLUNGEN JAVASCRIPT =====
|
|
|
|
class AdvancedSettings {
|
|
constructor() {
|
|
this.csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
this.initializeEventListeners();
|
|
}
|
|
|
|
initializeEventListeners() {
|
|
// Optimierungs-Formular
|
|
const optimizationForm = document.getElementById('optimization-form');
|
|
if (optimizationForm) {
|
|
optimizationForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
this.saveOptimizationSettings(new FormData(optimizationForm));
|
|
});
|
|
}
|
|
|
|
// Wartungs-Buttons
|
|
document.getElementById('advanced-clear-cache')?.addEventListener('click', () => this.clearCache());
|
|
document.getElementById('advanced-optimize-db')?.addEventListener('click', () => this.optimizeDatabase());
|
|
document.getElementById('advanced-create-backup')?.addEventListener('click', () => this.createBackup());
|
|
document.getElementById('advanced-cleanup-logs')?.addEventListener('click', () => this.cleanupLogs());
|
|
document.getElementById('advanced-system-check')?.addEventListener('click', () => this.systemCheck());
|
|
|
|
// Erweiterte Optionen
|
|
document.getElementById('debug-mode')?.addEventListener('change', (e) => this.toggleDebugMode(e.target.checked));
|
|
document.getElementById('maintenance-mode')?.addEventListener('change', (e) => this.toggleMaintenanceMode(e.target.checked));
|
|
document.getElementById('performance-monitoring')?.addEventListener('change', (e) => this.togglePerformanceMonitoring(e.target.checked));
|
|
}
|
|
|
|
async saveOptimizationSettings(formData) {
|
|
try {
|
|
this.showLoading(true);
|
|
|
|
const settings = {
|
|
algorithm: formData.get('algorithm'),
|
|
consider_distance: formData.get('consider_distance') === 'on',
|
|
minimize_changeover: formData.get('minimize_changeover') === 'on',
|
|
auto_optimization_enabled: formData.get('auto_optimization_enabled') === 'on',
|
|
max_batch_size: parseInt(formData.get('max_batch_size')),
|
|
time_window: parseInt(formData.get('time_window'))
|
|
};
|
|
|
|
const response = await fetch('/api/optimization/settings', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken
|
|
},
|
|
body: JSON.stringify(settings)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
this.showNotification('✅ Optimierungs-Einstellungen erfolgreich gespeichert!', 'success');
|
|
} else {
|
|
this.showNotification('❌ Fehler beim Speichern der Einstellungen', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Fehler beim Speichern der Optimierungs-Einstellungen:', error);
|
|
this.showNotification('❌ Fehler beim Speichern der Einstellungen', 'error');
|
|
} finally {
|
|
this.showLoading(false);
|
|
}
|
|
}
|
|
|
|
async clearCache() {
|
|
if (!confirm('🗑️ Möchten Sie wirklich den System-Cache leeren?')) return;
|
|
|
|
try {
|
|
this.showLoading(true);
|
|
|
|
const response = await fetch('/api/admin/maintenance/clear-cache', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
this.showNotification('✅ System-Cache erfolgreich geleert!', 'success');
|
|
} else {
|
|
this.showNotification('❌ Fehler beim Leeren des Cache', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showNotification('❌ Fehler beim Leeren des Cache', 'error');
|
|
} finally {
|
|
this.showLoading(false);
|
|
}
|
|
}
|
|
|
|
async optimizeDatabase() {
|
|
if (!confirm('🔧 Möchten Sie die Datenbank optimieren? Dies kann einige Minuten dauern.')) return;
|
|
|
|
try {
|
|
this.showLoading(true);
|
|
|
|
const response = await fetch('/api/admin/maintenance/optimize-database', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.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');
|
|
} finally {
|
|
this.showLoading(false);
|
|
}
|
|
}
|
|
|
|
async createBackup() {
|
|
if (!confirm('💾 Möchten Sie ein vollständiges System-Backup erstellen?')) return;
|
|
|
|
try {
|
|
this.showLoading(true);
|
|
|
|
const response = await fetch('/api/admin/maintenance/create-backup', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.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');
|
|
} finally {
|
|
this.showLoading(false);
|
|
}
|
|
}
|
|
|
|
async cleanupLogs() {
|
|
if (!confirm('📋 Möchten Sie alte Log-Dateien bereinigen? (älter als 30 Tage)')) return;
|
|
|
|
try {
|
|
this.showLoading(true);
|
|
|
|
const response = await fetch('/api/admin/maintenance/cleanup-logs', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
this.showNotification('✅ Log-Dateien erfolgreich bereinigt!', 'success');
|
|
} else {
|
|
this.showNotification('❌ Fehler beim Bereinigen der Log-Dateien', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showNotification('❌ Fehler beim Bereinigen der Log-Dateien', 'error');
|
|
} finally {
|
|
this.showLoading(false);
|
|
}
|
|
}
|
|
|
|
async systemCheck() {
|
|
try {
|
|
this.showLoading(true);
|
|
|
|
const response = await fetch('/api/admin/maintenance/system-check', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': this.csrfToken
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
this.showNotification('✅ System-Integritätsprüfung abgeschlossen!', 'success');
|
|
} else {
|
|
this.showNotification('❌ Fehler bei der System-Integritätsprüfung', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showNotification('❌ Fehler bei der System-Integritätsprüfung', 'error');
|
|
} finally {
|
|
this.showLoading(false);
|
|
}
|
|
}
|
|
|
|
toggleDebugMode(enabled) {
|
|
console.log('Debug-Modus:', enabled ? 'aktiviert' : 'deaktiviert');
|
|
this.showNotification(`🐛 Debug-Modus ${enabled ? 'aktiviert' : 'deaktiviert'}`, 'info');
|
|
}
|
|
|
|
toggleMaintenanceMode(enabled) {
|
|
console.log('Wartungsmodus:', enabled ? 'aktiviert' : 'deaktiviert');
|
|
this.showNotification(`🚧 Wartungsmodus ${enabled ? 'aktiviert' : 'deaktiviert'}`, enabled ? 'warning' : 'info');
|
|
}
|
|
|
|
togglePerformanceMonitoring(enabled) {
|
|
console.log('Performance-Monitoring:', enabled ? 'aktiviert' : 'deaktiviert');
|
|
this.showNotification(`📈 Performance-Monitoring ${enabled ? 'aktiviert' : 'deaktiviert'}`, 'info');
|
|
}
|
|
|
|
showLoading(show) {
|
|
const overlay = document.getElementById('loading-overlay');
|
|
if (overlay) {
|
|
if (show) {
|
|
overlay.classList.remove('hidden');
|
|
} else {
|
|
overlay.classList.add('hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
showNotification(message, type = 'info') {
|
|
// Erstelle temporäre Notification mit Mercedes-Benz Design
|
|
const notification = document.createElement('div');
|
|
notification.className = `fixed top-6 right-6 z-50 p-4 rounded-xl shadow-2xl max-w-sm transition-all duration-500 transform translate-x-full opacity-0 backdrop-blur-xl border ${
|
|
type === 'success' ? 'bg-gradient-to-r from-green-500 to-green-600 text-white border-green-400' :
|
|
type === 'error' ? 'bg-gradient-to-r from-red-500 to-red-600 text-white border-red-400' :
|
|
type === 'warning' ? 'bg-gradient-to-r from-yellow-500 to-yellow-600 text-white border-yellow-400' :
|
|
'bg-gradient-to-r from-blue-500 to-blue-600 text-white border-blue-400'
|
|
}`;
|
|
|
|
notification.innerHTML = `
|
|
<div class="flex items-center space-x-3">
|
|
<div class="flex-shrink-0 p-1 rounded-lg bg-white/20">
|
|
${type === 'success' ?
|
|
'<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>' :
|
|
type === 'error' ?
|
|
'<svg class="w-5 h-5" 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"/></svg>' :
|
|
type === 'warning' ?
|
|
'<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>' :
|
|
'<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>'
|
|
}
|
|
</div>
|
|
<div class="text-sm font-semibold flex-1">${message}</div>
|
|
<button onclick="this.parentElement.parentElement.remove()" class="ml-auto p-1 rounded-lg hover:bg-white/20 transition-colors">
|
|
<svg class="w-4 h-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"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
// Animation einblenden
|
|
setTimeout(() => {
|
|
notification.style.transform = 'translateX(0)';
|
|
notification.style.opacity = '1';
|
|
}, 100);
|
|
|
|
// Automatisch entfernen nach 5 Sekunden
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.style.transform = 'translateX(100%)';
|
|
notification.style.opacity = '0';
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.parentNode.removeChild(notification);
|
|
}
|
|
}, 500);
|
|
}
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// Initialisierung nach DOM-Laden
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
new AdvancedSettings();
|
|
});
|
|
</script>
|
|
{% endblock %} |