Add data_visualization/js/app.js

data_visualization/js/app.js

@@ -0,0 +1,53 @@
+import { fetchData } from './api.js';
+import { parseData } from './dataHandler.js';
+import { renderCharts, updateCharts } from './visualization.js';
+
+/**
+ * Verbindet Filter-Controls mit Daten-Reload und Diagrammupdate.
+ * @function wireUIEvents
+ * @returns {void}
+ */
+function wireUIEvents() {
+  const sensorSelect = document.querySelector('#sensorType');
+  const timeRangeSelect = document.querySelector('#timeRange');
+
+  if (!sensorSelect || !timeRangeSelect) return;
+
+  const handleFilterChange = async () => {
+    const params = {
+      sensorType: sensorSelect.value || undefined,
+      timeRange: timeRangeSelect.value || undefined
+    };
+    const data = await fetchData(params);
+    if (data) {
+      const parsed = parseData(data);
+      updateCharts(parsed);
+    }
+  };
+
+  sensorSelect.addEventListener('change', handleFilterChange);
+  timeRangeSelect.addEventListener('change', handleFilterChange);
+}
+
+/**
+ * Startet die Anwendung, lädt die ersten Daten und erstellt Diagramme.
+ * @function initApp
+ * @returns {Promise<void>}
+ */
+async function initApp() {
+  const appContainer = document.querySelector('#app');
+  if (!appContainer) return;
+
+  try {
+    const data = await fetchData();
+    const parsed = parseData(data);
+    renderCharts(parsed);
+    wireUIEvents();
+  } catch (error) {
+    console.error('Fehler beim Initialisieren der Anwendung:', error);
+  }
+}
+
+window.addEventListener('load', initApp);
+
+export { initApp, wireUIEvents };