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 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);
}
}
// API-Aufruf
fetch(`/fuenf_minuten?start_date=${startDate}&end_date=${endDate}&start_time=${startTime}&end_time=${endTime}`)
.then(response => {
if (!response.ok) {
@@ -27,20 +45,23 @@ document.addEventListener('DOMContentLoaded', function() {
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);
// 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 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();
// Alten Chart zerstören, falls vorhanden
if (fuenfMinutenChart) {
fuenfMinutenChart.destroy();
}
window.fuenfMinutenChart = new Chart(ctx, {
// Neuer Chart
fuenfMinutenChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
@@ -77,12 +98,25 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
// Event Listener für Datum- und Zeitauswahl
startDateInput.addEventListener('change', fetchAndUpdateChart);
endDateInput.addEventListener('change', fetchAndUpdateChart);
startTimeInput.addEventListener('change', fetchAndUpdateChart);
endTimeInput.addEventListener('change', fetchAndUpdateChart);
// Funktion zur Berechnung von Standarddaten
function getDefaultDate(offsetDays) {
const date = new Date();
date.setDate(date.getDate() + offsetDays);
return date.toISOString().split('T')[0];
}
// Initiales Laden des Diagramms
fetchAndUpdateChart();
// 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');
});