Add data_visualization/js/app.js

data_visualization/js/app.js

@@ -0,0 +1,49 @@
+import { fetchResults } from './api.js';
+import { renderCharts, updateCharts } from './charts.js';
+import { showLoading, hideLoading } from './ui.js';
+
+/**
+ * Initialisiert die Anwendung, lädt initiale Ergebnisse und bindet Event-Listener.
+ * Wird beim Laden des Fensters aufgerufen.
+ */
+export async function initApp() {
+  showLoading();
+  try {
+    const data = await fetchResults();
+    renderCharts(data);
+    bindFilterEvents();
+  } catch (error) {
+    console.error('Fehler beim Initialisieren der App:', error);
+  } finally {
+    hideLoading();
+  }
+}
+
+/**
+ * Verknüpft Filter-Interaktionen mit dem Neuladen und Rendern der Ergebnisse.
+ */
+export function bindFilterEvents() {
+  const runSelect = document.querySelector('#filter-run');
+  const paramSelect = document.querySelector('#filter-param');
+
+  if (!runSelect || !paramSelect) return;
+
+  const handleChange = async () => {
+    showLoading();
+    const runId = runSelect.value || undefined;
+    const parameterFilter = paramSelect.value || undefined;
+    try {
+      const data = await fetchResults({ run_id: runId, parameter_filter: parameterFilter });
+      updateCharts(data);
+    } catch (error) {
+      console.error('Fehler beim Aktualisieren der Diagramme:', error);
+    } finally {
+      hideLoading();
+    }
+  };
+
+  runSelect.addEventListener('change', handleChange);
+  paramSelect.addEventListener('change', handleChange);
+}
+
+window.addEventListener('load', initApp);