From f47f09409c2536aeb6890d5cdb8f23475448d76f Mon Sep 17 00:00:00 2001 From: no Date: Fri, 29 Nov 2024 14:10:15 +0100 Subject: [PATCH] fix js --- app/static/js/fuenf_minuten.js | 188 +++++++++++++++++++-------------- 1 file changed, 111 insertions(+), 77 deletions(-) diff --git a/app/static/js/fuenf_minuten.js b/app/static/js/fuenf_minuten.js index 09e730b..b09d4cc 100644 --- a/app/static/js/fuenf_minuten.js +++ b/app/static/js/fuenf_minuten.js @@ -1,88 +1,122 @@ -document.addEventListener('DOMContentLoaded', function() { +// Globale Variable für den Chart +let fuenfMinutenChart; + +// Funktion zum Abrufen und Aktualisieren des Charts +function fetchAndUpdateChart(filter = null) { const startDateInput = document.getElementById('startDate'); const endDateInput = document.getElementById('endDate'); const startTimeInput = document.getElementById('startTime'); const endTimeInput = document.getElementById('endTime'); - function fetchAndUpdateChart() { - const startDate = startDateInput.value; - const endDate = endDateInput.value; - const startTime = startTimeInput.value || '00:00'; - const endTime = endTimeInput.value || '23:59'; + // 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'; - if (!startDate || !endDate) { - alert('Bitte sowohl Start- als auch End-Datum auswählen!'); - return; + // Ü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); } - - 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.'); - } - - const labels = data.map(item => item.time_slot); - const values = data.map(item => item.transmission_count); - - // 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'); - - if (window.fuenfMinutenChart) { - window.fuenfMinutenChart.destroy(); - } - - window.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' - }, - beginAtZero: true - } - } - } - }); - }) - .catch(err => { - console.error('Fehler bei der 5-Minuten-Datenabfrage:', err.message); - alert(`Fehler bei der 5-Minuten-Datenabfrage: ${err.message}`); - }); } - // Event Listener für Datum- und Zeitauswahl - startDateInput.addEventListener('change', fetchAndUpdateChart); - endDateInput.addEventListener('change', fetchAndUpdateChart); - startTimeInput.addEventListener('change', fetchAndUpdateChart); - endTimeInput.addEventListener('change', fetchAndUpdateChart); + // 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.'); + } - // Initiales Laden des Diagramms - fetchAndUpdateChart(); + // Labels und Werte für den Chart + 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'); + + // 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' + }, + beginAtZero: true + } + } + } + }); + }) + .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]; +} + +// Event Listener für Zeitfilter +document.addEventListener('DOMContentLoaded', () => { + document.getElementById('timeFilter').addEventListener('change', (event) => { + fetchAndUpdateChart(event.target.value); + }); + + // 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()); + + // Initiales Laden mit Standardwerten + fetchAndUpdateChart('24h'); });