update index

app/static/js/fuenf_minuten.js

@@ -4,6 +4,9 @@ document.addEventListener('DOMContentLoaded', function() {
     const startTimeInput = document.getElementById('startTime');
     const endTimeInput = document.getElementById('endTime');
 
+    // Initialisiere die globale Variable für den Chart
+    window.fuenfMinutenChart = null;
+
     function fetchAndUpdateChart() {
         const startDate = startDateInput.value;
         const endDate = endDateInput.value;
@@ -32,10 +35,12 @@ document.addEventListener('DOMContentLoaded', function() {
 
                 const ctx = document.getElementById('fuenfMinutenChart').getContext('2d');
 
+                // Zerstöre den vorhandenen Chart, falls er existiert
                 if (window.fuenfMinutenChart) {
                     window.fuenfMinutenChart.destroy();
                 }
 
+                // Erstelle einen neuen Chart
                 window.fuenfMinutenChart = new Chart(ctx, {
                     type: 'bar',
                     data: {

app/templates/index.html

@@ -46,17 +46,101 @@
 	<button id="calculateButton">Berechne maximale Differenz</button>
 	<p id="maxTimeDiff">Please press calculate.</p>
     </div>
-    <div>
+	<div id="fiveMinChartSection">
-	<h2>5-Minuten-Chart</h2>
+		<h2>5-Minuten-Chart</h2>
-	<label for="startDate">Start-Datum:</label>
+		<!-- Filter spezifisch für den 5-Minuten-Chart -->
-	<input type="date" id="startDate">
+		<label for="fiveMinStartDate">Start-Datum:</label>
-	<label for="endDate">End-Datum:</label>
+		<input type="date" id="fiveMinStartDate">
-	<input type="date" id="endDate">
+		<label for="fiveMinEndDate">End-Datum:</label>
-	<label for="startTime">Start-Zeit:</label>
+		<input type="date" id="fiveMinEndDate">
-	<input type="time" id="startTime" value="00:00">
+		<label for="fiveMinStartTime">Start-Zeit:</label>
-	<label for="endTime">End-Zeit:</label>
+		<input type="time" id="fiveMinStartTime" value="00:00">
-	<input type="time" id="endTime" value="23:59">
+		<label for="fiveMinEndTime">End-Zeit:</label>
-	<canvas id="fuenfMinutenChart" width="400" height="200"></canvas>
+		<input type="time" id="fiveMinEndTime" value="23:59">	
-    </div>
+		<!-- Aktualisieren-Button -->
+		<button id="updateFiveMinChart">Aktualisieren</button>
+		<!-- Canvas für den 5-Minuten-Chart -->
+		<canvas id="fuenfMinutenChart" width="400" height="200"></canvas>
+	</div>
+	<script>
+		// Initialisiere die Filterfelder nur für den 5-Minuten-Chart
+		document.addEventListener('DOMContentLoaded', function() {
+			const startDateInput = document.getElementById('fiveMinStartDate');
+			const endDateInput = document.getElementById('fiveMinEndDate');
+			const now = new Date();
+			const yesterday = new Date(now);
+			yesterday.setDate(now.getDate() - 1);
+	
+			// Vorauswahl von Start- und Enddatum für den 5-Minuten-Chart
+			startDateInput.value = yesterday.toISOString().split('T')[0];
+			endDateInput.value = now.toISOString().split('T')[0];
+		});
+	
+		// Funktion zur Aktualisierung des Charts
+		document.getElementById('updateFiveMinChart').addEventListener('click', function() {
+			const startDate = document.getElementById('fiveMinStartDate').value;
+			const endDate = document.getElementById('fiveMinEndDate').value;
+			const startTime = document.getElementById('fiveMinStartTime').value || '00:00';
+			const endTime = document.getElementById('fiveMinEndTime').value || '23:59';
+	
+			if (!startDate || !endDate) {
+				alert('Bitte sowohl Start- als auch End-Datum auswählen!');
+				return;
+			}
+	
+			// Fetch-Daten für den 5-Minuten-Chart abrufen
+			fetch(`/fuenf_minuten?start_date=${startDate}&end_date=${endDate}&start_time=${startTime}&end_time=${endTime}`)
+				.then(response => 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);
+	
+					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: 'rgba(54, 162, 235, 0.5)',
+								borderColor: 'rgba(54, 162, 235, 1)',
+								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}`);
+				});
+		});
+	</script>	
 </body>
 </html>