Add max_outlier_visualization/js/app.js

max_outlier_visualization/js/app.js

@@ -0,0 +1,61 @@
+import { fetchMaxOutlierResults } from './api.js';
+import { renderTable, renderChart, updateFilters, exportData } from './ui.js';
+
+/**
+ * Initialisiert die Anwendung, ruft Daten ab und richtet UI-Interaktionen ein.
+ * @returns {Promise<void>}
+ */
+export async function initApp() {
+  try {
+    const data = await fetchMaxOutlierResults();
+    if (!Array.isArray(data) || data.length === 0) {
+      console.warn('Keine Max-Outlier-Ergebnisse verfügbar');
+      return;
+    }
+
+    renderTable(data);
+    renderChart(data);
+    bindUIEvents(data);
+  } catch (err) {
+    console.error('Fehler beim Initialisieren der Anwendung:', err);
+  }
+}
+
+/**
+ * Verbindet UI-Elemente mit Logik – z. B. Filteränderungen und Export.
+ * @param {Array<object>} dataset
+ */
+export function bindUIEvents(dataset) {
+  const filterForm = document.querySelector('#filter-form');
+  const exportCsvBtn = document.querySelector('#export-csv');
+  const exportJsonBtn = document.querySelector('#export-json');
+
+  if (filterForm) {
+    filterForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const formData = new FormData(filterForm);
+      const filter = Object.fromEntries(formData.entries());
+
+      try {
+        const filteredData = await fetchMaxOutlierResults(filter);
+        renderTable(filteredData);
+        renderChart(filteredData);
+        updateFilters(filter);
+      } catch (err) {
+        console.error('Fehler beim Anwenden der Filter:', err);
+      }
+    });
+  }
+
+  if (exportCsvBtn) {
+    exportCsvBtn.addEventListener('click', () => exportData(dataset, 'csv'));
+  }
+
+  if (exportJsonBtn) {
+    exportJsonBtn.addEventListener('click', () => exportData(dataset, 'json'));
+  }
+}
+
+window.addEventListener('load', () => {
+  initApp();
+});