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

Title: Enhanced Data Management and Job Queue System Integration

Browse Source 
🎉 New Feature: Integrated advanced data management capabilities with improved job queue system for seamless workflow.

📚 The updated data management module now offers robust features such as data validation, normalization, and efficient storage using optimized database queries. This ensures accurate and consistent data handling across the application.

💄 Additionally, the job queue system has been upgraded to handle complex tasks more efficiently, reducing latency and improving overall
This commit is contained in:
Till Tomczak
2025-06-16 00:58:43 +02:00
parent 81cd0e8feb
commit 124953049b
193 changed files with 2145 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
backend/templates/energy_dashboard.html
View File

@@ -5,22 +5,14 @@
<style>
/* Energiemonitoring Dashboard Styles */
.energy-card {
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.8) 100%);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
@apply glass card;
transition: all 0.3s ease;
}
.dark .energy-card {
background: linear-gradient(135deg, rgba(51,65,85,0.9) 0%, rgba(51,65,85,0.8) 100%);
border: 1px solid rgba(71,85,105,0.3);
}
.energy-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.energy-metric {
@@ -69,42 +61,40 @@
{% endblock %}
{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-slate-900 dark:via-slate-900 dark:to-slate-800">
<div class="main-offset min-h-screen">
<!-- Header Section -->
<div class="bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="glass mb-8">
<div class="max-w-7xl mx-auto">
<div class="flex items-center justify-between">
<div>
<h1 class="text-4xl font-bold tracking-tight">🔋 Energiemonitoring</h1>
<p class="mt-2 text-xl text-blue-100">
<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="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-xl backdrop-blur-sm transition-all duration-300">
<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>
<button id="refreshData" class="btn btn-primary">
<i class="fas fa-sync-alt mr-2"></i>
Aktualisieren
</button>
<button id="exportData" class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-xl backdrop-blur-sm transition-all duration-300">
<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 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>
<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 -mt-8 relative z-10">
<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 p-6">
<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-xl">
<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>
@@ -121,9 +111,9 @@
</div>
<!-- Online Geräte -->
<div class="energy-card p-6">
<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-xl">
<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>
@@ -139,9 +129,9 @@
</div>
<!-- Heute Verbrauch -->
<div class="energy-card p-6">
<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-xl">
<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>
@@ -157,9 +147,9 @@
</div>
<!-- Monatsverbrauch -->
<div class="energy-card p-6">
<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-xl">
<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>
@@ -181,7 +171,7 @@
<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-lg text-sm">
<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>
@@ -194,10 +184,10 @@
</div>
<!-- Geräteverbrauch Chart -->
<div class="energy-card p-6">
<div class="energy-card">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-semibold text-slate-900 dark:text-white">🔌 Geräteverbrauch</h3>
<div class="text-sm text-slate-500 dark:text-slate-400">Live-Verbrauch</div>
<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>
@@ -206,12 +196,12 @@
</div>
<!-- Device List -->
<div class="energy-card p-6 mb-8">
<h3 class="text-xl font-semibold text-slate-900 dark:text-white mb-6">🖨️ Geräteübersicht</h3>
<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="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
<div class="spinner w-8 h-8"></div>
</div>
</div>
</div>
@@ -220,10 +210,10 @@
</div>
<!-- Loading Overlay -->
<div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 flex items-center space-x-4">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
<span class="text-slate-900 dark:text-white">Lade Energiedaten...</span>
<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 %}
@@ -477,7 +467,7 @@ class EnergyMonitoringDashboard {
if (devices.length === 0) {
container.innerHTML = `
<div class="text-center py-8 text-slate-500 dark:text-slate-400">
<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>
@@ -488,26 +478,28 @@ class EnergyMonitoringDashboard {
}
container.innerHTML = devices.map(device => `
<div class="flex items-center justify-between p-4 bg-white/60 dark:bg-slate-700/60 rounded-xl border border-slate-200 dark:border-slate-600">
<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-slate-900 dark:text-white">${device.name}</h4>
<p class="text-sm text-slate-500 dark:text-slate-400">ID: ${device.id}</p>
<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>
<div class="text-right">
<div class="text-xl font-bold text-slate-900 dark:text-white">
${device.power}W
<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="text-sm text-slate-500 dark:text-slate-400">
${device.online ? 'Online' : 'Offline'}
</div>
</div>
<div class="w-16">
<div class="power-gradient"></div>
<div class="text-xs text-center mt-1 text-slate-500 dark:text-slate-400">
${Math.round((device.power / 100) * 100)}%
<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>