From c0f54d63a01fb4ff0bb86e4cb4d6bcc4c745fe3e Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Sat, 10 Jan 2026 14:23:01 +0000
Subject: [PATCH] Add data_visualization/js/app.js

---
 data_visualization/js/app.js | 70 ++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 data_visualization/js/app.js

diff --git a/data_visualization/js/app.js b/data_visualization/js/app.js
new file mode 100644
index 0000000..fd5af73
--- /dev/null
+++ b/data_visualization/js/app.js
@@ -0,0 +1,70 @@
+import { fetchMigrationReport } from './api.js';
+import { renderCharts, updateCharts } from './visualizations.js';
+
+const state = {
+  filter: {
+    setup_type: '',
+    run_id: ''
+  },
+  data: null
+};
+
+async function initApp() {
+  try {
+    // Lade initiale Daten ohne Filter
+    const data = await fetchMigrationReport();
+    state.data = data;
+
+    // Rendere erste Diagramme
+    renderCharts(data);
+
+    // Verbinde UI-Events
+    const filterForm = document.getElementById('filter-panel');
+    if (filterForm) {
+      filterForm.addEventListener('change', handleFilterChange);
+    }
+  } catch (error) {
+    console.error('Fehler bei der Initialisierung:', error);
+  }
+}
+
+async function handleFilterChange(event) {
+  if (!event || !event.target) return;
+
+  const filterForm = document.getElementById('filter-panel');
+  if (!filterForm) return;
+
+  const formData = new FormData(filterForm);
+  const newFilter = {
+    setup_type: formData.get('setup_type') || '',
+    run_id: formData.get('run_id') || ''
+  };
+
+  // Prüfe, ob sich der Filter geändert hat
+  if (
+    newFilter.setup_type === state.filter.setup_type &&
+    newFilter.run_id === state.filter.run_id
+  ) {
+    return;
+  }
+
+  state.filter = newFilter;
+
+  try {
+    const query = [];
+    if (newFilter.setup_type) query.push(`filter=${encodeURIComponent(newFilter.setup_type)}`);
+    if (newFilter.run_id) query.push(`run_id=${encodeURIComponent(newFilter.run_id)}`);
+
+    const queryString = query.length ? '?' + query.join('&') : '';
+    const data = await fetchMigrationReport(queryString);
+    state.data = data;
+
+    updateCharts(data);
+  } catch (error) {
+    console.error('Fehler beim Aktualisieren der Diagramme:', error);
+  }
+}
+
+window.addEventListener('load', initApp);
+
+export { initApp, handleFilterChange };
\ No newline at end of file