update indesx

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

@@ -45,18 +45,39 @@
 	<input type="time" id="endTime" value="23:59">
 	<button id="calculateButton">Berechne maximale Differenz</button>
 	<p id="maxTimeDiff">Please press calculate.</p>
-    </div>
+    </div><div id="fiveMinChartSection">
-    <div>
 		<h2>5-Minuten-Chart</h2>
-	<label for="startDate">Start-Datum:</label>
+	
-	<input type="date" id="startDate">
+		<!-- Filter spezifisch für den 5-Minuten-Chart -->
-	<label for="endDate">End-Datum:</label>
+		<label for="fiveMinStartDate">Start-Datum:</label>
-	<input type="date" id="endDate">
+		<input type="date" id="fiveMinStartDate">
-	<label for="startTime">Start-Zeit:</label>
+	
-	<input type="time" id="startTime" value="00:00">
+		<label for="fiveMinEndDate">End-Datum:</label>
-	<label for="endTime">End-Zeit:</label>
+		<input type="date" id="fiveMinEndDate">
-	<input type="time" id="endTime" value="23:59">
+	
+		<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">
+	
+		<!-- 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];
+		});
+	</script>	
 </body>
 </html>