Till Tomczak
a8f27179b5
1. **Entfernung von 'node_modules'**: Es scheint, dass Sie den 'node_modules'-Ordner entfernt oder aktualisiert haben, da einige Dateien wie '.gitignore', 'package
366 lines
14 KiB
HTML
366 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Energiemonitoring - Mercedes-Benz TBA Marienfelde{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
<!-- Chart.js für Energiediagramme -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<!-- Custom CSS für Energiemonitoring -->
|
|
<style>
|
|
.energy-card {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
|
border: 2px solid #f1f5f9;
|
|
border-radius: 16px;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.energy-card:hover {
|
|
transform: translateY(-4px) scale(1.02);
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
|
border-color: #0073ce;
|
|
}
|
|
.energy-metric {
|
|
background: linear-gradient(135deg, #0073ce 0%, #005ba3 100%);
|
|
color: white;
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
|
|
|
|
<!-- Hero Header -->
|
|
<div class="relative overflow-hidden bg-gradient-to-r from-slate-900 via-blue-900 to-indigo-900 text-white rounded-3xl mx-4 mt-4">
|
|
<div class="absolute inset-0 bg-black/20"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
|
|
|
|
<!-- Live Status Indicator -->
|
|
<div class="absolute top-4 right-4 flex items-center space-x-2">
|
|
<div class="flex items-center space-x-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-3 py-1">
|
|
<div id="live-indicator" class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
|
<span class="text-sm font-medium">Live</span>
|
|
</div>
|
|
<div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-3 py-1">
|
|
<span id="live-time" class="text-sm font-medium"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div class="text-center">
|
|
<!-- Mercedes-Benz Logo -->
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-white/10 backdrop-blur-sm rounded-full mb-6 border border-white/20">
|
|
<svg class="w-10 h-10 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-4 tracking-tight">
|
|
<span class="bg-gradient-to-r from-white to-blue-200 bg-clip-text text-transparent">
|
|
Energiemonitoring
|
|
</span>
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto leading-relaxed">
|
|
Überwachung des Energieverbrauchs aller 3D-Drucker mit TP-Link Tapo Smart Plugs
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
{% if stats.error %}
|
|
<!-- Error State -->
|
|
<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-6 mb-8">
|
|
<div class="flex items-center">
|
|
<svg class="w-6 h-6 text-red-500 mr-3" 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.732-.833-2.464 0L4.35 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
|
</svg>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-red-800 dark:text-red-200">Energiemonitoring nicht verfügbar</h3>
|
|
<p class="text-red-600 dark:text-red-300 mt-1">{{ stats.error }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
|
|
<!-- Energy Overview Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
|
|
<!-- Total Power Consumption -->
|
|
<div class="energy-card p-6">
|
|
<div class="energy-metric">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Gesamtverbrauch</h3>
|
|
<p class="text-3xl font-bold" id="total-power">{{ stats.total_power_consumption or '0.0' }} kWh</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Power -->
|
|
<div class="energy-card p-6">
|
|
<div class="energy-metric">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Aktuelle Leistung</h3>
|
|
<p class="text-3xl font-bold" id="current-power">{{ stats.current_power or '0.0' }} W</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Devices -->
|
|
<div class="energy-card p-6">
|
|
<div class="energy-metric">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Aktive Geräte</h3>
|
|
<p class="text-3xl font-bold" id="active-devices">{{ stats.active_devices or '0' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Energy Cost -->
|
|
<div class="energy-card p-6">
|
|
<div class="energy-metric">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Kosten (€/kWh 0.30)</h3>
|
|
<p class="text-3xl font-bold" id="energy-cost">{{ "%.2f"|format((stats.total_power_consumption or 0) * 0.30) }} €</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
|
|
|
<!-- Power Consumption Over Time -->
|
|
<div class="energy-card p-6">
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Verbrauch der letzten 24 Stunden</h3>
|
|
<div class="relative h-80">
|
|
<canvas id="powerChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Device Comparison -->
|
|
<div class="energy-card p-6">
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Verbrauch nach Gerät</h3>
|
|
<div class="relative h-80">
|
|
<canvas id="deviceChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Device List -->
|
|
<div class="energy-card p-6">
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Geräteübersicht</h3>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<thead class="bg-gray-50 dark:bg-gray-800">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Gerät</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Aktuelle Leistung</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tagesverbrauch</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="device-table-body" class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
|
<!-- Dynamisch geladen via JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript für Live-Updates und Charts -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Live-Zeit aktualisieren
|
|
function updateLiveTime() {
|
|
const timeElement = document.getElementById('live-time');
|
|
if (timeElement) {
|
|
timeElement.textContent = new Date().toLocaleTimeString('de-DE');
|
|
}
|
|
}
|
|
|
|
// Alle Sekunde aktualisieren
|
|
setInterval(updateLiveTime, 1000);
|
|
updateLiveTime();
|
|
|
|
// Charts initialisieren
|
|
initializeCharts();
|
|
|
|
// Geräteliste laden
|
|
loadDeviceList();
|
|
|
|
// Auto-Update alle 30 Sekunden
|
|
setInterval(() => {
|
|
loadEnergyData();
|
|
loadDeviceList();
|
|
}, 30000);
|
|
});
|
|
|
|
function initializeCharts() {
|
|
// Power Chart
|
|
const powerCtx = document.getElementById('powerChart');
|
|
if (powerCtx) {
|
|
new Chart(powerCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [], // Wird dynamisch geladen
|
|
datasets: [{
|
|
label: 'Leistung (W)',
|
|
data: [],
|
|
borderColor: '#0073ce',
|
|
backgroundColor: 'rgba(0, 115, 206, 0.1)',
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Leistung (W)'
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Zeit'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Device Chart
|
|
const deviceCtx = document.getElementById('deviceChart');
|
|
if (deviceCtx) {
|
|
new Chart(deviceCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: [], // Wird dynamisch geladen
|
|
datasets: [{
|
|
data: [],
|
|
backgroundColor: [
|
|
'#0073ce',
|
|
'#005ba3',
|
|
'#aaa9ad',
|
|
'#5e5e5e',
|
|
'#f59e0b',
|
|
'#10b981'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async function loadEnergyData() {
|
|
try {
|
|
const response = await fetch('/api/energy/overview');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
updateEnergyMetrics(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Energiedaten:', error);
|
|
}
|
|
}
|
|
|
|
async function loadDeviceList() {
|
|
try {
|
|
const response = await fetch('/api/energy/devices');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
updateDeviceTable(data.devices || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Geräteliste:', error);
|
|
}
|
|
}
|
|
|
|
function updateEnergyMetrics(data) {
|
|
if (data.total_power_consumption !== undefined) {
|
|
document.getElementById('total-power').textContent = data.total_power_consumption.toFixed(1) + ' kWh';
|
|
}
|
|
if (data.current_power !== undefined) {
|
|
document.getElementById('current-power').textContent = data.current_power.toFixed(1) + ' W';
|
|
}
|
|
if (data.active_devices !== undefined) {
|
|
document.getElementById('active-devices').textContent = data.active_devices;
|
|
}
|
|
if (data.total_power_consumption !== undefined) {
|
|
const cost = (data.total_power_consumption * 0.30).toFixed(2);
|
|
document.getElementById('energy-cost').textContent = cost + ' €';
|
|
}
|
|
}
|
|
|
|
function updateDeviceTable(devices) {
|
|
const tbody = document.getElementById('device-table-body');
|
|
if (!tbody) return;
|
|
|
|
tbody.innerHTML = '';
|
|
|
|
if (devices.length === 0) {
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
|
|
Keine Geräte gefunden
|
|
</td>
|
|
</tr>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
devices.forEach(device => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'hover:bg-gray-50 dark:hover:bg-gray-800';
|
|
|
|
const statusClass = device.status === 'online' ? 'text-green-600' : 'text-red-600';
|
|
const statusText = device.status === 'online' ? 'Online' : 'Offline';
|
|
|
|
row.innerHTML = `
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="text-sm font-medium text-gray-900 dark:text-white">${device.name}</div>
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">${device.model || ''}</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}">
|
|
${statusText}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
|
|
${device.current_power || '0.0'} W
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
|
|
${device.daily_consumption || '0.0'} kWh
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<a href="/energy/device/${device.id}" class="text-mercedes-blue hover:text-mercedes-blue/80">
|
|
Details anzeigen
|
|
</a>
|
|
</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %} |