fix five minute chart

app/api/fuenf_minuten.py

@@ -11,6 +11,7 @@ def fuenf_minuten():
     start_time = request.args.get('start_time', '00:00')
     end_time = request.args.get('end_time', '23:59')
 
+    # Validierung der Eingabewerte
     if not start_date or not end_date:
         return jsonify({'error': 'Bitte sowohl Start- als auch End-Datum auswählen.'})
 
@@ -18,9 +19,14 @@ def fuenf_minuten():
     conn = get_db_connection()
     cursor = conn.cursor()
 
-    # SQL-Abfrage
+    # SQL-Abfrage zur Generierung der 5-Minuten-Intervalle und Zählung der Übertragungen
     query = """
-    WITH time_slots AS (
+    WITH RECURSIVE seq AS (
+        SELECT 0 AS n
+        UNION ALL
+        SELECT n + 5 FROM seq WHERE n + 5 <= TIMESTAMPDIFF(MINUTE, %s, %s)
+    ),
+    time_slots AS (
         SELECT DATE_FORMAT(create_time, '%Y-%m-%d %H:%i') AS time_slot, COUNT(*) AS transmission_count
         FROM gi_debugger_entry
         WHERE webservice_id = %s
@@ -28,51 +34,36 @@ def fuenf_minuten():
         GROUP BY time_slot
     ),
     all_times AS (
-        SELECT DATE_FORMAT(TIMESTAMPADD(MINUTE, (@row := @row + 5), %s), '%Y-%m-%d %H:%i') AS time_slot
+        SELECT DATE_FORMAT(TIMESTAMPADD(MINUTE, n, %s), '%Y-%m-%d %H:%i') AS time_slot
-        FROM (SELECT @row := -5) AS vars
+        FROM seq
-        CROSS JOIN (
-            SELECT 1 AS dummy
-            FROM gi_debugger_entry
-            LIMIT 100000
-        ) AS generator
-        WHERE TIMESTAMPADD(MINUTE, @row, %s) <= %s
     )
     SELECT all_times.time_slot, COALESCE(time_slots.transmission_count, 0) AS transmission_count
     FROM all_times
     LEFT JOIN time_slots ON all_times.time_slot = time_slots.time_slot
     ORDER BY all_times.time_slot;
     """
+
+    # Setzen der Parameter für die SQL-Abfrage
     start_datetime = f"{start_date} {start_time}"
     end_datetime = f"{end_date} {end_time}"
 
-    # Debugging: Ausgabe der Parameter
-    print(f"Start datetime: {start_datetime}")
-    print(f"End datetime: {end_datetime}")
-    print(f"Executing query for WEB_SERVICE_ID: {current_app.config['WEB_SERVICE_ID']}")
-
     try:
         # Ausführen der SQL-Abfrage
         cursor.execute(query, (
+            start_datetime,
+            end_datetime,
             current_app.config['WEB_SERVICE_ID'],
             start_datetime,
             end_datetime,
-            start_datetime,
+            start_datetime
-            start_datetime,
-            end_datetime
         ))
         results = cursor.fetchall()
-
-        # Debugging: Ausgabe der Ergebnisse
-        print("SQL query executed successfully.")
-        print("Results:", results)
-
         conn.close()
 
         # Formatierung der Ergebnisse für die API-Antwort
         return jsonify([{'time_slot': row[0], 'transmission_count': row[1]} for row in results])
 
     except Exception as e:
-        # Fehlerbehandlung und Debugging
+        # Fehlerbehandlung
         conn.close()
-        print("Error during SQL execution:", str(e))
         return jsonify({'error': str(e)})

app/static/js/fuenf_minuten.js

