no/flask-webservice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix js

Browse Source
This commit is contained in:
no
2024-11-29 14:10:15 +01:00
parent e938d70950
commit f47f09409c
1 changed files with 111 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/fuenf_minuten.js
+54 -20
View File
@@ -1,20 +1,38 @@
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 startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate'); const endDateInput = document.getElementById('endDate');
const startTimeInput = document.getElementById('startTime'); const startTimeInput = document.getElementById('startTime');
const endTimeInput = document.getElementById('endTime'); const endTimeInput = document.getElementById('endTime');
function fetchAndUpdateChart() { // Abrufen von Start- und Enddaten mit Standardwerten
const startDate = startDateInput.value; let startDate = startDateInput.value || getDefaultDate(-1); // Standardwert: Gestern
const endDate = endDateInput.value; let endDate = endDateInput.value || getDefaultDate(0); // Standardwert: Heute
const startTime = startTimeInput.value || '00:00'; let startTime = startTimeInput.value || '00:00';
const endTime = endTimeInput.value || '23:59'; let endTime = endTimeInput.value || '23:59';
if (!startDate || !endDate) { // Überschreiben mit Zeitraumfilter, falls angegeben
alert('Bitte sowohl Start- als auch End-Datum auswählen!'); if (filter) {
return; 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);
}
} }
// API-Aufruf
fetch(`/fuenf_minuten?start_date=${startDate}&end_date=${endDate}&start_time=${startTime}&end_time=${endTime}`) fetch(`/fuenf_minuten?start_date=${startDate}&end_date=${endDate}&start_time=${startTime}&end_time=${endTime}`)
.then(response => { .then(response => {
if (!response.ok) { if (!response.ok) {
@@ -27,20 +45,23 @@ document.addEventListener('DOMContentLoaded', function() {
throw new Error('Ungültige Daten vom Server.'); throw new Error('Ungültige Daten vom Server.');
} }
// Labels und Werte für den Chart
const labels = data.map(item => item.time_slot); const labels = data.map(item => item.time_slot);
const values = data.map(item => item.transmission_count); const values = data.map(item => item.transmission_count);
// Farben für Balken: Rot für 0-Übertragungen, Blau für andere // Farben für Balken
const backgroundColors = values.map(value => value === 0 ? 'rgba(255, 99, 132, 0.5)' : 'rgba(54, 162, 235, 0.5)'); 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 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) { // Alten Chart zerstören, falls vorhanden
window.fuenfMinutenChart.destroy(); if (fuenfMinutenChart) {
fuenfMinutenChart.destroy();
} }
window.fuenfMinutenChart = new Chart(ctx, { // Neuer Chart
fuenfMinutenChart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: labels, labels: labels,
@@ -77,12 +98,25 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
} }
// Event Listener für Datum- und Zeitauswahl // Funktion zur Berechnung von Standarddaten
startDateInput.addEventListener('change', fetchAndUpdateChart); function getDefaultDate(offsetDays) {
endDateInput.addEventListener('change', fetchAndUpdateChart); const date = new Date();
startTimeInput.addEventListener('change', fetchAndUpdateChart); date.setDate(date.getDate() + offsetDays);
endTimeInput.addEventListener('change', fetchAndUpdateChart); return date.toISOString().split('T')[0];
}
// Initiales Laden des Diagramms // Event Listener für Zeitfilter
fetchAndUpdateChart(); 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');
}); });