Add visualization_ui/js/app.js

visualization_ui/js/app.js

@@ -0,0 +1,50 @@
+import { fetchAlertData, fetchOutlierReport } from './api.js';
+import { renderAlertTable, renderOutlierSummary, setLoadingState, clearLoadingState } from './ui.js';
+
+/**
+ * Initialisiert die Anwendung, lädt Daten über API und rendert die UI.
+ */
+export async function initApp() {
+  const refreshButton = document.getElementById('refresh-btn');
+  if (refreshButton) {
+    refreshButton.addEventListener('click', handleRefresh);
+  }
+
+  await loadAndRenderData();
+}
+
+/**
+ * Lädt Daten von API-Endpunkten und aktualisiert die Oberfläche.
+ */
+async function loadAndRenderData() {
+  try {
+    setLoadingState();
+    const [alertData, outlierData] = await Promise.all([
+      fetchAlertData(),
+      fetchOutlierReport()
+    ]);
+
+    renderAlertTable(alertData);
+    renderOutlierSummary(outlierData);
+  } catch (error) {
+    console.error('Fehler beim Laden der Daten:', error);
+    const messageElem = document.getElementById('status-msg');
+    if (messageElem) {
+      messageElem.textContent = 'Fehler beim Laden der Daten. Bitte versuchen Sie es erneut.';
+      messageElem.setAttribute('role', 'alert');
+    }
+  } finally {
+    clearLoadingState();
+  }
+}
+
+/**
+ * Behandelt Klick auf den Refresh-Button: Lädt Daten neu und aktualisiert DOM.
+ * @param {Event} event
+ */
+async function handleRefresh(event) {
+  event.preventDefault();
+  await loadAndRenderData();
+}
+
+window.addEventListener('load', initApp);