80 lines
2.4 KiB
JavaScript
80 lines
2.4 KiB
JavaScript
"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);
|