First Commit - sieht schon gut aus

2026-01-30 19:30:49 +01:00
commit 715f72907a
8 changed files with 2470 additions and 0 deletions
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -0,0 +1,142 @@
+// Datum auf heute und vor 7 Tagen setzen
+function initializeDates() {
+    const today = new Date();
+    const weekAgo = new Date();
+    weekAgo.setDate(today.getDate() - 7);
+
+    document.getElementById('endDate').valueAsDate = today;
+    document.getElementById('startDate').valueAsDate = weekAgo;
+}
+
+// Datum formatieren
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleString('de-DE', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}
+
+// Zahl formatieren
+function formatNumber(num) {
+    return new Intl.NumberFormat('de-DE', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+    }).format(num);
+}
+
+// Formular absenden
+document.getElementById('verbrauchForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    // Ausgewählte Collections sammeln
+    const checkboxes = document.querySelectorAll('.checkbox-group input[type="checkbox"]:checked');
+    const selectedCollections = Array.from(checkboxes).map(cb => cb.value);
+    
+    if (selectedCollections.length === 0) {
+        alert('Bitte wählen Sie mindestens eine Collection aus.');
+        return;
+    }
+    
+    const startDate = document.getElementById('startDate').value;
+    const endDate = document.getElementById('endDate').value;
+    
+    const resultsDiv = document.getElementById('results');
+    resultsDiv.innerHTML = '<div class="loading">Lade Daten...</div>';
+    
+    try {
+        const collectionsParam = selectedCollections.join(',');
+        const response = await fetch(
+            `/api/verbrauch?collections=${collectionsParam}&startDate=${startDate}&endDate=${endDate}`
+        );
+        
+        if (!response.ok) {
+            throw new Error('Fehler beim Abrufen der Daten');
+        }
+        
+        const data = await response.json();
+        displayResults(data);
+        
+    } catch (error) {
+        resultsDiv.innerHTML = `
+            <div class="error-box">
+                <strong>Fehler:</strong> ${error.message}
+            </div>
+        `;
+    }
+});
+
+// Ergebnisse anzeigen
+function displayResults(data) {
+    const resultsDiv = document.getElementById('results');
+    
+    if (data.verbraucher.length === 0) {
+        resultsDiv.innerHTML = `
+            <div class="info-box">
+                Keine Daten für den gewählten Zeitraum gefunden.
+            </div>
+        `;
+        return;
+    }
+
+    // Gesamtverbrauch berechnen
+    const gesamtVerbrauch = data.verbraucher.reduce((sum, v) => sum + v.verbrauch, 0);
+
+    let html = `
+        <div class="info-box">
+            <strong>Zeitraum:</strong> ${formatDate(data.zeitraum.von)} - ${formatDate(data.zeitraum.bis)}<br>
+            <strong>Collections:</strong> ${data.collections.join(', ')}<br>
+            <strong>Anzahl Verbraucher:</strong> ${data.verbraucher.length}
+        </div>
+        
+        <table>
+            <thead>
+                <tr>
+                    <th>Collection</th>
+                    <th>Verbraucher</th>
+                    <th class="number">Anfangswert (Wh)</th>
+                    <th>Anfangszeit</th>
+                    <th class="number">Endwert (Wh)</th>
+                    <th>Endzeit</th>
+                    <th class="number">Verbrauch (Wh)</th>
+                    <th class="number">Verbrauch (kWh)</th>
+                </tr>
+            </thead>
+            <tbody>
+    `;
+
+    data.verbraucher.forEach(v => {
+        html += `
+            <tr>
+                <td><strong>${v.collection}</strong></td>
+                <td><strong>${v.verbraucher}</strong></td>
+                <td class="number">${formatNumber(v.anfangsWert)}</td>
+                <td>${formatDate(v.anfangsZeit)}</td>
+                <td class="number">${formatNumber(v.endWert)}</td>
+                <td>${formatDate(v.endZeit)}</td>
+                <td class="number">${formatNumber(v.verbrauch)}</td>
+                <td class="number">${formatNumber(v.verbrauch / 1000)}</td>
+            </tr>
+        `;
+    });
+
+    html += `
+            </tbody>
+        </table>
+        
+        <div class="summary">
+            <span class="summary-label">Gesamtverbrauch:</span>
+            <span class="summary-value">${formatNumber(gesamtVerbrauch / 1000)} kWh</span>
+        </div>
+    `;
+
+    resultsDiv.innerHTML = html;
+}
+
+// Beim Laden initialisieren
+window.addEventListener('DOMContentLoaded', () => {
+    initializeDates();
+});