From a3716c9d3c768a9b62822086c688408a9e83a3a0 Mon Sep 17 00:00:00 2001
From: no <mk@admins.tech>
Date: Fri, 29 Nov 2024 14:42:12 +0100
Subject: [PATCH] update index

---
 app/templates/index.html | 79 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 71 insertions(+), 8 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index 6572bcc..383d6aa 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -45,26 +45,23 @@
 	<input type="time" id="endTime" value="23:59">
 	<button id="calculateButton">Berechne maximale Differenz</button>
 	<p id="maxTimeDiff">Please press calculate.</p>
-    </div><div id="fiveMinChartSection">
+    </div>
+	<div id="fiveMinChartSection">
 		<h2>5-Minuten-Chart</h2>
-	
 		<!-- Filter spezifisch für den 5-Minuten-Chart -->
 		<label for="fiveMinStartDate">Start-Datum:</label>
 		<input type="date" id="fiveMinStartDate">
-	
 		<label for="fiveMinEndDate">End-Datum:</label>
 		<input type="date" id="fiveMinEndDate">
-	
 		<label for="fiveMinStartTime">Start-Zeit:</label>
 		<input type="time" id="fiveMinStartTime" value="00:00">
-	
 		<label for="fiveMinEndTime">End-Zeit:</label>
-		<input type="time" id="fiveMinEndTime" value="23:59">
-	
+		<input type="time" id="fiveMinEndTime" value="23:59">	
+		<!-- 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() {
@@ -78,6 +75,72 @@
 			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>