Add experiment_results_visualization/js/app.js

experiment_results_visualization/js/app.js

@@ -0,0 +1,80 @@
+"use strict";
+
+/**
+ * @fileoverview Einstiegspunkt der Experiment Results Visualization App.
+ * Lädt die Resultate über /results, initialisiert den State und triggert das Rendering.
+ *
+ * @version 1.0
+ * @copyright © 2026 Donau2Space.de
+ */
+
+/**
+ * Globale App-State-Referenz.
+ * @type {{ pinned: Array, unpinned: Array } | null}
+ */
+let appState = null;
+
+/**
+ * Ruft Experimentdaten von der API /results ab.
+ * @returns {Promise<{ pinned: Array, unpinned: Array }>}
+ */
+async function fetchResults() {
+  try {
+    const response = await fetch("/results", { method: "GET" });
+    if (!response.ok) throw new Error(`API request failed with status ${response.status}`);
+    const data = await response.json();
+    return data;
+  } catch (err) {
+    console.error("Fehler beim Laden der Ergebnisse:", err);
+    return { pinned: [], unpinned: [] };
+  }
+}
+
+/**
+ * Rendert alle UI-Komponenten basierend auf den übergebenen Experimentdaten.
+ * @param {{ pinned: Array, unpinned: Array }} experimentData
+ */
+function render(experimentData) {
+  if (!experimentData) return;
+
+  const pinnedCount = experimentData.pinned?.length ?? 0;
+  const unpinnedCount = experimentData.unpinned?.length ?? 0;
+
+  const pinnedContainer = document.querySelector("#pinned-results");
+  const unpinnedContainer = document.querySelector("#unpinned-results");
+  const summaryContainer = document.querySelector("#summary-stats");
+
+  if (pinnedContainer) pinnedContainer.textContent = `${pinnedCount} pinned runs geladen`;
+  if (unpinnedContainer) unpinnedContainer.textContent = `${unpinnedCount} unpinned runs geladen`;
+
+  if (summaryContainer) {
+    summaryContainer.innerHTML = `
+      <h3>Statistik Übersicht</h3>
+      <p><strong>Pinned:</strong> ${pinnedCount}</p>
+      <p><strong>Unpinned:</strong> ${unpinnedCount}</p>
+    `;
+  }
+
+  // Beispiel: Custom-Event für weitere Module
+  document.dispatchEvent(new CustomEvent("app:rendered", { detail: experimentData }));
+}
+
+/**
+ * Initialisiert die Anwendung: lädt Daten, setzt State, ruft erstes Rendern auf.
+ */
+async function init() {
+  const data = await fetchResults();
+  appState = data;
+  render(appState);
+
+  // Beispielhafte Filter-Event-Registrierung
+  const filterForm = document.querySelector("#filter-form");
+  if (filterForm) {
+    filterForm.addEventListener("change", () => {
+      // Hier Filterlogik oder Sub-Render implementieren, aktuell Platzhalter
+      render(appState);
+    });
+  }
+}
+
+window.addEventListener("load", init);