Add data_visualization_web_ui/js/app.js

data_visualization_web_ui/js/app.js

@@ -0,0 +1,67 @@
+import { fetchData, fetchAnalysis } from './api.js';
+import { renderCharts, updateCharts } from './charts.js';
+import { renderStats } from './stats.js';
+
+/**
+ * @function initApp
+ * @description Initialisiert Eventlistener, ruft Datenladen und Rendering auf.
+ */
+export async function initApp() {
+  try {
+    const [data, analysis] = await Promise.all([
+      fetchData({}),
+      fetchAnalysis()
+    ]);
+
+    renderCharts(data);
+    renderStats(analysis);
+    setupEventListeners();
+  } catch (error) {
+    console.error('Fehler bei der Initialisierung:', error);
+  }
+}
+
+/**
+ * @function setupEventListeners
+ * @description Verknüpft UI-Filterelemente mit der Filterlogik.
+ */
+function setupEventListeners() {
+  const filterForm = document.getElementById('filter-form');
+  if (filterForm) {
+    filterForm.addEventListener('change', handleFilterChange);
+  }
+}
+
+/**
+ * @function handleFilterChange
+ * @description Erfasst Nutzerinteraktionen mit Filterpanel und aktualisiert Diagramme.
+ * @param {Event} e - Change-Event vom Filterformular
+ */
+export async function handleFilterChange(e) {
+  e.preventDefault();
+  const form = e.target.closest('form');
+  if (!form) return;
+
+  const formData = new FormData(form);
+  const params = {
+    time_range: formData.get('time_range') || '24h',
+    sensor_id: formData.get('sensor_id') || 'all'
+  };
+
+  try {
+    const [newData, newAnalysis] = await Promise.all([
+      fetchData(params),
+      fetchAnalysis()
+    ]);
+    
+    updateCharts(newData);
+    renderStats(newAnalysis);
+  } catch (error) {
+    console.error('Fehler beim Aktualisieren der Filterdaten:', error);
+  }
+}
+
+// Initialisierung bei Seitenladeereignis
+document.addEventListener('DOMContentLoaded', () => {
+  initApp();
+});