Add results_visualization/js/app.js

results_visualization/js/app.js

@@ -0,0 +1,65 @@
+import { loadResults } from './api.js';
+import { renderVisualization, renderSummary } from './visualization.js';
+
+/**
+ * Initialisiert die Anwendung.
+ * Lädt initiale Ergebnisse und bindet UI-Events.
+ * @returns {Promise<void>}
+ */
+export async function initApp() {
+  try {
+    const filterControls = document.getElementById('filter-controls');
+    bindEvents(filterControls);
+
+    const data = await loadResults();
+    renderVisualization(data);
+    renderSummary(data);
+  } catch (error) {
+    console.error('Fehler bei der Initialisierung der App:', error);
+    const main = document.querySelector('main');
+    if (main) {
+      const errorMsg = document.createElement('div');
+      errorMsg.textContent = 'Fehler beim Laden der Ergebnisse. Bitte neu laden.';
+      errorMsg.className = 'results-visualization__error';
+      main.appendChild(errorMsg);
+    }
+  }
+}
+
+/**
+ * Bindet UI-Events für Filtersteuerungen.
+ * @param {HTMLElement|null} container - Container mit Filter-Controls
+ */
+export function bindEvents(container) {
+  if (!container) return;
+
+  container.querySelectorAll('select, input').forEach((control) => {
+    control.addEventListener('change', async () => {
+      const params = collectFilters(container);
+      try {
+        const data = await loadResults(params);
+        renderVisualization(data);
+        renderSummary(data);
+      } catch (err) {
+        console.error('Daten konnten nicht aktualisiert werden:', err);
+      }
+    });
+  });
+}
+
+/**
+ * Liest aktuelle Filterwerte aus DOM-Elementen.
+ * @param {HTMLElement} container
+ * @returns {Object}
+ */
+function collectFilters(container) {
+  const filters = {};
+  container.querySelectorAll('select, input').forEach((control) => {
+    if (control.id && control.value) {
+      filters[control.id] = control.value;
+    }
+  });
+  return filters;
+}
+
+window.addEventListener('load', initApp);