@@ -1,12 +1,14 @@
-// Globale Variable für den Chart
+document.addEventListener('DOMContentLoaded', function() {
-let fuenfMinutenChart;
+    const startDateInput = document.getElementById('startDate');
+    const endDateInput = document.getElementById('endDate');
+    const startTimeInput = document.getElementById('startTime');
+    const endTimeInput = document.getElementById('endTime');
 
-// Funktion zum Abrufen und Aktualisieren des Charts
     function fetchAndUpdateChart() {
-    const startDate = document.getElementById('startDate').value;
+        const startDate = startDateInput.value;
-    const endDate = document.getElementById('endDate').value;
+        const endDate = endDateInput.value;
-    const startTime = document.getElementById('startTime').value || '00:00';
+        const startTime = startTimeInput.value || '00:00';
-    const endTime = document.getElementById('endTime').value || '23:59';
+        const endTime = endTimeInput.value || '23:59';
 
         if (!startDate || !endDate) {
             alert('Bitte sowohl Start- als auch End-Datum auswählen!');
@@ -25,29 +27,25 @@ function fetchAndUpdateChart() {
                     throw new Error('Ungültige Daten vom Server.');
                 }
 
-            console.log('5-Minuten-Daten:', data);
-
                 const labels = data.map(item => item.time_slot);
                 const values = data.map(item => item.transmission_count);
 
-            // Farben für Balken (rot für 0-Werte, blau für andere Werte)
+                // Farben für Balken: Rot für 0-Übertragungen, Blau für andere
                 const backgroundColors = values.map(value => value === 0 ? 'rgba(255, 99, 132, 0.5)' : 'rgba(54, 162, 235, 0.5)');
                 const borderColors = values.map(value => value === 0 ? 'rgba(255, 99, 132, 1)' : 'rgba(54, 162, 235, 1)');
 
                 const ctx = document.getElementById('fuenfMinutenChart').getContext('2d');
 
-            // Zerstöre den bestehenden Chart, falls vorhanden
+                if (window.fuenfMinutenChart) {
-            if (fuenfMinutenChart) {
+                    window.fuenfMinutenChart.destroy();
-                fuenfMinutenChart.destroy();
                 }
 
-            // Erstelle den neuen Chart
+                window.fuenfMinutenChart = new Chart(ctx, {
-            fuenfMinutenChart = new Chart(ctx, {
                     type: 'bar',
                     data: {
                         labels: labels,
                         datasets: [{
-                        label: `Übertragungen`,
+                            label: 'Übertragungen',
                             data: values,
                             backgroundColor: backgroundColors,
                             borderColor: borderColors,
@@ -73,65 +71,18 @@ function fetchAndUpdateChart() {
                     }
                 });
             })
-        .catch(err => console.error('Fehler bei der 5-Minuten-Datenabfrage:', err));
+            .catch(err => {
-}
+                console.error('Fehler bei der 5-Minuten-Datenabfrage:', err.message);
-
+                alert(`Fehler bei der 5-Minuten-Datenabfrage: ${err.message}`);
-// Funktion, um Standardwerte für Datum und Zeit zu setzen
-function setDefaultDateTime() {
-    const now = new Date();
-    const yesterday = new Date();
-    yesterday.setDate(now.getDate() - 1);
-
-    // Standardwerte für Start- und Enddatum
-    document.getElementById('startDate').value = yesterday.toISOString().split('T')[0];
-    document.getElementById('endDate').value = now.toISOString().split('T')[0];
-
-    // Standardwerte für Start- und Endzeit
-    document.getElementById('startTime').value = '00:00';
-    document.getElementById('endTime').value = '23:59';
-}
-
-// Eventlistener: Initialer Abruf beim Seitenladen
-document.addEventListener('DOMContentLoaded', () => {
-    setDefaultDateTime(); // Standardwerte setzen
-    fetchAndUpdateChart(); // Standard-Daten laden
             });
-
-// Eventlistener: Filteränderung
-document.getElementById('timeFilter').addEventListener('change', (event) => {
-    const filter = event.target.value;
-
-    // Anpassung der Datumswerte basierend auf dem Filter
-    const now = new Date();
-    let startDate;
-    switch (filter) {
-        case '24h':
-            startDate = new Date();
-            startDate.setDate(now.getDate() - 1);
-            break;
-        case '7d':
-            startDate = new Date();
-            startDate.setDate(now.getDate() - 7);
-            break;
-        case '1m':
-            startDate = new Date();
-            startDate.setMonth(now.getMonth() - 1);
-            break;
-        case '1y':
-            startDate = new Date();
-            startDate.setFullYear(now.getFullYear() - 1);
-            break;
-        case 'all':
-            startDate = null;
-            break;
-        default:
-            startDate = null;
     }
 
-    if (startDate) {
+    // Event Listener für Datum- und Zeitauswahl
-        document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
+    startDateInput.addEventListener('change', fetchAndUpdateChart);
-        document.getElementById('endDate').value = now.toISOString().split('T')[0];
+    endDateInput.addEventListener('change', fetchAndUpdateChart);
-    }
+    startTimeInput.addEventListener('change', fetchAndUpdateChart);
+    endTimeInput.addEventListener('change', fetchAndUpdateChart);
 
+    // Initiales Laden des Diagramms
     fetchAndUpdateChart();
 });

app/templates/index.html

@@ -27,7 +27,7 @@
 	<label for="endTime">End-Zeit:</label>
 	<input type="time" id="endTime" value="23:59">
 	<button id="calculateButton">Berechne maximale Differenz</button>
-	<p id="maxTimeDiff">Lädt...</p>
+	<p id="maxTimeDiff">Please press calculate.</p>
     </div>
     <div>
 	<h2>5-Minuten-Chart</h2>