Add data_visualization/js/app.js

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 };