🧹 Finaler Projekt-Cleanup - Alle unnötigen Dateien entfernt
🗑️ Entfernte Dateien: - Alle Backup-Dateien (*.backup_*) - Analyse-Report-Dateien (PROJEKT_ANALYSE_*, REDUNDANZ_*, etc.) - Ungenutzte Templates (404.html, 500.html, analytics.html, etc.) - package.json/package-lock.json (unnötig für Python-Projekt) - Temporäre Cleanup-Scripts 📊 Projektzustand nach vollständiger Bereinigung: - Projektgröße: 213MB (optimiert) - Stammverzeichnis: nur noch essentielle Dateien - Keine temporären/Backup-Dateien mehr - Saubere, produktionsreife Struktur ✨ Das MYP-Backend ist jetzt vollständig optimiert und bereit für Production! 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@ -1,47 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}404 - Seite nicht gefunden - Mercedes-Benz MYP Platform{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-[80vh] flex flex-col items-center justify-center p-4">
|
||||
<!-- 404 Error Container -->
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-white dark:bg-gray-800 backdrop-blur-xl bg-opacity-95 dark:bg-opacity-95 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 p-8 text-center transition-all duration-300">
|
||||
<!-- Mercedes-Benz Logo -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="w-16 h-16 text-gray-300 dark:text-gray-600 transition-transform duration-500 hover:scale-110">
|
||||
<svg class="w-full h-full" fill="currentColor" viewBox="0 0 80 80">
|
||||
<path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
|
||||
C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
|
||||
c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
|
||||
C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9
|
||||
C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40
|
||||
c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<h1 class="text-6xl font-bold text-gray-300 dark:text-gray-600 mb-4">404</h1>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Seite nicht gefunden</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-6">Die von Ihnen gesuchte Seite existiert nicht oder wurde verschoben.</p>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4 mt-8">
|
||||
<a href="{{ url_for('dashboard') }}" class="inline-flex items-center justify-center px-5 py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium rounded-lg transition-all duration-300 transform hover:-translate-y-0.5">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
||||
</svg>
|
||||
<span>Zum Dashboard</span>
|
||||
</a>
|
||||
<button onclick="window.history.back()" class="inline-flex items-center justify-center px-5 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-300 transform hover:-translate-y-0.5">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
<span>Zurück</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,66 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Interner Serverfehler - Mercedes-Benz MYP Platform{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-red-50 to-orange-50 dark:from-slate-900 dark:via-red-900/20 dark:to-orange-900/20 flex items-center justify-center px-4">
|
||||
<div class="max-w-2xl w-full text-center">
|
||||
<!-- Error Icon -->
|
||||
<div class="mb-8">
|
||||
<div class="inline-flex items-center justify-center w-24 h-24 bg-red-100 dark:bg-red-900/30 rounded-full mb-6">
|
||||
<svg class="w-12 h-12 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<h1 class="text-6xl font-bold text-slate-900 dark:text-white mb-4">500</h1>
|
||||
<h2 class="text-2xl font-semibold text-slate-700 dark:text-slate-300 mb-6">Interner Serverfehler</h2>
|
||||
<p class="text-lg text-slate-600 dark:text-slate-400 mb-8 max-w-lg mx-auto">
|
||||
Es ist ein unerwarteter Fehler aufgetreten. Unser Team wurde automatisch benachrichtigt und arbeitet an einer Lösung.
|
||||
</p>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="{{ url_for('dashboard') }}" class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl transition-colors duration-200 shadow-lg hover:shadow-xl">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
||||
</svg>
|
||||
Zurück zum Dashboard
|
||||
</a>
|
||||
<button onclick="window.location.reload()" class="inline-flex items-center px-6 py-3 bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 font-medium rounded-xl transition-colors duration-200">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
Seite neu laden
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Additional Info -->
|
||||
<div class="mt-12 p-6 bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-200 dark:border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-3">Was können Sie tun?</h3>
|
||||
<ul class="text-left text-slate-600 dark:text-slate-400 space-y-2">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||
Versuchen Sie, die Seite neu zu laden
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||
Kehren Sie zum Dashboard zurück
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||
Kontaktieren Sie den Administrator, falls das Problem weiterhin besteht
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,748 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Erweiterte Analytik - MYP Platform{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.analytics-card {
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.analytics-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.kpi-metric {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.kpi-trend-up {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.kpi-trend-down {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.kpi-trend-stable {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 4px solid #f3f4f6;
|
||||
border-top: 4px solid #3b82f6;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.export-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.export-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
📈 Erweiterte Analytik
|
||||
</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400">
|
||||
Umfassende Statistiken und KPIs für die MYP 3D-Druck Platform
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="filter-section">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div class="flex flex-col">
|
||||
<label class="text-sm font-medium mb-1">Zeitraum</label>
|
||||
<select id="timeRangeSelect" class="bg-white/20 text-white border border-white/30 rounded-lg px-3 py-2 backdrop-blur-sm">
|
||||
<option value="day">Letzter Tag</option>
|
||||
<option value="week">Letzte Woche</option>
|
||||
<option value="month" selected>Letzter Monat</option>
|
||||
<option value="quarter">Letztes Quartal</option>
|
||||
<option value="year">Letztes Jahr</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<label class="text-sm font-medium mb-1">Report-Typ</label>
|
||||
<select id="reportTypeSelect" class="bg-white/20 text-white border border-white/30 rounded-lg px-3 py-2 backdrop-blur-sm">
|
||||
<option value="comprehensive">Umfassend</option>
|
||||
<option value="printer_usage">Drucker-Nutzung</option>
|
||||
<option value="user_activity">Benutzer-Aktivität</option>
|
||||
<option value="efficiency">Effizienz</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button id="refreshData" class="export-button">
|
||||
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
||||
</svg>
|
||||
Aktualisieren
|
||||
</button>
|
||||
|
||||
<button id="exportReport" class="export-button">
|
||||
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
|
||||
Exportieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading Indicator -->
|
||||
<div id="loadingIndicator" class="text-center py-8 hidden">
|
||||
<div class="loading-spinner"></div>
|
||||
<p class="mt-4 text-slate-600 dark:text-slate-400">Lade Analytik-Daten...</p>
|
||||
</div>
|
||||
|
||||
<!-- KPI Dashboard -->
|
||||
<div id="kpiDashboard" class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-6">🎯 Key Performance Indicators</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
|
||||
<!-- KPI Cards werden dynamisch geladen -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analytics Grid -->
|
||||
<div class="stats-grid">
|
||||
<!-- Drucker-Statistiken -->
|
||||
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
🖨️ Drucker-Statistiken
|
||||
</h3>
|
||||
<div class="text-2xl">📊</div>
|
||||
</div>
|
||||
|
||||
<div id="printerStatsContainer">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Job-Statistiken -->
|
||||
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
⚙️ Job-Statistiken
|
||||
</h3>
|
||||
<div class="text-2xl">📈</div>
|
||||
</div>
|
||||
|
||||
<div id="jobStatsContainer">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Benutzer-Statistiken -->
|
||||
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
👥 Benutzer-Statistiken
|
||||
</h3>
|
||||
<div class="text-2xl">👤</div>
|
||||
</div>
|
||||
|
||||
<div id="userStatsContainer">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trend-Analyse -->
|
||||
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg col-span-full">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
📊 Trend-Analyse
|
||||
</h3>
|
||||
<div class="text-2xl">📉</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container" id="trendChart">
|
||||
<canvas id="trendChartCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drucker-Auslastung -->
|
||||
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
⚡ Drucker-Auslastung
|
||||
</h3>
|
||||
<div class="text-2xl">🔋</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container" id="utilizationChart">
|
||||
<canvas id="utilizationChartCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top-Benutzer -->
|
||||
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
🏆 Top-Benutzer
|
||||
</h3>
|
||||
<div class="text-2xl">🥇</div>
|
||||
</div>
|
||||
|
||||
<div id="topUsersContainer">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System-Gesundheit -->
|
||||
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
💚 System-Gesundheit
|
||||
</h3>
|
||||
<div class="text-2xl">❤️</div>
|
||||
</div>
|
||||
|
||||
<div id="systemHealthContainer">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Export Modal -->
|
||||
<div id="exportModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
|
||||
<div class="flex items-center justify-center min-h-screen p-4">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 max-w-md w-full">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
📊 Report exportieren
|
||||
</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Format
|
||||
</label>
|
||||
<select id="exportFormat" class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
|
||||
<option value="json">JSON</option>
|
||||
<option value="csv">CSV</option>
|
||||
<option value="pdf">PDF</option>
|
||||
<option value="excel">Excel</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3">
|
||||
<button id="cancelExport" class="px-4 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200">
|
||||
Abbrechen
|
||||
</button>
|
||||
<button id="confirmExport" class="export-button">
|
||||
Export starten
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<!-- Chart.js - Lokale Version -->
|
||||
<script src="{{ url_for('static', filename='js/charts/chart.min.js') }}"></script>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* MYP Analytics Dashboard
|
||||
* Erweiterte Analytik und Statistiken
|
||||
*/
|
||||
|
||||
class AnalyticsDashboard {
|
||||
constructor() {
|
||||
this.currentTimeRange = 'month';
|
||||
this.currentReportType = 'comprehensive';
|
||||
this.charts = {};
|
||||
this.data = {};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupEventListeners();
|
||||
this.loadInitialData();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Filter-Änderungen
|
||||
document.getElementById('timeRangeSelect').addEventListener('change', (e) => {
|
||||
this.currentTimeRange = e.target.value;
|
||||
this.loadData();
|
||||
});
|
||||
|
||||
document.getElementById('reportTypeSelect').addEventListener('change', (e) => {
|
||||
this.currentReportType = e.target.value;
|
||||
this.loadData();
|
||||
});
|
||||
|
||||
// Aktionen
|
||||
document.getElementById('refreshData').addEventListener('click', () => {
|
||||
this.loadData();
|
||||
});
|
||||
|
||||
document.getElementById('exportReport').addEventListener('click', () => {
|
||||
this.showExportModal();
|
||||
});
|
||||
|
||||
// Export Modal
|
||||
document.getElementById('cancelExport').addEventListener('click', () => {
|
||||
this.hideExportModal();
|
||||
});
|
||||
|
||||
document.getElementById('confirmExport').addEventListener('click', () => {
|
||||
this.exportReport();
|
||||
});
|
||||
|
||||
// Modal schließen bei Klick außerhalb
|
||||
document.getElementById('exportModal').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'exportModal') {
|
||||
this.hideExportModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async loadInitialData() {
|
||||
this.showLoading();
|
||||
await this.loadData();
|
||||
this.hideLoading();
|
||||
}
|
||||
|
||||
async loadData() {
|
||||
try {
|
||||
this.showLoading();
|
||||
|
||||
// KPIs laden
|
||||
await this.loadKPIs();
|
||||
|
||||
// Report-Daten laden
|
||||
await this.loadReportData();
|
||||
|
||||
// Charts aktualisieren
|
||||
this.updateCharts();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Analytics-Daten:', error);
|
||||
this.showError('Fehler beim Laden der Daten');
|
||||
} finally {
|
||||
this.hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
async loadKPIs() {
|
||||
try {
|
||||
const response = await fetch('/api/analytics/dashboard');
|
||||
if (!response.ok) throw new Error('Failed to load KPIs');
|
||||
|
||||
const data = await response.json();
|
||||
this.renderKPIs(data.kpis || []);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der KPIs:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async loadReportData() {
|
||||
try {
|
||||
const response = await fetch(`/api/analytics/report/${this.currentReportType}?time_range=${this.currentTimeRange}`);
|
||||
if (!response.ok) throw new Error('Failed to load report data');
|
||||
|
||||
this.data = await response.json();
|
||||
this.renderStatistics();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Report-Daten:', error);
|
||||
}
|
||||
}
|
||||
|
||||
renderKPIs(kpis) {
|
||||
const container = document.querySelector('#kpiDashboard .grid');
|
||||
|
||||
container.innerHTML = kpis.map(kpi => `
|
||||
<div class="analytics-card bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="text-sm font-medium text-slate-600 dark:text-slate-400">${kpi.name}</h4>
|
||||
<span class="kpi-trend-${kpi.trend}">
|
||||
${kpi.trend === 'up' ? '↗️' : kpi.trend === 'down' ? '↘️' : '➡️'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="kpi-metric text-slate-900 dark:text-white mb-1">
|
||||
${this.formatMetric(kpi.current_value, kpi.unit)}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<span class="text-slate-500 dark:text-slate-400">
|
||||
Ziel: ${this.formatMetric(kpi.target_value, kpi.unit)}
|
||||
</span>
|
||||
<span class="kpi-trend-${kpi.trend} font-medium">
|
||||
${kpi.change_percent > 0 ? '+' : ''}${kpi.change_percent}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
renderStatistics() {
|
||||
// Drucker-Statistiken
|
||||
if (this.data.sections?.printers) {
|
||||
this.renderPrinterStats(this.data.sections.printers);
|
||||
}
|
||||
|
||||
// Job-Statistiken
|
||||
if (this.data.sections?.jobs) {
|
||||
this.renderJobStats(this.data.sections.jobs);
|
||||
}
|
||||
|
||||
// Benutzer-Statistiken
|
||||
if (this.data.sections?.users) {
|
||||
this.renderUserStats(this.data.sections.users);
|
||||
}
|
||||
}
|
||||
|
||||
renderPrinterStats(printerData) {
|
||||
const container = document.getElementById('printerStatsContainer');
|
||||
const summary = printerData.summary;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||||
${summary.total_printers}
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Drucker gesamt</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-green-600 dark:text-green-400">
|
||||
${summary.online_printers}
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Online</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
${summary.availability_rate}% Verfügbarkeit
|
||||
</div>
|
||||
<div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2 mt-2">
|
||||
<div class="bg-green-500 h-2 rounded-full" style="width: ${summary.availability_rate}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderJobStats(jobData) {
|
||||
const container = document.getElementById('jobStatsContainer');
|
||||
const summary = jobData.summary;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||||
${summary.total_jobs}
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Jobs gesamt</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-green-600 dark:text-green-400">
|
||||
${summary.success_rate}%
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Erfolgsrate</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
⌚ ${summary.avg_duration_hours}h Durchschnitt
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">
|
||||
🎯 ${summary.completed_jobs} abgeschlossen
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderUserStats(userData) {
|
||||
const container = document.getElementById('userStatsContainer');
|
||||
const summary = userData.summary;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||||
${summary.total_users}
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Benutzer gesamt</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-green-600 dark:text-green-400">
|
||||
${summary.active_users}
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Aktiv</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
${summary.engagement_rate}% Engagement
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">
|
||||
➕ ${summary.new_users} neue Benutzer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Top-Benutzer rendern
|
||||
if (userData.top_users) {
|
||||
this.renderTopUsers(userData.top_users);
|
||||
}
|
||||
}
|
||||
|
||||
renderTopUsers(topUsers) {
|
||||
const container = document.getElementById('topUsersContainer');
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="space-y-3">
|
||||
${topUsers.slice(0, 5).map((user, index) => `
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
|
||||
${index + 1}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-slate-900 dark:text-white">${user.name || user.username}</div>
|
||||
<div class="text-xs text-slate-600 dark:text-slate-400">${user.jobs} Jobs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm font-medium text-slate-600 dark:text-slate-400">
|
||||
${user.total_hours}h
|
||||
</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
updateCharts() {
|
||||
this.updateTrendChart();
|
||||
this.updateUtilizationChart();
|
||||
}
|
||||
|
||||
updateTrendChart() {
|
||||
const canvas = document.getElementById('trendChartCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Destroy existing chart
|
||||
if (this.charts.trend) {
|
||||
this.charts.trend.destroy();
|
||||
}
|
||||
|
||||
// Sample data - would be replaced with real data
|
||||
const dailyTrend = this.data.sections?.jobs?.daily_trend || [];
|
||||
|
||||
this.charts.trend = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: dailyTrend.map(d => new Date(d.date).toLocaleDateString('de-DE')),
|
||||
datasets: [{
|
||||
label: 'Jobs pro Tag',
|
||||
data: dailyTrend.map(d => d.jobs),
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateUtilizationChart() {
|
||||
const canvas = document.getElementById('utilizationChartCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Destroy existing chart
|
||||
if (this.charts.utilization) {
|
||||
this.charts.utilization.destroy();
|
||||
}
|
||||
|
||||
const printerUsage = this.data.sections?.printers?.usage_by_printer || [];
|
||||
|
||||
this.charts.utilization = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: printerUsage.map(p => p.name),
|
||||
datasets: [{
|
||||
data: printerUsage.map(p => p.utilization_rate),
|
||||
backgroundColor: [
|
||||
'#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formatMetric(value, unit) {
|
||||
if (typeof value !== 'number') return value;
|
||||
|
||||
if (unit === '%') {
|
||||
return `${value.toFixed(1)}%`;
|
||||
} else if (unit === 'Stunden') {
|
||||
return `${value.toFixed(1)}h`;
|
||||
} else if (unit === 'g') {
|
||||
return `${value.toLocaleString()}g`;
|
||||
} else {
|
||||
return `${value.toLocaleString()} ${unit}`;
|
||||
}
|
||||
}
|
||||
|
||||
showExportModal() {
|
||||
document.getElementById('exportModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
hideExportModal() {
|
||||
document.getElementById('exportModal').classList.add('hidden');
|
||||
}
|
||||
|
||||
async exportReport() {
|
||||
try {
|
||||
const format = document.getElementById('exportFormat').value;
|
||||
|
||||
const response = await fetch(`/api/analytics/report/${this.currentReportType}?time_range=${this.currentTimeRange}&format=${format}`);
|
||||
|
||||
if (!response.ok) throw new Error('Export fehlgeschlagen');
|
||||
|
||||
// Download starten
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `myp-analytics-${this.currentReportType}-${this.currentTimeRange}.${format}`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
this.hideExportModal();
|
||||
this.showSuccess('Report erfolgreich exportiert');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Export-Fehler:', error);
|
||||
this.showError('Fehler beim Exportieren des Reports');
|
||||
}
|
||||
}
|
||||
|
||||
showLoading() {
|
||||
document.getElementById('loadingIndicator').classList.remove('hidden');
|
||||
}
|
||||
|
||||
hideLoading() {
|
||||
document.getElementById('loadingIndicator').classList.add('hidden');
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
if (typeof showFlashMessage === 'function') {
|
||||
showFlashMessage(message, 'error');
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
showSuccess(message) {
|
||||
if (typeof showFlashMessage === 'function') {
|
||||
showFlashMessage(message, 'success');
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dashboard initialisieren
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new AnalyticsDashboard();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -1,222 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSRF-Token Test - MYP Platform</title>
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 40px; background: #f5f5f5; }
|
||||
.container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
|
||||
.test-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
|
||||
.success { background: #d4edda; border-color: #c3e6cb; color: #155724; }
|
||||
.error { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
|
||||
.info { background: #d1ecf1; border-color: #bee5eb; color: #0c5460; }
|
||||
button { padding: 10px 20px; margin: 5px; border: none; border-radius: 5px; cursor: pointer; }
|
||||
.btn-primary { background: #007bff; color: white; }
|
||||
.btn-danger { background: #dc3545; color: white; }
|
||||
.btn-success { background: #28a745; color: white; }
|
||||
pre { background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto; }
|
||||
.token-display { font-family: monospace; background: #f8f9fa; padding: 10px; border-radius: 5px; word-break: break-all; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🔒 CSRF-Token Diagnose & Test</h1>
|
||||
<p>Diese Seite hilft bei der Diagnose und Behebung von CSRF-Token-Problemen.</p>
|
||||
|
||||
<!-- Token-Anzeige -->
|
||||
<div class="test-section info">
|
||||
<h3>📋 Aktuelle Token-Informationen</h3>
|
||||
<p><strong>Meta-Tag Token:</strong></p>
|
||||
<div class="token-display" id="meta-token">{{ csrf_token() }}</div>
|
||||
|
||||
<p><strong>Session Token:</strong></p>
|
||||
<div class="token-display" id="session-token">{{ session.get('_csrf_token', 'Nicht verfügbar') }}</div>
|
||||
|
||||
<p><strong>JavaScript Token:</strong></p>
|
||||
<div class="token-display" id="js-token">Wird geladen...</div>
|
||||
</div>
|
||||
|
||||
<!-- Test-Formular -->
|
||||
<div class="test-section">
|
||||
<h3>📝 CSRF-Test-Formular</h3>
|
||||
<form id="test-form" method="POST" action="/api/csrf-test">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<p>
|
||||
<label for="test-data">Test-Daten:</label><br>
|
||||
<input type="text" id="test-data" name="test_data" value="CSRF-Test-Daten" style="width: 300px; padding: 5px;">
|
||||
</p>
|
||||
<button type="submit" class="btn-primary">📤 Formular senden (mit Token)</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- AJAX-Tests -->
|
||||
<div class="test-section">
|
||||
<h3>🌐 AJAX-Tests</h3>
|
||||
<button onclick="testAjaxWithToken()" class="btn-success">✅ AJAX mit Token</button>
|
||||
<button onclick="testAjaxWithoutToken()" class="btn-danger">❌ AJAX ohne Token</button>
|
||||
<button onclick="testFetchWithToken()" class="btn-success">✅ Fetch mit Token</button>
|
||||
<button onclick="testFetchWithoutToken()" class="btn-danger">❌ Fetch ohne Token</button>
|
||||
</div>
|
||||
|
||||
<!-- Ergebnisse -->
|
||||
<div class="test-section">
|
||||
<h3>📊 Test-Ergebnisse</h3>
|
||||
<div id="results"></div>
|
||||
</div>
|
||||
|
||||
<!-- Debug-Informationen -->
|
||||
<div class="test-section">
|
||||
<h3>🔍 Debug-Informationen</h3>
|
||||
<button onclick="showDebugInfo()" class="btn-primary">Debug-Info anzeigen</button>
|
||||
<pre id="debug-info" style="display: none;"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CSRF-Fix Script -->
|
||||
<script src="{{ url_for('static', filename='js/csrf-fix.js') }}"></script>
|
||||
|
||||
<script>
|
||||
// Token-Anzeige aktualisieren
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const jsToken = window.getCSRFToken ? window.getCSRFToken() : 'CSRF-Fix nicht geladen';
|
||||
document.getElementById('js-token').textContent = jsToken;
|
||||
});
|
||||
|
||||
// Ergebnis anzeigen
|
||||
function showResult(message, isSuccess = true) {
|
||||
const results = document.getElementById('results');
|
||||
const div = document.createElement('div');
|
||||
div.className = isSuccess ? 'success' : 'error';
|
||||
div.innerHTML = `<strong>${new Date().toLocaleTimeString()}:</strong> ${message}`;
|
||||
results.appendChild(div);
|
||||
results.scrollTop = results.scrollHeight;
|
||||
}
|
||||
|
||||
// AJAX mit Token
|
||||
function testAjaxWithToken() {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/api/csrf-test');
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.setRequestHeader('X-CSRFToken', window.getCSRFToken());
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
showResult('✅ AJAX mit Token erfolgreich', true);
|
||||
} else {
|
||||
showResult(`❌ AJAX mit Token fehlgeschlagen: ${xhr.status} ${xhr.statusText}`, false);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
showResult('❌ AJAX mit Token - Netzwerkfehler', false);
|
||||
};
|
||||
|
||||
xhr.send(JSON.stringify({test_data: 'AJAX-Test mit Token'}));
|
||||
}
|
||||
|
||||
// AJAX ohne Token
|
||||
function testAjaxWithoutToken() {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/api/csrf-test');
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 400) {
|
||||
showResult('✅ AJAX ohne Token korrekt abgelehnt (400)', true);
|
||||
} else {
|
||||
showResult(`⚠️ AJAX ohne Token unerwartete Antwort: ${xhr.status}`, false);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
showResult('❌ AJAX ohne Token - Netzwerkfehler', false);
|
||||
};
|
||||
|
||||
xhr.send(JSON.stringify({test_data: 'AJAX-Test ohne Token'}));
|
||||
}
|
||||
|
||||
// Fetch mit Token
|
||||
async function testFetchWithToken() {
|
||||
try {
|
||||
const response = await fetch('/api/csrf-test', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': window.getCSRFToken()
|
||||
},
|
||||
body: JSON.stringify({test_data: 'Fetch-Test mit Token'})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showResult('✅ Fetch mit Token erfolgreich', true);
|
||||
} else {
|
||||
showResult(`❌ Fetch mit Token fehlgeschlagen: ${response.status} ${response.statusText}`, false);
|
||||
}
|
||||
} catch (error) {
|
||||
showResult(`❌ Fetch mit Token Fehler: ${error.message}`, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch ohne Token
|
||||
async function testFetchWithoutToken() {
|
||||
try {
|
||||
const response = await fetch('/api/csrf-test', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({test_data: 'Fetch-Test ohne Token'})
|
||||
});
|
||||
|
||||
if (response.status === 400) {
|
||||
showResult('✅ Fetch ohne Token korrekt abgelehnt (400)', true);
|
||||
} else {
|
||||
showResult(`⚠️ Fetch ohne Token unerwartete Antwort: ${response.status}`, false);
|
||||
}
|
||||
} catch (error) {
|
||||
showResult(`❌ Fetch ohne Token Fehler: ${error.message}`, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Debug-Informationen
|
||||
function showDebugInfo() {
|
||||
const debugInfo = {
|
||||
'Meta-Tag Token': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'),
|
||||
'Hidden Input Token': document.querySelector('input[name="csrf_token"]')?.value,
|
||||
'JavaScript Token': window.getCSRFToken ? window.getCSRFToken() : 'Nicht verfügbar',
|
||||
'Cookies': document.cookie,
|
||||
'User Agent': navigator.userAgent,
|
||||
'URL': window.location.href,
|
||||
'Timestamp': new Date().toISOString()
|
||||
};
|
||||
|
||||
document.getElementById('debug-info').textContent = JSON.stringify(debugInfo, null, 2);
|
||||
document.getElementById('debug-info').style.display = 'block';
|
||||
}
|
||||
|
||||
// Formular-Handler
|
||||
document.getElementById('test-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(this);
|
||||
|
||||
fetch('/api/csrf-test', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
showResult('✅ Formular erfolgreich gesendet', true);
|
||||
} else {
|
||||
showResult(`❌ Formular fehlgeschlagen: ${response.status} ${response.statusText}`, false);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showResult(`❌ Formular Fehler: ${error.message}`, false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,594 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Energiemonitoring - Mercedes-Benz MYP Platform{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
/* Energiemonitoring Dashboard Styles */
|
||||
.energy-card {
|
||||
@apply glass card;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.energy-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.energy-metric {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.device-status-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.device-status-online {
|
||||
background-color: #10b981;
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
|
||||
}
|
||||
|
||||
.device-status-offline {
|
||||
background-color: #ef4444;
|
||||
box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.power-gradient {
|
||||
background: linear-gradient(90deg, #10b981 0%, #f59e0b 50%, #ef4444 100%);
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="main-offset min-h-screen">
|
||||
|
||||
<!-- Header Section -->
|
||||
<div class="glass mb-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary mb-2">🔋 Energiemonitoring</h1>
|
||||
<p class="text-secondary">
|
||||
Überwachen Sie den Energieverbrauch Ihrer 3D-Drucker in Echtzeit
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button id="refreshData" class="btn btn-primary">
|
||||
<i class="fas fa-sync-alt mr-2"></i>
|
||||
Aktualisieren
|
||||
</button>
|
||||
<button id="exportData" class="btn">
|
||||
<i class="fas fa-download mr-2"></i>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<!-- Gesamtverbrauch -->
|
||||
<div class="energy-card">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="p-3 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl shadow-lg">
|
||||
<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>
|
||||
<div class="text-right">
|
||||
<div id="totalPower" class="energy-metric">{{ stats.total_current_power or 0 }}W</div>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Gesamtverbrauch</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="device-status-indicator device-status-online"></div>
|
||||
<span class="text-xs text-green-600 dark:text-green-400 font-medium">Live-Daten</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Online Geräte -->
|
||||
<div class="energy-card">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="p-3 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl shadow-lg">
|
||||
<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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div id="onlineDevices" class="energy-metric">{{ stats.online_devices or 0 }}</div>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Online Geräte</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-300">
|
||||
von <span id="totalDevices">{{ stats.total_devices or 0 }}</span> Geräten
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Heute Verbrauch -->
|
||||
<div class="energy-card">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="p-3 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl shadow-lg">
|
||||
<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div id="todayEnergy" class="energy-metric">{{ stats.total_today_energy or 0 }}Wh</div>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Heute</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-300">
|
||||
Ø <span id="avgTodayEnergy">{{ stats.avg_today_energy or 0 }}</span>Wh pro Gerät
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Monatsverbrauch -->
|
||||
<div class="energy-card">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="p-3 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl shadow-lg">
|
||||
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div id="monthEnergy" class="energy-metric">{{ stats.total_month_energy or 0 }}Wh</div>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Diesen Monat</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-300">
|
||||
Ø <span id="avgMonthEnergy">{{ stats.avg_month_energy or 0 }}</span>Wh pro Gerät
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts Section -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
||||
<!-- Verbrauchstrend Chart -->
|
||||
<div class="energy-card p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-xl font-semibold text-slate-900 dark:text-white">📈 Verbrauchstrend</h3>
|
||||
<select id="periodSelector" class="px-3 py-2 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-2xl text-sm shadow-lg transition-all duration-300 hover:shadow-xl">
|
||||
<option value="today">Heute (24h)</option>
|
||||
<option value="week">Diese Woche</option>
|
||||
<option value="month">Dieser Monat</option>
|
||||
<option value="year">Dieses Jahr</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="consumptionChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Geräteverbrauch Chart -->
|
||||
<div class="energy-card">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-xl font-semibold text-primary">🔌 Geräteverbrauch</h3>
|
||||
<div class="text-sm text-muted">Live-Verbrauch</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="deviceChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Device List -->
|
||||
<div class="energy-card mb-8">
|
||||
<h3 class="text-xl font-semibold text-primary mb-6">🖨️ Geräteübersicht</h3>
|
||||
<div id="deviceList" class="space-y-4">
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
<div class="flex justify-center items-center py-8">
|
||||
<div class="spinner w-8 h-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div id="loadingOverlay" class="modal-overlay hidden">
|
||||
<div class="glass p-6 flex items-center space-x-4">
|
||||
<div class="spinner w-8 h-8"></div>
|
||||
<span class="text-primary">Lade Energiedaten...</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<!-- Chart.js -->
|
||||
<script src="{{ url_for('static', filename='js/charts/chart.min.js') }}"></script>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* MYP Energiemonitoring Dashboard
|
||||
* Echtzeit-Überwachung des Energieverbrauchs von Tapo P110 Smart Plugs
|
||||
*/
|
||||
|
||||
class EnergyMonitoringDashboard {
|
||||
constructor() {
|
||||
this.currentPeriod = 'today';
|
||||
this.charts = {};
|
||||
this.updateInterval = null;
|
||||
this.data = {};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupEventListeners();
|
||||
this.loadInitialData();
|
||||
this.startAutoUpdate();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Period Selector
|
||||
document.getElementById('periodSelector').addEventListener('change', (e) => {
|
||||
this.currentPeriod = e.target.value;
|
||||
this.loadConsumptionData();
|
||||
});
|
||||
|
||||
// Refresh Button
|
||||
document.getElementById('refreshData').addEventListener('click', () => {
|
||||
this.loadAllData();
|
||||
});
|
||||
|
||||
// Export Button
|
||||
document.getElementById('exportData').addEventListener('click', () => {
|
||||
this.exportData();
|
||||
});
|
||||
}
|
||||
|
||||
async loadInitialData() {
|
||||
this.showLoading();
|
||||
await this.loadAllData();
|
||||
this.hideLoading();
|
||||
}
|
||||
|
||||
async loadAllData() {
|
||||
try {
|
||||
await Promise.all([
|
||||
this.loadDashboardData(),
|
||||
this.loadConsumptionData(),
|
||||
this.loadDeviceData()
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Energiedaten:', error);
|
||||
this.showError('Fehler beim Laden der Energiedaten');
|
||||
}
|
||||
}
|
||||
|
||||
async loadDashboardData() {
|
||||
try {
|
||||
const response = await fetch('/api/energy/dashboard');
|
||||
if (!response.ok) throw new Error('Dashboard-Daten konnten nicht geladen werden');
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
this.data.dashboard = result.data;
|
||||
this.updateKPIs(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Dashboard-Daten-Fehler:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async loadConsumptionData() {
|
||||
try {
|
||||
const response = await fetch(`/api/energy/statistics?period=${this.currentPeriod}`);
|
||||
if (!response.ok) throw new Error('Verbrauchsdaten konnten nicht geladen werden');
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
this.data.consumption = result.data;
|
||||
this.updateConsumptionChart(result.data.chart_data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Verbrauchsdaten-Fehler:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async loadDeviceData() {
|
||||
try {
|
||||
const response = await fetch('/api/energy/live');
|
||||
if (!response.ok) throw new Error('Gerätedaten konnten nicht geladen werden');
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
this.data.devices = result.data;
|
||||
this.updateDeviceChart(result.data.devices);
|
||||
this.updateDeviceList(result.data.devices);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Gerätedaten-Fehler:', error);
|
||||
}
|
||||
}
|
||||
|
||||
updateKPIs(dashboardData) {
|
||||
const overview = dashboardData.overview || {};
|
||||
const consumption = dashboardData.current_consumption || {};
|
||||
const totals = dashboardData.energy_totals || {};
|
||||
|
||||
// KPI Updates
|
||||
document.getElementById('totalPower').textContent = `${consumption.total_power || 0}W`;
|
||||
document.getElementById('onlineDevices').textContent = overview.online_devices || 0;
|
||||
document.getElementById('totalDevices').textContent = overview.total_devices || 0;
|
||||
document.getElementById('todayEnergy').textContent = `${totals.today_total || 0}Wh`;
|
||||
document.getElementById('avgTodayEnergy').textContent = totals.today_average || 0;
|
||||
document.getElementById('monthEnergy').textContent = `${totals.month_total || 0}Wh`;
|
||||
document.getElementById('avgMonthEnergy').textContent = totals.month_average || 0;
|
||||
}
|
||||
|
||||
updateConsumptionChart(chartData) {
|
||||
const canvas = document.getElementById('consumptionChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Destroy existing chart
|
||||
if (this.charts.consumption) {
|
||||
this.charts.consumption.destroy();
|
||||
}
|
||||
|
||||
this.charts.consumption = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: chartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top'
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return `${context.dataset.label}: ${context.parsed.y}Wh`;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
color: 'rgba(0,0,0,0.1)'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return value + 'Wh';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
mode: 'nearest',
|
||||
axis: 'x',
|
||||
intersect: false
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateDeviceChart(devices) {
|
||||
const canvas = document.getElementById('deviceChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Destroy existing chart
|
||||
if (this.charts.devices) {
|
||||
this.charts.devices.destroy();
|
||||
}
|
||||
|
||||
const onlineDevices = devices.filter(d => d.online && d.power > 0);
|
||||
|
||||
if (onlineDevices.length === 0) {
|
||||
// Zeige "Keine Daten" Nachricht
|
||||
ctx.font = '16px Arial';
|
||||
ctx.fillStyle = '#64748b';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('Keine aktiven Geräte', canvas.width / 2, canvas.height / 2);
|
||||
return;
|
||||
}
|
||||
|
||||
const chartData = {
|
||||
labels: onlineDevices.map(d => d.name),
|
||||
datasets: [{
|
||||
label: 'Aktueller Verbrauch (W)',
|
||||
data: onlineDevices.map(d => d.power),
|
||||
backgroundColor: [
|
||||
'#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
|
||||
'#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
|
||||
],
|
||||
borderColor: '#ffffff',
|
||||
borderWidth: 2
|
||||
}]
|
||||
};
|
||||
|
||||
this.charts.devices = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: chartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
padding: 20,
|
||||
usePointStyle: true
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const device = onlineDevices[context.dataIndex];
|
||||
return `${device.name}: ${device.power}W`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateDeviceList(devices) {
|
||||
const container = document.getElementById('deviceList');
|
||||
|
||||
if (devices.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="text-center py-8 text-muted">
|
||||
<svg class="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 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>
|
||||
<p>Keine Energiemonitoring-Geräte gefunden</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = devices.map(device => `
|
||||
<div class="glass-card hover-lift">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="device-status-indicator ${device.online ? 'device-status-online' : 'device-status-offline'}"></div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-primary">${device.name}</h4>
|
||||
<p class="text-sm text-muted">ID: ${device.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-xl font-bold text-primary">
|
||||
${device.power}W
|
||||
</div>
|
||||
<div class="text-sm text-muted">
|
||||
${device.online ? 'Online' : 'Offline'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-16">
|
||||
<div class="power-gradient"></div>
|
||||
<div class="text-xs text-center mt-1 text-muted">
|
||||
${Math.round((device.power / 100) * 100)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
startAutoUpdate() {
|
||||
// Update alle 30 Sekunden
|
||||
this.updateInterval = setInterval(() => {
|
||||
this.loadDeviceData(); // Nur Live-Daten für bessere Performance
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
stopAutoUpdate() {
|
||||
if (this.updateInterval) {
|
||||
clearInterval(this.updateInterval);
|
||||
this.updateInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
async exportData() {
|
||||
try {
|
||||
const response = await fetch(`/api/energy/statistics?period=${this.currentPeriod}&format=csv`);
|
||||
if (!response.ok) throw new Error('Export fehlgeschlagen');
|
||||
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `energy-monitoring-${this.currentPeriod}-${new Date().toISOString().split('T')[0]}.csv`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
this.showSuccess('Daten erfolgreich exportiert');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Export-Fehler:', error);
|
||||
this.showError('Fehler beim Exportieren der Daten');
|
||||
}
|
||||
}
|
||||
|
||||
showLoading() {
|
||||
document.getElementById('loadingOverlay').classList.remove('hidden');
|
||||
}
|
||||
|
||||
hideLoading() {
|
||||
document.getElementById('loadingOverlay').classList.add('hidden');
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
// Verwende bestehende Flash-Message-Funktion falls verfügbar
|
||||
if (typeof showFlashMessage === 'function') {
|
||||
showFlashMessage(message, 'error');
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
showSuccess(message) {
|
||||
if (typeof showFlashMessage === 'function') {
|
||||
showFlashMessage(message, 'success');
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.stopAutoUpdate();
|
||||
|
||||
// Charts zerstören
|
||||
Object.values(this.charts).forEach(chart => {
|
||||
if (chart) chart.destroy();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Dashboard initialisieren
|
||||
let energyDashboard;
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
energyDashboard = new EnergyMonitoringDashboard();
|
||||
});
|
||||
|
||||
// Cleanup bei Seitenwechsel
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (energyDashboard) {
|
||||
energyDashboard.destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -1,511 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Steckdosen-Test - Mercedes-Benz TBA Marienfelde{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.test-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dark .test-card {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
.risk-low { border-left: 4px solid #10b981; }
|
||||
.risk-medium { border-left: 4px solid #f59e0b; }
|
||||
.risk-high { border-left: 4px solid #ef4444; }
|
||||
|
||||
.socket-online { color: #10b981; }
|
||||
.socket-offline { color: #ef4444; }
|
||||
.socket-error { color: #f59e0b; }
|
||||
|
||||
.test-button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.test-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-test-on { background: #16a34a; color: white; }
|
||||
.btn-test-off { background: #ef4444; color: white; }
|
||||
.btn-test-status { background: #0073ce; color: white; }
|
||||
|
||||
.warning-banner {
|
||||
background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.info-banner {
|
||||
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 2px solid #f3f4f6;
|
||||
border-top: 2px solid #0073ce;
|
||||
border-radius: 50%;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="space-y-8">
|
||||
<!-- Header -->
|
||||
<div class="dashboard-card p-6">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="w-16 h-16 bg-red-600 text-white rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8" 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>
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-mercedes-black dark:text-white">⚡ Steckdosen-Test</h1>
|
||||
<p class="text-mercedes-gray dark:text-slate-400 mt-1">Sichere Testfunktion für Ausbilder und Administratoren</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sicherheitshinweis -->
|
||||
<div class="warning-banner">
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-6 h-6 text-red-600 flex-shrink-0 mt-0.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 0L3.268 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-semibold text-red-800 dark:text-red-200">⚠️ SICHERHEITSHINWEIS</h3>
|
||||
<p class="text-red-700 dark:text-red-300 mt-1">
|
||||
Diese Funktion ist nur für geschulte Ausbilder und Administratoren bestimmt.
|
||||
Prüfen Sie immer den Status vor dem Ein-/Ausschalten von Steckdosen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Übersicht aller Steckdosen -->
|
||||
<div class="dashboard-card p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-2xl font-bold text-mercedes-black dark:text-white">Übersicht aller Steckdosen</h2>
|
||||
<button onclick="loadAllSocketsStatus()" class="test-button btn-test-status">
|
||||
<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 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>
|
||||
Alle Status aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Statistiken -->
|
||||
<div id="socket-summary" class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
|
||||
<!-- Wird per JavaScript gefüllt -->
|
||||
</div>
|
||||
|
||||
<!-- Steckdosen-Liste -->
|
||||
<div id="all-sockets-list" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="flex items-center justify-center p-8">
|
||||
<div class="loading-spinner"></div>
|
||||
<span class="ml-2">Lade Steckdosen-Status...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Einzeltest -->
|
||||
<div class="dashboard-card p-6">
|
||||
<h2 class="text-2xl font-bold text-mercedes-black dark:text-white mb-6">Einzelne Steckdose testen</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Drucker-Auswahl -->
|
||||
<div class="space-y-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Drucker auswählen:
|
||||
</label>
|
||||
<select id="printer-select" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
|
||||
<option value="">Bitte Drucker auswählen...</option>
|
||||
</select>
|
||||
|
||||
<button onclick="loadSingleSocketStatus()" id="load-status-btn"
|
||||
class="test-button btn-test-status w-full" disabled>
|
||||
<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-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
|
||||
</svg>
|
||||
Status prüfen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status-Anzeige -->
|
||||
<div id="single-socket-status" class="space-y-4">
|
||||
<div class="info-banner">
|
||||
<p class="text-blue-700 dark:text-blue-300">
|
||||
Wählen Sie einen Drucker aus um den Steckdosen-Status zu prüfen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test-Bestätigungsmodal -->
|
||||
<div id="test-confirmation-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<svg class="w-8 h-8 text-red-600" 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 0L3.268 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
||||
</svg>
|
||||
<h3 class="text-lg font-semibold">Test bestätigen</h3>
|
||||
</div>
|
||||
|
||||
<div id="test-modal-content">
|
||||
<!-- Wird per JavaScript gefüllt -->
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 mt-6">
|
||||
<button onclick="closeTestModal()" class="test-button bg-gray-500 text-white flex-1">
|
||||
Abbrechen
|
||||
</button>
|
||||
<button onclick="executeTest()" id="confirm-test-btn" class="test-button bg-red-600 text-white flex-1">
|
||||
Test durchführen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentTestData = null;
|
||||
let printers = [];
|
||||
|
||||
// Seite initialisieren
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadPrinters();
|
||||
loadAllSocketsStatus();
|
||||
});
|
||||
|
||||
// Drucker laden
|
||||
async function loadPrinters() {
|
||||
try {
|
||||
const response = await fetch('/api/printers');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
printers = data.printers;
|
||||
const select = document.getElementById('printer-select');
|
||||
select.innerHTML = '<option value="">Bitte Drucker auswählen...</option>';
|
||||
|
||||
printers.forEach(printer => {
|
||||
if (printer.plug_ip) { // Nur Drucker mit Steckdose
|
||||
const option = document.createElement('option');
|
||||
option.value = printer.id;
|
||||
option.textContent = `${printer.name} (${printer.location || 'Unbekannter Standort'})`;
|
||||
select.appendChild(option);
|
||||
}
|
||||
});
|
||||
|
||||
select.addEventListener('change', function() {
|
||||
const loadBtn = document.getElementById('load-status-btn');
|
||||
loadBtn.disabled = !this.value;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Drucker:', error);
|
||||
showNotification('Fehler beim Laden der Drucker', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Alle Steckdosen-Status laden
|
||||
async function loadAllSocketsStatus() {
|
||||
try {
|
||||
const response = await fetch('/api/printers/test/all-sockets');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
displaySocketsSummary(data.summary);
|
||||
displayAllSockets(data.sockets);
|
||||
} else {
|
||||
throw new Error(data.error || 'Unbekannter Fehler');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Steckdosen:', error);
|
||||
showNotification('Fehler beim Laden der Steckdosen: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Einzelnen Steckdosen-Status laden
|
||||
async function loadSingleSocketStatus() {
|
||||
const printerId = document.getElementById('printer-select').value;
|
||||
if (!printerId) return;
|
||||
|
||||
const statusDiv = document.getElementById('single-socket-status');
|
||||
statusDiv.innerHTML = '<div class="flex items-center"><div class="loading-spinner"></div><span class="ml-2">Status wird geladen...</span></div>';
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/printers/test/socket/${printerId}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
displaySingleSocketStatus(data);
|
||||
} else {
|
||||
statusDiv.innerHTML = `<div class="warning-banner"><p class="text-red-700">${data.error}</p></div>`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden des Socket-Status:', error);
|
||||
statusDiv.innerHTML = `<div class="warning-banner"><p class="text-red-700">Fehler: ${error.message}</p></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Zusammenfassung anzeigen
|
||||
function displaySocketsSummary(summary) {
|
||||
const summaryDiv = document.getElementById('socket-summary');
|
||||
summaryDiv.innerHTML = `
|
||||
<div class="bg-blue-50 dark:bg-blue-900 p-4 rounded-lg">
|
||||
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">${summary.total_sockets}</div>
|
||||
<div class="text-sm text-blue-800 dark:text-blue-300">Gesamt</div>
|
||||
</div>
|
||||
<div class="bg-green-50 dark:bg-green-900 p-4 rounded-lg">
|
||||
<div class="text-2xl font-bold text-green-600 dark:text-green-400">${summary.online}</div>
|
||||
<div class="text-sm text-green-800 dark:text-green-300">Online</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
|
||||
<div class="text-2xl font-bold text-gray-600 dark:text-gray-400">${summary.offline}</div>
|
||||
<div class="text-sm text-gray-800 dark:text-gray-300">Offline</div>
|
||||
</div>
|
||||
<div class="bg-red-50 dark:bg-red-900 p-4 rounded-lg">
|
||||
<div class="text-2xl font-bold text-red-600 dark:text-red-400">${summary.error}</div>
|
||||
<div class="text-sm text-red-800 dark:text-red-300">Fehler</div>
|
||||
</div>
|
||||
<div class="bg-orange-50 dark:bg-orange-900 p-4 rounded-lg">
|
||||
<div class="text-2xl font-bold text-orange-600 dark:text-orange-400">${summary.with_warnings}</div>
|
||||
<div class="text-sm text-orange-800 dark:text-orange-300">Mit Warnungen</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Alle Steckdosen anzeigen
|
||||
function displayAllSockets(sockets) {
|
||||
const listDiv = document.getElementById('all-sockets-list');
|
||||
|
||||
if (sockets.length === 0) {
|
||||
listDiv.innerHTML = '<div class="col-span-full text-center p-8"><p class="text-gray-500">Keine konfigurierten Steckdosen gefunden.</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
listDiv.innerHTML = sockets.map(socket => `
|
||||
<div class="test-card p-4 ${getRiskClass(socket.warnings.length)}">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg">${socket.printer.name}</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">${socket.printer.location || 'Unbekannter Standort'}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="socket-${socket.socket.status} font-semibold">
|
||||
${getStatusText(socket.socket.status, socket.socket.device_on)}
|
||||
</div>
|
||||
${socket.socket.current_power ? `<div class="text-sm text-gray-600">${socket.socket.current_power}W</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${socket.warnings.length > 0 ? `
|
||||
<div class="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded p-3 mb-4">
|
||||
<div class="font-medium text-yellow-800 dark:text-yellow-200 mb-1">⚠️ Warnungen:</div>
|
||||
${socket.warnings.map(warning => `<div class="text-sm text-yellow-700 dark:text-yellow-300">• ${warning}</div>`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button onclick="testSocketControl(${socket.printer.id}, 'on')"
|
||||
class="test-button btn-test-on flex-1 ${socket.socket.device_on ? 'opacity-50' : ''}">
|
||||
⚡ Einschalten
|
||||
</button>
|
||||
<button onclick="testSocketControl(${socket.printer.id}, 'off')"
|
||||
class="test-button btn-test-off flex-1 ${!socket.socket.device_on ? 'opacity-50' : ''}">
|
||||
🔌 Ausschalten
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Einzelstatus anzeigen
|
||||
function displaySingleSocketStatus(data) {
|
||||
const statusDiv = document.getElementById('single-socket-status');
|
||||
const riskClass = getRiskClass(data.safety.warnings.length);
|
||||
|
||||
statusDiv.innerHTML = `
|
||||
<div class="test-card p-4 ${riskClass}">
|
||||
<div class="mb-4">
|
||||
<h3 class="font-semibold text-lg">${data.printer.name}</h3>
|
||||
<p class="text-sm text-gray-600">${data.printer.location}</p>
|
||||
<div class="mt-2">
|
||||
<span class="socket-${data.socket.status} font-semibold">
|
||||
${getStatusText(data.socket.status, data.socket.info?.device_on)}
|
||||
</span>
|
||||
${data.socket.info?.current_power ? ` • ${data.socket.info.current_power}W` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${data.safety.warnings.length > 0 ? `
|
||||
<div class="warning-banner mb-4">
|
||||
<div class="font-medium mb-2">⚠️ Sicherheitswarnungen:</div>
|
||||
${data.safety.warnings.map(warning => `<div>• ${warning}</div>`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${data.safety.recommendations.length > 0 ? `
|
||||
<div class="info-banner mb-4">
|
||||
<div class="font-medium mb-2">💡 Empfehlungen:</div>
|
||||
${data.safety.recommendations.map(rec => `<div>• ${rec}</div>`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button onclick="testSocketControl(${data.printer.id}, 'on')"
|
||||
class="test-button btn-test-on flex-1">
|
||||
⚡ Test: Einschalten
|
||||
</button>
|
||||
<button onclick="testSocketControl(${data.printer.id}, 'off')"
|
||||
class="test-button btn-test-off flex-1">
|
||||
🔌 Test: Ausschalten
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Test-Modal öffnen
|
||||
function testSocketControl(printerId, action) {
|
||||
const printer = printers.find(p => p.id == printerId);
|
||||
if (!printer) return;
|
||||
|
||||
currentTestData = { printerId, action, printer };
|
||||
|
||||
const modal = document.getElementById('test-confirmation-modal');
|
||||
const content = document.getElementById('test-modal-content');
|
||||
|
||||
content.innerHTML = `
|
||||
<p class="mb-4">
|
||||
<strong>Drucker:</strong> ${printer.name}<br>
|
||||
<strong>Aktion:</strong> Steckdose ${action === 'on' ? 'einschalten' : 'ausschalten'}
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2">Grund für den Test:</label>
|
||||
<input type="text" id="test-reason" class="w-full p-2 border rounded"
|
||||
placeholder="z.B. Routinetest, Wartung, etc." value="Routinetest">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" id="force-test" class="mr-2">
|
||||
<span class="text-sm">Sicherheitswarnungen überschreiben (force)</span>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Test ausführen
|
||||
async function executeTest() {
|
||||
if (!currentTestData) return;
|
||||
|
||||
const reason = document.getElementById('test-reason').value || 'Routinetest';
|
||||
const force = document.getElementById('force-test').checked;
|
||||
|
||||
const confirmBtn = document.getElementById('confirm-test-btn');
|
||||
confirmBtn.innerHTML = '<div class="loading-spinner"></div> Teste...';
|
||||
confirmBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/printers/test/socket/${currentTestData.printerId}/control`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': document.querySelector('meta[name=csrf-token]').getAttribute('content')
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: currentTestData.action,
|
||||
test_reason: reason,
|
||||
force: force
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showNotification(`Test erfolgreich: ${data.message}`, 'success');
|
||||
loadAllSocketsStatus();
|
||||
loadSingleSocketStatus();
|
||||
} else {
|
||||
if (data.requires_force) {
|
||||
showNotification('Test blockiert: ' + data.error + ' Aktivieren Sie "force" um fortzufahren.', 'warning');
|
||||
} else {
|
||||
showNotification('Test fehlgeschlagen: ' + data.error, 'error');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Test:', error);
|
||||
showNotification('Fehler beim Test: ' + error.message, 'error');
|
||||
} finally {
|
||||
closeTestModal();
|
||||
}
|
||||
}
|
||||
|
||||
// Modal schließen
|
||||
function closeTestModal() {
|
||||
const modal = document.getElementById('test-confirmation-modal');
|
||||
modal.classList.add('hidden');
|
||||
currentTestData = null;
|
||||
|
||||
const confirmBtn = document.getElementById('confirm-test-btn');
|
||||
confirmBtn.innerHTML = 'Test durchführen';
|
||||
confirmBtn.disabled = false;
|
||||
}
|
||||
|
||||
// Hilfsfunktionen
|
||||
function getRiskClass(warningCount) {
|
||||
if (warningCount === 0) return 'risk-low';
|
||||
if (warningCount <= 2) return 'risk-medium';
|
||||
return 'risk-high';
|
||||
}
|
||||
|
||||
function getStatusText(status, deviceOn) {
|
||||
switch (status) {
|
||||
case 'online': return deviceOn ? '🟢 Eingeschaltet' : '🔴 Ausgeschaltet';
|
||||
case 'offline': return '🔴 Ausgeschaltet';
|
||||
case 'error': return '⚠️ Fehler';
|
||||
default: return '❓ Unbekannt';
|
||||
}
|
||||
}
|
||||
|
||||
function showNotification(message, type) {
|
||||
// Einfache Benachrichtigung - kann durch Toast-System ersetzt werden
|
||||
alert(message);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user