diff --git a/app/api/fuenf_minuten.py b/app/api/fuenf_minuten.py index d06d081..3f4c2e5 100644 --- a/app/api/fuenf_minuten.py +++ b/app/api/fuenf_minuten.py @@ -5,21 +5,17 @@ fuenf_minuten_bp = Blueprint('fuenf_minuten', __name__, url_prefix='/fuenf_minut @fuenf_minuten_bp.route('/', strict_slashes=False) def fuenf_minuten(): - # Abrufen der Filterparameter aus der Anfrage start_date = request.args.get('start_date') end_date = request.args.get('end_date') 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.'}) - # Aufbau der Verbindung zur Datenbank conn = get_db_connection() cursor = conn.cursor() - # SQL-Abfrage zur Generierung der 5-Minuten-Intervalle und Zählung der Übertragungen query = """ WITH RECURSIVE seq AS ( SELECT 0 AS n @@ -43,12 +39,10 @@ def fuenf_minuten(): 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}" try: - # Ausführen der SQL-Abfrage cursor.execute(query, ( start_datetime, end_datetime, @@ -59,11 +53,8 @@ def fuenf_minuten(): )) results = cursor.fetchall() 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 conn.close() return jsonify({'error': str(e)}) diff --git a/app/static/js/fuenf_minuten.js b/app/static/js/fuenf_minuten.js index b09d4cc..e93b3dc 100644 --- a/app/static/js/fuenf_minuten.js +++ b/app/static/js/fuenf_minuten.js @@ -1,122 +1,92 @@ -// Globale Variable für den Chart -let fuenfMinutenChart; - -// Funktion zum Abrufen und Aktualisieren des Charts -function fetchAndUpdateChart(filter = null) { +document.addEventListener('DOMContentLoaded', function() { const startDateInput = document.getElementById('startDate'); const endDateInput = document.getElementById('endDate'); const startTimeInput = document.getElementById('startTime'); const endTimeInput = document.getElementById('endTime'); - // Abrufen von Start- und Enddaten mit Standardwerten - let startDate = startDateInput.value || getDefaultDate(-1); // Standardwert: Gestern - let endDate = endDateInput.value || getDefaultDate(0); // Standardwert: Heute - let startTime = startTimeInput.value || '00:00'; - let endTime = endTimeInput.value || '23:59'; + function fetchAndUpdateChart() { + const startDate = startDateInput.value; + const endDate = endDateInput.value; + const startTime = startTimeInput.value || '00:00'; + const endTime = endTimeInput.value || '23:59'; - // Überschreiben mit Zeitraumfilter, falls angegeben - if (filter) { - const now = new Date(); - if (filter === '24h') { - startDate = getDefaultDate(-1); - endDate = getDefaultDate(0); - } else if (filter === '7d') { - startDate = getDefaultDate(-7); - endDate = getDefaultDate(0); - } else if (filter === '1m') { - startDate = getDefaultDate(-30); - endDate = getDefaultDate(0); - } else if (filter === '1y') { - startDate = getDefaultDate(-365); - endDate = getDefaultDate(0); + if (!startDate || !endDate) { + alert('Bitte sowohl Start- als auch End-Datum auswählen!'); + return; } - } - // API-Aufruf - fetch(`/fuenf_minuten?start_date=${startDate}&end_date=${endDate}&start_time=${startTime}&end_time=${endTime}`) - .then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - return response.json(); - }) - .then(data => { - if (!Array.isArray(data)) { - throw new Error('Ungültige Daten vom Server.'); - } + fetch(`/fuenf_minuten?start_date=${startDate}&end_date=${endDate}&start_time=${startTime}&end_time=${endTime}`) + .then(response => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then(data => { + if (!Array.isArray(data)) { + throw new Error('Ungültige Daten vom Server.'); + } - // Labels und Werte für den Chart - const labels = data.map(item => item.time_slot); - const values = data.map(item => item.transmission_count); + const labels = data.map(item => item.time_slot); + const values = data.map(item => item.transmission_count); - // Farben für Balken - 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'); - const ctx = document.getElementById('fuenfMinutenChart').getContext('2d'); + if (window.fuenfMinutenChart) { + window.fuenfMinutenChart.destroy(); + } - // Alten Chart zerstören, falls vorhanden - if (fuenfMinutenChart) { - fuenfMinutenChart.destroy(); - } - - // Neuer Chart - fuenfMinutenChart = new Chart(ctx, { - type: 'bar', - data: { - labels: labels, - datasets: [{ - label: 'Übertragungen', - data: values, - backgroundColor: backgroundColors, - borderColor: borderColors, - borderWidth: 1 - }] - }, - options: { - scales: { - x: { - title: { - display: true, - text: 'Zeit' - } - }, - y: { - title: { - display: true, - text: 'Anzahl' + window.fuenfMinutenChart = new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [{ + label: 'Übertragungen', + data: values, + backgroundColor: 'rgba(54, 162, 235, 0.5)', + borderColor: 'rgba(54, 162, 235, 1)', + borderWidth: 1 + }] + }, + options: { + scales: { + x: { + title: { + display: true, + text: 'Zeit' + } }, - beginAtZero: true + y: { + title: { + display: true, + text: 'Anzahl' + }, + beginAtZero: true + } } } - } + }); + }) + .catch(err => { + console.error('Fehler bei der 5-Minuten-Datenabfrage:', err.message); + alert(`Fehler bei der 5-Minuten-Datenabfrage: ${err.message}`); }); - }) - .catch(err => { - console.error('Fehler bei der 5-Minuten-Datenabfrage:', err.message); - alert(`Fehler bei der 5-Minuten-Datenabfrage: ${err.message}`); - }); -} + } -// Funktion zur Berechnung von Standarddaten -function getDefaultDate(offsetDays) { - const date = new Date(); - date.setDate(date.getDate() + offsetDays); - return date.toISOString().split('T')[0]; -} + // Set default dates to pre-fill inputs + const now = new Date(); + const yesterday = new Date(); + yesterday.setDate(now.getDate() - 1); -// Event Listener für Zeitfilter -document.addEventListener('DOMContentLoaded', () => { - document.getElementById('timeFilter').addEventListener('change', (event) => { - fetchAndUpdateChart(event.target.value); - }); + startDateInput.value = yesterday.toISOString().split('T')[0]; + endDateInput.value = now.toISOString().split('T')[0]; - // Listener für Datumsauswahl - document.getElementById('startDate').addEventListener('change', () => fetchAndUpdateChart()); - document.getElementById('endDate').addEventListener('change', () => fetchAndUpdateChart()); - document.getElementById('startTime').addEventListener('change', () => fetchAndUpdateChart()); - document.getElementById('endTime').addEventListener('change', () => fetchAndUpdateChart()); + // Event Listener for changes in date and time inputs + startDateInput.addEventListener('change', fetchAndUpdateChart); + endDateInput.addEventListener('change', fetchAndUpdateChart); + startTimeInput.addEventListener('change', fetchAndUpdateChart); + endTimeInput.addEventListener('change', fetchAndUpdateChart); - // Initiales Laden mit Standardwerten - fetchAndUpdateChart('24h'); + // Initial chart load + fetchAndUpdateChart(); });